SlidingTabsBasicのタブとタブの中に入るテキスト周りをカスタマイズする方法のメモです。
indicatorの色と線の幅、dividerの線の縦幅と横幅を変える
SlidingTabStrip.java
//indicator
private static final int DEFAULT_BOTTOM_BORDER_THICKNESS_DIPS = 2;//底の線の太さ
private static final byte DEFAULT_BOTTOM_BORDER_COLOR_ALPHA = 0x26;
private static final int SELECTED_INDICATOR_THICKNESS_DIPS = 8;//indicatorの太さ
private static final int DEFAULT_SELECTED_INDICATOR_COLOR = 0xFF33B5E5;//色
//divider
private static final int DEFAULT_DIVIDER_THICKNESS_DIPS = 1;//線の太さ(横幅)
private static final byte DEFAULT_DIVIDER_COLOR_ALPHA = 0x20;
private static final float DEFAULT_DIVIDER_HEIGHT = 0.5f;//線の高さ 1.0fで100%の高さ(縦幅)
- 各設定値を変えれば変更できます。
indicatorとdividerの色をsetCustomTabColorizerで変える
SlidingTabsBasicFragment.java
mSlidingTabLayout.setCustomTabColorizer(new SlidingTabLayout.TabColorizer() {
@Override
public int getIndicatorColor(int position) {
return SlidingTabsBasicFragment.this.getResources().getColor(R.color.black);
}
@Override
public int getDividerColor(int position) {
return SlidingTabsBasicFragment.this.getResources().getColor(R.color.white);
}
});
- indicatorは
SlidingTabsBasicFragment
のmSlidingTabLayout
にsetCustomTabColorizer
しても色を変えられます。
タブの中のテキストのfontsizeとpadding(左上右上)、テキスト色、背景色を変える
SlidingTabLayout.java
private static final int TAB_VIEW_PADDING_DIPS = 16;//padding全方向
private static final int TAB_VIEW_TEXT_SIZE_SP = 12;//fontsize
protected TextView createDefaultTabView(Context context) {
/*
省略
*/
//背景色の設定
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {
// If we're running on Honeycomb or newer, then we can use the Theme's
// selectableItemBackground to ensure that the View has a pressed state
TypedValue outValue = new TypedValue();
getContext().getTheme().resolveAttribute(android.R.attr.selectableItemBackground,outValue, true);
textView.setBackgroundResource(outValue.resourceId);
}
/*
省略
*/
//paddingの設定
int padding = (int) (TAB_VIEW_PADDING_DIPS * getResources().getDisplayMetrics().density);
textView.setPadding(padding, padding, padding, padding);//左上右下の順
//テキスト色の設定
textView.setTextColor(getResources().getColor(R.color.white));
return textView;
}
- 余白
TAB_VIEW_PADDING_DIPS
とフォントの大きさはTAB_VIEW_TEXT_SIZE_SP
で設定できます。 - 各方向でpaddingを変えたい場合は、
createDefaultTabView
の中のsetPadding
しているところに各方向の値を作成して代入します。 - テキストの色を変えたい場合はtextViewに
setTextColor
をセットします。 - 背景色はsetBackgroundResourceのところで設定してあるので、お好みにカスタマイズしたい場合は、上の背景色のところはすべてコメントアウトして、別にbackground.xml(下記)を作って、
textView.setBackgroundResource(R.drawable.background)
してあげれば変更できます。focusの色などを設定すればタップした時に色を変えられます。しかし、これを設定するとindicatorとdividerの上に色をかぶせることになるっぽいので、indicatorと区切り線(divider)が見えなくなります(透過させたらいい感じになるかも)。
background.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:drawable="@color/tabfocus"></item>
<item android:state_selected="true" android:drawable="@color/tabselected"></item>
<item android:state_pressed="true" android:drawable="@color/tabpressed"></item>
<item android:state_pressed="false" android:drawable="@color/tab"></item>
</selector>
テキスト(タブ)の外にmarginを入れる
SlidingTabLayout.java
//タブの外側に余白を入れる
LinearLayout.LayoutParams txtParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
float margin = getContext().getResources().getDisplayMetrics().density * 2;//2dp
txtParams.setMargins((int)margin, (int)margin, (int)margin, (int)margin);//左,上,右,上
textView.setLayoutParams(txtParams);
//textView.invalidate();//再描画が必要な場合は入れる
fragment_sample.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.example.android.common.view.SlidingTabLayout
android:id="@+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/white" />
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="0px"
android:layout_weight="1"
android:background="@android:color/white"/>
</LinearLayout>
- 余白を単位dpに変換して、最終的に先ほど出てきた上述のtextViewにセットします。
- 何番目のタブと何番目のタブだけ・・・とかに設定したい場合は、
populateTabStrip()
のfor文の中のtabTitleView
にセットすれば変更できます。 - 空いた隙間の色は、
com.example.android.common.view.SlidingTabLayout
にandroid:background="@color/white"
を入れると良いです。dividerとindicatorなどが少し見える場合があるので、その時は線の幅を0にしておけば見えなくなります。
SlidingTabsBasicのサンプルダウンロード
Android Developers - SlidingTabsBasic
http://developer.android.com/samples/SlidingTabsBasic/index.html