美文网首页
android tablayout 仿google浏览器tab选

android tablayout 仿google浏览器tab选

作者: Pino | 来源:发表于2024-01-08 15:57 被阅读0次

废话少说,先上图

tabbar-new.gif
思路是参考文章 https://blog.csdn.net/weixin_30172941/article/details/112406416的自定义view来实现的
这文章只能铺满宽度,无法滚动,而且两侧圆弧不可控制显示和隐藏

所以我换了一个思路来实现,使用贝赛曲线来画Drawable (当然你想省事,直接叫ui设计一张图即可)
思路:1.先创建一个带有曲线的Drawable
2.选中哪个tab,就把背景设置为有曲线的Drawable (这里的曲线是可以调节的)
这思路太简单了 不就是单选设置背景图嘛,哈哈 ,就这么简单
一开始想写一个自定义view去实现tablayout,后面发现不如自己去实现单选,一个rv+适配器就搞定了,可以自己
自定义布局,所以这里只提供Drawable,弧度大小可以调整arcControlX

public class STabDrawable extends Drawable {

    private  Paint paint;
    int fillColor= Color.BLUE;
    int bgColor= Color.WHITE;
    private int arcControlX = 50;// 值越大,弧度越大
    private int arcControlY = 3;
    WhichSide whichSide=WhichSide.BOTH;

    public enum WhichSide{
        LEFT,BOTH,RIGHT
    }

    public STabDrawable() {
        init();
    }

    public STabDrawable(int color) {
        this.fillColor=color;
        init();
    }


    public STabDrawable(int color,WhichSide whichSide) {
        this.fillColor=color;
        this.whichSide=whichSide;
        init();
    }

    private void init(){
        paint = new Paint();
        paint.setColor(fillColor);
        paint.setStrokeCap(Paint.Cap.ROUND);
        paint.setStyle(Paint.Style.FILL);
    }

    @Override
    public void draw(Canvas canvas) {
        int width = getBounds().width();
        int height = getBounds().height();

        // 绘制底色--外层rv设置底色即可,这里不需要重复设置了
//        Paint backgroundPaint = new Paint();
//        backgroundPaint.setColor(bgColor);
//        canvas.drawRect(0, 0, width, height, backgroundPaint);

        Path path = new Path();
        path.moveTo(0, 0); // 左上角

        if(whichSide.equals(WhichSide.BOTH) || whichSide.equals(WhichSide.RIGHT)){
            path.lineTo(width-arcControlX, 0); // 右上角
            path.cubicTo(width, arcControlY, width-arcControlX, height - arcControlY,width, height); // 右侧贝塞曲线
        }else{
            path.lineTo(width, 0); // 右上角
            path.lineTo(width, height); // 右下角
        }

        path.lineTo(0, height); // 左下角

        if(whichSide.equals(WhichSide.BOTH) || whichSide.equals(WhichSide.LEFT))
        path.cubicTo(arcControlX, height - arcControlY, 0, arcControlY, arcControlX, 0); // 左侧贝塞曲线

        path.lineTo(0, 0); // 回到起点形成封闭图形

        canvas.drawPath(path, paint);
    }

    @Override
    public void setAlpha(int alpha) {
        paint.setAlpha(alpha);
    }

    @Override
    public void setColorFilter(android.graphics.ColorFilter colorFilter) {
        paint.setColorFilter(colorFilter);
    }

    @Override
    public int getOpacity() {
        return android.graphics.PixelFormat.OPAQUE;
    }

    public int getFillColor() {
        return fillColor;
    }

    public void setFillColor(int fillColor) {
        this.fillColor = fillColor;
        // 刷新和重绘 Drawable
        invalidateSelf();
    }

    public int getBgColor() {
        return bgColor;
    }

    public void setBgColor(int bgColor) {
        this.bgColor = bgColor;
        invalidateSelf();
    }

    public int getArcControlX() {
        return arcControlX;
    }

    public void setArcControlX(int arcControlX) {
        this.arcControlX = arcControlX;
        invalidateSelf();
    }

    public int getArcControlY() {
        return arcControlY;
    }

    public void setArcControlY(int arcControlY) {
        this.arcControlY = arcControlY;
        invalidateSelf();
    }

    public WhichSide getWhichSide() {
        return whichSide;
    }

    public void setWhichSide(WhichSide whichSide) {
        this.whichSide = whichSide;
        invalidateSelf();
    }
}

如何使用?很简单,选中就设为背景 即可

int fillColor=Color.red;
public boolean isBothSize=true; // 默认两边都有
if(selectedPosition==position){
            if(isBothSize){
                holder.itemView.setBackground(new STabDrawable(fillColor));
            }else {
                if(position==0){
                    holder.itemView.setBackground(new STabDrawable(fillColor,STabDrawable.WhichSide.RIGHT));
                }else if(position == getItemCount() - 1){
                    holder.itemView.setBackground(new STabDrawable(fillColor,STabDrawable.WhichSide.LEFT));
                }else {
                    holder.itemView.setBackground(new STabDrawable(fillColor));
                }
            }
        }else{
            holder.itemView.setBackground(null);
        }

相关文章

网友评论

      本文标题:android tablayout 仿google浏览器tab选

      本文链接:https://www.haomeiwen.com/subject/hktondtx.html