Android 는 TabLayout+Fragment 를 사용 하여 상단 옵션 을 구현 합 니 다.

효과 그림 먼저 보기:

Tablayout 을 사용 하려 면 먼저 프로젝트 에 Design 가방 을 넣 어야 합 니 다.

dependencies {
  compile 'com.android.support:design:24.1.1' 
}

activitymain.xml 레이아웃 파일 중

<LinearLayout 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"
  android:orientation="vertical"
  tools:context="zhengliang.com.tablayout.MainActivity">
  <android.support.design.widget.TabLayout
    android:id="@+id/tab"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimary"
    >
  </android.support.design.widget.TabLayout>
  <android.support.v4.view.ViewPager
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1" />
</LinearLayout>

안에 Tablayot 하나 랑 ViewPager 하나 있 으 면 돼 요.
위의 효 과 를 실현 하려 면 몇 개의 Fragment 를 만들어 야 합 니 다.여기 서 편리 하도록 기본 적 인 Fragment 가 필요 할 때 new 를 직접 만 들 면 됩 니 다.실현 코드 는 다음 과 같 습 니 다.

public class BlankFragment extends Fragment {
  public BlankFragment() {
  }
  public static BlankFragment newInstance(String text){
    Bundle bundle = new Bundle();
    bundle.putString("text",text);
    BlankFragment blankFragment = new BlankFragment();
    blankFragment.setArguments(bundle);
    return blankFragment;
  }
  @Override
  public View onCreateView(LayoutInflater inflater, ViewGroup container,
               Bundle savedInstanceState) {
    return inflater.inflate(R.layout.fragment_blank, container, false);
  }
  @Override
  public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
    super.onViewCreated(view, savedInstanceState);
    TextView textView = (TextView) view.findViewById(R.id.pager_text);
    textView.setText(getArguments().getString("text"));
  }
}

Fragment 가 있 으 면 ViewPager Adapter 를 하나 더 실현 해 야 합 니 다.

public class MyAdapter extends FragmentPagerAdapter {
  private List<String> list;
  public MyAdapter(FragmentManager fm, List<String> list) {
    super(fm);
    this.list = list;
  }
  @Override
  public Fragment getItem(int position) {
    return BlankFragment.newInstance(list.get(position));
  }
  @Override
  public int getCount() {
    return list.size();
  }
  @Override
  public CharSequence getPageTitle(int position) {
    return list.get(position);
  }
}

Adapter 의 작성 방법 은 매우 간단 합 니 다.Adapter 를 사용자 정의 할 때 getPagerTitle()방법 을 다시 써 야 합 니 다.이 방법 은 Tablayot 와 ViewPager 가 연결 되 었 을 때 Tab 탭 의 제목 을 연결 하기 위 한 것 입 니 다.
모든 준비 가 다 되 었 습 니 다.MainActivity.java 의 코드 를 직접 보십시오.

public class MainActivity extends AppCompatActivity {
  private TabLayout tab;
  private ViewPager pager;
  private List<String> list;
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    /*     */
    initViews();
    /*     */
    initData();
    /*  Adapter*/
    pager.setAdapter(new MyAdapter(getSupportFragmentManager(),list));
    /*Tab ViewPager  */
    tab.setupWithViewPager(pager);
  }
  /*     */
  private void initData() {
    list = new ArrayList<>();
    for (int i = 0; i < 5 ; i++) {
      list.add(String.format(Locale.CHINA," %02d ",i));
    }
  }
  /*     */
  private void initViews() {
    this.pager = (ViewPager) findViewById(R.id.pager);
    this.tab = (TabLayout) findViewById(R.id.tab);
  }
}

여기까지 기본적으로 위의 그림 의 효 과 를 실 현 했 습 니 다.그 안에 중요 한 코드 가 있 습 니 다.tab.setup With ViewPager(pager);이 코드 를 추가 해야만 Tab 와 ViewPager 의 연결 을 실현 할 수 있 습 니 다.
TabLayout 에서 자주 사용 하 는 속성 을 소개 합 니 다:
Tab 탭 의 기본 글꼴 색상 설정:

app:tabTextColor="#ddd"

Tab 탭 에서 선택 한 글꼴 색상 설정:

app:tabSelectedTextColor="@color/colorAccent"

표시 기의 색상 설정:

app:tabIndicatorColor="@color/colorAccent"

표시 기의 높이 설정:(값 이 0dp 일 때 표시 기 는 숨겨 진 상태 입 니 다)

app:tabIndicatorHeight="5dp"

Tablayot 의 중요 한 속성:app:tabMaode이 속성 은 두 개의 값 이 있 습 니 다:### scrollable,fixed"fixed"
Tab 라벨 은 얼마 가 되 든 고정 되 어 있 기 때문에 라벨 이 많 을 때 한데 몰 리 고 라벨 에 있 는 텍스트 가 불완전 하 게 표 시 됩 니 다.
다음 그림:
app:tabMode="fixed"scrollable
스크롤 이 가능 합 니 다.Tab 의 탭 이 화면의 너 비 를 초과 하면 수업 이 미 끄 러 지 는 효과 가 자동 으로 나타 납 니 다.탭 이 너무 많 을 때 탭 을 직접 미 끄 러 뜨 릴 수 있 습 니 다.app:tabMode="scrollable"다음 그림:

자,위 에 있 는 것들 이 TabLayout 의 가장 기본 적 인 용법 입 니 다.
위 에서 말 한 것 은 소 편 이 소개 한 안 드 로 이 드 가 TabLayout+Fragment 를 사용 하여 상단 옵션 을 실현 하 는 것 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.소 편 은 제때에 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!