TabLayout+Fragment实现底部导航栏
1. 在布局中添加TabLayout
要使用TabLayout要先添加依赖
添加依赖
在布局文件中加入需要的控件
<?xml version="1.0" encoding="utf-8"?>
<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=".MainActivity">
<include layout="@layout/top_title_layout"/>
<View
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:alpha="0.6"
android:background="@android:color/darker_gray"
/>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:id="@+id/view_pager"
android:layout_weight="1"></FrameLayout>
<View
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:alpha="0.6"
android:background="@android:color/darker_gray"
/>
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:id="@+id/bottom_tab_layout"
app:tabIndicatorHeight="0dp"
>
</android.support.design.widget.TabLayout>
为了更好地设置每一个TabItem的布局，新建一个Item的布局文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/tab_content_image"
android:scaleType="centerCrop"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/tab_content_title"
android:textSize="10sp"
/>
</LinearLayout>
2. 实例化TabLayout
在Activity文件中添加实例化控件的代码，对TabLayout进行监听，需要实现三个方法
tabLayout = findViewById(R.id.bottom_tab_layout);
// 提供自定义的布局添加Tab
for(int i=0;i<item;i++){
tabLayout.addTab(tabLayout.newTab().setCustomView(ItemAdapter.getTabView(this,i)));
}
tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
这里提供了一个适配Item内容的类
public class ItemAdapter {
public static final int[] mTabIcon = new int[]{R.drawable.ic_home_grey_500_24dp, R.drawable.ic_crop_square_grey_500_24dp, R.drawable.ic_polymer_grey_500_24dp, R.drawable.ic_blur_on_grey_500_24dp};
public static final int[] mTabIconPressed = new int[]{R.drawable.ic_home_black_24dp, R.drawable.ic_crop_square_black_24dp, R.drawable.ic_polymer_black_24dp, R.drawable.ic_blur_on_black_24dp};
public static final String[] mTabTitle = new String[]{"首页", "发现", "关注", "我的"};
public static Fragment[] getFragments(String from){
Fragment fragments[] = new Fragment[4];
fragments[0] = HomeFragment.newInstance(from);
fragments[1] = DiscoverFragment.newInstance(from);
fragments[2] = FollowFragment.newInstance(from);
fragments[3] = ProfileFragment.newInstance(from);
return fragments;
}
public static View getTabView(Context context, int position) {
View view = LayoutInflater.from(context).inflate(R.layout.tab_item_layout, null);
ImageView tabIcon = (ImageView) view.findViewById(R.id.tab_content_image);
tabIcon.setImageResource(ItemAdapter.mTabIcon[position]);
TextView tabText = (TextView) view.findViewById(R.id.tab_content_title);
tabText.setText(mTabTitle[position]);
return view;
}
}
3. 设置点击Item的变化
点击每一个不同的tab就会跳转到不同的页面，这里新建了四个Fragment用于页面切换，下面给出完整代码
public class MainActivity extends AppCompatActivity {
private TabLayout tabLayout;
private Fragment[]mFragmensts;
private static int item = 4;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mFragmensts = ItemAdapter.getFragments("Tab");
initTablayout();
}
public void initTablayout(){
tabLayout = findViewById(R.id.bottom_tab_layout);
// 提供自定义的布局添加Tab
for(int i=0;i<item;i++){
tabLayout.addTab(tabLayout.newTab().setCustomView(ItemAdapter.getTabView(this,i)));
}
tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
onTabItemSelected(tab.getPosition());
for (int i = 0;i<tabLayout.getTabCount();i++){
View view = tabLayout.getTabAt(i).getCustomView();
ImageView icon = (ImageView)view.findViewById(R.id.tab_content_image);
TextView title = (TextView)view.findViewById(R.id.tab_content_title);
if(i == tab.getPosition()){
// 选中状态
icon.setImageResource(ItemAdapter.mTabIconPressed[i]);
title.setTextColor(Color.BLACK);
}else{
// 未选中状态
icon.setImageResource(ItemAdapter.mTabIcon[i]);
title.setTextColor(Color.DKGRAY);
}
}
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
}
private void onTabItemSelected(int position){
Fragment fragment = new Fragment();
switch (position){
case 0:
fragment = mFragmensts[0];
break;
case 1:
fragment = mFragmensts[1];
break;
case 2:
fragment = mFragmensts[2];
break;
case 3:
fragment = mFragmensts[3];
break;
}
if(fragment!=null) {
getSupportFragmentManager().beginTransaction().replace(R.id.view_pager,fragment,null).commit();
}
}
}
网友评论