好像很久没有写博客了,因为最近一直在忙着做项目呢,所以没有时间写博客。最近也一直在研究源码,比如retrofit的源码理解,retrofit+rxjava的使用和原理的理解等等这些。今天要写的是项目中遇到的一个选择框,可能很多人都见过,我好像也见过,但是看到的时候不知道怎么做,百度了一下没有自己想要的,想想还是自己写一个吧。看下效果图吧:
1.效果图
切换button.gif2.分析
大家看到的第一眼是怎么想的呢?
我想的是用一个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();
}
});
这样调用就很简单了,有没有?
如果帮助到你了 给我点个赞哈 谢谢!!!
网友评论