公司界面要求如下：
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文本，实现图文混排。
