转载

Android渐变研究

下面介绍一个android实现渐变的方式

GradientDrawable

用GradientDrawable实现渐变可以通过xml或者代码实现，xml实现需要在drawable下建立xml文件，在标签下建立标签。

例如gradlient_background.xml文件如下：

<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android">     <item>         <shape android:shape="rectangle">             <gradient android:startColor="#aa000000"                       android:endColor="@android:color/transparent"                       android:angle="90"                 />         </shape>     </item> </selector>

设置方法如下：

<RelativeLayout     xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:tools="http://schemas.android.com/tools"     android:layout_width="match_parent"     android:layout_height="match_parent"     >      <LinearLayout         android:id="@+id/layout_bottom"         android:layout_width="match_parent"         android:layout_height="300dp"         android:layout_alignParentBottom="true"         android:background="@drawable/gradlient_background"         android:orientation="horizontal"         />  </RelativeLayout>

效果图如下：

Android渐变研究

上面的例子中我们在gradient标签中设置了startColor，endColor，angle用来表示开始结束的颜色和变化方向。 gradient标签的所有属性说明如下：

android:angle：（Integer）渐变的角度，线性渐变时才有效，必须是45的倍数，0表示从左到右，90表示从下到上

android:centerX：（Float）渐变中心的相对X坐标，放射渐变时才有效，在0.0到1.0之间，默认为0.5，表示在正中间

android:centerY：（Float）渐变中心的相对X坐标，放射渐变时才有效，在0.0到1.0之间，默认为0.5，表示在正中间

android:centerColor ：（Color）中间点的色值

android:endColor ：（Color）结束的色值

android:startColor：（Color）开始的色值。

android:gradientRadius：（Float）渐变的半径，只有在android:type="radial"的时候有效。

android:type ：有三种类型 "linear" 线性渐变， "radial" 放射渐变，设置该项时，android:gradientRadius也必须设置 "sweep" 扫描性渐变

android:useLevel ：如果为true，将被当成LevelListDrawable使用。

除了用xml设置，还可以在编码中设置，标签对应的类是GradientDrawable，GradientDrawable是Drawable的子类。代码如下：

public class TestActivity extends Activity {      @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(new SampleView(this));     }      private static class SampleView extends View {         private Rect mRect;         private GradientDrawable mDrawable;          public SampleView(Context context) {             super(context);             setFocusable(true);              mRect = new Rect(0, 0, 300, 300);             mDrawable = new GradientDrawable(GradientDrawable.Orientation.TL_BR,                     new int[] { 0xaa000000,                             0xFFFFFFFF });             mDrawable.setShape(GradientDrawable.RECTANGLE);             mDrawable.setGradientRadius((float)(Math.sqrt(2) * 60));         }          static void setCornerRadii(GradientDrawable drawable, float r0,                                    float r1, float r2, float r3) {             drawable.setCornerRadii(new float[] { r0, r0, r1, r1,                     r2, r2, r3, r3 });         }          @Override protected void onDraw(Canvas canvas) {              mDrawable.setBounds(mRect);              float r = 16;              canvas.save();             canvas.translate(10, 10);             mDrawable.setGradientType(GradientDrawable.LINEAR_GRADIENT);             setCornerRadii(mDrawable, r, r, 0, 0);             mDrawable.draw(canvas);             canvas.restore();              canvas.save();             canvas.translate(10 + mRect.width() + 10, 10);             mDrawable.setGradientType(GradientDrawable.RADIAL_GRADIENT);             setCornerRadii(mDrawable, 0, 0, r, r);             mDrawable.draw(canvas);             canvas.restore();              canvas.translate(0, mRect.height() + 10);              canvas.save();             canvas.translate(10, 10);             mDrawable.setGradientType(GradientDrawable.SWEEP_GRADIENT);             setCornerRadii(mDrawable, 0, r, r, 0);             mDrawable.draw(canvas);             canvas.restore();          }     } }

效果如下图：

Android渐变研究

可以看到，代码设置和xml设置大同小异，注意实例化的操作：

public GradientDrawable(Orientation orientation, int[] colors) {         this(new GradientState(orientation, colors));     }

第一个参数是一个枚举，表示渐变方向，这个用来相当于xml里面的angle，只不过angle是用45的倍数表示方向，而枚举看上去更清楚了。

public enum Orientation {         /** draw the gradient from the top to the bottom */         TOP_BOTTOM,         /** draw the gradient from the top-right to the bottom-left */         TR_BL,         /** draw the gradient from the right to the left */         RIGHT_LEFT,         /** draw the gradient from the bottom-right to the top-left */         BR_TL,         /** draw the gradient from the bottom to the top */         BOTTOM_TOP,         /** draw the gradient from the bottom-left to the top-right */         BL_TR,         /** draw the gradient from the left to the right */         LEFT_RIGHT,         /** draw the gradient from the top-left to the bottom-right */         TL_BR,     }

