Tablayot 간단 한 사용 방법 요약

본 고 는 Tablayot 의 간단 한 사용 방법 을 공유 하여 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.

TabLayout
프로젝트 에서 viewpager 를 사용 할 때 대부분 TabPagerIndicator 와 결합 하여 사용 합 니 다.TabPagerIndicator 는 제3자 로 사용 하기에 비교적 번 거 롭 습 니 다.
2015 구 글 대 회 는 공식 적 으로 TabLayout 를 발 표 했 는데 이런 효 과 를 간단 하고 완벽 하 게 실현 할 수 있다.
공식 적 으로 발 표 된 것 이기 때문에 제3자 의 물건 을 사용 하지 않 는 다.그리고 아주 간단명료 하 다.
마찬가지 로 Tablayot 를 사용 하려 면 build 에 설정 해 야 합 니 다.

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

먼저 레이아웃 보기:

<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="www.tablayout.com.tablayoutdemo.MainActivity"> 
 
 <!-- 
 app:tabIndicatorColor="@color/white" //            
 app:tabSelectedTextColor="@color/gray" // tab    ，      
 app:tabTextColor="@color/white" // tab        
 app:tabMode="scrollable" //         
 --> 
 <android.support.design.widget.TabLayout 
 android:id="@+id/tablayout" 
 android:layout_width="match_parent" 
 android:layout_height="wrap_content" 
 android:background="@android:color/holo_blue_light" 
 app:tabIndicatorColor="@android:color/holo_red_dark" 
 app:tabSelectedTextColor="@android:color/holo_red_dark" 
 app:tabTextColor="@android:color/background_dark" 
 app:tabMode="scrollable" 
 /> 
 
 <android.support.v4.view.ViewPager 
 android:id="@+id/viewpager" 
 android:layout_width="match_parent" 
 android:layout_height="0dp" 
 android:layout_weight="1" /> 
 
</LinearLayout>

코드 사용 도 아주 간단 합 니 다.
첫 번 째:ViewPager 초기 화 및 adapter 설정
두 번 째 단계:Tablayot 에 제목 설정
STEP 3:Tablayot 와 ViewPager 연결

//   ：   ViewPager   adapter 
 viewPager = (ViewPager) findViewById(R.id.viewpager); 
 viewPager.setAdapter(new MyViewPagerAdapter(getSupportFragmentManager(), fragmentList)); 
 
 //   ：   Tablayout， ViewPager    （   ） 
 tabLayout = (TabLayout) findViewById(R.id.tablayout); 
 
 tabLayout.addTab(tabLayout.newTab().setText("UFC"));//  tab    
 tabLayout.addTab(tabLayout.newTab().setText("   ")); 
 tabLayout.addTab(tabLayout.newTab().setText("   ")); 
 tabLayout.addTab(tabLayout.newTab().setText("  ")); 
 tabLayout.addTab(tabLayout.newTab().setText("     ")); 
 tabLayout.addTab(tabLayout.newTab().setText("K-1")); 
 
 //   ：  ViewPager 
 tabLayout.setupWithViewPager(viewPager); 

자,정상 적 인 상황 에서 여기 서 끝 났 습 니 다.하지만 저 는 이 demo 를 쓸 때 구 덩이 를 만 났 습 니 다.
제목 이 보이 지 않 고 오래 걸 렸 습 니 다.마지막 으로 Tablayot 관련 Viewpager 에 새 설정 에서 제목 을 추가 하면 됩 니 다.

//   ViewPager        ，        
 tabLayout.getTabAt(0).setText("UFC"); 
 tabLayout.getTabAt(1).setText("   "); 
 tabLayout.getTabAt(2).setText("   "); 
 tabLayout.getTabAt(3).setText("  "); 
 tabLayout.getTabAt(4).setText("     "); 
 tabLayout.getTabAt(5).setText("K-1"); 

전체적으로 보면 Tablayot 는 TabPager Indicator 를 대체 할 수 있 고 사용 하기에 비교적 간단 하 며 가장 중요 한 것 은 공식 적 인 것 이다.

2.Tablayot 밑줄 너비 변경 방법:
먼저 Google 공식 은 밑줄 의 폭 을 변경 하 는 방법 을 제공 하지 않 았 습 니 다.
우 리 는 다른 방법 을 통 해 변경 할 수 있다.(두 단계)
1.먼저 setIndicator()방법 을 정의 합 니 다.

public void setIndicator(TabLayout tabs,int leftDip,int rightDip){ 
 Class<?> tabLayout = tabs.getClass(); 
 Field tabStrip = null; 
 try { 
 tabStrip = tabLayout.getDeclaredField("mTabStrip"); 
 } catch (NoSuchFieldException e) { 
 e.printStackTrace(); 
 } 
 
 tabStrip.setAccessible(true); 
 LinearLayout llTab = null; 
 try { 
 llTab = (LinearLayout) tabStrip.get(tabs); 
 } catch (IllegalAccessException e) { 
 e.printStackTrace(); 
 } 
 
 int left = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, leftDip, Resources.getSystem().getDisplayMetrics()); 
 int right = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, rightDip, Resources.getSystem().getDisplayMetrics()); 
 
 for (int i = 0; i < llTab.getChildCount(); i++) { 
 View child = llTab.getChildAt(i); 
 child.setPadding(0, 0, 0, 0); 
 LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(0, LinearLayout.LayoutParams.MATCH_PARENT, 1); 
 params.leftMargin = left; 
 params.rightMargin = right; 
 child.setLayoutParams(params); 
 child.invalidate(); 
 } 
} 

2.ViewPager 에 연결 하기 전에 추가

tabLayout.post(new Runnable() { 
 @Override 
 public void run() { 
 setIndicator(tabLayout,25,25); 
 } 
 }); 

마지막 으로 미끄럼 방식 변경 하기:   app:tabMode="fixed"
좌우 거 리 는 자신의 항목 에 따라 설정 할 수 있 습 니 다.(밑줄 너비 변경 은 첫 번 째 단계(Tablayot 일반 용법)에서 변경 해 야 합 니 다.

3.탭 정렬 방식 변경
xml 파일 에서:
app:tabMode="를 삭제 합 니 다.
app:tabGravity="center"추가 하기;
그런대로 통과 할 수 있다   app:tabMaxWidth="150dp"  탭 너비 제한
(탭 정렬 방식 변경 은 첫 번 째 단계(Tablayot 일반 용법)에서 변경 해 야 합 니 다)

4.제목 사이 에 분할 선 추가 하기;
1.drawable 폴 더 아래 shape 만 들 기

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android"> 
 <solid android:color="#aa00ff00" /> 
 <size android:width="1dp"/> 
</shape> 

2.주 클래스 에 tablayot 를 설정 한 후 다음 코드 를 추가 합 니 다.

LinearLayout linearLayout = (LinearLayout) tabLayout.getChildAt(0); 
linearLayout.setShowDividers(LinearLayout.SHOW_DIVIDER_MIDDLE); 
linearLayout.setDividerDrawable(ContextCompat.getDrawable(this, R.drawable.layout_divider_vertical)); 
linearLayout.setDividerPadding(15); 

클릭 하여 링크 열기 무료원본 코드 다운로드
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.