Android 에서 TabLayout 는 ViewPager 와 결합 하여 페이지 전환 효 과 를 실현 합 니 다.

먼저 효 과 를 보 세 요.그림 참조:

1.TabLayout 는 Android Design Support Library 공식 라 이브 러 리 의 컨트롤 이기 때문에 TabLayout 를 사용 할 때 이 라 이브 러 리 에 대한 의존 도 를 추가 해 야 합 니 다.
 compile 'com.android.support:design:22.2.0'
2.다음은 TabLayout 와 ViewPager 가 함께 사용 하 는 레이아웃 입 니 다.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
 tools:context="com.example.cxk.myapplication.MainActivity">

 <android.support.design.widget.TabLayout
  android:id="@+id/tablayout"
  android:layout_width="match_parent"
  android:layout_height="48dp"
  android:background="#1FBCD2"
  app:tabTextAppearance="@style/MyTabLayoutTextAppearance"
  app:tabIndicatorColor="@color/white"
  app:tabSelectedTextColor="@color/white"
  app:tabTextColor="@color/ripple_material_dark"
  app:tabIndicatorHeight="2dp" />

 <android.support.v4.view.ViewPager
  android:id="@+id/viewpager"
  android:layout_width="fill_parent"
  android:layout_height="match_parent"
  android:layout_below="@+id/tablayout"
  android:layout_weight="1" />

</RelativeLayout>

주:
a.루트 레이아웃 에 xmlns:app="을 써 야 합 니 다.http://schemas.android.com/apk/res-auto"이 코드 는 레이아웃 에 Tablayot 의 일부 속성 을 설정 할 수 없습니다."
b.다음은 Tablayot 의 일반적인 속성 입 니 다.
app:tabIndicatorColor="@color/white"표시 기 색상
app:tabIndicator Height="2dp"표시 기의 광대 역
app:tabSelected TextColor="@color/white"선택 되 었 을 때 글꼴 색상
app:tabTextColor="@color/ripple_material_dark"선택 되 지 않 았 을 때 글꼴 색상
app:tabTextAppearance="@style/MyTabLayoutTextAppearance"글꼴 크기 변경(style.xml 아래 에 다음 코드 추가)

 <style name="MyTabLayoutTextAppearance" parent="TextAppearance.AppCompat.Widget.ActionBar.Title">
  <item name="android:textSize">16sp</item>
 </style>

 3.다음은 TabLayout 와 ViewPager 가 함께 사용 하 는 JAVA 코드 입 니 다.

public class MainActivity extends FragmentActivity {
 private TabLayout tablayout;
 private ViewPager viewpager;
 private List<Fragment> list;
 private FragmentManager manager;
 private FragmentTransaction transtion;
 private MyFragmentPageAdapter adapter;
 private List<String> titles;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  // findID
  tablayout = (TabLayout) this.findViewById(R.id.tablayout);
  viewpager = (ViewPager) this.findViewById(R.id.viewpager);
  //       titles  
  titles = new ArrayList<String>();
  titles.add("   ");
  titles.add("   ");
  //   Fragment     
  list = new ArrayList<Fragment>();
  Fragment1 f1 = new Fragment1();
  Fragment2 f2 = new Fragment2();
  list.add(f1);
  list.add(f2);
  //  manager transtion      viewpager       
  manager = getSupportFragmentManager();
  adapter = new MyFragmentPageAdapter(manager);
  transtion = manager.beginTransaction();
  transtion.commit();
  viewpager.setAdapter(adapter);
  // tablayout.addTab        Tab  ，true      
  tablayout.addTab(tablayout.newTab().setText(titles.get(0)), true);
  tablayout.addTab(tablayout.newTab().setText(titles.get(1)), false);
  //       Tablayout Viewpager    
  tablayout.setupWithViewPager(viewpager);
  tablayout.setTabsFromPagerAdapter(adapter);
 }

 //         ViewPager
 class MyFragmentPageAdapter extends FragmentPagerAdapter {

  public MyFragmentPageAdapter(FragmentManager fm) {
   super(fm);
   // TODO Auto-generated constructor stub
  }

  @Override
  public android.support.v4.app.Fragment getItem(int arg0) {
   // TODO Auto-generated method stub
   return list.get(arg0);
  }

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

  @Override
  public int getCount() {
   // TODO Auto-generated method stub
   return list.size();
  }

  @Override
  public void destroyItem(ViewGroup container, int position, Object object) {
   // TODO Auto-generated method stub
    super.destroyItem(container, position, object);
  }

 }
}

주:
1.getSupportManager 가 이 방법 을 사용 하려 면 Fragment Activity 를 계승 해 야 합 니 다.
2.정 의 된 새 어댑터 는 getpager Title 을 다시 써 야 합 니 다.그렇지 않 으 면 제목 이 표시 되 지 않 습 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.