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中实现。

效果图

如果想要此效果Demo,

代码 = money。

请点击临时QQ交谈，非诚勿扰！