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