先看截图 1图为自定义的Textview 2、3图为点击效果
具体实现如下：
1. 定义自定义控件属性
<declare-styleable name="ShapeTextview">
<attr name="touchSolidColor" format="color" />
<attr name="solidColor" format="color" />
<attr name="cornesRadius" format="dimension" />
<attr name="topLeftRadius" format="dimension" />
<attr name="topRightRadius" format="dimension" />
<attr name="bottomLeftRadius" format="dimension" />
<attr name="bottomRightRadius" format="dimension" />
<attr name="stroke_Width" format="dimension" />
<attr name="stroke_Color" format="color" />
<attr name="strokeDashWidth" format="dimension" />
<attr name="strokeDashGap" format="dimension" />
<attr name="gradientStartColor" format="color" />
<attr name="gradientEndColor" format="color" />
<attr name="gradientCenterColor" format="color" />
<attr name="gradientUseLevel" format="boolean" />
<attr name="gradientAngle" format="dimension" />
<attr name="gradientOrientation">
<enum name="BL_TR" value="0" />
<enum name="BOTTOM_TOP" value="1" />
<enum name="BR_TL" value="2" />
<enum name="LEFT_RIGHT" value="3" />
<enum name="RIGHT_LEFT" value="4" />
<enum name="TL_BR" value="5" />
<enum name="TOP_BOTTOM" value="6" />
<enum name="TR_BL" value="7" />
</attr>
<attr name="shapeType">
<enum name="LINEAR_GRADIENT" value="0" />
<enum name="OVAL" value="1" />
<enum name="LINE" value="2" />
<enum name="RING" value="3" />
</attr>
<attr name="gradientType">
<enum name="linear" value="0" />
<enum name="radial" value="1" />
<enum name="sweep" value="2" />
</attr>
<attr name="gradientRadius" format="dimension" />
</declare-styleable>
2. 控件代码
package com.klower.component;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Color;
import android.graphics.drawable.GradientDrawable;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.widget.TextView;
import com.klower.R;
public class ShapeTextView extends TextView {
int solidColor, stroke_Color, gradientStartColor, gradientEndColor,
gradientCenterColor, touchColor;
int cornesRadius, topLeftRadius, topRightRadius, bottomLeftRadius,
bottomRightRadius, stroke_Width, strokeDashWidth, strokeDashGap,
gradientAngle, gradientRadius, gradientType, gradientOrientation, shapeType;
boolean gradientUseLevel;
GradientDrawable gradientDrawable;
public ShapeTextView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
public ShapeTextView(Context context, AttributeSet attrs) {
super(context, attrs);
initData(context, attrs);
}
public ShapeTextView(Context context) {
super(context);
}
private void initData(Context context, AttributeSet attrs) {
TypedArray a = context.obtainStyledAttributes(attrs,
R.styleable.ShapeTextview);
solidColor = a.getColor(R.styleable.ShapeTextview_solidColor,
Color.TRANSPARENT);
stroke_Color = a.getColor(R.styleable.ShapeTextview_stroke_Color,
Color.TRANSPARENT);
gradientStartColor = a
.getColor(R.styleable.ShapeTextview_gradientStartColor,
Color.TRANSPARENT);
gradientEndColor = a.getColor(
R.styleable.ShapeTextview_gradientEndColor, Color.TRANSPARENT);
gradientCenterColor = a.getColor(
R.styleable.ShapeTextview_gradientCenterColor,
Color.TRANSPARENT);
touchColor = a.getColor(R.styleable.ShapeTextview_touchSolidColor,
Color.TRANSPARENT);
cornesRadius = (int) a.getDimension(
R.styleable.ShapeTextview_cornesRadius, 0);
topLeftRadius = (int) a.getDimension(
R.styleable.ShapeTextview_topLeftRadius, 0);
topRightRadius = (int) a.getDimension(
R.styleable.ShapeTextview_topRightRadius, 0);
bottomLeftRadius = (int) a.getDimension(
R.styleable.ShapeTextview_bottomLeftRadius, 0);
bottomRightRadius = (int) a.getDimension(
R.styleable.ShapeTextview_bottomRightRadius, 0);
stroke_Width = (int) a.getDimension(
R.styleable.ShapeTextview_stroke_Width, 0);
strokeDashWidth = (int) a.getDimension(
R.styleable.ShapeTextview_strokeDashWidth, 0);
strokeDashGap = (int) a.getDimension(
R.styleable.ShapeTextview_strokeDashGap, 0);
gradientAngle = (int) a.getDimension(
R.styleable.ShapeTextview_gradientAngle, 0);
gradientRadius = (int) a.getDimension(
R.styleable.ShapeTextview_gradientRadius, 0);
gradientUseLevel = a.getBoolean(
R.styleable.ShapeTextview_gradientUseLevel, false);
gradientType = a.getInt(R.styleable.ShapeTextview_gradientType, -1);
gradientOrientation = a.getInt(
R.styleable.ShapeTextview_gradientOrientation, -1);
shapeType = a.getInt(
R.styleable.ShapeTextview_shapeType, -1);
gradientDrawable = new GradientDrawable();
gradientDrawable.setStroke(stroke_Width, stroke_Color, strokeDashWidth,
strokeDashGap);
// 如果设定的有Orientation 就默认为是渐变色的Button，否则就是纯色的Button
if (gradientOrientation != -1) {
gradientDrawable
.setOrientation(getOrientation(gradientOrientation));
gradientDrawable.setColors(new int[] { gradientStartColor,
gradientCenterColor, gradientEndColor });
} else {
gradientDrawable.setColor(solidColor);
}
if(shapeType != -1){
gradientDrawable.setShape(shapeType);
}
//是否为圆形
if(shapeType != GradientDrawable.OVAL){
// 如果设定的有Corner Radius就认为是4个角一样的Button， 否则就是4个不一样的角 Button
if (cornesRadius != 0) {
gradientDrawable.setCornerRadius(cornesRadius);
} else {
//1、2两个参数表示左上角，3、4表示右上角，5、6表示右下角，7、8表示左下角
gradientDrawable.setCornerRadii(new float[] { topLeftRadius,
topLeftRadius, topRightRadius, topRightRadius,
bottomRightRadius, bottomRightRadius, bottomLeftRadius,
bottomLeftRadius });
}
}
if (gradientUseLevel)
gradientDrawable.setUseLevel(gradientUseLevel);
if (gradientType != -1)
gradientDrawable.setGradientType(gradientType);
gradientDrawable.setGradientRadius(gradientRadius);
setBackground(gradientDrawable);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_DOWN) {
if (touchColor != Color.TRANSPARENT) {
gradientDrawable.setColor(touchColor);
setBackground(gradientDrawable);
postInvalidate();
}
} else if (event.getAction() == MotionEvent.ACTION_UP
|| event.getAction() == MotionEvent.ACTION_CANCEL) {
if (touchColor != Color.TRANSPARENT) {
gradientDrawable.setColor(solidColor);
setBackground(gradientDrawable);
}
}
return super.onTouchEvent(event);
}
private GradientDrawable.Orientation getOrientation(int gradientOrientation) {
GradientDrawable.Orientation orientation = null;
switch (gradientOrientation) {
case 0:
orientation = GradientDrawable.Orientation.BL_TR;
break;
case 1:
orientation = GradientDrawable.Orientation.BOTTOM_TOP;
break;
case 2:
orientation = GradientDrawable.Orientation.BR_TL;
break;
case 3:
orientation = GradientDrawable.Orientation.LEFT_RIGHT;
break;
case 4:
orientation = GradientDrawable.Orientation.RIGHT_LEFT;
break;
case 5:
orientation = GradientDrawable.Orientation.TL_BR;
break;
case 6:
orientation = GradientDrawable.Orientation.TOP_BOTTOM;
break;
case 7:
orientation = GradientDrawable.Orientation.TR_BL;
break;
}
return orientation;
}
}
3. xml 加上这句xmlns:flatui="http://schemas.android.com/apk/res-auto"（不解释）
<!--
flatui:strokeDashGap="5dp"
flatui:strokeDashWidth="5dp"
flatui:gradientOrientation = "BOTTOM_TOP"
-->
<com.klower.component.ShapeTextView
android:id="@+id/shapetextview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:gravity="center"
android:padding="5dp"
android:text="ShapeTextview"
android:textSize="25sp"
flatui:bottomLeftRadius="10dp"
flatui:bottomRightRadius="0dp"
flatui:gradientCenterColor="#00000000"
flatui:gradientEndColor="#64DE0E"
flatui:gradientStartColor="#D11B1E"
flatui:solidColor="#64D11C"
flatui:stroke_Color="#D11B1E"
flatui:stroke_Width="2dp"
flatui:topLeftRadius="0dp"
flatui:topRightRadius="10dp"
flatui:touchSolidColor="#F5B2B9" />
<com.klower.component.ShapeTextView
flatui:strokeDashGap="5dp"
flatui:strokeDashWidth="5dp"
android:id="@+id/shapetextview1"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_margin="10dp"
android:gravity="center"
android:padding="5dp"
android:text="ORAL"
android:textSize="25sp"
flatui:gradientCenterColor="#00000000"
flatui:gradientEndColor="#64DE0E"
flatui:gradientStartColor="#D11B1E"
flatui:solidColor="#64D11C"
flatui:stroke_Color="#D11B1E"
flatui:stroke_Width="2dp"
flatui:shapeType = "OVAL"
flatui:touchSolidColor="#F5B2B9" />
具体效果可以自己可以看源码 然后调试属性 只要你想要做出的效果基本都可以实现
有问题可以留言