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

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

作者: 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