Android design支持庫中的TabLayout一般都用來實現(xiàn)頭部Tab的效果珍特。例如：
m3.png
但是像微信這種底部Tab布局在我們實際項目中還是非常常見的設(shè)計侠碧，現(xiàn)在我們也可以用TabLayout非常方便的實現(xiàn)侦讨。
TabLayout.gif
布局
下面開始實現(xiàn)底部Tab，layout布局比較簡單，只用把TabLayout放置在底部即可整慎。
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v4.view.ViewPager
android:id="@+id/Tab_ViewPager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</android.support.v4.view.ViewPager>
<android.support.design.widget.TabLayout
android:id="@+id/TabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="@style/MyCustomTabLayout">
</android.support.design.widget.TabLayout>
</LinearLayout>
自定義的style,把tabIndicatorHeight設(shè)為0dp声诸。
<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
<item name="tabIndicatorColor">?attr/colorAccent</item>
<item name="tabIndicatorHeight">0dp</item>
<item name="tabPaddingStart">12dp</item>
<item name="tabPaddingEnd">12dp</item>
<item name="tabBackground">@color/colorgrey</item>
<item name="tabSelectedTextColor">?android:textColorPrimary</item>
</style>
代碼實現(xiàn)
首先設(shè)置好ViewPager酱讶，然后設(shè)置TabLayout與ViewPager的對應(yīng)關(guān)系，最后最關(guān)鍵的是使用TabLayout的setCustomView設(shè)置自定義的TAB View彼乌。
public class TabLayoutActivity extends AppCompatActivity {
private static final String TAG = "TabLayoutActivity";
private ViewPager mViewPager;
private TabLayout mTabLayout;
private MyAdapter mAdapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_tab_layout);
mViewPager = (ViewPager) findViewById(R.id.Tab_ViewPager);
mTabLayout = (TabLayout) findViewById(R.id.TabLayout);
mAdapter = new MyAdapter(getSupportFragmentManager(),this);
mViewPager.setAdapter(mAdapter);
mTabLayout.setupWithViewPager(mViewPager);
// mViewPager.setCurrentItem(0);
mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
changeTabSelect(tab);
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
changeTabNormal(tab);
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
for (int i = 0;i<mTabLayout.getTabCount();i++){
TabLayout.Tab tab = mTabLayout.getTabAt(i);
Log.d(TAG, "onCreate: getChildCount"+mTabLayout.getChildCount());
if (tab!=null){
Log.d(TAG, "onCreate: tab!=null "+i);
tab.setCustomView(mAdapter.getTabView(i));
}
}
}
private void changeTabSelect(TabLayout.Tab tab) {
View view = tab.getCustomView();
ImageView img_title = (ImageView) view.findViewById(R.id.imageview);
TextView txt_title = (TextView) view.findViewById(R.id.textview);
txt_title.setTextColor(Color.GREEN);
if (txt_title.getText().toString().equals("標題一")) {
img_title.setImageResource(R.mipmap.homepage_select);
mViewPager.setCurrentItem(0);
} else if (txt_title.getText().toString().equals("標題二")) {
img_title.setImageResource(R.mipmap.startorder_select);
mViewPager.setCurrentItem(1);
} else {
img_title.setImageResource(R.mipmap.shopcar_select);
mViewPager.setCurrentItem(2);
}
}
private void changeTabNormal(TabLayout.Tab tab) {
View view = tab.getCustomView();
ImageView img_title = (ImageView) view.findViewById(R.id.imageview);
TextView txt_title = (TextView) view.findViewById(R.id.textview);
txt_title.setTextColor(Color.BLACK);
if (txt_title.getText().toString().equals("標題一")) {
img_title.setImageResource(R.mipmap.homepage_normal);
} else if (txt_title.getText().toString().equals("標題二")) {
img_title.setImageResource(R.mipmap.startorder_normal);
} else {
img_title.setImageResource(R.mipmap.shopcar_normal);
}
}
}
其中changeTabSelect(TabLayout.Tab tab)與changeTabNormal(TabLayout.Tab tab)是用來實現(xiàn)Tab頁轉(zhuǎn)換的時候圖片以及文字顏色的改變泻肯。
Fragment中：
public class PageFragment extends Fragment{
public static final String ARG_PAGE = "ARG_PAGE";
private int mPage;
public static PageFragment newInstance(int page) {
Bundle args = new Bundle();
args.putInt(ARG_PAGE, page);
PageFragment pageFragment = new PageFragment();
pageFragment.setArguments(args);
return pageFragment;
}
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mPage = getArguments().getInt(ARG_PAGE);
}
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_page, container, false);
// TextView textView = (TextView) view;
TextView textView = (TextView) view.findViewById(R.id.Fragment_Page_TV);
textView.setText("Fragment #" + mPage);
return view;
}
}
在MyAdapter中：
public class MyAdapter extends FragmentPagerAdapter{
private final int PAGE_COUNT = 3;
private String[] tabs = new String[]{"標題一","標題二","標題三"};
private Context context;
private int imageResId[] = new int[]{R.mipmap.homepage_normal,R.mipmap.startorder_normal,R.mipmap.shopcar_normal};
private int imageResPress[] = new int[]{R.mipmap.homepage_select,R.mipmap.startorder_select,R.mipmap.shopcar_select};
public MyAdapter(FragmentManager fm,Context context) {
super(fm);
this.context = context;
}
@Override
public Fragment getItem(int position) {
return PageFragment.newInstance(position+1);
}
@Override
public int getCount() {
return PAGE_COUNT;
}
@Override
public CharSequence getPageTitle(int position) {
return tabs[position];
}
public View getTabView(int position) {
View v = LayoutInflater.from(context).inflate(R.layout.custom_tab, null);
TextView tv = (TextView) v.findViewById(R.id.textview);
tv.setText(tabs[position]);
ImageView img = (ImageView) v.findViewById(R.id.imageview);
img.setImageResource(imageResId[position]);
if (position == 0) {
tv.setTextColor(Color.GREEN);
img.setImageResource(imageResPress[position]);
} else {
tv.setTextColor(Color.BLACK);
img.setImageResource(imageResId[position]);
}
return v;
}
}
其中g(shù)etTabView(int position)是用來初始化Tab頁面的圖標與文字的。
public View getTabView(int position) {
View v = LayoutInflater.from(context).inflate(R.layout.custom_tab, null);
TextView tv = (TextView) v.findViewById(R.id.textview);
tv.setText(tabs[position]);
ImageView img = (ImageView) v.findViewById(R.id.imageview);
img.setImageResource(imageResId[position]);
if (position == 0) {
tv.setTextColor(Color.GREEN);
img.setImageResource(imageResPress[position]);
} else {
tv.setTextColor(Color.BLACK);
img.setImageResource(imageResId[position]);
}
return v;
}
