利用PagerSlidingTabStrip实现带icon的Ta

公司界面要求如下：

2018417191408dama.png

对于这样的界面，我首先想到的是最上面是一个自定义的Actionbar:

image

中间是一个TabStrip:

image

最下面是一个ViewPager。

ViewPager承载三个fragment。

由于自己写一个TabStrip可能不是很美观，所以利用下面一个第三发库（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);
    }

==标题所指内容==

由于要实现滚动ViewPager设置高亮（图片和文字），所以实现ViewPager.OnPageChangeListener接口
并重写onPageSelected()方法，这里由三个数组：
两个图片数组和一个String数组：

 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 = {"实时位置", "设备轨迹", "成员管理"};

重写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)); //设置高亮显示
                    changeTabViewContent(v,iconsSelected[i],titles[i]); //方法在下面
                } else {
                    v.setTextColor(getResources().getColor(R.color.c2_custom_actionbar_bg));
                    changeTabViewContent(v,icons[i],titles[i]);
                }
            }
        }
    }

我的方法是通过让TextView显示图文混排的方式实现Tab的 ‘图标+文字’的。
所以需要定义一个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()方法：

    /**
     * 设置Tab的内容
     * @param v 设置的tab的TextView
     * @param icon  设置的图标
     * @param title 设置的标题
     */
    private void changeTabViewContent(TextView v,int icon,String title) {
        String html = "<img src='" + icon + "'/>";
        CharSequence charSequence = Html.fromHtml(html, mImgGetter, null);
        v.setAllCaps(false);//设为false，否则图片可能为obj
        v.setCompoundDrawablePadding(10);
        v.setText(charSequence);
        v.append("   " + title);
    }

最后在进入的时候调用一次 onPageSelected(0);
然后就可以默认选中第一个item（设置高亮）。
代码完成，看看效果：

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’是怎么获取的呢？
继续往上看：

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);
      ...
}

在它的构造方法中，tabsContainer是一个LinearLayout，所以在上面的代码中我通过
View view = mTabStrip.getChildAt(0);
获取最外层布局-LinearLayout；然后再获取TextView,并进行TextView设置并显示带Html文本，实现图文混排。