前言

主流的安卓APP，首頁經(jīng)常會(huì)采用底部導(dǎo)航欄切換的效果。針對這種情況，封裝成TabView工具類，方便大家使用。

一、界面分析

• 上圖的效果，我們可以判斷出界面是由viewpager+fragment+底部Tab實(shí)現(xiàn)。

二、開始擼碼

只貼出了核心代碼，具體請查看我的GitHub,記得點(diǎn)顆?哦!

1. 實(shí)現(xiàn)底部的Tab,自定義TabContainerView 繼承 RelativeLayout，這是我們最終封裝的View工具類。其內(nèi)部主要由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是一個(gè)自定義的橫向布局LinearLayout,動(dòng)態(tài)添加多個(gè)寬度等分的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按鈕的實(shí)現(xiàn)

 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:導(dǎo)航按鈕字體大小
drawablePadding：導(dǎo)航圖片與文字的間距
iconHeight： 導(dǎo)航圖標(biāo)高度
iconWidth：導(dǎo)航圖標(biāo)寬度
divideLineColor：導(dǎo)航欄頂部分割線顏色
divideLineHeight：導(dǎo)航欄頂部分割線高度

• 設(shè)置消息提醒（導(dǎo)航按鈕旁邊的紅點(diǎn)）

setHasMsgIndex(5); //第五個(gè)導(dǎo)航按鈕有消息提醒