美文网首页
自定义 选择框 -- 全网唯一!!!

自定义 选择框 -- 全网唯一!!!

作者: cao苗子 | 来源:发表于2019-12-09 17:34 被阅读0次

好像很久没有写博客了,因为最近一直在忙着做项目呢,所以没有时间写博客。最近也一直在研究源码,比如retrofit的源码理解,retrofit+rxjava的使用和原理的理解等等这些。今天要写的是项目中遇到的一个选择框,可能很多人都见过,我好像也见过,但是看到的时候不知道怎么做,百度了一下没有自己想要的,想想还是自己写一个吧。看下效果图吧:

1.效果图

切换button.gif

2.分析

大家看到的第一眼是怎么想的呢?
我想的是用一个LinearLayout包裹三个TextView,圆角通过设置Background就行,设置drawable成圆角就行。但是TextView有两种选中状态,那你是不是要动态的设置很多drawable呢?可以试一试,反正我试了试需要做很多判断切换。索性我就自己写了。

着手开始:自定义SelectedLinearLayout重写dispatchDraw方法,如下面代码

 @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    @Override
    protected void dispatchDraw(Canvas canvas) {
        super.dispatchDraw(canvas);
        mPaint.setStrokeWidth(mBorderWidth);
        mPaint.setColor(mBorderColor);
        Path path = new Path();
        //圆的半径
        int r = getWidth() > getHeight() ? getHeight() : getWidth();
        //画左半圆
        RectF oval = new RectF(mBorderWidth / 2, mBorderWidth / 2, r - mBorderWidth / 2, getHeight() - mBorderWidth / 2);
        path.arcTo(oval, 90, 180);
        //画右半圆
        RectF ovalRight = new RectF(getWidth() - r + mBorderWidth / 2,mBorderWidth / 2,getWidth() - mBorderWidth / 2,getHeight() - mBorderWidth / 2);
        path.arcTo(ovalRight, 270, 180);
        //回到起点
        path.close();
        canvas.drawPath(path, mPaint);
    }

代码都有备注,一看就懂。
这是一个继承LinearLayout的控件,然后在里面添加自定义的TextView就行了
下面是SelectedTextView的主要代码 也是重写onDraw

@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    @Override
    protected void onDraw(Canvas canvas) {
        mPaint.setColor(mBackgroundColor);
        Path path = new Path();
        if(mRoundDirection == 1) {
            RectF oval = new RectF(0, 0, getHeight(), getHeight());
            path.arcTo(oval, 90, 180);
            path.lineTo(getWidth(), 0);
            path.lineTo(getWidth(), getHeight());
            path.close();
            canvas.drawPath(path, mPaint);
        }else if(mRoundDirection == 2){
            path.moveTo(0,0);
            path.lineTo(getWidth() - getHeight(),0);
            RectF oval = new RectF(getWidth() - getHeight(),0,getWidth(),getHeight());
            path.arcTo(oval, 270, 180);
            path.lineTo(0,getHeight());
            path.close();
            canvas.drawPath(path, mPaint);
        }else if(mRoundDirection == 3){
            RectF oval = new RectF(0, 0, getHeight(), getHeight());
            path.arcTo(oval, 90, 180);
            RectF ovalRight = new RectF(getWidth() - getHeight(),0,getWidth(),getHeight());
            path.arcTo(ovalRight, 270, 180);
            path.close();
            canvas.drawPath(path, mPaint);
        }else {
            canvas.drawRoundRect(0,0,getWidth(),getHeight(),0,0,mPaint);
        }
        super.onDraw(canvas);
    }

根据圆角方向或位置区分来绘制圆角。

代码很简单

3.调用方式

  <com.miaozi.baselibrary.selectedLayout.SelectedLinearLayout
        android:id="@+id/ll"
        android:layout_margin="30dp"
        android:layout_width="match_parent"
        android:layout_height="100dp"/>


SelectedLinearLayout mSelectedLayout =  findViewById(R.id.ll);
        mSelectedLayout.setItemData(new String[]{"关注","粉丝","礼物"});
        //设置一些属性
        mSelectedLayout.setSelectedPosition(1);
        mSelectedLayout.setBorderWidth(5);
        mSelectedLayout.setTextSize(20);
        mSelectedLayout.setBorderColor(ContextCompat.getColor(this,R.color.border));
        mSelectedLayout.setDivideLineColor(ContextCompat.getColor(this,R.color.border));
        mSelectedLayout.setDivideLineWidth(5);
        mSelectedLayout.setSelectedBackgroundColor(ContextCompat.getColor(this,R.color.border));
        mSelectedLayout.setOnItemOnclickListener(new SelectedLinearLayout.OnItemOnclickListener() {
            @Override
            public void onItemClick(int position) {
                Toast.makeText(SelectedLayoutActivity.this,position+"",Toast.LENGTH_SHORT).show();
            }
        });

这样调用就很简单了,有没有?

如果帮助到你了 给我点个赞哈 谢谢!!!

下面是源代码:
https://github.com/panshimu/Miaozi/tree/master/baselibrary/src/main/java/com/miaozi/baselibrary/selectedLayout

相关文章

网友评论

      本文标题:自定义 选择框 -- 全网唯一!!!

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