簡介
日常項目開發中，經常會遇到把TextView設置成一個按鈕，就像下面這個:
按鈕.png
而一般的實現方式就是在res/drawable目錄下定義一個drawable.xml文件:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="10dp" />
<solid android:color="@color/blue" />
</shape>
然后設置為TextView的背景，如果需要選中時改變狀態，可以這么設置：
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/bule" android:state_pressed="false" />
<item android:drawable="@drawable/red" android:state_pressed="true" />
<item android:drawable="@drawable/bule" />
</selector>
這樣寫的好處是簡單易懂，但是如果項目中用到了很多不同風格的邊框背景時，就會創建非常多的相似的資源文件，比較麻煩。為了避免這種麻煩，這里使用Java代碼來創建Drawable。
狀態說明.png
自定義ShapeTextView
使用自定義view繼承TextView來實現上面說的效果
定義屬性
在res/values/attrs.xml中添加自定義屬性
<!--自定義矩形邊框的TextView-->
<declare-styleable name="ShapeTextView">
<!--是否使用Selector選擇器-->
<attr name="openSelector" format="boolean" />
<!--填充色-->
<attr name="solidColor" format="color" />
<!--邊框色-->
<attr name="strokeColor" format="color" />
<!--按下填充色-->
<attr name="solidTouchColor" format="color" />
<!--按下邊框色-->
<attr name="strokeTouchColor" format="color" />
<!--邊框寬度-->
<attr name="strokeWidth" format="dimension" />
<!--圓角弧度-->
<attr name="radius" format="dimension" />
<!--四個角的圓角弧度-->
<attr name="topLeftRadius" format="dimension" />
<attr name="topRightRadius" format="dimension" />
<attr name="bottomLeftRadius" format="dimension" />
<attr name="bottomRightRadius" format="dimension" />
<!--虛線邊框寬度-->
<attr name="dashWidth" format="dimension" />
<!--虛線邊框間隙-->
<attr name="dashGap" format="dimension" />
</declare-styleable>
自定義View繼承TextView
/**
* @author Lin
* @date 2019/8/22
* @description 實現自定義圓角背景
* 支持
* 1.四邊圓角
* 2.指定邊圓角
* 3.支持填充色以及邊框色,邊框虛線
* 4.支持按下效果
*/
@SuppressLint("AppCompatCustomView")
public class ShapeTextView extends TextView {
private boolean openSelector;
//自定背景邊框Drawable
private GradientDrawable gradientDrawable;
//按下時的Drawable
private GradientDrawable selectorDrawable;
//填充色
private int solidColor = 0;
//邊框色
private int strokeColor = 0;
//按下填充色
private int solidTouchColor = 0;
//按下邊框色
private int strokeTouchColor = 0;
//按下字體色
private int textTouchColor = 0;
//邊框寬度
private int strokeWidth = 0;
//四個角的弧度
private float radius;
private float topLeftRadius;
private float topRightRadius;
private float bottomLeftRadius;
private float bottomRightRadius;
//邊框虛線的寬度
float dashWidth = 0;
//邊框虛線的間隙
float dashGap = 0;
//字體色
private int textColor = 0;
public ShapeTextView(Context context) {
this(context, null);
}
public ShapeTextView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public ShapeTextView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context, attrs);
//默認背景
gradientDrawable = getNeedDrawable(new float[]{topLeftRadius, topLeftRadius, topRightRadius, topRightRadius,
bottomRightRadius, bottomRightRadius, bottomLeftRadius, bottomLeftRadius},
solidColor, strokeWidth, strokeColor, dashWidth, dashGap);
//如果設置了選中時的背景
if (openSelector) {
selectorDrawable = getNeedDrawable(new float[]{topLeftRadius, topLeftRadius, topRightRadius, topRightRadius,
bottomRightRadius, bottomRightRadius, bottomLeftRadius, bottomLeftRadius},
solidTouchColor, strokeWidth, strokeTouchColor, dashWidth, dashGap);
//動態生成Selector
StateListDrawable stateListDrawable = new StateListDrawable();
//是否按下
int pressed = android.R.attr.state_pressed;
stateListDrawable.addState(new int[]{pressed}, selectorDrawable);
stateListDrawable.addState(new int[]{}, gradientDrawable);
setBackground(stateListDrawable);
} else {
setBackground(gradientDrawable);
}
}
/**
* 初始化參數
*
* @param context
* @param attrs
*/
private void init(Context context, AttributeSet attrs) {
TypedArray ta = context.getTheme().obtainStyledAttributes(attrs, R.styleable.ShapeTextView, 0, 0);
openSelector = ta.getBoolean(R.styleable.ShapeTextView_openSelector, false);
solidColor = ta.getInteger(R.styleable.ShapeTextView_solidColor, 0x00000000);
strokeColor = ta.getInteger(R.styleable.ShapeTextView_strokeColor, 0x00000000);
solidTouchColor = ta.getInteger(R.styleable.ShapeTextView_solidTouchColor, 0x00000000);
strokeTouchColor = ta.getInteger(R.styleable.ShapeTextView_strokeTouchColor, 0x00000000);
textTouchColor = ta.getInteger(R.styleable.ShapeTextView_textTouchColor, 0x00000000);
textColor = getCurrentTextColor();
strokeWidth = (int) ta.getDimension(R.styleable.ShapeTextView_strokeWidth, 0);
//四個角單獨設置會覆蓋radius設置
radius = ta.getDimension(R.styleable.ShapeTextView_radius, 0);
topLeftRadius = ta.getDimension(R.styleable.ShapeTextView_topLeftRadius, radius);
topRightRadius = ta.getDimension(R.styleable.ShapeTextView_topRightRadius, radius);
bottomLeftRadius = ta.getDimension(R.styleable.ShapeTextView_bottomLeftRadius, radius);
bottomRightRadius = ta.getDimension(R.styleable.ShapeTextView_bottomRightRadius, radius);
dashGap = ta.getDimension(R.styleable.ShapeTextView_dashGap, 0);
dashWidth = ta.getDimension(R.styleable.ShapeTextView_dashWidth, 0);
ta.recycle();
}
/**
* @param radius 四個角的半徑
* @param colors 漸變的顏色
* @param strokeWidth 邊框寬度
* @param strokeColor 邊框顏色
* @return
*/
public static GradientDrawable getNeedDrawable(float[] radius, int[] colors, int strokeWidth, int strokeColor) {
//TODO:判斷版本是否大于16 項目中默認的都是Linear散射 都是從左到右 都是只有開始顏色和結束顏色
GradientDrawable drawable;
if (android.os.Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
drawable = new GradientDrawable();
drawable.setOrientation(GradientDrawable.Orientation.LEFT_RIGHT);
drawable.setColors(colors);
} else {
drawable = new GradientDrawable(GradientDrawable.Orientation.LEFT_RIGHT, colors);
}
drawable.setCornerRadii(radius);
drawable.setStroke(strokeWidth, strokeColor);
drawable.setGradientType(GradientDrawable.LINEAR_GRADIENT);
return drawable;
}
/**
* @param radius 四個角的半徑
* @param bgColor 背景顏色
* @param strokeWidth 邊框寬度
* @param strokeColor 邊框顏色
* @return
*/
public static GradientDrawable getNeedDrawable(float[] radius, int bgColor, int strokeWidth, int strokeColor) {
GradientDrawable drawable = new GradientDrawable();
drawable.setShape(GradientDrawable.RECTANGLE);
drawable.setCornerRadii(radius);
drawable.setStroke(strokeWidth, strokeColor);
drawable.setColor(bgColor);
return drawable;
}
/**
* @param radius 四個角的半徑
* @param bgColor 背景顏色
* @param strokeWidth 邊框寬度
* @param strokeColor 邊框顏色
* @param dashWidth 虛線邊框寬度
* @param dashGap 虛線邊框間隙
* @return
*/
public static GradientDrawable getNeedDrawable(float[] radius, int bgColor, int strokeWidth, int strokeColor, float dashWidth, float dashGap) {
GradientDrawable drawable = new GradientDrawable();
drawable.setShape(GradientDrawable.RECTANGLE);
drawable.setCornerRadii(radius);
drawable.setStroke(strokeWidth, strokeColor, dashWidth, dashGap);
drawable.setColor(bgColor);
return drawable;
}
}
使用示例
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingTop="50dp">
<com.lin.module_base.view.ShapeTextView
android:id="@+id/text1"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_margin="5dp"
android:gravity="center"
android:text="@string/about"
app:openSelector="true"
app:radius="10dp"
app:solidColor="@color/white"
app:solidTouchColor="@color/gray_light"
app:strokeColor="@color/blue"
app:strokeTouchColor="@color/red"
app:strokeWidth="1dp"
app:textTouchColor="@color/red" />
<com.lin.module_base.view.ShapeTextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_margin="5dp"
android:gravity="center"
android:text="@string/about"
app:bottomRightRadius="20dp"
app:openSelector="true"
app:solidColor="@color/white"
app:solidTouchColor="@color/gray_light"
app:strokeColor="@color/blue"
app:strokeTouchColor="@color/red"
app:strokeWidth="1dp"
app:textTouchColor="@color/red"
app:topLeftRadius="20dp" />
<com.lin.module_base.view.ShapeTextView
android:id="@+id/text2"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_margin="5dp"
android:gravity="center"
android:text="@string/about"
app:dashGap="1dp"
app:dashWidth="2dp"
app:openSelector="true"
app:radius="10dp"
app:solidColor="@color/white"
app:strokeColor="@color/blue"
app:strokeTouchColor="@color/red"
app:strokeWidth="0.5dp"
app:textTouchColor="@color/red" />
<com.lin.module_base.view.ShapeTextView
android:id="@+id/text3"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center_horizontal"
android:layout_margin="5dp"
android:gravity="center"
android:text="@string/about"
app:openSelector="true"
app:radius="25dp"
app:solidColor="@color/blue"
app:strokeColor="@color/blue"
app:strokeTouchColor="@color/red"
app:strokeWidth="1dp"
app:textTouchColor="@color/red" />
</LinearLayout>
效果如下圖：
image.png
踩坑
如果需要selector選擇器的效果，需要在xml中設置app:openSelector="true"
然后要給View設置監聽事件
text1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
}
});
總結
這里我們使用了Java代碼來創建Drawable，可以把常用方法提取到工具類中。
日常開發中也有其他類似的需要定義CheckBox、RadioButton等背景的，也可以參考這種做法。
