一、概述

MD设计风格已经出现了有段时间了，最近写项目发现确实好用，于是准备学习下，接下来会写写一些列博客来学习MD

二、TabLayout

主要的界面展示如图所示

是不是感觉非常熟悉，这种效果在我们开发中非常实用，以前我们可能会使用开源框架来实现，例如我以前一直都是用ViewPagerIndicator，而现在如果用TabLayout的话，代码将会变的非常简单。废话不说了，上代码吧

三、代码

1、第一种方式

1、xml

注意，我使用的是Android Stdio开发，需要在build.gradle文件中加入如下代码

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

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:lw="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.lw.tablayout.MainActivity">

    <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        lw:tabIndicatorColor="#833636"
        lw:tabSelectedTextColor="#de0b3c"
        lw:tabTextColor="#2232c4" />

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

</LinearLayout>

这里主要是线性布局，而ViewPager填充剩余屏幕

2、java
首先找到两个控件，

    TabLayout tabLayout = (TabLayout) findViewById(R.id.tabLayout);
        ViewPager vp = (ViewPager) findViewById(R.id.vp_content);

为ViewPager设置的adapter

    class MyAdapter extends PagerAdapter {

        @Override
        public int getCount() {
            return mTitle.length;
        }


        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView((View) object);
        }

        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            TextView tv = new TextView(MainActivity.this);
            tv.setText(mData[position]);
            tv.setTextSize(30f);
            container.addView(tv);
            return tv;
        }

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

MyAdapter adapter = new MyAdapter();

接着，为TabLayout设置监听器，当tab切换的时候ViewPager对应的切换

tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                vp.setCurrentItem(tab.getPosition());
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });

最后设置Tab标签的内容来源和未ViewPager设置adapter

     tabLayout.setTabsFromPagerAdapter(adapter);
        vp.setAdapter(adapter);

这样，就可以有上面的效果了。但是总体感觉还是有点麻烦，那是否还有更简单的方法呢？

2、第二种方式

布局文件不用动，最重要的是adapter、viewpager、TabLayout的设置，
代码如下，

    vp.setAdapter(adapter);
    tabLayout.setupWithViewPager(vp);

看看，是不是更简单了呢？

全部代码如下：

    package com.lw.tablayout;

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

public class MainActivity extends AppCompatActivity {

    private String mTitle[] = new String[]{
            "tab1",
            "tab2",
            "tab3",
            "tab4"
    };
    private String mData[] = new String[]{
            "data1",
            "data2",
            "data3",
            "data4"
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        TabLayout tabLayout = (TabLayout) findViewById(R.id.tabLayout);
        ViewPager vp = (ViewPager) findViewById(R.id.vp_content);
        MyAdapter adapter = new MyAdapter();


//        第一种方式
        vp.setAdapter(adapter);
        tabLayout.setupWithViewPager(vp);


//        tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
//            @Override
//            public void onTabSelected(TabLayout.Tab tab) {
//                vp.setCurrentItem(tab.getPosition());
//            }
//
//            @Override
//            public void onTabUnselected(TabLayout.Tab tab) {
//
//            }
//
//            @Override
//            public void onTabReselected(TabLayout.Tab tab) {
//
//            }
//        });
//
//        tabLayout.setTabsFromPagerAdapter(adapter);
//        vp.setAdapter(adapter);


    }

    class MyAdapter extends PagerAdapter {

        @Override
        public int getCount() {
            return mTitle.length;
        }


        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView((View) object);
        }

        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            TextView tv = new TextView(MainActivity.this);
            tv.setText(mData[position]);
            tv.setTextSize(30f);
            container.addView(tv);
            return tv;
        }

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

Ok，这篇博客就介绍到这里了。