第二个参数是一个color数组，相当于startColor，endColor，centerColor，其中centerColor可以省略,但是至少要设置两个颜色。 mDrawable.setGradientType可以设置三种type同xml一样，分别是GradientDrawable.LINEAR_GRADIENT，GradientDrawable .RADIAL_GRADIENT，GradientDrawable.SWEEP_GRADIENT。

Shader类的子类

Shader类的子类创建允许使用多种固体颜色填充绘图对象的Paint，功能不只是实现渐变填充。有三Shader是用来做渐变的： LinearGradient、RadialGradient和 SweepGradient. 看名字就知道这三种和上面的GradientDrawable的三种type是对应的。只不过是用Shader实现了。

要在绘图的时候使用一个Shader，可以使用setShader方法将其应用到一个Paint中，如下面的代码所示：

Paint shaderPaint = new Paint();       shaderPaint.setShader(myLinearGradient);

使用这个Paint所绘制的任何东西都将使用你指定的Shader进行填充，而不是使用Paint本身的颜色进行填充。下面使用LinearGradient实现渐变，对于RadialGradient和 SweepGradient使用很类似。

public class TestActivity extends Activity {                      @Override             protected void onCreate(Bundle savedInstanceState) {                 super.onCreate(savedInstanceState);                 setContentView(new SampleView(this));             }                      private static class SampleView extends View {                 private Paint mPaint;                 private Rect mRect;                 LinearGradient lg1 ;                 LinearGradient lg2 ;                 LinearGradient lg3 ;                          public SampleView(Context context) {                     super(context);                     setFocusable(true);                              mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);                     mRect = new Rect(0, 0, 300, 300);                               lg1 = new LinearGradient(0,0,150,150, Color.TRANSPARENT,Color.BLACK,                             Shader.TileMode.MIRROR);                      lg2 = new LinearGradient(0,0,150,150, Color.TRANSPARENT,Color.BLACK,                             Shader.TileMode.CLAMP);                      lg3 = new LinearGradient(0,0,150,150, Color.TRANSPARENT,Color.BLACK,                             Shader.TileMode.REPEAT);                          }                          @Override protected void onDraw(Canvas canvas) {                     canvas.save();                     canvas.translate(10, 10);                     mPaint.setShader(lg1) ;                     canvas.drawRect(mRect,mPaint);                     canvas.restore();                              canvas.save();                     canvas.translate(10 + mRect.width() + 10, 10);                     mPaint.setShader(lg2) ;                     canvas.drawRect(mRect,mPaint);                     canvas.restore();                              canvas.save();                     canvas.translate(10,10 + mRect.height() + 10);                     mPaint.setShader(lg3) ;                     canvas.drawRect(mRect,mPaint);                     canvas.restore();                 }             }         }

效果如下：

Android渐变研究

上面的例子使用了三种Shader TileModes，如果Shader画刷所定义的区域比要填充的区域小，那么TileMode将会决定如何处理剩余的区域：

MIRROR 在水平和垂直方向上拉伸Shader图像，这样每一个图像就都能与上一个缝合了。

CLAMP 使用Shader的边界颜色来填充剩余的空间。

REPEAT 在水平和垂直方向上重复Shader图像，但不拉伸它。

LinearGradient有两种方式实例化：

LinearGradient(float x0, float y0, float x1, float y1, int[] colors, float[] positions, Shader.TileMode tile) LinearGradient(float x0, float y0, float x1, float y1, int color0, int color1, Shader.TileMode tile)

他们的不同之处为参数中第一种方法可以用颜色数组，和位置来实现更细腻的过渡效果，比如颜色采样int[] colors数组中存放20种颜色，则渐变将会逐一处理。而第二种方法参数仅为起初颜色color0和最终颜色color1。

自定义渐变

可以利用工具类重新计算LinearGradient的颜色参数，从而实现更柔和的渐变，仍然使用最开始的LinearLayout布局测试：

