Android GradientDrawable高级应用 以后完全用不上美工了

/article/8472489.html

先看截图 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" />

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

有问题可以留言