查看原文
其他

手把手教你快速实现Android底部导航栏

2017-08-01 大象哥哥爱撸码 终端研发部


前言介绍

主流的安卓APP,首页经常会采用底部导航栏切换的效果。针对这种情况,封装成TabView工具类,方便大家使用。

大象哥哥爱撸码的博客地址:

http://www.jianshu.com/p/9dc6d7078b5e

正文

一、界面分析


  • 上图的效果,我们可以判断出界面是由viewpager+fragment+底部Tab实现。

二、开始撸码


只贴出了核心代码,具体请查看我的GitHub,记得点颗✨哦!   

1. 实现底部的Tab,自定义TabContainerView 继承 RelativeLayout,这是我们最终封装的View工具类。其内部主要由viewpager和底部的TabHost类组成。

ViewPager初始化

       contentViewPager = new ViewPager(context);        LayoutParams contentVpLp = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);        contentVpLp.addRule(RelativeLayout.ABOVE, R.id.divide_tab);        contentViewPager.setLayoutParams(contentVpLp);        contentViewPager.setId(R.id.viewpager_tab);        contentViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {            @Override            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {            }            
·            @Override            public void onPageSelected(int position) {                tabHost.onChangeTabHostStatus(position);                Tab selectedTab = tabHost.getTabForIndex(position);                if (onTabSelectedListener != null && selectedTab != null) onTabSelectedListener.onTabSelected(selectedTab);            }            
           @Override            public void onPageScrollStateChanged(int state) {            }        });        addView(contentViewPager);

底部Tab是一个自定义的横向布局LinearLayout,动态添加多个宽度等分的Tab按钮

for (int i = 0; i < count; i++) {            if((i+1)==hasMsgIndex){                hasMsg=true;            }            Tab tab = new Tab(context, textArray[i], textSize, textColor, selectedTextColor,drawablePadding,iconWidth,iconHeight, iconImageArray[i], selectedIconImageArray[i], i,hasMsg);            addTab(tab);}

tab按钮的实现

       rootView = new LinearLayout(context);        childView=new RelativeLayout(context);        LinearLayout.LayoutParams rootViewLp = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);        rootViewLp.weight = 1;        rootView.setOrientation(LinearLayout.VERTICAL);        rootView.setPadding(0,20,0,20);        rootView.setLayoutParams(rootViewLp);        textTextView = new TextView(context);        iconImageView = new ImageView(context);        /**         *  icon view         */        iconImageView.setImageResource(iconImage);        RelativeLayout.LayoutParams iconParam=new RelativeLayout.LayoutParams(iconWidth==0? ViewGroup.LayoutParams.WRAP_CONTENT:iconWidth,iconHeight==0? ViewGroup.LayoutParams.WRAP_CONTENT:iconHeight);        iconParam.addRule(RelativeLayout.CENTER_HORIZONTAL);        iconImageView.setLayoutParams(iconParam);        iconImageView.setId(index+1);        childView.addView(iconImageView);        /**         *  text view         */        textTextView.setText(text);        textTextView.setTextColor(textColor);        textTextView.setTextSize(TypedValue.COMPLEX_UNIT_PX,textSize);        textTextView.setPadding(0,drawablePadding,0,0);        RelativeLayout.LayoutParams txParam=new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);        txParam.addRule(RelativeLayout.BELOW,childView.getChildAt(0).getId());        txParam.addRule(RelativeLayout.CENTER_HORIZONTAL);        textTextView.setLayoutParams(txParam);        childView.addView(textTextView);        if(hasMsg){            ImageView circleView=new ImageView(context);            RelativeLayout.LayoutParams param = new RelativeLayout.LayoutParams(30,30);            param.addRule(RelativeLayout.RIGHT_OF,iconImageView.getId());            circleView.setBackgroundResource(R.drawable.common_red_round);            circleView.setLayoutParams(param);            childView.addView(circleView);        }        RelativeLayout.LayoutParams childParam=new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);        childView.setLayoutParams(childParam);       rootView.addView(childView);

三、使用方法


  • 布局中引用

<com.chenxi.tabview.widget.TabContainerView        android:id="@+id/tab_container"        android:layout_width="match_parent"        android:layout_height="match_parent"        app:tabTextColor="@color/bottom_icon_up"        app:selectedTextColor="@color/common_red"        app:tabTextSize="12sp"        app:drawablePadding="1dp"        app:iconHeight="22dp"        app:iconWidth="22dp"        app:divideLineColor="@color/common_line_two"        app:divideLineHeight="0.3dp"/>
  • ACTIVITY中引用

TabContainerView tabContainerView = (TabContainerView) findViewById(R.id.tab_container);        MainViewAdapter mainViewAdapter=new MainViewAdapter(getSupportFragmentManager(),                
       new Fragment[] {new TabFragment1(), new TabFragment2(),new TabFragment3(), new TabFragment4(),new TabFragment5()});        mainViewAdapter.setHasMsgIndex(5);        tabContainerView.setAdapter(mainViewAdapter);        tabContainerView.setOnTabSelectedListener(new OnTabSelectedListener() {            
           @Override            public void onTabSelected(Tab tab) {            }        });
  • 布局自定义属性介绍

tabTextSize:导航按钮字体大小 drawablePadding:导航图片与文字的间距 iconHeight: 导航图标高度 iconWidth:导航图标宽度 divideLineColor:导航栏顶部分割线颜色 divideLineHeight:导航栏顶部分割线高度
  • 设置消息提醒(导航按钮旁边的红点)

setHasMsgIndex(5); //第五个导航按钮有消息提醒

demo地址:

https://github.com/Louis2014/TabView


博客地址:


http://www.jianshu.com/p/9dc6d7078b5e

终端研发部提倡 没有做不到的,只有想不到的。

在这里获得的不仅仅是技术! 


让心,在阳光下学会舞蹈

让灵魂,在痛苦中学会微笑

—终端研发部—



如果你觉得此文对您有所帮助,欢迎入群 QQ交流群 :232203809   

微信公众号:终端研发部


            

这里学到的不仅仅


您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存