public class TestActivity extends Activity  {                @Override          protected void onCreate(Bundle savedInstanceState) {              super.onCreate(savedInstanceState);              setContentView(R.layout.activity_test);                    if(Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.JELLY_BEAN) {                  View bottom = findViewById(R.id.layout_bottom);                  bottom.setBackground(                          ScrimUtil.makeCubicGradientScrimDrawable(                                  0xaa000000, //颜色                                  8, //渐变层数                                  Gravity.BOTTOM)); //起始方向              }          }            }

ScrimUtil代码如下：

public class ScrimUtil {      private ScrimUtil() {     }      /**      * Creates an approximated cubic gradient using a multi-stop linear gradient. See      * <a href="https://plus.google.com/+RomanNurik/posts/2QvHVFWrHZf">this post</a> for more      * details.      */     public static Drawable makeCubicGradientScrimDrawable(int baseColor, int numStops, int gravity) {         numStops = Math.max(numStops, 2);          PaintDrawable paintDrawable = new PaintDrawable();         paintDrawable.setShape(new RectShape());          final int[] stopColors = new int[numStops];          int red = Color.red(baseColor);         int green = Color.green(baseColor);         int blue = Color.blue(baseColor);         int alpha = Color.alpha(baseColor);          for (int i = 0; i < numStops; i++) {             float x = i * 1f / (numStops - 1);             float opacity = constrain(0, 1, (float) Math.pow(x, 3));             stopColors[i] = Color.argb((int) (alpha * opacity), red, green, blue);         }          final float x0, x1, y0, y1;         switch (gravity & Gravity.HORIZONTAL_GRAVITY_MASK) {             case Gravity.LEFT:  x0 = 1; x1 = 0; break;             case Gravity.RIGHT: x0 = 0; x1 = 1; break;             default:            x0 = 0; x1 = 0; break;         }         switch (gravity & Gravity.VERTICAL_GRAVITY_MASK) {             case Gravity.TOP:    y0 = 1; y1 = 0; break;             case Gravity.BOTTOM: y0 = 0; y1 = 1; break;             default:             y0 = 0; y1 = 0; break;         }          paintDrawable.setShaderFactory(new ShapeDrawable.ShaderFactory() {             @Override             public Shader resize(int width, int height) {                 LinearGradient linearGradient = new LinearGradient(                         width * x0,                         height * y0,                         width * x1,                         height * y1,                         stopColors, null,                         Shader.TileMode.CLAMP);                 return linearGradient;             }         });          return paintDrawable;     }      private  static float constrain(float min, float max, float v) {         return Math.max(min, Math.min(max, v));     } }

最终效果：

Android渐变研究

使用属性动画实现动态渐变

使用ArgbEvaluator.evaluate(floatfraction, Object startValue, Object endValue); 可以实现颜色动态渐变，使用一个自定义view来测试：

public class TestLayout extends View {      public TestLayout(Context context) {         super(context);         init(null, 0);     }     public TestLayout(Context context, AttributeSet attrs) {         super(context, attrs);         init(attrs, 0);     }     public TestLayout(Context context, AttributeSet attrs, int defStyle) {         super(context, attrs, defStyle);         init(attrs, defStyle);     }      @SuppressWarnings("deprecation")     private void init(AttributeSet attrs, int defStyle) {     }       /**      * =============================================================================================      * The Animator methods      * =============================================================================================      */     /**      * 开始背景动画（此处为属性动画）      */     void startBackgroundAnimator(){         /*          *参数解释：          *target：设置属性动画的目标类，此处是当前自定义view所以使用this          *propertyName:属性名称。（要对View的那个属性执行动画操作）          *values数组：根据时间的推移动画将根据数组的内容进行改变          */         ValueAnimator anim = ObjectAnimator.ofInt(this, "backgroundColor", Color.RED,Color.BLUE,Color.GRAY,Color.GREEN);         //动画持续时间为3秒         anim.setDuration(3000);         /*          * ArgbEvaluator：这种评估者可以用来执行类型之间的插值整数值代表ARGB颜色。          * FloatEvaluator：这种评估者可以用来执行浮点值之间的插值。          * IntEvaluator：这种评估者可以用来执行类型int值之间的插值。          * RectEvaluator：这种评估者可以用来执行类型之间的插值矩形值。          *          * 由于本例是改变View的backgroundColor属性的背景颜色所以此处使用ArgbEvaluator          */         anim.setEvaluator(new ArgbEvaluator());         //设置动画重复次数，此处设置无限重复         anim.setRepeatCount(ValueAnimator.INFINITE);         //设置重复模式         anim.setRepeatMode(ValueAnimator.REVERSE);         //开启动画         anim.start();     } }

布局如下：

<RelativeLayout               xmlns:android="http://schemas.android.com/apk/res/android"               xmlns:tools="http://schemas.android.com/tools"               android:layout_width="match_parent"               android:layout_height="match_parent"               >                          <com.mxn.soul.demo.TestLayout                   android:id="@+id/layout_bottom"                   android:layout_width="match_parent"                   android:layout_height="300dp"                   android:layout_alignParentBottom="true"                   android:orientation="horizontal"                   />                      </RelativeLayout>

在activity中调用：

public class TestActivity extends Activity  {      @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_test);          TestLayout bottom = (TestLayout) findViewById(R.id.layout_bottom);         bottom.startBackgroundAnimator() ;     }  }