Android TabLayout의 기본 사용법과 인디케이터의 위치를 완벽하게 조정하는 스킬

응용 프로그램에서 여러 탭 사이를 전환해야 하는 경우가 종종 있습니다.이 때 우리는 종종 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에 있습니다.


  1. 아이템 폭을 수정하는 특별한 사용법 : 일반적인 사용시 각 아이템은 중간과 옆으로 밀집되어 있습니다 각 아이템의 폭을 균등하게 나누고 싶다면 이렇게 사용하시면 됩니다. 탭 레이아웃:

    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로 설정한다. 여기서는 표시기입니다. 너비는 텍스트의 너비입니다.

그런 다음 리터럴이 정의하는 공백 자리 표시자를 사용합니다.

&#160;

문자열 리소스 파일에서 자리 표시자를 사용하는 방법은 다음과 같습니다.

<string name="notice">Notice&#160;&#160;</string>

몇 개의 공백이 필요한 경우 몇 개의 자리 표시자를 추가합니다.
여기서 텍스트의 왼쪽과 오른쪽 끝에 동일한 수의 공백 자리 표시자를 추가하면
표시기가 텍스트보다 넓고 좁은 현상을 실현할 수 있습니다. 각 항목의 총 너비.

때때로 각 항목 사이에 간격이 있는데 이 방법을 사용하여 간격을 시각적으로 표시할 수도 있습니다.실제로 각 항목은 여전히 ​​서로 가까이 있습니다.

Je suppose que tu aimes

Origine blog.csdn.net/ligaoyuan8030/article/details/110112965
conseillé
Classement