TabLayout的简单使用

原创 2015年09月29日 11:16:05

        我们在应用viewpager的时候,经常会使用TabPageIndicator来与其配合。达到很漂亮的效果。但是TabPageIndicator是第三方的,而且比较老了,当然了现在很多大神都已经开始自己写TabPageIndicator来满足自己的需求,在2015年的google大会上,google发布了新的Android Support Design,里面包含了几个新的控件,其中就有一个TabLayout,它就可以完成TabPageIndicator的效果,而且还是官方的,最好的是它可以兼容到2.2以上版本,包括2.2。下面我就举一个简单的例子来使用它。

       我使用的 android studio进行开发的,所以引用TabLayout很简单,只要在build.gradle中加入compile 'com.android.support:design:22.2.0'即可。

       这个使用是我在仿 知乎 的时候使用。所以页面就和知乎很像了

       fragment_find.xml

      

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical">

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_FindFragment_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/titleBlue"
        app:tabIndicatorColor="@color/white"
        app:tabSelectedTextColor="@color/gray"
        app:tabTextColor="@color/white"
        />


    <android.support.v4.view.ViewPager
        android:id="@+id/vp_FindFragment_pager"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        />

</LinearLayout>

    这里面没有什么特别的,就是添加了一个TabLayout和Viewpager作为上下的布局。其中

   

        app:tabIndicatorColor="@color/white"                 // 下方滚动的下划线颜色
        app:tabSelectedTextColor="@color/gray"               // tab被选中后,文字的颜色
        app:tabTextColor="@color/white"                      // tab默认的文字颜色

  Find_tab_Adapter.java  它是viewpager的Adapter,因为这里面我每个栏目下,都会有一些列表,所以采用list<View>的方式,在里面切换layout不太适合,所以我采用了List<Fragment>来直接加载多个fragment

 

package com.example.cg.myzhihu.Adapters;


import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

import java.util.List;

/**
 * Created by cg on 2015/9/26.
 */
public class Find_tab_Adapter extends FragmentPagerAdapter {

    private List<Fragment> list_fragment;                         //fragment列表
    private List<String> list_Title;                              //tab名的列表



    public Find_tab_Adapter(FragmentManager fm,List<Fragment> list_fragment,List<String> list_Title) {
        super(fm);
        this.list_fragment = list_fragment;
        this.list_Title = list_Title;
    }

    @Override
    public Fragment getItem(int position) {
        return list_fragment.get(position);
    }

    @Override
    public int getCount() {
        return list_Title.size();
    }

    //此方法用来显示tab上的名字
    @Override
    public CharSequence getPageTitle(int position) {

        return list_Title.get(position % list_Title.size());
    }
}

FindFragment.java这个的说法,全在标注里面了

package com.example.cg.myzhihu;


import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.example.cg.myzhihu.Adapters.Find_tab_Adapter;

import java.util.ArrayList;
import java.util.List;


/**
 * 发现页面
 */
public class FindFragment extends Fragment {

    private TabLayout tab_FindFragment_title;                            //定义TabLayout
    private ViewPager vp_FindFragment_pager;                             //定义viewPager
    private FragmentPagerAdapter fAdapter;                               //定义adapter

    private List<Fragment> list_fragment;                                //定义要装fragment的列表
    private List<String> list_title;                                     //tab名称列表

