Android中TabLayout+ViewPager 简单实现app底部Tab导航栏

2024-10-10 10:44:22

前言

在谷歌发布Android Design Support Library之前，app底部tab布局的实现方法就有很多种，其中有RadioGroup+FrameLayout、TabHost+Fragment、FragmentPagerAdapter+ViewPager等方法，虽然这些方法虽然能达到同样的效果，但我个人总觉得有些繁琐。然而，Google在2015的IO大会上，给开发者们带来了全新的Android Design Support Library，里面包含了许多新控件，这些新控件有许多是把以前的一些第三方开源库官方化，实现起来更为简便，简直是开发者的福音。其中的TabLayout控件让我想到了app底部的tab布局，而且TabLayout用法更加简单，为何不试试用TabLayout实现简单的实现呢？好了，话不多说，先看看效果：

是不是和以前的方法实现的效果一样呢？下面我们来看看怎么简单实现。

过程

因为TabLayout和ViewPager分别是属于design和v4包下的，所以我们先在app的build.gradle中添加：

compile 'com.android.support:design:23.1.1'
compile 'com.android.support:support-v4:23.1.1'

然后在主布局文件activity_main.xml中添加布局控件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical"
 tools:context=".MainActivity">

 <android.support.v4.view.ViewPager
  android:id="@+id/viewPager"
  android:layout_width="match_parent"
  android:layout_height="0dp"
  android:layout_weight="1"
  android:scrollbars="none">
 </android.support.v4.view.ViewPager>

 <android.support.design.widget.TabLayout
  android:id="@+id/tabLayout"
  android:layout_width="match_parent"
  android:layout_height="50dp"
  app:tabGravity="fill"
  app:tabIndicatorHeight="0dp"
  app:tabMode="fixed"
  app:tabSelectedTextColor="#FF4081"
  app:tabTextColor="#000">
 </android.support.design.widget.TabLayout>

</LinearLayout>

就仅一个ViewPager和TabLayout就可以实现，是不是比以前的方法繁琐的布局简便很多？上面TabLayout中app:tabIndicatorHeight="0dp"是为了不显示tab底部的横线，app:tabMode="fixed"是让底部tab布局不可滑动。

接下来就和往常一样在MainActivity.java中初始化布局，设置适配器：

 private void initViews() {

  mTablayout= (TabLayout) findViewById(R.id.tabLayout);
  mViewPager= (ViewPager) findViewById(R.id.viewPager);

  mViewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {

   private String[] mTitles = new String[]{"唐僧", "大师兄", "二师兄","沙师弟"};

   @Override
   public Fragment getItem(int position) {
    if (position == 1) {
     return new TwoFragment();
    } else if (position == 2) {
     return new ThreeFragment();
    }else if (position==3){
     return new FourFragment();
    }
    return new OneFragment();
   }

   @Override
   public int getCount() {
    return mTitles.length;
   }

   @Override
   public CharSequence getPageTitle(int position) {
    return mTitles[position];
   }

  });

  mTablayout.setupWithViewPager(mViewPager);

  one = mTablayout.getTabAt(0);
  two = mTablayout.getTabAt(1);
  three = mTablayout.getTabAt(2);
  four = mTablayout.getTabAt(3);

  one.setIcon(getResources().getDrawable(R.drawable.ic_favorite_black_18dp));
  two.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));
  three.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));
  four.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));

 }

上面要注意的地方是别忘了在FragmentPagerAdapter中手动添加：

   @Override
   public CharSequence getPageTitle(int position) {
    return mTitles[position];
   }

不然不显示底部的文字。

mTablayout.setupWithViewPager(mViewPager);将TabLayout和ViewPager关联起来。

one = mTablayout.getTabAt(0);获取底部单个tab，用来添加初始化图片，注意下标都是从0开始的。

初始化监听事件

 private void initEvents() {

  mTablayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
   @Override
   public void onTabSelected(TabLayout.Tab tab) {
    if (tab == mTablayout.getTabAt(0)) {
     one.setIcon(getResources().getDrawable(R.drawable.ic_favorite_black_18dp));
     mViewPager.setCurrentItem(0);
    } else if (tab == mTablayout.getTabAt(1)) {
     two.setIcon(getResources().getDrawable(R.drawable.ic_favorite_black_18dp));
     mViewPager.setCurrentItem(1);
    } else if (tab == mTablayout.getTabAt(2)) {
     three.setIcon(getResources().getDrawable(R.drawable.ic_favorite_black_18dp));
     mViewPager.setCurrentItem(2);
    }else if (tab == mTablayout.getTabAt(3)){
     four.setIcon(getResources().getDrawable(R.drawable.ic_favorite_black_18dp));
     mViewPager.setCurrentItem(3);
    }

   }

   @Override
   public void onTabUnselected(TabLayout.Tab tab) {
    if (tab == mTablayout.getTabAt(0)) {
     one.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));
    } else if (tab == mTablayout.getTabAt(1)) {
     two.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));
    } else if (tab == mTablayout.getTabAt(2)) {
     three.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));
    }else if (tab == mTablayout.getTabAt(3)){
     four.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));
    }
   }

   @Override
   public void onTabReselected(TabLayout.Tab tab) {

   }
  });

 }

