自定义一个背景可以滚动的tab栏

最新推荐文章于 2021-05-26 20:21:08 发布

谷粒先生

最新推荐文章于 2021-05-26 20:21:08 发布

阅读量703

点赞数

分类专栏： android

本文链接：https://blog.csdn.net/onionomelette/article/details/70287266

版权

android 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

原创文章

先上一个效果图,GIF录制的图片有严重的掉帧现象,其实效果还是很流畅的.

此文要说的是上方的切换的时候的白色背景滚动效果.其他内容本文没有说明.

可以看到上方有一个长方形的tab,有两个选项,分别为"美丽店","技术达人",

点击技术达人的时候,后面的白色背景会滚动到右边,点击美丽店的时候,又滚动到左边.

写这个空间的原因是因为要配合fragment的切换动画,这样看起来感觉效果好一点

此效果是通过自定义ViewGroup实现的,并不是通过动画实现,实现起来还是比较简单,本文最后会加上完整代码

首先先说下实现方式,继承一个ViewGroup,这里继承的是LinearLayout,(命名我命名为tabLinearLayout,不知道对不对,将就着用就行了)

然后根据大小画一个白色圆角描边,然后在左半边画纯白背景,右半边透明.

在点击的时候,只要改变一下白色背景的位置,还有上方的文字颜色和图标,其他不用动

1.定义四种状态,代码有注释

/**
 * 背景状态
 */
protected enum StateBG {
    /**
     * 静止在左边
     */
    LEFT_STATIC,
    /**
     * 静止在右边
     */
    RIGHT_STATIC,
    /**
     * 从左边滚动到右边
     */
    LEFT_TO_RIGHT,
    /**
     * 从右边滚动到左边
     */
    RIGHT_TO_LEFT;
}

后面的onDraw()开始写自己的逻辑

2.绘制白色描边

/**
 * 画圆角背景,画白色描边
 *
 * @param canvas
 * @param height
 * @param width
 */
private void drawBg(Canvas canvas, int height, int width) {

    mPaint.setStyle(Paint.Style.STROKE);//设置空心
    // 设置个新的长方形
    if (lineBgRectF == null) {
        lineBgRectF = new RectF(0, 0, width, height);
    }
    canvas.drawRoundRect(lineBgRectF, ROUND_SIZE, ROUND_SIZE, mPaint);//第二个参数是x半径，第三个参数是y半径
}

这里圆角为10px

ROUND_SIZE = 10;

3.0判断状态,然后绘制半边白色的位置

mPaint.setStyle(Paint.Style.FILL);//设置实心
if (oneHalfBg == null) {
    oneHalfBg = new RectF(0, 0, width / 2, height);
}
switch (state) {
    case LEFT_STATIC:
        oneHalfBg.left = 0;
        drawHalfBg(canvas, height, width);
        break;
    case RIGHT_STATIC:
        oneHalfBg.left = width / 2;
        drawHalfBg(canvas, height, width);
        break;
    case LEFT_TO_RIGHT:
        oneHalfBg.left += MOVE_RATE_PX;
        break;
    case RIGHT_TO_LEFT:
        oneHalfBg.left -= MOVE_RATE_PX;
        break;
}

此时判断状态,

3.1.

因为是有圆角效果的,所以在最左右静止和在最右边静止的时候,中间附近还是有圆角效果的,此时并不需要这个效果

所以会在中间贴一个没有圆角的白色矩形

private RectF whiteHalfBg;

private void drawHalfBg(Canvas canvas, int height, int width) {
    if (whiteHalfBg == null) {
        whiteHalfBg = new RectF(0, 0, 0, height);
    }
    //直角矩形的宽度
    int rectfWidth = 10;
    if (state == LEFT_STATIC) {
        whiteHalfBg.left = width / 2 - rectfWidth;
        whiteHalfBg.right = width / 2;
    } else if (state == RIGHT_STATIC) {
        whiteHalfBg.left = width / 2;
        whiteHalfBg.right = width / 2 + rectfWidth;
    }
    canvas.drawRect(whiteHalfBg, mPaint);
}

3.2从左往右滑动,或者从右往左滑动

除了3.0内的代码,后面还需要加上

oneHalfBg.right = oneHalfBg.left + width / 2;//设置右边位置(显示宽)
canvas.drawRoundRect(oneHalfBg, ROUND_SIZE, ROUND_SIZE, mPaint);//第二个参数是x半径，第三个参数是y半径

if (state == LEFT_TO_RIGHT || state == RIGHT_TO_LEFT) {
    invalidate();
}
if (oneHalfBg.left < 0) state = LEFT_STATIC;
if (oneHalfBg.left > width / 2) state = RIGHT_STATIC;

也就是不断绘制白色,并且设置好白色下一次绘制的位置,等下一次绘制,直到到了最左边或者最右边的时候,把状态改一下,使其不再绘制.

到此白色背景滚动效果基本完成了,但是有一点要注意,因为这个是继承viewgroup的,所以onDraw方法不会被调用,所以要在layout的xml控件处添加

android:background="@color/transparent"

设置一个透明背景,使其调用ondraw()方法.或者用其他方式使其调用即可

下面贴上完整代码:

1.Java代码


import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.widget.LinearLayout;

import com.orhanobut.logger.Logger;

