TabLayout ViewPager 표시 기 구현 방법

TabLayout 가 나타 나 기 전에 기본적으로 ViewPager+Fragment Pager Adapter+제3자 오픈 소스 tab 지시기(TabPage Indicator)를 통 해 이 루어 집 니 다.현재 Android 내부 에 서 는 ViewPager 표시 기의 효 과 를 구현 하기 위해 기 존의 TabLayout 컨트롤 을 제공 합 니 다.
효과 그림 먼저 보기:

가 져 오기 의존
Gradle 파일 에서 의존 도 를 가 져 옵 니 다.코드 는 다음 과 같 습 니 다.

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

TabLayout 클래스 는 이 의존 패키지 에서 정 의 됩 니 다.
레이아웃 파일 에서 사용

<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:orientation="vertical"
 tools:context="tech.czh.example.MainActivity">

 <android.support.design.widget.TabLayout
  android:id="@+id/tablayout"
  android:layout_width="match_parent"
  android:layout_height="50dp"
  android:layout_gravity="top"/>

 <android.support.v4.view.ViewPager
  android:id="@+id/viewpager"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:background="@android:color/white">

 </android.support.v4.view.ViewPager>

</LinearLayout>

LinearLayout 에 서 는 TabLayout 태그 와 ViewPager 태 그 를 사용 합 니 다.
Activity 코드 작성

public class MainActivity extends AppCompatActivity
{

 public static final String[] tabTitles =
   new String[]{"  1","  2","  3","  4","  5","  6","  7","  8","  9"};

 private TabLayout mTabLayout;
 private ViewPager mViewPager;

 private List<SingleFragment> mFragments = new ArrayList<SingleFragment>();

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

  initViews();
 }

 private void initViews()
 {
  mTabLayout = (TabLayout) findViewById(R.id.tablayout);
  mViewPager = (ViewPager) findViewById(R.id.viewpager);

  for(int i = 0; i < tabTitles.length; i++)
  {
   mFragments.add(SingleFragment.createFragment(tabTitles[i]));
  }

  // ViewPager  FragmentPagerAdapter
  mViewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager())
  {
   @Override
   public Fragment getItem(int position)
   {
    return mFragments.get(position);
   }

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

   /**
    *  TabLayout    tab    
    */
   @Override
   public CharSequence getPageTitle(int position)
   {
    return tabTitles[position];
   }
  });

  //TabLaout ViewPager    
  mTabLayout.setupWithViewPager(mViewPager);
  //  tab  ，      
  mTabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
 }
}

대부분의 기능 은 initViews()방법 에서 이 루어 집 니 다.대체적으로 설명 하 겠 습 니 다.23,24 줄 에서 TabLayout 와 ViewPager 컨트롤 인 스 턴 스 를 얻 을 수 있 습 니 다.26~29 줄 에서 필요 한 Fragment 인 스 턴 스 를 만 들 고 mFragments 목록 에 저장 합 니 다.32 번 째 줄 은 ViewPager 에 Fragment Pager Adapter 를 설정 하고 getSupportFragment Manager()방법 으로 Fragment Manager 를 Fragment Pager Adapter 에 전달 합 니 다.50 번 째 줄,getPageTitle()리 셋 함수 로 TabLayout 의 Tab 에 제목 을 설정 합 니 다.57 번 째 줄 은 TabLayout 와 ViewPager 를 연결 합 니 다.마지막 으로 TabLayout 모드 를 설 정 했 습 니 다.TabLayout.MODESCROLLABLE 는 TabLayout 가 미 끄 러 질 수 있어 과도 한 Tab 이 한 화면 에 붐 비 는 것 을 막 을 수 있다 고 밝 혔 다.
Fragment 코드 작성

public class SingleFragment extends Fragment
{
 public static final String ARGUMENT = "ARGUMENT";

 @Nullable
 @Override
 public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
 {
  Bundle bundle = getArguments();
  String text = "";
  if(bundle != null) {
   text = bundle.getString(ARGUMENT);
  }
  TextView tv = new TextView(getActivity());
  tv.setText(text);
  tv.setTextSize(TypedValue.COMPLEX_UNIT_SP, 22);
  tv.setGravity(Gravity.CENTER);

  return tv;
 }

 public static SingleFragment createFragment(String argument)
 {
  Bundle bundle = new Bundle();
  bundle.putString(ARGUMENT, argument);

  SingleFragment fragment = new SingleFragment();
  fragment.setArguments(bundle);

  return fragment;
 }
}

Fragment 의 UI 컨트롤 은 간단 합 니 다.하나의 TextView 만 포함 합 니 다.외부 에 서 는 정적 방법 인 createFragment()를 통 해 Fragment 인 스 턴 스 를 만 들 고 파 라 메 터 를 전달 할 수 있 으 며 전달 하 는 파 라 메 터 는 TextView 에 설 정 됩 니 다.
OK,이로써 TabLayout 는 정상적으로 사용 할 수 있 고 효 과 는 글 에 붙 이기 시작 한 gif 그림 입 니 다.
또한 TabLayout 는 Tab 스타일 을 사용자 정의 할 수 있 도록 사용자 정의 속성 도 많이 제공 합 니 다.
예제 코드:

<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:orientation="vertical"
 tools:context="tech.czh.example.MainActivity">

 <android.support.design.widget.TabLayout
  android:id="@+id/tablayout"
  android:layout_width="match_parent"
  android:layout_height="50dp"
  android:layout_gravity="top"
  app:tabTextColor="@color/colorPrimary"
  app:tabSelectedTextColor="@color/colorAccent"
  app:tabIndicatorColor="@color/colorAccent"
  app:tabIndicatorHeight="5dp"/>

 <android.support.v4.view.ViewPager
  android:id="@+id/viewpager"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:background="@android:color/white">

 </android.support.v4.view.ViewPager>

</LinearLayout>

여기 서 우 리 는 tabTextColor 를 사용 하여 Tab 의 텍스트 색상 을 설정 합 니 다.
tabSelected TextColor 는 Tab 이 선택 되 었 을 때 텍스트 색상 을 설정 하 는 데 사 용 됩 니 다.tabIndicatorColor 는 표시 기 색상 을 설정 하 는 데 사 용 됩 니 다.tabIndicator Height 는 지시기 의 높이 를 설정 하 는 데 사 용 됩 니 다.
마지막 으로 효과 보기:

네,TabLayout 의 사용 은 이렇게 많 습 니 다.TabLayout 가 사용 하기에 편리 하고 최종 효과 도 좋 음 을 알 수 있 습 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.