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]
댓글 없음:
댓글 쓰기