在onTabSelected中设置选中tab时切换的图片，onTabUnselected中设置没有被选中时的图片。别忘了mViewPager.setCurrentItem(0);这句，这是用来点击tab时切换ViewPager，如果不加这一句的话滑动ViewPager底部tab可以切换，但是点击tab而ViewPager不会切换。

Fragment中的简单布局

fragment_one.xml

<?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">

 <TextView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="唐僧"
  android:layout_marginTop="100dp"
  android:layout_gravity="center"
  android:textSize="30sp"/>

</LinearLayout>

OneFragment.java

public class OneFragment extends Fragment{

 @Nullable
 @Override
 public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
  return inflater.inflate(R.layout.fragment_one,container,false);
 }

 @Override
 public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
  super.onViewCreated(view, savedInstanceState);
 }
}

MainActivity.java完整代码：

public class MainActivity extends AppCompatActivity {

 private TabLayout mTablayout;
 private ViewPager mViewPager;

 private TabLayout.Tab one;
 private TabLayout.Tab two;
 private TabLayout.Tab three;
 private TabLayout.Tab four;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);

  initViews();
  initEvents();
 }

 private void initEvents() {

  mTablayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
   @Override
   public void onTabSelected(TabLayout.Tab tab) {
    if (tab == mTablayout.getTabAt(0)) {
     one.setIcon(getResources().getDrawable(R.drawable.ic_favorite_black_18dp));
     mViewPager.setCurrentItem(0);
    } else if (tab == mTablayout.getTabAt(1)) {
     two.setIcon(getResources().getDrawable(R.drawable.ic_favorite_black_18dp));
     mViewPager.setCurrentItem(1);
    } else if (tab == mTablayout.getTabAt(2)) {
     three.setIcon(getResources().getDrawable(R.drawable.ic_favorite_black_18dp));
     mViewPager.setCurrentItem(2);
    }else if (tab == mTablayout.getTabAt(3)){
     four.setIcon(getResources().getDrawable(R.drawable.ic_favorite_black_18dp));
     mViewPager.setCurrentItem(3);
    }

   }

   @Override
   public void onTabUnselected(TabLayout.Tab tab) {
    if (tab == mTablayout.getTabAt(0)) {
     one.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));
    } else if (tab == mTablayout.getTabAt(1)) {
     two.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));
    } else if (tab == mTablayout.getTabAt(2)) {
     three.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));
    }else if (tab == mTablayout.getTabAt(3)){
     four.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));
    }
   }

   @Override
   public void onTabReselected(TabLayout.Tab tab) {

   }
  });

 }

 private void initViews() {

  mTablayout= (TabLayout) findViewById(R.id.tabLayout);
  mViewPager= (ViewPager) findViewById(R.id.viewPager);

  mViewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {

   private String[] mTitles = new String[]{"唐僧", "大师兄", "二师兄","沙师弟"};

   @Override
   public Fragment getItem(int position) {
    if (position == 1) {
     return new TwoFragment();
    } else if (position == 2) {
     return new ThreeFragment();
    }else if (position==3){
     return new FourFragment();
    }
    return new OneFragment();
   }

   @Override
   public int getCount() {
    return mTitles.length;
   }

   @Override
   public CharSequence getPageTitle(int position) {
    return mTitles[position];
   }

  });

  mTablayout.setupWithViewPager(mViewPager);

  one = mTablayout.getTabAt(0);
  two = mTablayout.getTabAt(1);
  three = mTablayout.getTabAt(2);
  four = mTablayout.getTabAt(3);

  one.setIcon(getResources().getDrawable(R.drawable.ic_favorite_black_18dp));
  two.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));
  three.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));
  four.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));

 }
}

结束语

以上就是简单用TabLayout+ViewPager实现app底部Tab布局的整个过程，希望对大家的学习有所帮助，也希望大家多多支持我们。

Android仿网易客户端顶部导航栏效果

