61、常规控件（4）TabLayout-便捷实现标签

<android.support.design.widget.TabLayout
   android:id="@+id/tabs"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
 />

1  TabLayout tabs = (TabLayout) this.findViewById(R.id.tabs);
 tabs.addTab(tabs.newTab().setText("Tab1"));
 tabs.addTab(tabs.newTab().setText("Tab2"));
 tabs.addTab(tabs.newTab().setText("Tab3"));
 tabs.addTab(tabs.newTab().setText("Tab4"));
 tabs.addTab(tabs.newTab().setText("Tab5"));

   

注：如果Tab标签特别多的话，控件是支持自动滑动的，只需要在控件加入 app:tabMode="scrollable"  这个属性即可。

以上简单两步，就可以实现如图效果了。但是这个远远不能满足我们的需要，所以接着往下看。

给以上控件添加不同的颜色。如下图效果：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <!--
        app:tabTextColor  未选中字体颜色
        app:tabSelectedTextColor  选中的字体颜色
        app:tabIndicatorColor  下标指示器的颜色
        app:tabIndicatorHeight  下标指示器的高度
    -->
    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/holo_green_dark"
        app:tabTextColor="@android:color/black"
        app:tabSelectedTextColor="@android:color/holo_red_light"
        app:tabIndicatorColor="@android:color/holo_orange_light"
        app:tabIndicatorHeight="5dp"
        />
</LinearLayout>

更多的使用是与ViewPager相结合来使用。

效果：Title可以左右滑动切换；同时也可以利用ViewPager左右滑动切换。

代码步骤如下：

1、MainActivity的布局文件，activity_main.xml。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <!--
        app:tabTextColor  未选中字体颜色
        app:tabSelectedTextColor  选中的字体颜色
        app:tabIndicatorColor  下标指示器的颜色
        app:tabIndicatorHeight  下标指示器的高度
        app:tabMode="scrollable" 横向滚动
    -->
    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/holo_green_dark"
        app:tabTextColor="@android:color/black"
        app:tabSelectedTextColor="@android:color/holo_red_light"
        app:tabIndicatorColor="@android:color/holo_orange_light"
        app:tabIndicatorHeight="5dp"
        app:tabMode="scrollable"
        />
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />
</LinearLayout>

2、MainActivity.java

package com.example.com.designdemo;

import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        TabLayout tabs = (TabLayout) this.findViewById(R.id.tabs);

        List<String> titles = new ArrayList<String>();
        List<Fragment> fragments = new ArrayList<Fragment>();
        for (int i=0; i<10; i++) {
            String title = "Tab"+ (i+1);
            tabs.addTab(tabs.newTab().setText(title));
            titles.add(title);

            Fragment fragment = new TestOneFragment(title);
            fragments.add(fragment);
        }

        ViewPager viewpager = (ViewPager) this.findViewById(R.id.viewpager);
        TestOneAdapter mAdapter = new TestOneAdapter(getSupportFragmentManager(), titles, fragments);
        viewpager.setAdapter(mAdapter);
        tabs.setupWithViewPager(viewpager);
        tabs.setTabsFromPagerAdapter(mAdapter);
    }

}

3、新建一个TestOneFragment.java，添加ViewPager使用。

package com.example.com.designdemo;
 
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class TestOneFragment extends Fragment {
    public String mTitle = null;

    public TestOneFragment(String title) {
        this.mTitle = title;
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        View view = inflater.inflate(R.layout.test_one_fragment, container, false);

        TextView txt = (TextView) view.findViewById(R.id.txt);
        txt.setText(mTitle);

        return view;
    }
}

4、Fragment适配器TestOneAdapter.java

package com.example.com.designdemo;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import java.util.List;

public class TestOneAdapter extends FragmentStatePagerAdapter {

    List<String> titles;
    List<Fragment> fragments;

    public TestOneAdapter(FragmentManager fm, List<String> titles, List<Fragment> fragments) {
        super(fm);
        this.titles = titles;
        this.fragments = fragments;
    }

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

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

    @Override
    public CharSequence getPageTitle(int position) {
        return titles.get(position);
    }
}

 完整DEMO下载地址：http://download.csdn.net/detail/androidsj/9301597