星空网 > 软件开发 > 操作系统

界面底部Tab实现

现在基本上大部分的手机APP都要实现底部Tab,底部实现Tab的实现方式有很多种,那么有没有好的实现方式呢?

今天我将使用一个开源插件来实现底部Tab

参考自zhangli_的博客:http://blog.csdn.net/zhangli_/article/details/52604699

效果图(大家如果有制作gif的好方法可以推荐给我)

界面底部Tab实现images/loading.gif' data-original="http://images2015.cnblogs.com/blog/1130568/201704/1130568-20170424204210459-1633548917.gif" >

 实现步骤如下:

1.添加依赖

2.在布局文件中添加tab容器

3.初始化UI

4.添加tab控制代码

 

1.添加依赖

compile ‘me.majiajie:pager-bottom-tab-strip:1.0.0’

2.在布局文件中添加tab容器

<??><RelativeLayout ="http://schemas.android.com/apk/res/android"  ="http://schemas.android.com/tools"  ="http://schemas.android.com/apk/res-auto"  android:layout_width="match_parent"  android:layout_height="match_parent"  tools:context=".MainTestActivity">  <me.majiajie.pagerbottomtabstrip.PagerBottomTabLayout    android:id="@+id/boom_layout"    app:elevation="8dp"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:layout_alignParentBottom="true"/>  <FrameLayout    android:id="@+id/main_content"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:layout_above="@id/boom_layout" /></RelativeLayout>

3.初始化UI

private void initView() {    mHomePageFragment = HomePageFragment.newInstance();    mMePageFragment = MePageFragment.newInstance();    fragments = new Fragment[]{mHomePageFragment, mMePageFragment};    // 将fragment添加到framlayout中,并显示第一个fragment    getSupportFragmentManager().beginTransaction()        .add(R.id.main_content, mHomePageFragment, mHomePageFragment.getClass().getName())        .add(R.id.main_content, mMePageFragment, mMePageFragment.getClass().getName()).commit();    //初始化底部导航栏    PagerBottomTabLayout mBottomTabLayout = (PagerBottomTabLayout) findViewById(R.id.boom_layout);    //构建导航栏,得到Controller进行后续控制    mTabController = mBottomTabLayout.builder()        .addTabItem(R.drawable.ic_menu_home, "首页", getResources().getColor(R.color.lightblue))        .addTabItem(R.drawable.ic_menu_me, "我", getResources().getColor(R.color.lightblue))        .setMode(TabLayoutMode.HIDE_TEXT | TabLayoutMode.CHANGE_BACKGROUND_COLOR)        .setDefaultColor(getResources().getColor(R.color.black))        .build();  }

4.添加tab控制代码

  private void setOnClickListeners() {    mTabController.addTabItemClickListener(new OnTabItemSelectListener() {      @Override      public void onSelected(int index, Object tag) {        FragmentTransaction trx = getSupportFragmentManager().beginTransaction();        trx.hide(mHomePageFragment).hide(mMePageFragment);        if (!fragments[index].isAdded()) {          trx.add(R.id.main_content, fragments[index]);        }        trx.show(fragments[index]).commitAllowingStateLoss();      }      @Override      public void onRepeatClick(int index, Object tag) {      }    });  }

初始化UI和Tab控制的函数在Activity中调用就可以了

这样我们就生成了我们的底部Tab导航栏啦!!!

 




原标题:界面底部Tab实现

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流