meterial design之tablayout结合viewpage的使用

使用tablayout结合viewpage可以做到在多个页面间流畅的切换，以前有第三方的框架达到这个效果，而在google I/O大会上，google推出了官方的tablayput框架，使我们可以很容易就实现这个切换界面的效果，以下就是使用的步骤：

为使用Meterial design中的Tablayout，需要引入design包 

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

1、Activity布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context=".MainActivity"
    android:orientation="vertical">

    <android.support.design.widget.TabLayout
        android:id="@+id/tablayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="scrollable"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpage"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="#0faea0"/>
</LinearLayout>

tablayout中有一个属性是app:tabMode两个属性值，一个fixed,一个scrollable,前者表示将所有tab展示到屏幕，后者表示，当tab数量占满屏幕后，允许左右滑动tab来显示。

并且还可以在代码中设置该属性，Tablayout.setTabMode(TabLayout.MODE_FIXED / TabLayout.SCROLLABLE)

2、各个fragment对应的布局（示范步骤为简便用同一个步骤）：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <EditText
        android:layout_width="40dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"/>


</LinearLayout>

3、各个页面的Fragment：

package demo.test.com.cn.myrealtesttablayout;


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

/**
 * A simple {@link Fragment} subclass.
 * Activities that contain this fragment must implement the
 * {@link View_Fragment} interface
 * to handle interaction events.
 * Use the {@link View_Fragment#newInstance} factory method to
 * create an instance of this fragment.
 */
public class View_Fragment extends Fragment {<span style="white-space:pre">		</span>     //此处应注意import的Fragment类应该是v4.app.Fragment
    public static final String ARGS_PAGE = "args_page";
    private int mPage;
    public static View_Fragment newInstance(int page) {     //实例函数，每一个Tab实例一个Fragment，
        Bundle args = new Bundle();
        args.putInt(ARGS_PAGE, page);
        View_Fragment fragment = new View_Fragment();
        fragment.setArguments(args);
        return fragment;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mPage = getArguments().getInt(ARGS_PAGE);
    }

        @Nullable
        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
            View view = inflater.inflate(R.layout.fragment_layout,container,false);
            TextView textView = (TextView) view.findViewById(R.id.textView);
            textView.setText("第"+mPage+"页");
            textView.setGravity(Gravity.CENTER);
            return view;
    }
}

4、创建ViewPager的Adapter，新建类继承FragmentPagerAdapter

package demo.test.com.cn.myrealtesttablayout;


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

/**
 * Created by Administrator on 2015/11/2.
 */
    public class MyFragmentPageAdapter extends FragmentPagerAdapter {

    public final int COUNT = 5;           //tab count
    private String[] titles = new String[] {"Tab1", "Tab2", "Tab3", "Tab4", "Tab5"};//tab title
    private Context context;

    public MyFragmentPageAdapter(FragmentManager fm, Context context) {
        super(fm);
        this.context = context;
    }



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

    @Override
    public CharSequence getPageTitle(int position) {
        return titles[position];
    }

    @Override
    public Fragment getItem(int position) {
        return View_Fragment.newInstance(position + 1);    //返回Fragment实例
    }
}

5、Main函数：

package demo.test.com.cn.myrealtesttablayout;

import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    private ViewPager viewPager;
    private TabLayout tabLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        viewPager = (ViewPager) findViewById(R.id.viewpage);
        tabLayout = (TabLayout) findViewById(R.id.tablayout);
        MyFragmentPageAdapter adapter = new MyFragmentPageAdapter(getSupportFragmentManager(), this);
        viewPager.setAdapter(adapter);
        tabLayout.setupWithViewPager(viewPager);
        //设置Tab模式为MODE_FIXED，即为系统默认模式
        tabLayout.setTabMode(TabLayout.MODE_FIXED);
        //设置Tab的Gravity为GRAVITY_FILL
        tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
        viewPager.setCurrentItem(2);
    }
}

至此，这就是一个简单的Tablayout的使用步骤