[置顶] Android GradientDrawable高级应用以后完全用不上美工了

先看截图 1图为自定义的Textview 2、3图为点击效果

[置顶] Android GradientDrawable高级应用以后完全用不上美工了_第1张图片

具体实现如下：

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"（不解释）

<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" />

具体效果可以自己可以看源码然后调试属性只要你想要做出的效果基本都可以实现

有问题可以留言

更多相关文章

随机推荐

[置顶] Android GradientDrawable高级应用 以后完全用不上美工了

更多相关文章

随机推荐

[置顶] Android GradientDrawable高级应用以后完全用不上美工了