Android TabLayout 경 동 상세 효과 구현

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">


 <LinearLayout
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:background="@color/c12"
  android:gravity="center_vertical"
  android:minHeight="45dp"
  android:orientation="horizontal"
  android:paddingLeft="15dp"
  android:paddingRight="15dp">

  <ImageView
   android:id="@+id/back"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:background="@drawable/back_icon" />

  <LinearLayout
   android:layout_width="0dp"
   android:layout_height="match_parent"
   android:layout_weight="1"
   android:orientation="horizontal">

   <android.support.design.widget.TabLayout
    android:id="@+id/tabLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:tabTextAppearance="@style/TabLayoutTextStyle"
    app:tabGravity="center"
    app:tabMode="fixed"
    app:tabTextColor="@color/c7"
    app:tabSelectedTextColor="@color/c8"/>

  </LinearLayout>

  <ImageView
   android:id="@+id/toolbar_more"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_marginLeft="10dp"
   android:background="@drawable/more_icon" />
 </LinearLayout>

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

 <android.support.v4.view.ViewPager
  android:id="@+id/viewPager"
  android:layout_width="match_parent"
  android:layout_height="0dp"
  android:layout_weight="1" />


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

 <LinearLayout
  android:layout_width="match_parent"
  android:layout_height="48dp"
  android:background="@color/c12"
  android:orientation="horizontal">

  <LinearLayout
   android:layout_width="0dp"
   android:layout_height="match_parent"
   android:layout_weight="1">

   <TextView
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:gravity="center"
    android:text="  "
    android:textSize="10sp" />

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

   <TextView
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:gravity="center"
    android:text="   "
    android:textSize="10sp" />
  </LinearLayout>

  <LinearLayout
   android:layout_width="0dp"
   android:layout_height="match_parent"
   android:layout_weight="1.5"
   android:background="@color/c8"
   android:gravity="center">

   <TextView
    style="@style/style_c12_s16"
    android:gravity="center"
    android:text="     " />
  </LinearLayout>
 </LinearLayout>
</LinearLayout>

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

public class ProductDetailPagerAdapter extends FragmentPagerAdapter {

 private List<Fragment> mFragments=null;
 private List<String> mTitles=null;

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

 public ProductDetailPagerAdapter(FragmentManager fm, Fragment... fragments) {
  super(fm);
  this.mFragments = Arrays.asList(fragments);
 }

 @Override
 public Fragment getItem(int position) {
  return mFragments.get(position);
 }

 @Override
 public int getCount() {
  return mFragments.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.toolbar_more)
 ImageView toolbarMore;
 @BindView(R.id.tabLayout)
 TabLayout tabLayout;

 private List<Fragment> mFragments;
 private String[] titles = new String[]{"  ", "  "};
 private ProductDetailPagerAdapter productPagerAdapter = null;
 private MorePopupWindow popupWindow = null;

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

 private void init() {
  initViewPager();
 }

 private void initViewPager() {
  mFragments = new ArrayList<>();
  mFragments.add(new ProductFragment());
  mFragments.add(new ProductDetailFragment());

  productPagerAdapter = new ProductDetailPagerAdapter(getSupportFragmentManager(), mFragments, Arrays.asList(titles));
  viewPager.setOffscreenPageLimit(2);
  viewPager.setAdapter(productPagerAdapter);
  viewPager.setCurrentItem(1);
  tabLayout.setupWithViewPager(viewPager);
 }


 @OnClick(R.id.back)
 public void backClick() {
  finish();
 }

 @OnClick(R.id.toolbar_more)
 public void moreClick() {
  
 }

 private AdapterView.OnItemClickListener onItemClickListener = new AdapterView.OnItemClickListener() {
  @Override
  public void onItemClick(AdapterView<?> parent, View view, int position,
        long id) {
   popupWindow.dismiss();
  }
 };


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

위의 코드 는 모두 비교적 간단 하 며 너무 많은 설명 을 하지 않 습 니 다.TabLayout 를 사용 할 때 주의해 야 합 니 다.
tabmode 는 두 개의 속성 값 이 있 습 니 다:
MODE_FIXED:Fixed tabs display all tabs concurrently and are best used with content that benefits from quick pivots between tabs.
MODE_SCROLLABLE:Scrollable tabs display a subset of tabs at any given moment, and can contain longer tab labels and a larger number of tabs.
MODE_SCROLLABLE 는 많은 tabs 의 경우 에 적합 하 며 구 를 수 있 습 니 다.경 동의 그런 밀 착 효 과 를 실현 하려 면 MODE 가 필요 합 니 다.FIXED 입 니 다.
개발 수 요 를 더욱 잘 만족 시 키 기 위해 TabLayout 는 사용자 정의 TabLayout 스타일 을 실현 한 다음 도입 을 통 해
app:tabTextAppearance=""
tab 에 사용자 정의 icon 추가
현재 TabLayout 에 서 는 icon 을 추가 할 방법 이 없습니다.SpannableString 을 사용 하여 ImageSpan 과 결합 하여 실현 할 수 있 습 니 다.

private int[] imageResId = {
  R.drawable.ic_one,
  R.drawable.ic_two,
  R.drawable.ic_three
};
 
// ...
 
@Override
public CharSequence getPageTitle(int position) {
 // Generate title based on item position
 // return tabTitles[position];
 Drawable image = context.getResources().getDrawable(imageResId[position]);
 image.setBounds(0, 0, image.getIntrinsicWidth(), image.getIntrinsicHeight());
 SpannableString sb = new SpannableString(" ");
 ImageSpan imageSpan = new ImageSpan(image, ImageSpan.ALIGN_BOTTOM);
 sb.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
 return sb;
}

실행,표시 되 지 않 음 을 발 견 했 습 니 다.이것 은 TabLayout 가 만 든 tab 의 기본 설정 textAllCaps 속성 이 true 이기 때 문 입 니 다.이 는 ImageSpan 이 렌 더 링 되 는 것 을 막 았 습 니 다.아래 스타일 파일 정 의 를 통 해 변경 할 수 있 습 니 다.

<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
  <item name="tabTextAppearance">@style/MyCustomTextAppearance</item>
</style>
 
<style name="MyCustomTextAppearance" parent="TextAppearance.Design.Tab">
  <item name="textAllCaps">false</item>
</style>

그리고 getPageTitle 방법 에 제목 이 있 는 tab 를 설정 합 니 다.

@Override
public CharSequence getPageTitle(int position) {
 // Generate title based on item position
 Drawable image = context.getResources().getDrawable(imageResId[position]);
 image.setBounds(0, 0, image.getIntrinsicWidth(), image.getIntrinsicHeight());
 // Replace blank spaces with image icon
 SpannableString sb = new SpannableString(" " + tabTitles[position]);
 ImageSpan imageSpan = new ImageSpan(image, ImageSpan.ALIGN_BOTTOM);
 sb.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
 return sb;
}

TabLayout 는 사용자 정의 View 도 지원 합 니 다.getTabView 를 통 해 설정 하면 어떻게 실현 되 는 지 는 말 하지 않 고 관심 있 는 것 은 스스로 연구 할 수 있 습 니 다.

부분 코드:https://github.com/xiangzhihong/jingdongApp
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.