自定义一个Tab切换控件
1572925067464.jpg
IrregularTabView继承View
定义属性
Path [https://blog.csdn.net/xiangzhihong8/article/details/78278931]
- leftPath
- rightPath
Region(区域，范围)
- leftRegion
- rightRegion
实现构造方法
1572925148371.jpg
初始化方法
1572925446387.jpg
onSizeChanged中绘制leftPath,rigthPath
1572925508584.jpg
根据XY坐标绘制
1572925735341.jpg
画布设置
image.png
触摸事件
image.png
完整代码
package com.rd.views;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Region;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
/**
* Author: Pengfang
* Date: 2019-11-04 17:02
* <p>
* Description: 不规则tab切换view
*/
public class IrregularTabView extends View {
/** 0-选择左边 1-选择右边 */
private int selectPos = 0;
private Path leftPath;
private Path rightPath;
private Paint mPathPaint;
private Paint mTextPaint;
private String textLeft;
private String textRight;
private float spacing = 40f / 2;
private float textHeight;
private Region regionLeft;
private Region regionRight;
private OnTabSelectListener onTabSelectListener;
private int leftSelectBg;
private int rightSelectBg;
private int selectTextColor;
private int unSelectTextColor;
private int unSelectBg;
public IrregularTabView(Context context) {
this(context, null);
}
public IrregularTabView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public IrregularTabView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context, attrs);
}
private void init(Context context, AttributeSet attrs) {
TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.IrregularTabView);
textLeft = a.getString(R.styleable.IrregularTabView_tabLeftText);
textRight = a.getString(R.styleable.IrregularTabView_tabRightText);
leftSelectBg = a.getColor(R.styleable.IrregularTabView_leftSelectBg, getResources().getColor(R.color.text_red));
rightSelectBg = a.getColor(R.styleable.IrregularTabView_rightSelectBg, getResources().getColor(R.color.text_green));
selectTextColor = a.getColor(R.styleable.IrregularTabView_selectTextColor, getResources().getColor(R.color.text_white));
unSelectTextColor = a.getColor(R.styleable.IrregularTabView_unSelectTextColor, getResources().getColor(R.color.text_grey));
unSelectBg = a.getColor(R.styleable.IrregularTabView_unSelectBg, getResources().getColor(R.color.text_grey));
a.recycle();
leftPath = new Path();
rightPath = new Path();
regionLeft = new Region();
regionRight = new Region();
mPathPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mPathPaint.setStyle(Paint.Style.FILL_AND_STROKE); //设置边框
mPathPaint.setStrokeWidth(10);
mPathPaint.setStrokeJoin(Paint.Join.ROUND); //设置圆角
mTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mTextPaint.setTextSize(38);
mTextPaint.setTextAlign(Paint.Align.CENTER);
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
Region totalRegion = new Region(0, 0, w, h);
float offset = (float) Math.abs(((double) getMeasuredHeight() / Math.tan(45)));
leftPath.moveTo(0, 0);
leftPath.lineTo(getMeasuredWidth() / 2 + spacing, 0);
leftPath.lineTo(getMeasuredWidth() / 2 + spacing - offset, getMeasuredHeight());
leftPath.lineTo(0, getMeasuredHeight());
leftPath.close();
rightPath.moveTo(getMeasuredWidth() / 2 - spacing + offset, 0);
rightPath.lineTo(getMeasuredWidth(), 0);
rightPath.lineTo(getMeasuredWidth(), getMeasuredHeight());
rightPath.lineTo(getMeasuredWidth() / 2 - spacing, getMeasuredHeight());
rightPath.close();
Paint.FontMetrics metrics = mTextPaint.getFontMetrics();
textHeight = metrics.descent - metrics.ascent;
regionLeft.setPath(leftPath, totalRegion);
regionRight.setPath(rightPath, totalRegion);
// Logger.e("HomeTabView", "height/2=" + getMeasuredHeight() / 2 + " || textHeight/2=" + textHeight / 2);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
/** 绘制左边 */
if (selectPos == 0) {
mPathPaint.setColor(leftSelectBg);
mTextPaint.setColor(selectTextColor);
} else {
mPathPaint.setColor(unSelectBg);
mTextPaint.setColor(unSelectTextColor);
}
canvas.drawPath(leftPath, mPathPaint);
canvas.drawText(textLeft, getMeasuredWidth() / 4, getMeasuredHeight() / 2 + textHeight / 3, mTextPaint);
/** 绘制右边背*/
if (selectPos == 1) {
mPathPaint.setColor(rightSelectBg);
mTextPaint.setColor(selectTextColor);
} else {
mPathPaint.setColor(unSelectBg);
mTextPaint.setColor(unSelectTextColor);
}
canvas.drawPath(rightPath, mPathPaint);
canvas.drawText(textRight, getMeasuredWidth() / 2 + getMeasuredWidth() / 4, getMeasuredHeight() / 2 + textHeight / 3, mTextPaint);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
int x = (int) event.getX();
int y = (int) event.getY();
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
if (regionLeft.contains(x, y)) {
selectPos = 0;
} else if (regionRight.contains(x, y)) {
selectPos = 1;
}
if (onTabSelectListener != null) {
onTabSelectListener.tabSelect(selectPos);
}
break;
}
invalidate();
return super.onTouchEvent(event);
}
public void setSelectPos(int selectPos) {
this.selectPos = selectPos;
invalidate();
}
public void setOnTabSelectListener(OnTabSelectListener onTabSelectListener) {
this.onTabSelectListener = onTabSelectListener;
}
public interface OnTabSelectListener {
void tabSelect(int pos);
}
}
attrs
<declare-styleable name="IrregularTabView">
<attr name="tabLeftText" format="string"/>
<attr name="tabRightText" format="string"/>
<attr name="leftSelectBg" format="color"/>
<attr name="rightSelectBg" format="color"/>
<attr name="unSelectBg" format="color"/>
<attr name="unSelectTextColor" format="color"/>
<attr name="selectTextColor" format="color"/>
</declare-styleable>
引用
<com.rd.views.IrregularTabView
android:id="@+id/transaction_detail_itv"
android:layout_width="0dp"
android:layout_height="@dimen/y60"
android:layout_marginRight="@dimen/x16"
android:layout_weight="5"
app:leftSelectBg="@color/up_color"
app:onTabSelectListener="@{(POS)->viewCtrl.onTabSelect(POS)}"
app:rightSelectBg="@color/down_color"
app:tabLeftText="@string/transaction_buy"
app:tabRightText="@string/transaction_sell"
app:unSelectBg="@color/bg_grey"
app:unSelectTextColor="@color/text_grey" />
