Android 自定義滾動類Tab標簽

要求

Tab 標簽可以橫向滾動，標簽可選擇，並且在選擇的時候有標線下劃線。

分析

可繼承HorizontalScrollView 實現，然後裡面標簽ITem可可以是TextView，下劃線可以在Draw方法中繪制出。

實現

添加Tab Item(這裡是TextView)

/**
     * 向容器中添加標簽view
     * 
     * @param position
     * @param title
     */
    private void add****(final int position, String title)
    {
        TextView tab = new TextView(getContext());
        tab.setText(title);
        tab.setGravity(Gravity.CENTER);
        tab.setSingleLine();
        if (position == currentPosition)
        {
            tab.setTextColor(mTabPressTextColor);
        } else
        {
            tab.setTextColor(mTabTextColor);
        }

        tab.setTextSize(TypedValue.COMPLEX_UNIT_PX, mTabTextSize);
        tab.setBackgroundResource(tabBackgroundResId);

        addTab(position, tab);
    }

繪制下劃線

protected void onDraw(Canvas canvas)
    {
        super.onDraw(canvas);

        /** 繪制tab標簽下劃線 **/
        View currentTab = tabsContainer.getChildAt(currentPosition);
        if (currentTab != null)
        {
            float lineLeft = currentTab.getLeft();
            canvas.drawRect(lineLeft - detalLeft,
                    mViewHeight - underlineHeight,
                    lineLeft + currentTab.getWidth() - detalRight, mViewHeight,
                    mLinePaint)`

        }

    }

實現Item選擇下劃線動畫

/**
     * 模擬動畫滾動下劃線
     * 
     * @param fromPosition
     * @param toPosition
     */
    private void *****(int fromPosition, int toPosition)
    {
        TextView lastTab = (TextView) tabsContainer.getChildAt(fromPosition);
        lastTab.setTextColor(mTabTextColor);

        TextView currentTab = (TextView) tabsContainer.getChildAt(toPosition);
        currentTab.setTextColor(mTabPressTextColor);

        currentPosition = toPosition;

        float lineLeft = currentTab.getLeft();
        float lineRight = currentTab.getRight();

        detalLeft = lineLeft - lastTab.getLeft();
        detalRight = lineRight - lastTab.getRight();

        this.post(new Runnable()
        {
            @Override
            public void run()
            {

                if (Math.abs(detalLeft) > minDetal
                        || Math.abs(detalRight) > minDetal)
                {

                    if (Math.abs(detalLeft) > minDetal)
                    {
                        detalLeft = detalLeft / minDetal;
                    }

                    if (Math.abs(detalRight) > minDetal)
                    {
                        detalRight = detalRight / minDetal;
                    }
                    invalidate();
                    TabHorizontalScrollView.this.post(this);
                } else
                {
                    invalidate();
                }
            }
        });
    }

綁定監聽

/**
     * 標簽監聽事件
     */
    private OnTabItemClickListener mOnTabItemClickListener;

    /**
     * 綁定標簽切換監聽事件
     * 
     * @param listener
     */
    public void setOnTabItemClickListener(OnTabItemClickListener listener)
    {
        mOnTabItemClickListener = listener;
    }

    /**
     * 標簽監聽類
     * 
     * @author jarlen
     * 
     */
    public interface OnTabItemClickListener
    {
        public void onClickTabItem(float value);
    }


在Item 的TextView的OnClick的方法中調用onClickTabItem()方法，然後在Activity中實現。

效果圖

 <喎?/kf/ware/vc/" target="_blank" class="keylink">vcD4KPHA+PGltZyBib3JkZXI9"0" src="http://wpa.qq.com/pa?p=2:791415371:41" />