응용 프로그램에서 여러 탭 사이를 전환해야 하는 경우가 종종 있습니다.이 때 우리는 종종 viewPager+TabLayout을 사용하여 이를 달성하지만 공식 TabLayout은 종종 표시기의 길이와 같은 문제와 같은 우리의 요구를 충족하지 않습니다. 수정할 수 없습니다. 이 문서에서는 영리한 해결 방법을 사용합니다.
-
기본 사용
XML에서 사용<com.google.android.material.tabs.TabLayout android:id="@+id/tabLayout" style="@style/MyTabLayoutStyle" android:layout_width="match_parent" android:layout_height="97px" app:tabMaxWidth="0dp" app:tabGravity="fill" app:tabIndicatorFullWidth="false" app:tabMode="fixed" app:tabTextAppearance="@style/TabLayoutTextStyle" > <com.google.android.material.tabs.TabItem android:layout_width="wrap_content" android:layout_height="wrap_content" /> <com.google.android.material.tabs.TabItem android:layout_width="wrap_content" android:layout_height="wrap_content" /> <com.google.android.material.tabs.TabItem android:layout_width="wrap_content" android:layout_height="wrap_content" /> </com.google.android.material.tabs.TabLayout> <androidx.viewpager.widget.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:orientation="vertical">
</androidx.viewpager.widget.ViewPager>
A TabLayout에는 필요한 여러 TabItem이 포함되어 있습니다. TabItem에서 각 항목의 제목 텍스트를 직접 정의하거나 코드에서 재작성된 어댑터의 getpageTitle 설정을 사용할 수 있습니다.
TabItem에는 특별한 설정이 없으며 각 탭에 대한 표시기 및 설정은 TabLayout에 있습니다.
-
아이템 폭을 수정하는 특별한 사용법 : 일반적인 사용시 각 아이템은 중간과 옆으로 밀집되어 있습니다 각 아이템의 폭을 균등하게 나누고 싶다면 이렇게 사용하시면 됩니다. 탭 레이아웃:app:tabMaxWidth="0dp" app:tabGravity="fill" app:tabMode="fixed"
그런 다음 TabLayout의 너비는 match_parent이고
ItemLayout의 너비는 wrap_content
로 텍스트 색상과 크기를 수정합니다
. TabLayout에서 글꼴 크기는 속성으로 직접 설정할 수 없으며 app:tabTextAppearance 속성을 사용하여 글꼴 속성을 설정할 수 있습니다.
스타일로 설정
<style name="TabLayoutTextStyle">
<item name="android:textSize">30px</item>
<item name="textAllCaps">true</item>
<item name="android:textStyle">bold</item>
</style>
然后在TabLayout里引用
app:tabTextAppearance="@style/TabLayoutTextStyle"
textAllCaps는 텍스트가 영문일 때 모두 대문자로 설정하는 것입니다.
android:textStyle은 텍스트를 볼드하게 설정합니다.
텍스트 색상은 스타일에서 설정하거나 TabLayout에서 직접 설정할 수 있습니다.
tabTextColor=""
일반적으로 TabLayout 스타일이 설정됩니다.
<style name="MyTabLayoutStyle" parent="TextAppearance.Design.Tab">
<item name="tabIndicatorColor">@color/green_line</item>
<item name="tabIndicatorHeight">8dp</item>
<item name="tabTextColor">@color/white_text</item>
</style>
tabIndicatorColor设置指示器颜色
tabIndicatorHeight设置指示器高度
tabTextColor 设置文字颜色
표시기 너비 수정:
기본적으로 표시기는 텍스트의 너비에 따라 조정됩니다.모든 너비를 채우려면
많은 사람들이 표시기의 너비를 설정하기 위해 반사 방법을 사용하는 것을 선호하지만 반사 방법은 새 TabLayout의 멤버 변수 이름이 변경되었으며 테스트 후 유효하지 않으며 새 구현 방법을 연구하기에는 너무 게으르다 여기에서 지표의 너비를 설정하는 데 기회 주의적 방법이 사용됩니다.
TabLayout에는 tabIndicatorFullWidth=true/false 속성이 있는데 true일 경우 인디케이터의 폭이 각 Item의 폭이 되고, false일 경우 인디케이터의 폭이 텍스트의 폭이 되므로 false로 설정한다. 여기서는 표시기입니다. 너비는 텍스트의 너비입니다.
그런 다음 리터럴이 정의하는 공백 자리 표시자를 사용합니다.
 
문자열 리소스 파일에서 자리 표시자를 사용하는 방법은 다음과 같습니다.
<string name="notice">Notice  </string>
몇 개의 공백이 필요한 경우 몇 개의 자리 표시자를 추가합니다.
여기서 텍스트의 왼쪽과 오른쪽 끝에 동일한 수의 공백 자리 표시자를 추가하면
표시기가 텍스트보다 넓고 좁은 현상을 실현할 수 있습니다. 각 항목의 총 너비.
때때로 각 항목 사이에 간격이 있는데 이 방법을 사용하여 간격을 시각적으로 표시할 수도 있습니다.실제로 각 항목은 여전히 서로 가까이 있습니다.