Updated, 2015-11-11
Updated, 2015-10-10
안드로이드에서 tab 관련 library 를 제공하고 있는 듯 하다. 아래 글을 참고하자.- Android Design Support Library | Android Developers Blog
- TabLayout + Fragment + ViewPager 예제 : Android Tabs Example - With Fragments and ViewPager - Truiton
SlidingTabLayout 은 기본적으로 tab 의 text color 는 설정이 되어있지 않다.
색을 수정하기 위해 ref. 2 에서는 소스 수정을 알려준다. 그런데 개인적으로 이 방법은 code에 연관성(coupling) 이 커진다. 왜냐하면 project 의 R 을 이용하는 모양새여서 이다. 뭐 design 을 잘해주면 좀 더 decoupled 된 소스를 만들 수 있을 수 있다.
여하튼 그보다 간단한 방법은 SlidingTabLayout 에서 사용하는 SlidingTabString class 를 수정하는 것이다. 소스코드라 내키지 않을 수 있지만, 번거롭게 여러 설정을 하는 것보다는 훨씬 간단하다.
그러나 여전히 selected text 에 대한 색은 정해줄 수 없다.
소스를 참고하자.
class SlidingTabStrip extends LinearLayout {
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 = 4;
// private static final int DEFAULT_SELECTED_INDICATOR_COLOR = 0xffe5e4dd;
private static final int DEFAULT_SELECTED_INDICATOR_COLOR = 0xffffffff;
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;
...
@Override
protected void onDraw(Canvas canvas) {
final int height = getHeight();
final int childCount = getChildCount();
final int dividerHeightPx = (int) (Math.min(Math.max(0f, mDividerHeight), 1f) * height);
final SlidingTabLayout.TabColorizer tabColorizer = mCustomTabColorizer != null
? mCustomTabColorizer
: mDefaultTabColorizer;
// Thick colored underline below the current selection
if (childCount > 0) {
View selectedTitle = getChildAt(mSelectedPosition);
int left = selectedTitle.getLeft();
int right = selectedTitle.getRight();
int color = tabColorizer.getIndicatorColor(mSelectedPosition);
if (mSelectionOffset > 0f && mSelectedPosition < (getChildCount() - 1)) {
int nextColor = tabColorizer.getIndicatorColor(mSelectedPosition + 1);
if (color != nextColor) {
color = blendColors(nextColor, color, mSelectionOffset);
}
// Draw the selection partway between the tabs
View nextTitle = getChildAt(mSelectedPosition + 1);
left = (int) (mSelectionOffset * nextTitle.getLeft() +
(1.0f - mSelectionOffset) * left);
right = (int) (mSelectionOffset * nextTitle.getRight() +
(1.0f - mSelectionOffset) * right);
}
mSelectedIndicatorPaint.setColor(color);
canvas.drawRect(left, height - mSelectedIndicatorThickness, right,
height, mSelectedIndicatorPaint);
}
// Thin underline along the entire bottom edge
canvas.drawRect(0, height - mBottomBorderThickness, getWidth(), height, mBottomBorderPaint);
// Vertical separators between the titles
int separatorTop = (height - dividerHeightPx) / 2;
for (int i = 0; i < childCount - 1; i++) {
View child = getChildAt(i);
mDividerPaint.setColor(tabColorizer.getDividerColor(i));
canvas.drawLine(child.getRight(), separatorTop, child.getRight(),
separatorTop + dividerHeightPx, mDividerPaint);
}
}
...
}
public class TubeMainFragment extends Fragment {
...
SlidingTabLayout mSlidingTabLayout;
...
@Override
public void onViewCreated(View view, Bundle savedInstanceState) {
setUpPager(view);
setUpTabColor();
}
...
void setUpTabColor(){
mSlidingTabLayout.setCustomTabColorizer(new SlidingTabLayout.TabColorizer() {
@Override
public int getIndicatorColor(int position) {
return TubeMainFragment.this.getResources().getColor(R.color.tab_indicator);
}
@Override
public int getDividerColor(int position) {
return TubeMainFragment.this.getResources().getColor(R.color.tab_divider);
}
});
}
...
}
text color 바꾸기
아래 2가지 방법이 있을 수 있을 것 같다.- 선택된 view 일 때 SlidingTabStrip 에서 색을 바꿔서 그려주는 방법 : SlidingTabStrip 수정
- page 가 선택될 때 TextView 의 color 를 바꿔주는 방법 : SlindingTabLayout 수정[ref. 2]
댓글 없음:
댓글 쓰기