Android使用TabLayout+Fragment实现顶部选项卡

先看效果图:

使用Tablayout,首先需要在项目中加入Design包

dependencies {
  compile 'com.android.support:design:24.1.1'
}

在activity_main.xml布局文件中

<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="zhengliang.com.tablayout.MainActivity">
  <android.support.design.widget.TabLayout
    android:id="@+id/tab"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimary"
    >
  </android.support.design.widget.TabLayout>
  <android.support.v4.view.ViewPager
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1" />
</LinearLayout>

里面一个Tablayout和一个ViewPager就行了

实现上面的效果需要创建几个Fragment,这里为了方便就直接创建了一个基本的Fragment需要的时候直接new就行了,实现代码如下:

public class BlankFragment extends Fragment {
  public BlankFragment() {
  }
  public static BlankFragment newInstance(String text){
    Bundle bundle = new Bundle();
    bundle.putString("text",text);
    BlankFragment blankFragment = new BlankFragment();
    blankFragment.setArguments(bundle);
    return blankFragment;
  }
  @Override
  public View onCreateView(LayoutInflater inflater, ViewGroup container,
               Bundle savedInstanceState) {
    return inflater.inflate(R.layout.fragment_blank, container, false);
  }
  @Override
  public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
    super.onViewCreated(view, savedInstanceState);
    TextView textView = (TextView) view.findViewById(R.id.pager_text);
    textView.setText(getArguments().getString("text"));
  }
}

有了Fragment还需要一个实现一个ViewPagerAdapter

public class MyAdapter extends FragmentPagerAdapter {
  private List<String> list;
  public MyAdapter(FragmentManager fm, List<String> list) {
    super(fm);
    this.list = list;
  }
  @Override
  public Fragment getItem(int position) {
    return BlankFragment.newInstance(list.get(position));
  }
  @Override
  public int getCount() {
    return list.size();
  }
  @Override
  public CharSequence getPageTitle(int position) {
    return list.get(position);
  }
}

Adapter的写法非常简单,在自定义Adapter的时候需要重写里面的getPagerTitle()方法,实现这个方法是为了当Tablayout与ViewPager绑定的时候能够绑定Tab标签的标题

一切准备就绪,直接看MainActivity.java中的代码

public class MainActivity extends AppCompatActivity {
  private TabLayout tab;
  private ViewPager pager;
  private List<String> list;
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    /*初始化界面*/
    initViews();
    /*初始化数据*/
    initData();
    /*设置Adapter*/
    pager.setAdapter(new MyAdapter(getSupportFragmentManager(),list));
    /*Tab与ViewPager绑定*/
    tab.setupWithViewPager(pager);
  }
  /*初始化数据*/
  private void initData() {
    list = new ArrayList<>();
    for (int i = 0; i < 5 ; i++) {
      list.add(String.format(Locale.CHINA,"第%02d页",i));
    }
  }
  /*初始化界面*/
  private void initViews() {
    this.pager = (ViewPager) findViewById(R.id.pager);
    this.tab = (TabLayout) findViewById(R.id.tab);
  }
}

到这里基本就实现了上面图的效果,里面一句很关键的代码:tab.setupWithViewPager(pager);只有加了这句代码才能实现Tab和ViewPager的绑定联动...

下面介绍一些TabLayout常用的属性:

设置Tab标签的默认字体颜色:

app:tabTextColor="#ddd"

设置Tab标签选中的字体颜色:

app:tabSelectedTextColor="@color/colorAccent"

设置指示器的颜色:

app:tabIndicatorColor="@color/colorAccent"

设置指示器的高度: (当值为0dp的时候指示器为隐藏状态)

app:tabIndicatorHeight="5dp"

Tablayout中一个重要的属性: app:tabMaode

该属性有两个值:### scrollable,fixed

"fixed"

固定的,表示Tab标签不管为多少都是固定的,所以当标签很多的时候就会挤在一起,而且回造成标签上的文字显示不完整:

如下图:

app:tabMode="fixed"

scrollable

可滚动的,当Tab的标签超出屏幕的宽度,就会自动出现课滑动的效果,当标签过多的时候还可以直接滑动标签

app:tabMode="scrollable"

如下图:

好了,上面这些就是TabLayout最基本的用法...

