关闭

TabLayout+Fragment实现顶部选项卡

标签: TabLayout+Fragment
515人阅读 评论(0) 收藏 举报
分类:

MaterialDesign使用 (一) TabLyout的使用

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

2016/9/7 星期三

先看效果图:


使用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最基本的用法...

原文地址:http://blog.csdn.net/qq_23179075/article/details/52471199

0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

使用TabLayout 实现顶部选项卡功能

TabLayout  是谷歌在2015年I/O大会中提出的 很方便的实现顶部选项卡功能  文档中的描述: Population of the tabs to display is done throu...
  • siyemuzi
  • siyemuzi
  • 2015-12-07 17:35
  • 1510

Tablayout+Fragment顶部选项卡实现

MaterialDesign使用 (一) TabLyout的使用使用TabLayout+Fragment实现顶部选项卡2016/9/7 星期三 先看效果图:使用Tablayout,首先需要在项...
  • qq_23179075
  • qq_23179075
  • 2016-09-08 14:29
  • 7556

Android自定义Tab选项卡4行代码完成调用(Fragment+ViewPager组合)

  • 2015-11-08 19:53
  • 6.66MB
  • 下载

Android ViewPager+Fragment滑动选项卡,tab点击选项卡

有一段时间一直再研究这个,自Android 3.0以后,很少开发者再用以前的TabWidget控件了。那种效果不是很好,也不能滑动。后来陆续出现了各种各样滑动选项卡,每种的出现都各有优势吧。但我还是推...
  • qq_16064871
  • qq_16064871
  • 2015-05-23 08:29
  • 8174

首页-底部&顶部Tab导航(菜单栏)的实现:TabLayout+ViewPager+Fragment

前言Android开发中使用顶部 & 底部Tab导航栏的频次非常高,主要的实现手段有以下: TabWidget 隐藏TabWidget,使用RadioGroup和RadioButton Fragmen...
  • carson_ho
  • carson_ho
  • 2016-07-24 11:27
  • 10959

Tablayout+Fragment顶部选项卡实现

MaterialDesign使用 (一) TabLyout的使用使用TabLayout+Fragment实现顶部选项卡2016/9/7 星期三 先看效果图:使用Tablayout,首先需要在项...
  • qq_23179075
  • qq_23179075
  • 2016-09-08 14:29
  • 7556

首页-底部&顶部Tab导航(菜单栏)的实现:TabLayout+ViewPager+Fragment

前言Android开发中使用顶部 & 底部Tab导航栏的频次非常高,主要的实现手段有以下: TabWidget 隐藏TabWidget,使用RadioGroup和RadioButton Fragmen...
  • carson_ho
  • carson_ho
  • 2016-07-24 11:27
  • 10959

使用Fragment完成Tab选项卡-Android Fragment应用实战

先看一下QQ、新浪微博、支付宝钱包这三个非常有名的应用,都有一个底部导航栏,我们一般称之‘选项卡’。google官方会叫他们为fixed tab,不过国内好像很好这么叫的。其实,在anroid 4...
  • zjlovety
  • zjlovety
  • 2014-03-19 11:07
  • 40958

使用TabLayout 实现顶部选项卡功能

TabLayout  是谷歌在2015年I/O大会中提出的 很方便的实现顶部选项卡功能  文档中的描述: Population of the tabs to display is done throu...
  • siyemuzi
  • siyemuzi
  • 2015-12-07 17:35
  • 1510

TabLayout、ViewPager和Fragment实现选项卡界面切换

废话不多说,上代码 主界面布局:activity_fragment_eight.xml <LinearLayout xmlns:android="http://schemas.android.com...
  • fu_17791654327
  • fu_17791654327
  • 3天前 22:55
  • 6
    个人资料
    • 访问:31455次
    • 积分:618
    • 等级:
    • 排名:千里之外
    • 原创:22篇
    • 转载:71篇
    • 译文:0篇
    • 评论:2条