Android design支持库中的TabLayout一般都用来实现头部Tab的效果。例如：
m3.png
但是像微信这种底部Tab布局在我们实际项目中还是非常常见的设计，现在我们也可以用TabLayout非常方便的实现。
TabLayout.gif
布局
下面开始实现底部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设为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>
代码实现
首先设置好ViewPager，然后设置TabLayout与ViewPager的对应关系，最后最关键的是使用TabLayout的setCustomView设置自定义的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)是用来实现Tab页转换的时候图片以及文字颜色的改变。
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;
}
}
其中getTabView(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;
}
网友评论