Android GradientDrawable進階應用程式 以後完全用不上美工了，gradientdrawable

Android GradientDrawable進階應用程式 以後完全用不上美工了，gradientdrawable

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

 具體效果可以自己可以看源碼  然後調試屬性 只要你想要做出的效果基本都可以實現 

有問題可以留言