[컴][안드로이드] Slindg tab - SlidingTabLayout 에서 글자색 변경

sliding tab / sliding tab 의 글자 선택시


Updated, 2015-11-11





Updated, 2015-10-10

안드로이드에서 tab 관련 library 를 제공하고 있는 듯 하다. 아래 글을 참고하자.






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가지 방법이 있을 수 있을 것 같다.

  1. 선택된 view 일 때 SlidingTabStrip 에서 색을 바꿔서 그려주는 방법 : SlidingTabStrip 수정
  2. page 가 선택될 때 TextView 의 color 를 바꿔주는 방법 : SlindingTabLayout 수정[ref. 2]
참고로, ref.2 의 방법은 selector 를 활용해서 선택되면, selector 의 selected 의 색이 선택되는 방법이다.



Reference

  1. SlidingTabLayout.java | Android Developers
  2. java - How to change the text color of SlidingTabLayout? - Stack Overflow

댓글 없음:

댓글 쓰기