import static com.hoyar.beautyshop.view.TabLinearLayout.StateBG.LEFT_STATIC;
import static com.hoyar.beautyshop.view.TabLinearLayout.StateBG.LEFT_TO_RIGHT;
import static com.hoyar.beautyshop.view.TabLinearLayout.StateBG.RIGHT_STATIC;
import static com.hoyar.beautyshop.view.TabLinearLayout.StateBG.RIGHT_TO_LEFT;


/**
 * 可供标签切换的layout
 */

public class TabLinearLayout extends LinearLayout {
    public TabLinearLayout(Context context) {
        super(context);
    }

    public TabLinearLayout(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    private final Paint mPaint = new Paint();

    {
        mPaint.setAntiAlias(true);//设置抗锯齿

        mPaint.setColor(Color.WHITE);
    }

    public TabLinearLayout(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    private StateBG state = StateBG.LEFT_STATIC;
    //白色背景描边
    private RectF lineBgRectF;
    //一半的背景图片
    private RectF oneHalfBg;

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

        int height = getMeasuredHeight();
        int width = getMeasuredWidth();
        drawBg(canvas, height, width);

        mPaint.setStyle(Paint.Style.FILL);//设置实心
        if (oneHalfBg == null) {
            oneHalfBg = new RectF(0, 0, width / 2, height);
        }
        switch (state) {
            case LEFT_STATIC:
                oneHalfBg.left = 0;
                drawHalfBg(canvas, height, width);
                break;
            case RIGHT_STATIC:
                oneHalfBg.left = width / 2;
                drawHalfBg(canvas, height, width);
                break;
            case LEFT_TO_RIGHT:
                oneHalfBg.left += MOVE_RATE_PX;
                break;
            case RIGHT_TO_LEFT:
                oneHalfBg.left -= MOVE_RATE_PX;
                break;
        }
        oneHalfBg.right = oneHalfBg.left + width / 2;//设置右边位置(显示宽)
        canvas.drawRoundRect(oneHalfBg, ROUND_SIZE, ROUND_SIZE, mPaint);//第二个参数是x半径，第三个参数是y半径

        if (state == LEFT_TO_RIGHT || state == RIGHT_TO_LEFT) {
            invalidate();
        }
        if (oneHalfBg.left < 0) state = LEFT_STATIC;
        if (oneHalfBg.left > width / 2) state = RIGHT_STATIC;
        Logger.d("ondraw()了");
    }

    private static final int MOVE_RATE_PX = 8;

    private RectF whiteHalfBg;

    private void drawHalfBg(Canvas canvas, int height, int width) {
        if (whiteHalfBg == null) {
            whiteHalfBg = new RectF(0, 0, 0, height);
        }
        //直角矩形的宽度
        int rectfWidth = 10;
        if (state == LEFT_STATIC) {
            whiteHalfBg.left = width / 2 - rectfWidth;
            whiteHalfBg.right = width / 2;
        } else if (state == RIGHT_STATIC) {
            whiteHalfBg.left = width / 2;
            whiteHalfBg.right = width / 2 + rectfWidth;
        }
        canvas.drawRect(whiteHalfBg, mPaint);
    }

    public void leftToRight() {
        state = LEFT_TO_RIGHT;
        invalidate();
    }

    public void rightToLeft() {
        state = RIGHT_TO_LEFT;
        invalidate();
    }

    /**
     * 画圆角背景,画白色描边
     *
     * @param canvas
     * @param height
     * @param width
     */
    private void drawBg(Canvas canvas, int height, int width) {

        mPaint.setStyle(Paint.Style.STROKE);//设置空心
        // 设置个新的长方形
        if (lineBgRectF == null) {
            lineBgRectF = new RectF(0, 0, width, height);
        }
        canvas.drawRoundRect(lineBgRectF, ROUND_SIZE, ROUND_SIZE, mPaint);//第二个参数是x半径，第三个参数是y半径
    }

    /**
     * 圆角的大小
     */
    private static final int ROUND_SIZE = 10;

    /**
     * 背景状态
     */
    protected enum StateBG {
        /**
         * 静止在左边
         */
        LEFT_STATIC,
        /**
         * 静止在右边
         */
        RIGHT_STATIC,
        /**
         * 从左边滚动到右边
         */
        LEFT_TO_RIGHT,
        /**
         * 从右边滚动到左边
         */
        RIGHT_TO_LEFT;
    }
}

使用控件的关键xml代码,中间平分自定义的tabLinearLayout:

<com.hoyar.beautyshop.view.TabLinearLayout
    android:id="@+id/fragment_appointment_tab_linear_layout"
    android:layout_width="190dp"
    android:layout_height="25dp"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="30dp"
    android:background="@color/transparent"
    android:orientation="horizontal">
    <!--android:background="@drawable/appointment_tab_bg"-->
    <!--字体没有标注-->
    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1">

        <TextView
            android:id="@+id/fragment_appointment_tv_beauty_shop"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:drawableLeft="@mipmap/appointment_tab_store_sel"
            android:drawablePadding="7dp"
            android:includeFontPadding="false"
            android:text="美丽店"
            android:textColor="@color/appointment_blue_bg" />

    </RelativeLayout>

    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1">

        <TextView
            android:id="@+id/fragment_appointment_tv_master"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:drawableLeft="@mipmap/appointment_tab_master"
            android:drawablePadding="7dp"
            android:includeFontPadding="false"
            android:text="技术达人"
            android:textColor="@color/white" />

    </RelativeLayout>
</com.hoyar.beautyshop.view.TabLinearLayout>