最近刚写了一个网易客户端首页导航条的动画效果,现在分享出来给大家学习学习.我说一下这个效果的核心原理.下面是效果图: 首先是布局,这个布局是我从网易客户端反编译后弄来的.大家看后应该明白,布局文件如下: <FrameLayout android:id="@id/column_navi" android:layout_width="fill_parent" android:layout_height="wrap_content" androi
Android自定义View实现字母导航栏的代码

思路分析: 1.自定义View实现字母导航栏 2.ListView实现联系人列表 3.字母导航栏滑动事件处理 4.字母导航栏与中间字母的联动 5.字母导航栏与ListView的联动效果图: 首先,我们先甩出主布局文件,方便后面代码的说明 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/re
Android使用RadioGroup实现底部导航栏

RadioGroup实现底部导航栏效果,如图:: 实现可最基本的导航栏功能,不能左右滑动,只能点击 1.内嵌的fragment的布局: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical&q
Android实现沉浸式导航栏实例代码

废话不多说了,直接给大家贴代码了,具体代码如下所示: private SystemBarTintManager tintManager; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // getWindow().addFlags(WindowManager.Layo
Android design包自定义tablayout的底部导航栏的实现方法

以前做项目大多用的radiobutton,今天用tablayout来做一个tab切换页面的的效果. 实现的效果就是类似QQ.微信的页面间(也就是Fragment间)的切换.如图: 布局只要一个tablayout <android.support.design.widget.TabLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:id=&
Android程序开发之Fragment实现底部导航栏实例代码

流行的应用的导航一般分为两种,一种是底部导航,一种是侧边栏. 说明 IDE:AS,Android studio; 模拟器:genymotion; 实现的效果,见下图. 具体实现为了讲明白这个实现过程,我们贴出来的代码多一写,这样更方便理解 [最后还会放出完整的代码实现] .看上图的界面做的比较粗糙,但实现过程的骨架都具有了,想要更完美的设计,之后自行完善吧 ^0^. 布局通过观察上述效果图,发现任意一个选项页面都有三部分组成: 顶部去除ActionBar后的标题栏: 中间一个Fragment
Android实现沉浸式通知栏通知栏背景颜色跟随app导航栏背景颜色而改变

最近好多app都已经满足了沉浸式通知栏, 所谓沉浸式通知栏:就是把用来导航的各种界面操作空间隐藏在以程序内容为主的情景中,通过相对"隐形"的界面来达到把用户可视范围最大化地用到内容本身上. 而最新安卓4.4系统的通知栏沉浸模式就是在软件打开的时候通知栏和软件顶部颜色融为一体,这样不仅可以使软件和系统本身更加融为一体. 就是手机的通知栏的颜色不再是白色.黑色简单的两种了,本人用的小米4手机,米4手机中的自带软件都支持沉浸式通知栏, 举个例子:大家可以看一下自己的qq,它的标题的背景颜色是
Android项目实战之仿网易顶部导航栏效果

随着时间的推移现在的软件要求显示的内容越来越多,所以要在小的屏幕上能够更好的显示更多的内容,首先我们会想到底部菜单栏,但是有时候想网易新闻要显示的内容太多,而且又想在主页面全部显示出来,所以有加了顶部导航栏,但是Android这样的移动设备内存是受限的,那么多界面缓存到内存中,很容易导致内存溢出,这个是比较致命的,所以不得不考虑.虽然我在之前也做过网易的顶部导航栏但是方式并不好,就像使用viewpager做一些复杂的界面由于图片占用内存过多,很容易导致内存溢出,学习了今天的内容大家做一下对比相信
android中Fragment+RadioButton实现底部导航栏

在App中经常看到这样的tab底部导航栏那么这种效果是如何实现,实现的方式有很多种,最常见的就是使用Fragment+RadioButton去实现.下面我们来写一个例子首先我们先在activity_mian.xml定义布局,整个布局的外面是线性布局,上面是帧布局切换不同的Fragment,底下是RadioGroup嵌套的是RadioButton.代码如下所示: <?xml version="1.0" encoding="utf-8"?> <Li
Android实现底部导航栏功能（选项卡）

现在很多android的应用都采用底部导航栏的功能,这样可以使得用户在使用过程中随意切换不同的页面,现在我采用TabHost组件来自定义一个底部的导航栏的功能. 我们先看下该demo实例的框架图: 其中各个类的作用以及资源文件就不详细解释了,还有资源图片(在该Demo中借用了其它应用程序的资源图片)也不提供了,大家可以自行更换自己需要的资源图片.直接上各个布局文件或各个类的代码: 1. res/layout目录下的 maintabs.xml 源码: <?xml version="1.0&q

Android中TabLayout+ViewPager 简单实现app底部Tab导航栏

相关推荐

随机推荐