code

TabLayout 탭 스타일

codestyles 2021. 1. 5. 08:08
반응형

TabLayout 탭 스타일


나는 도서관 TabLayout에서 새로운 것을 사용 com.android.support:design합니다. 선택 / 선택하지 않은 탭의 배경을 변경하고 싶습니다. 나는 소스를보고 tabBackground모든 탭 색상을 변경하고 선택한 탭 색상을 제어하지 않는 속성 만 발견했습니다 .

선택 / 선택되지 않은 탭 배경을 제어하려면 어떻게해야합니까?


밝히다:

    <style name="AppTabLayout" parent="Widget.Design.TabLayout">
        <item name="tabMaxWidth">@dimen/tab_max_width</item>
        <item name="tabIndicatorColor">?attr/colorAccent</item>
        <item name="tabIndicatorHeight">4dp</item>
        <item name="tabPaddingStart">6dp</item>
        <item name="tabPaddingEnd">6dp</item>
        <item name="tabBackground">?attr/selectableItemBackground</item>
        <item name="tabTextAppearance">@style/AppTabTextAppearance</item>
        <item name="tabSelectedTextColor">@color/range</item>
    </style>

    <!-- for text -->
    <style name="AppTabTextAppearance" parent="TextAppearance.Design.Tab">
        <item name="android:textSize">12sp</item>
        <item name="android:textColor">@color/orange</item>
        <item name="textAllCaps">false</item>
    </style>

대다:

<android.support.design.widget.TabLayout
    style="@style/AppTabLayout"
    app:tabTextAppearance="@style/AppTabTextAppearance"
    android:layout_width="match_parent"
    .... />

을 살펴보면 탭의 실제 레이아웃이 TabLayout.class내부에 있음 TabView.class알 수 있습니다. isSelected속성이 있는 다른 레이아웃과 동일한 레이아웃 입니다. 탭을 선택하는 것도 이에 영향을 미치므로 다음과 같은 선택기 배경 드로어 블을 생성하기 만하면됩니다.

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:drawable="@color/tab_bg_selected"/>
<item android:drawable="@color/tab_bg_unselected"/></selector>

예를 들어 XML에서 tabBackground 속성에 첨부하십시오.

<android.support.design.widget.TabLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabBackground="@drawable/tab_bg"
            app:tabIndicatorHeight="4dp"/>

나는 How to Style ActionBar, tab background on selected tab을 읽고 무엇을해야하는지 알아 냈다. 정말 비슷한 문제이지만 특별히 다음과 같은 멋진 솔루션을 찾았습니다 TabLayout.

<android.support.design.widget.TabLayout
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="48dp"
    android:background="@color/tab_layout_color"
    app:tabIndicatorHeight="48dp"
    app:tabIndicatorColor="@color/selected_tab_color"
    />

참고 그 layout_heighttabIndicatorHeight같은 높이가 있습니다. 따라서이 방법으로 예쁜 전환 애니메이션을 얻을 수 있습니다.


나도이 문제를 만났다. 방금 tabIndicatorColor전체 프로젝트에서 검색 한 결과 일부에서 다음 코드를 찾았습니다 R.java.

       @see #TabLayout_tabBackground
       @see #TabLayout_tabContentStart
       @see #TabLayout_tabGravity
       @see #TabLayout_tabIndicatorColor
       @see #TabLayout_tabIndicatorHeight
       @see #TabLayout_tabMaxWidth
       @see #TabLayout_tabMinWidth
       @see #TabLayout_tabMode
       @see #TabLayout_tabPadding
       @see #TabLayout_tabPaddingBottom
       @see #TabLayout_tabPaddingEnd
       @see #TabLayout_tabPaddingStart
       @see #TabLayout_tabPaddingTop
       @see #TabLayout_tabSelectedTextColor
       @see #TabLayout_tabTextAppearance
       @see #TabLayout_tabTextColor

그래서 문제가 해결되었습니다. 이것이 당신에게 도움이되기를 바랍니다.
즉, IDEA를 사용합니다.

참조 URL : https://stackoverflow.com/questions/30754203/tablayout-tab-style

반응형