android TabLayout 사용 방법 상세 설명

8181 단어 androidtabLayout
Google 은 2015 년 IO 총회 에서 보다 상세 한 Material Design 디자인 규범 을 가 져 왔 으 며 새로운 Android Design Support Library 를 가 져 왔 습 니 다.이 support 라 이브 러 리 에서 Google 은 보다 규범 화 된 MD 디자인 스타일 의 컨트롤 을 제공 합 니 다.무엇 보다 안 드 로 이 드 디자인 서 포트 라 이브 러 리 는 호환성 이 더 넓 어 안 드 로 이 드 2.2 까지 바로 내 려 갈 수 있다.
이틀 동안 경 동의 상세 한 상황 을 모방 한 페이지 를 만들어 야 합 니 다.위의 Tab 전환 은 예전 에 자신 이 Viewpager+fragment 를 썼 거나 Indicator 의 깊이 있 는 맞 춤 형 제작 을 했 습 니 다.TabLayout 를 시도 하려 고 했 기 때문에 아래 의 구덩이 가 생 겼 습 니 다.

그리고 다음은 제 간단 한 실현 효과 입 니 다.

인용 라 이브 러 리 추가

dependencies {
  compile fileTree(dir: 'libs', include: ['*.jar'])
  compile 'com.android.support:appcompat-v7:24.2.0'
  compile 'com.android.support:design:24.2.0'
  compile 'com.android.support:recyclerview-v7:24.2.0'
  compile 'com.android.support:cardview-v7:24.2.0'
}
Toolbar 와 TabLayout
우 리 는 실 현 된 구 조 를 살 펴 보 자.

<?xml version="1.0" encoding="utf-8"?>
<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">

  <android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="48dp"
    android:gravity="center_vertical"
    app:navigationIcon="@drawable/back_icon"
   >

    <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:gravity="center"
      android:orientation="horizontal">

      <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        style="@style/style_c7_s20"
        />

    </LinearLayout>

    <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_gravity="right"
      android:background="@drawable/more_icon" />

  </android.support.v7.widget.Toolbar>

  <View style="@style/horizontal_line" />

  <android.support.v4.view.ViewPager
    android:id="@+id/viewPager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
</LinearLayout>

이 레이아웃 파일 의 가장 중요 한 점 은 android.support.design.widget.TabLayout 탭 에 있 는 app:tabMode="scrollable"입 니 다.그 는 tab 의 모드 를"미 끄 러 질 수 있 는"것 으로 설정 합 니 다.
다른 용법 과 Indicator 의 용법 은 차이 가 많 지 않 습 니 다.어댑터 를 설정 한 다음 에 데 이 터 를 통 해 페이지 의 적합 을 실현 해 야 합 니 다.직접 코드
Adapter

public class ProductDetailPagerAdapter extends FragmentPagerAdapter {

  private List<String> mTitles;

  public ProductDetailPagerAdapter(FragmentManager fm, List<String> mTitles) {
    super(fm);
    this.mTitles = mTitles;
  }

  @Override
  public Fragment getItem(int position) {
    if (position == 0) {
      return new ProductFragment();
    } else if (position == 1) {
      return new ProductDetailFragment();
    }
    return new ProductFragment();
  }

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

  @Override
  public CharSequence getPageTitle(int position) {
    return mTitles.get(position);
  }
}
홈 페이지 의 관련 논리,이곳 의 Fragment 는 간단 한 Fragment 입 니 다.

public class ProductDetailsActivity extends BaseActivity {

  @BindView(R.id.viewPager)
  ViewPager viewPager;
  @BindView(R.id.tabLayout)
  TabLayout tabLayout;
  @BindView(R.id.toolbar)
  Toolbar toolbar;

  private TextView tabProduct;
  private TextView tabDetail;

  private List<String> mTitles = null;
  private ProductDetailPagerAdapter productPagerAdapter = null;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_product_details);
    ButterKnife.bind(this);
    init();
  }

  private void init() {
    initToolbar();
    initViewPager();
  }

  private void initToolbar() {
    setTitle("");
    toolbar.setNavigationOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View view) {
        finish();
      }
    });
    initTab();
    initTabChange();
  }

  private void initTabChange() {
    tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
      @Override
      public void onTabSelected(TabLayout.Tab tab) {
        viewPager.setCurrentItem(tab.getPosition());
        switch (tab.getPosition()){
          case 0:
            tabProduct.setTextColor(getResources().getColor(R.color.c8));
            tabProduct.setTextSize(18);
            break;

          case 1:
            tabDetail.setTextColor(getResources().getColor(R.color.c8));
            tabDetail.setTextSize(18);
            break;
        }
      }

      @Override
      public void onTabUnselected(TabLayout.Tab tab) {
        tabProduct.setTextColor(getResources().getColor(R.color.c7));
        tabDetail.setTextColor(getResources().getColor(R.color.c7));
      }

      @Override
      public void onTabReselected(TabLayout.Tab tab) {

      }
    });
  }

  private void initTab() {
    tabLayout.setSelectedTabIndicatorColor(getResources().getColor(R.color.c8));
    tabLayout.setSelectedTabIndicatorHeight(UIUtils.dp2px(this, 2));
    tabLayout.setTabTextColors(R.color.c7, R.color.c8);

    tabLayout.addTab(tabLayout.newTab().setCustomView(R.layout.item_detail_tab_product_layout));
    tabProduct= (TextView) findViewById(R.id.tab_product);
    tabProduct.setTextColor(getResources().getColor(R.color.c8));

    tabLayout.addTab(tabLayout.newTab().setCustomView(R.layout.item_detail_tab_detail_layout));
    tabDetail= (TextView) findViewById(R.id.tab_detail);
    tabProduct.setTextColor(getResources().getColor(R.color.c7));
    
  }

  private void initViewPager() {
    mTitles = new ArrayList<>();
    mTitles.add("  ");
    mTitles.add("  ");
    productPagerAdapter = new ProductDetailPagerAdapter(getSupportFragmentManager(), mTitles);
    viewPager.setAdapter(productPagerAdapter);
    viewPager.addOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
      @Override
      public void onPageSelected(int position) {
        tabLayout.getTabAt(position).select();
      }
    });
  }


  public static void open(Context context) {
    Intent intent = new Intent(context, ProductDetailsActivity.class);
    context.startActivity(intent);
  }
}

저 는 많은 사람들 이 위의 코드 를 보면 귀 찮 을 것 이 라 고 믿 습 니 다.사실은 저도 이런 맞 춤 형 제작 이 가능 하지만 예전 의 쓰기 에 비해 코드 가 줄 어 들 지 않 았 습 니 다.저 는 사용자 정의 컨트롤 을 사용 하 는 것 을 권장 합 니 다.예전 에 안 드 로 이 드 만능 인디케이터 가 있 었 기 때문에 많은 사람들 이 참고 할 수 있 습 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기