Android Design Support Library（4）- TabLayout的使用

原创文章，转载请注明 http://blog.csdn.net/leejizhou/article/details/50520547

这篇文章介绍下Android Design Support Library中的TabLayout的使用。假设你还不知道怎么使用这个Design Library请參考 http://blog.csdn.net/leejizhou/article/details/50479934。在使用Viewpager进行页面滑动切换的时候会在上面放一个导航条，平时我们会使用一些第三方来实现这个效果或者自己写，可是都太麻烦，以下来介绍下怎样简单的使用Android官方的控件来实现以下这个效果。

这个效果的实现方式是TabLayout+Viewpager+Fragment

以下以一步一步实现这个效果来演示TabLayout的简单使用

1：首先还是在Android Studio中导入这个依赖库

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

2：主页面布局，activity_main.xml

最外层Linearlayout 里面一个TabLayout和一个Viewpager
TabLayout的几个属性

• app:tabSelectedTextColor=”#FFFFFF” Tab被选中时文字的颜色
• app:tabIndicatorColor=”#FF4081” Tab下划线的颜色
• app:tabTextColor=”#000000” Tab默认文字颜色
• app:tabGravity=”fill” 或者 “center” Tab的布局模式 各自是平铺和居中
• app:tabBackground=”@android:color/holo_blue_bright” TabLayout的背景颜色

<?
xml version="1.0" encoding="utf-8"?
>
<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="com.leejz.tablayoutdemo.MainActivity">

    <android.support.design.widget.TabLayout
        android:id="@+id/tl_tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabSelectedTextColor="#ffffff"
        app:tabIndicatorColor="#FF4081"
        app:tabTextColor="#000000"
        app:tabGravity="fill"
        app:tabBackground="@android:color/holo_blue_bright"
        />

    <android.support.v4.view.ViewPager
        android:id="@+id/vp_viewpager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="@android:color/white" />

</LinearLayout>

3：Fragment的布局文件。layout_fragment.xml

<?
xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/ll_fragment"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    >
    <TextView
        android:id="@+id/tv_fragment"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="test"
        android:textSize="20sp"
        android:textColor="#ffffff"
        />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#ffffff"
        android:layout_marginTop="8dp"
        android:text="Blog:http://blog.csdn.net/leejizhou"
        />
</LinearLayout>

4：Viewpager包括的Fragment 。ViewPagerFragment.java
这里Viewpager载入同一个Fragment

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

/**
 * Created by Lijizhou on 2016/1/14.
 * 仅用于演示，Viewpager共用一个Fragment
 */
public class ViewPagerFragment extends Fragment {

    private int page;
    private int color;
    public static final String GETPAGE="get_page";
    public static final String GETCOLOR="get_color";
    public static ViewPagerFragment getInstance(int page,int color){
        Bundle args = new Bundle();
        args.putInt(GETPAGE, page);
        args.putInt(GETCOLOR, color);
        ViewPagerFragment pageFragment = new ViewPagerFragment();
        pageFragment.setArguments(args);
        return pageFragment;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        page=getArguments().getInt(GETPAGE);
        color=getArguments().getInt(GETCOLOR);
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.layout_fragment, container, false);
        TextView textView = (TextView) view.findViewById(R.id.tv_fragment);
        textView.setText("Page" + page);
        view.setBackgroundResource(color);
        return view;
    }
}

5 Activity，MainActivity.java
这个类也非常好理解。给Viewpager设置Adapter，然后TabLayout和Viewpager进行关联操作

import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.os.Bundle;


public class MainActivity extends FragmentActivity {
    private ViewPagerAdapter viewPagerAdapter;
    private ViewPager viewPager;
    private TabLayout  tabLayout;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        viewPagerAdapter = new ViewPagerAdapter(getSupportFragmentManager());
        viewPager = (ViewPager) findViewById(R.id.vp_viewpager);
       viewPager.setAdapter(viewPagerAdapter);
        tabLayout = (TabLayout) findViewById(R.id.tl_tabs);
        //Viewpager和Tablayout进行关联
        tabLayout.setupWithViewPager(viewPager);
        //用于多TAB，Tablayout能够滚动
        //tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);

        tabLayout.setTabMode(TabLayout.MODE_FIXED);



    }





    class ViewPagerAdapter extends FragmentPagerAdapter{
        int pagecount=3;
        private int color[]=new int[]{android.R.color.holo_orange_light,android.R.color.holo_green_dark,android.R.color.holo_red_dark};

        public ViewPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            return ViewPagerFragment.getInstance(position+1,color[position]);
        }

        @Override
        public int getCount() {
            return pagecount;
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return "Page"+(position+1);
        }
    }
}

Ok，这样一个效果就轻松实现了。有什么问题能够在下方评论：）