    private Find_hotRecommendFragment hotRecommendFragment;              //热门推荐fragment
    private Find_hotCollectionFragment hotCollectionFragment;            //热门收藏fragment
    private Find_hotMonthFragment hotMonthFragment;                      //本月热榜fragment
    private Find_hotToday hotToday;                                      //今日热榜fragment

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_find, container, false);

        initControls(view);

        return view;
    }

    /**
     * 初始化各控件
     * @param view
     */
    private void initControls(View view) {

        tab_FindFragment_title = (TabLayout)view.findViewById(R.id.tab_FindFragment_title);
        vp_FindFragment_pager = (ViewPager)view.findViewById(R.id.vp_FindFragment_pager);

        //初始化各fragment
        hotRecommendFragment = new Find_hotRecommendFragment();
        hotCollectionFragment = new Find_hotCollectionFragment();
        hotMonthFragment = new Find_hotMonthFragment();
        hotToday = new Find_hotToday();

        //将fragment装进列表中
        list_fragment = new ArrayList<>();
        list_fragment.add(hotRecommendFragment);
        list_fragment.add(hotCollectionFragment);
        list_fragment.add(hotMonthFragment);
        list_fragment.add(hotToday);

        //将名称加载tab名字列表,正常情况下,我们应该在values/arrays.xml中进行定义然后调用
        list_title = new ArrayList<>();
        list_title.add("热门推荐");
        list_title.add("热门收藏");
        list_title.add("本月热榜");
        list_title.add("今日热榜");

        //设置TabLayout的模式
        tab_FindFragment_title.setTabMode(TabLayout.MODE_FIXED);
        //为TabLayout添加tab名称
        tab_FindFragment_title.addTab(tab_FindFragment_title.newTab().setText(list_title.get(0)));
        tab_FindFragment_title.addTab(tab_FindFragment_title.newTab().setText(list_title.get(1)));
        tab_FindFragment_title.addTab(tab_FindFragment_title.newTab().setText(list_title.get(2)));
        tab_FindFragment_title.addTab(tab_FindFragment_title.newTab().setText(list_title.get(3)));

        fAdapter = new Find_tab_Adapter(getActivity().getSupportFragmentManager(),list_fragment,list_title);

        //viewpager加载adapter
        vp_FindFragment_pager.setAdapter(fAdapter);
        //tab_FindFragment_title.setViewPager(vp_FindFragment_pager);
        //TabLayout加载viewpager
        tab_FindFragment_title.setupWithViewPager(vp_FindFragment_pager);
        //tab_FindFragment_title.set
    }


}

效果图,不太会做成动态的。 


TabLayout的用法进行总结和归纳

TabLayout的用法进行总结和归纳
  • persistence_lw
  • persistence_lw
  • 2017年04月22日 17:44
  • 3000

TabLayout:另一种Tab的实现方式

尊重原创转载请注明:From AigeStudio(http://blog.csdn.net/aigestudio)Power by Aige 侵权必究!炮兵 镇楼在5.0以前我们想要实现像网易新闻客...
  • aigestudio
  • aigestudio
  • 2015年07月30日 20:16
  • 31803

最详细的 TabLayout 的用法

TabLayout是属于容器控件, 提供水平显示Tab的效果. 常常和ViewPager配合使用. 我将全面地讲解其用法. 反正我是没看过比我还详细的了. 演示 添加依赖 这...
  • wu371894545
  • wu371894545
  • 2017年03月25日 15:14
  • 2965

TabLayout使用详解

1需求 2TabLayout相关属性 1 继承关系 2 和viewpager关联使用 3 控件属性 4 公共方法 3实际使用 1 主界面底部菜单栏 11 TabLayout中的tab布局文件...
  • m0_37168878
  • m0_37168878
  • 2017年06月16日 11:34
  • 1067

TabLayout简单使用

TabLayout的简单使用
  • u010846177
  • u010846177
  • 2017年02月09日 21:48
  • 1856

Android TabLayout使用以及自定义TabLayout的item

前言TabLayout是属于Android Design Support Library中的一个控件,顶部或者底部水平的Tab布局,滑动或者点击切换的功能,今天我们简单讲解TabLayout的使用,重...
  • qiao0809
  • qiao0809
  • 2016年12月07日 14:54
  • 11033

TabLayout简单使用

xml布局
  • weixin_40391500
  • weixin_40391500
  • 2017年12月27日 10:00
  • 42

TabLayout:另一种Tab的实现方式

尊重原创转载请注明:From AigeStudio(http://blog.csdn.net/aigestudio)Power by Aige 侵权必究! 炮兵 镇楼 ...
  • fengyeNom1
  • fengyeNom1
  • 2017年11月29日 14:44
  • 156

tablayout基本讲解

Material Design伴随android5.0出现后,我们发现Google终于意识到了自己以往在UI设计方面的不足(或者说缺陷),其中一款用于标签导航的控件正式出现在design兼容包中——滑...
  • u011150924
  • u011150924
  • 2016年09月18日 14:14
  • 6356

关于tabLayout中标题栏加图片与文字

tabLayout出来的时间不算太久,这里是为标题栏加载view 1,首先下面两个是在适配器中写的    可以先定义需要的文字,和需要的图片的数组    第二步.在适配器中定义一个方法,这个...
  • sinat_33308421
  • sinat_33308421
  • 2015年12月10日 10:02
  • 6568
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:TabLayout的简单使用
举报原因:
原因补充:

(最多只允许输入30个字)