以上所述是小编给大家介绍的Android使用TabLayout+Fragment实现顶部选项卡,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • Android中Fragment相互切换间不被回收的实现方法

    前言 Android运行在各种各样的设备中,有小屏幕的手机,超大屏的平板甚至电视.针对屏幕尺寸的差距,很多情况下,都是先针对手机开发一套App,然后拷贝一份,修改布局以适应平板神马超级大屏的.难道无法做到一个App可以同时适应手机和平板么,当然了,必须有啊.Fragment的出现就是为了解决这样的问题. 如今市面上的应用基本上都是单Activity+多Fragment实现的了,而这类APP都有在相互切换时不被回收,即切换回原来的Fragment时还是原先的状态,这就是这里要实现的了. 这里使用F

  • Android 中ActionBar+fragment实现页面导航的实例

    Android 中ActionBar+fragment实现页面导航的实例 为保证android2.0以上均能运行,使用support.v7库下的actionbar及fragment 继承自AppCompatActivity(ActionBarActivity已过时)使用getSupportActionBar()得到ActionBar, ActionBar.Tab,这里Tab必须设置监听,在监听中实现Fragment的切换. 这里重点提一下,Theme主题一定要适配,因为我使用的是AppCompa

  • android 中viewpager+fragment仿微信底部TAG完美渐变

    viewpager+fragment仿微信底部TAG完美渐变,在图片渐变的同时字的颜色也在变,注意,是渐变哦! 效果图: activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:zhy="http://schemas.android.com/apk/res/com.Sing.weixin" xmlns:tools="

  • Android使用TabLayou+fragment+viewpager实现滑动切换页面效果

    TabLayou 主要实现的是标题头的 滑动 这个 控件 类似于 ScrollView XML中的布局 <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" > <android.support.design.widget.TabLayout a

  • Android开发中如何解决Fragment +Viewpager滑动页面重复加载的问题

    前言 之前在做一个Viewpager上面加载多个Fragment时总会实例化已经创建好的Fragmnet对象类似 viewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) { @Override public Fragment getItem(int position) { switch(position){ case 0: fragments=new Fragmnet01(); break; case

  • Android中Activity和Fragment传递数据的两种方式

    1.第一种方式,也是最常用的方式,就是使用Bundle来传递参数 MyFragment myFragment = new MyFragment(); Bundle bundle = new Bundle(); bundle.putString("DATA",values);//这里的values就是我们要传的值 myFragment.setArguments(bundle); 然后在Fragment中的onCreatView方法中,通过getArgments()方法,获取到bundle

  • Android使用TabLayout+Fragment实现顶部选项卡

    先看效果图: 使用Tablayout,首先需要在项目中加入Design包 dependencies { compile 'com.android.support:design:24.1.1' } 在activity_main.xml布局文件中 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/

  • Android Fragment实现顶部、底部导航栏

    前言 无论是顶部还是底部导航栏,都是大多数APP的标配,网络上的相关实现教程也非常之多.最近回忆起以前写的小项目,发现对这块内容有些遗忘,不妨就再整理一遍代码逻辑,记录下来,方便日后查阅(指复制粘贴). 实现的方式有很多,本文采用以下方式实现: 底部导航栏:Fragment + BottomNavigationView 顶部导航栏:Fragment + ViewPager2 + TabLayout 底部导航栏 <布局文件> <?xml version="1.0" en

  • Android利用Fragment实现Tab选项卡效果

    利用Fragment实现Tab选项卡效果:  将RadioGroup与Fragment集合,实现tab选项卡效果,这里面最关键的几个文件: 1.FragmentTabAdapter类: /** *@Description: *@Author:Nate Robinson *@Since:2015-2-12 */ public class FragmentTabAdapter implements RadioGroup.OnCheckedChangeListener { private List<F

  • Android TabHost如何实现顶部选项卡

    用TabHost 来实现顶部选项卡,上代码:activity_main.xml <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.an

  • Android 中TabLayout自定义选择背景滑块的实例代码

    TabLayout是Android 的Material Design包中的一个控件,可以和V4包中的ViewPager搭配产生一个联动的效果.这里我自定义了一个滑块能够跟随TabLayout进行滑动选择的SliderLayout.效果见下图(白色方框): 下面是SliderLayout的源码: import android.content.Context; import android.content.res.TypedArray; import android.graphics.drawabl

  • Android开发之Fragment懒加载的几种方式及性能对比

    目录 1. Support时代的懒加载 2. AndrodX时代的懒加载 3. ViewPager2时代的懒加载 4. ViewPage和ViewPager2的性能对比 Android开发中ViewPager+Fragment的懒加载 TabLayout+ViewPager+Fragment是我们开发常用的组合.ViewPager的默认机制就是把全部的Fragment都加载出来,而为了保障一些用户体验,我们使用懒加载的Fragment,就是让我们再用户可见这个Fragment之后才处理业务逻辑.

  • 详解Android开发中Fragment的使用

    前言 学习Java和Android将近一年的时间了,期间的成果应该就是独立完成了一个Android客户端,并且保证了其在主线版本的稳定性.期间遇到了很多坑,也跟着师兄学到了很多Android知识.但是人总是要拥抱变化,不能让自己太安逸,虽然有不舍,但是我已经证明了自己的学习能力,下一步就是开始做Rom Porting了.这里总结一下之前项目中用到最多的Fragment. Fragment简介 Fragment可以理解成Activity中用户界面的一个行为或者一部分,它必须被嵌套在Activity

  • Android带气泡的第三方Tab选项卡

    效果 依赖 compile 'com.ashokvarma.android:bottom-navigation-bar:1.3.0' OnCreate中初始化 initBottom(); 认选中0 showFragment(0); 然后具体实现 private void showFragment(int position) { FragmentManager supportFragmentManager = getSupportFragmentManager(); FragmentTransac

随机推荐