首页 > 系统 > Android > 正文

Android design包自定义tablayout的底部导航栏的实现方法

2019-12-12 04:08:41
字体:
来源:转载
供稿:网友

以前做项目大多用的radiobutton,今天用tablayout来做一个tab切换页面的的效果.

实现的效果就是类似QQ.微信的页面间(也就是Fragment间)的切换.如图:

这里写图片描述 

布局只要一个tablayout

<android.support.design.widget.TabLayout    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:id="@+id/nav_tl"    app:tabIndicatorHeight="0dp"//将指示器去掉 ps:如果大家对tablayout有一些样式上的需求    可以自定义style,这里就不加了    android:layout_gravity="bottom"    ></android.support.design.widget.TabLayout>

然后就是activity了

public class MainActivity extends BaseActivity implements TabLayout.OnTabSelectedListener{  @BindView(R.id.main_container)  LinearLayout mainContainer;  @BindView(R.id.nav_tl)  TabLayout navTl;  //Tab 文字  private final int[] TAB_TITLES = new int[]{R.string.nav_home,R.string.nav_order,R.string.nav_my};  //Tab 图片  private final int[] TAB_IMGS = new int[]{R.drawable.nav_home_bg,R.drawable.nav_order_bg,R.drawable.nav_my_bg};//贴出一个R.drawable.nav_home_bg的文件,其他类似:`<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">  <item android:state_selected="true" android:drawable="@mipmap/nav_home_selected"></item>  <item android:state_selected="false" android:drawable="@mipmap/nav_home_normal"></item></selector>`  private FirstPagerFragment firstPagerFragment;  private PersonalFragment personalFragment;  private SeekOrderFragment seekOrderFragment;  private android.support.v4.app.FragmentManager manager;  @Override  protected void onCreate(Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    setContentView(R.layout.activity_main);    ButterKnife.bind(this);    iniView();    iniData();  }  private void iniData() {  }  private void iniView() {    LayoutInflater inflater = LayoutInflater.from(this);    manager = getSupportFragmentManager();    getTab(R.id.main_container,manager,0);    setTabs(navTl,inflater,TAB_TITLES,TAB_IMGS);    navTl.setOnTabSelectedListener(this);  }  /**   * @description: 设置添加Tab   * 我们自定义的布局customer_layout其实就是一张图片加文字   * `<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  android:orientation="vertical" android:layout_width="match_parent"  android:layout_height="match_parent">  <ImageView    android:id="@+id/img_tab"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:layout_gravity="center"    />  <TextView    android:id="@+id/tv_tab"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:layout_gravity="center"    android:textColor="@drawable/tv_color_bg"//text我用了一个颜色选择器,主要在我选中的时候能改变颜色    /></LinearLayout>`   */  private void setTabs(TabLayout tabLayout, LayoutInflater inflater, int[] tabTitlees, int[] tabImgs) {    for (int i = 0; i < tabImgs.length; i++) {      TabLayout.Tab tab = tabLayout.newTab();      View view = inflater.inflate(R.layout.customer_layout, null);      tab.setCustomView(view);      TextView tvTitle = (TextView) view.findViewById(R.id.tv_tab);      tvTitle.setText(tabTitlees[i]);      ImageView imgTab = (ImageView) view.findViewById(R.id.img_tab);      imgTab.setImageResource(tabImgs[i]);      tabLayout.addTab(tab);    }  }  @Override  public void onTabSelected(TabLayout.Tab tab) {    getTab(R.id.main_container,manager,tab.getPosition());  }  @Override  public void onTabUnselected(TabLayout.Tab tab) {  }  @Override  public void onTabReselected(TabLayout.Tab tab) {  }  //设置tab的监听,选中某一个tab对应的Fragment要及时切换,相信大家看代码能看明白  private void getTab(int container, android.support.v4.app.FragmentManager manager, int position){    FragmentTransaction ft = manager.beginTransaction();    hideAll(ft);    switch (position){      case 0:        if(firstPagerFragment==null){          firstPagerFragment=new FirstPagerFragment();          ft.add(container,firstPagerFragment);        }else {          ft.show(firstPagerFragment);        }        break;      case 1:        if(seekOrderFragment==null){          seekOrderFragment=new SeekOrderFragment();          ft.add(container,seekOrderFragment);        }else {          ft.show(seekOrderFragment);        }        break;      case 2:        if(personalFragment==null){          personalFragment=new PersonalFragment();          ft.add(container,personalFragment);        }else {          ft.show(personalFragment);        }        break;    }    ft.commit();  }  private void hideAll(FragmentTransaction ft) {    if(firstPagerFragment!=null){      ft.hide(firstPagerFragment);    }    if(personalFragment!=null){      ft.hide(personalFragment);    }    if(seekOrderFragment!=null){      ft.hide(seekOrderFragment);    }  }}

以上所述是小编给大家介绍的Android design包自定义tablayout的底部导航栏的实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持!

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表