Android TabLayout(选项卡布局)简单用法实例分析

我们在应用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
}
}

效果图，不太会做成动态的：

希望本文所述对大家Android程序设计有所帮助。

您可能感兴趣的文章:

• android TabLayout使用方法详解
• Android 中TabLayout自定义选择背景滑块的实例代码
• Android中TabLayout结合ViewPager实现页面切换效果
• Android design包自定义tablayout的底部导航栏的实现方法
• Android TabLayout实现京东详情效果
• Android中TabLayout+ViewPager 简单实现app底部Tab导航栏
• Android自定义TabLayout效果
• AndroidUI组件SlidingTabLayout实现ViewPager页滑动效果
• Android中TabLayout结合ViewPager实现页面切换
• TabLayout使用方法详解