[Android] Action Bar의 TabBar의 Text 색상을 변경합니다.

7098 단어 AndroidJava

1. 시작


Qittaro의 Action Bar 아래에 레이블 표시줄을 설치했습니다.
SupportLibraryViewPager를 사용하여 Swipe에서 전환Fragment하면 현재 표시된 페이지의 제목과 Swip의 위치를 볼 수 있습니다.
같은 화면 배열이어서 적용ViewPager했습니다.
표준에 따라 설치ViewPager+TabBar하면 제목 아래에 인디케이터가 표시되어 현재 위치가 이해하기 쉽다.
하지만 색깔의 분배와 응용 프로그램의 세계관에서 현재 위치의 제목의 색깔도 바뀌어야 한다고 생각해서 실시해 봤는데 그 노트가 됐어요.
설치하기 전에 개인적으로 제작한 Action Bar의 스타일을 잘 모르시는 분들에게 추천하는 Generator를 소개해드리고 싶어요.

2. ActionBar Generator 소개



Android Action Bar Style Generator
색상만 결정하면 해당 Action Bar 웹 사이트를 만들 수 있습니다.
Qittaro는 이것을 사용하여 Theme를 구현했습니다.
다양한 색상, DOWNLOAD 결정ZIP 버튼을 눌러 zip 파일을 다운로드하고 풀고 각 디렉토리의 파일을 모두 복사합니다.
그리고 AndroidManifext.xml<application></application> 또는 <activity></activity>android:theme을 설정하면 간단하게 실현할 수 있다.
이번 기회에 꼭 해보세요.
그럼 저는 TabBar의 Text 색상 변경을 실시하고 싶습니다.

3. TabBar 색상 변경


이번에 전체 .xml 문서를 모두 실현할 수 있다.
그러니 소스 코드를 읽어 보세요.
먼저 선택 상태의 색상과 비선택 상태의 색상을 생성합니다.
color.xml
<!-- res/values/color.xml -->
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- 緑っぽい色 -->
    <color name="action_bar_tab_selected_color">#0ACE00</color>
    <!-- 白 -->
    <color name="action_bar_tab_un_selected_color">#000000</color>
</resources>
다음은 colorResource를 만듭니다.
action_bar_tab_text.xml
<!-- res/color/action_bar_tab_text.xml -->
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 現在選択されている -->
    <item android:color="@color/action_bar_tab_selected_color" android:state_selected="true" />
    <item android:color="@color/action_bar_tab_selected_color" android:state_focused="true" />
    <item android:color="@color/action_bar_tab_selected_color" android:state_active="true" />
    <item android:color="@color/action_bar_tab_selected_color" android:state_pressed="true" />
    <!-- 選択されていない -->
    <item android:color="@color/action_bar_tab_un_selected_color" android:state_selected="false" />
    <item android:color="@color/action_bar_tab_un_selected_color" android:state_active="false" />
    <item android:color="@color/action_bar_tab_un_selected_color" android:state_focused="false" />
    <item android:color="@color/action_bar_tab_un_selected_color" android:state_pressed="false" />
</selector>
true된 곳은 선택상태의 값이고, false된 곳은 비선택상태이다.
이것을 ActionBar.TabText의 스타일에 끼워 쓰세요.
styles.xml
<!-- res/values/styles.xml -->
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- 省略 -->
    <style name="ActionBar.TabText.Sample" parent="@style/Widget.AppCompat.Light.ActionBar.TabText">
        <item name="android:textColor">@color/action_bar_tab_text</item>
    </style>
    <style name="ActionBar.Solid.Sample" parent="@style/Widget.AppCompat.Light.ActionBar.Solid">
        <item name="actionBarTabTextStyle">@style/ActionBar.TabText.Qittaro</item>
    </style>
    <!-- 省略 -->
</resources>
styleActionBar.Solid.SampleAndroidManifext.xml의 Theme에 적용합니다.
그럼 이런 느낌이야.

이렇게 실현하면 완성된다.

4. 끝


상당히 간단하지만 스타일 주변에서 이해가 되지 않는 자신에게 힘든 실상이다.
먼 길을 고생스럽게 돌아다녔을 뿐인데 아무래도 알 것 같다.
나는 앞으로 혼자서 조합해 보고 싶다.
작은 실복을 만들어서 가능하면 Qittaro를 보세요.

이상입니다.

좋은 웹페이지 즐겨찾기