公司界面要求如下：

2018417191408dama.png

對于這樣的界面汰现，我首先想到的是最上面是一個自定義的Actionbar:

image

中間是一個TabStrip:

image

最下面是一個ViewPager。

ViewPager承載三個fragment叔壤。

由于自己寫一個TabStrip可能不是很美觀瞎饲，所以利用下面一個第三發(fā)庫（PagerSlidingTabStrip:github）：

compile'com.astuetz:pagerslidingtabstrip:1.0.1'

然后引入Activity的布局：

activity_xx.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".view.inside.c2.C2DeviceUseActivity">

    <include layout="@layout/c2_custom_action_bar"/>

    <com.astuetz.PagerSlidingTabStrip
        android:id="@+id/tab_strip"
        android:layout_width="match_parent"
        android:layout_height="@dimen/dp_40"
        app:pstsShouldExpand="true"
        app:pstsIndicatorHeight="@dimen/dp_2"
        app:pstsTextAllCaps="false"
        app:pstsIndicatorColor="@color/c2_tab_text_color"
       />

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />


</LinearLayout>

然后使用初始化PagerSlidingTabStrip：

  private void initTab() {
        mTabStrip.setAllCaps(false);
        mTabStrip.setOnPageChangeListener(this);
        mTabStrip.setViewPager(mViewPager);
        mTabStrip.notifyDataSetChanged();
        //onPageSelected(0);
    }

==標(biāo)題所指內(nèi)容==

由于要實(shí)現(xiàn)滾動ViewPager設(shè)置高亮（圖片和文字），所以實(shí)現(xiàn)ViewPager.OnPageChangeListener接口
并重寫onPageSelected()方法炼绘，這里由三個數(shù)組：
兩個圖片數(shù)組和一個String數(shù)組：

 private final int[] icons = {R.drawable.ic_c2_location,
            R.drawable.ic_c2_device_way,
            R.drawable.ic_c2_members};

    private final int[] iconsSelected = {R.drawable.ic_c2_location_selected,
            R.drawable.ic_c2_device_way_selected,
            R.drawable.ic_c2_members_selected};

private final String[] titles = {"實(shí)時(shí)位置", "設(shè)備軌跡", "成員管理"};

重寫onPageSelected()方法：

    @Override
    public void onPageSelected(int position) {
        View view = mTabStrip.getChildAt(0);
        if (view instanceof LinearLayout) {
            for (int i = 0; i < mFragmentList.size(); i++) {
                TextView v = (TextView) ((LinearLayout) view).getChildAt(i);
                if (position == i) {
                    v.setTextColor(getResources().getColor(R.color.c2_tab_text_color)); //設(shè)置高亮顯示
                    changeTabViewContent(v,iconsSelected[i],titles[i]); //方法在下面
                } else {
                    v.setTextColor(getResources().getColor(R.color.c2_custom_actionbar_bg));
                    changeTabViewContent(v,icons[i],titles[i]);
                }
            }
        }
    }

我的方法是通過讓TextView顯示圖文混排的方式實(shí)現(xiàn)Tab的 ‘圖標(biāo)+文字’的嗅战。
所以需要定義一個ImageGetter：

    private   Html.ImageGetter mImgGetter = new Html.ImageGetter() {
        @Override
        public Drawable getDrawable(String source) {
            int id = Integer.parseInt(source);
            Drawable d = getResources().getDrawable(id);
            d.setBounds(0, 0, 40, 40);
            return d;
        }
    };

changeTabViewContent()方法：

    /**
     * 設(shè)置Tab的內(nèi)容
     * @param v 設(shè)置的tab的TextView
     * @param icon  設(shè)置的圖標(biāo)
     * @param title 設(shè)置的標(biāo)題
     */
    private void changeTabViewContent(TextView v,int icon,String title) {
        String html = "<img src='" + icon + "'/>";
        CharSequence charSequence = Html.fromHtml(html, mImgGetter, null);
        v.setAllCaps(false);//設(shè)為false，否則圖片可能為obj
        v.setCompoundDrawablePadding(10);
        v.setText(charSequence);
        v.append("   " + title);
    }

最后在進(jìn)入的時(shí)候調(diào)用一次 onPageSelected(0);
然后就可以默認(rèn)選中第一個item（設(shè)置高亮）俺亮。
代碼完成驮捍，看看效果：

2018417191946dama.png

代碼解析：

private void updateTabStyles() {

        for (int i = 0; i < tabCount; i++) {
            View v = tabsContainer.getChildAt(i); 
            v.setBackgroundResource(tabBackgroundResId);
            if (v instanceof TextView) {
                TextView tab = (TextView) v;
                tab.setTextSize(TypedValue.COMPLEX_UNIT_PX, tabTextSize);
                tab.setTypeface(tabTypeface, tabTypefaceStyle);
                tab.setTextColor(tabTextColor);
            }
                    ...
        }

    }

它的源碼中是通過getChildAt獲取的TextView,顯然我們也可以，而代碼中的 ‘tabsContainer’是怎么獲取的呢脚曾？
繼續(xù)往上看：

public PagerSlidingTabStrip(Context context, AttributeSet attrs, int defStyle) {
    ...
        tabsContainer = new LinearLayout(context);

        tabsContainer.setOrientation(LinearLayout.HORIZONTAL);
        tabsContainer.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
        addView(tabsContainer);
      ...
}

在它的構(gòu)造方法中东且，tabsContainer是一個LinearLayout，所以在上面的代碼中我通過
View view = mTabStrip.getChildAt(0);
獲取最外層布局-LinearLayout本讥；然后再獲取TextView,并進(jìn)行TextView設(shè)置并顯示帶Html文本珊泳，實(shí)現(xiàn)圖文混排。