联盟服务 發表於 2022-5-9 00:46:00

Android开发 GradientDrawable详解

<h1>前言</h1>
<p>　　GradientDrawable 支持渐变色的Drawable，与shapeDrawable在画型上是类似的，多了支持渐变色。代码上的GradientDrawable比在xml里的shape下gradient属性强大的多，因为shape下gradient属性只支持三色阶渐变，而GradientDrawable可以有更多的色阶渐变。</p>
<p>&nbsp;</p>
<p>GradientDrawable在Android中便是shape标签的代码实现，利用GradientDrawable也可以创建出各种形状。<br>　GradientDrawable 支持渐变色的Drawable，与shapeDrawable在画型上是类似的，多了支持渐变色。代码上的GradientDrawable比在xml里的shape下gradient属性强大的多，因为shape下gradient属性只支持三色阶渐变，而GradientDrawable可以有更多的色阶渐变。</p>
<p>GradientDrawable使用方法<br>1. 获取控件的shape并进行动态修改：<br>既然GradientDrawable是shape的动态实现，那么他就可以通过动态的获取控件的shape获取实例并进行修改，<br>比如我的上一篇文章<br>android 动态生成shape以及动态的改变shape颜色</p>
<p>2. 通过代码动态创建：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">什么都不指定默认为矩形</span>
GradientDrawable background = <span style="color: rgba(0, 0, 255, 1)">new</span><span style="color: rgba(0, 0, 0, 1)"> GradientDrawable();
background.setColor(Color.GREEN);
view.setBackgroundDrawable(background);</span></pre>
</div>
<p>&nbsp;</p>
<p><br>&nbsp;<br>如果想要设置形状的话可以通过setShape(int shape) 方法来进行设置，这里一共可以设置四种形状：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">GradientDrawable.RECTANGLE:矩形
GradientDrawable.OVAL:椭圆形
GradientDrawable.LINE:一条线
GradientDrawable.RING:环形（环形试了好久不知为何画不出来）</span></pre>
</div>
<p>&nbsp;</p>
<p><br>这里用GradientDrawable.OVAL来实验一下：</p>
<div class="cnblogs_code">
<pre>GradientDrawable background = <span style="color: rgba(0, 0, 255, 1)">new</span><span style="color: rgba(0, 0, 0, 1)"> GradientDrawable();
background.setColor(Color.GREEN);
background.setShape(GradientDrawable.OVAL);
view.setBackgroundDrawable(background);</span></pre>
</div>
<p>&nbsp;</p>
<p><br>&nbsp;<br>如果想让效果更加丰富一些添加描边或者颜色渐变：</p>
<div class="cnblogs_code">
<pre>GradientDrawable background = <span style="color: rgba(0, 0, 255, 1)">new</span><span style="color: rgba(0, 0, 0, 1)"> GradientDrawable();
background.setShape(GradientDrawable.OVAL);
background.setStroke(</span>10,Color.RED);<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">设置宽度为10px的红色描边</span>
background.setGradientType(GradientDrawable.LINEAR_GRADIENT);<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">设置线性渐变，除此之外还有：GradientDrawable.SWEEP_GRADIENT（扫描式渐变），GradientDrawable.RADIAL_GRADIENT（圆形渐变）</span>
background.setColors(<span style="color: rgba(0, 0, 255, 1)">new</span> <span style="color: rgba(0, 0, 255, 1)">int</span>[]{Color.RED,Color.BLUE});<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">增加渐变效果需要使用setColors方法来设置颜色（中间可以增加多个颜色值）</span>
view.setBackgroundDrawable(background);</pre>
</div>
<p>&nbsp;</p>
<p><br>&nbsp;</p>
<h1>画线</h1>
<div class="cnblogs_code">
<pre>      GradientDrawable gradientDrawable = new GradientDrawable();
      gradientDrawable.setShape(GradientDrawable.LINE);
      gradientDrawable.setStroke(5, Color.YELLOW);//线的宽度 与 线的颜色
      mTextView.setBackground(gradientDrawable);</pre>
</div>
<p>效果图:</p>
<p><img src="https://img2018.cnblogs.com/blog/1497956/201907/1497956-20190725113213239-1307263181.png" alt="" class="medium-zoom-image"></p>
<h1>画虚线</h1>
<div class="cnblogs_code">
<pre>      mTextView.setLayerType(View.LAYER_TYPE_SOFTWARE,null); //要显示虚线一定要关闭硬件加速
      GradientDrawable gradientDrawable = new GradientDrawable();
      gradientDrawable.setShape(GradientDrawable.LINE);
      gradientDrawable.setStroke(1, Color.BLACK, 10, 10);//第一个参数为线的宽度第二个参数是线的颜色 第三个参数是虚线段的长度 第四个参数是虚线段之间的间距长度
      mTextView.setBackground(gradientDrawable);</pre>
</div>
<p>也可以在布局里关闭指定view的硬件加速</p>
<div class="cnblogs_code">
<pre>android:layerType="software"</pre>
</div>
<p>效果图:</p>
<p><img src="https://img2018.cnblogs.com/blog/1497956/201907/1497956-20190725115207991-397503458.png" alt="" class="medium-zoom-image"></p>
<h1>画圆</h1>
<div class="cnblogs_code">
<pre>      GradientDrawable gradientDrawable = new GradientDrawable();
      gradientDrawable.setShape(GradientDrawable.OVAL);
      gradientDrawable.setColor(Color.BLUE);
      gradientDrawable.setSize(50,50);
      mTextView.setBackground(gradientDrawable);</pre>
</div>
<p>效果图:</p>
<p><img src="https://img2018.cnblogs.com/blog/1497956/201907/1497956-20190725105004095-377278427.png" alt=""></p>
<h1>画圆环</h1>
<div class="cnblogs_code">
<pre>      GradientDrawable gradientDrawable = new GradientDrawable();
      gradientDrawable.setShape(GradientDrawable.OVAL);
      gradientDrawable.setColor(Color.BLUE);
      gradientDrawable.setStroke(10,Color.YELLOW);
      gradientDrawable.setSize(50,50);
      mTextView.setBackground(gradientDrawable);</pre>
</div>
<p>效果图:</p>
<p><img src="https://img2018.cnblogs.com/blog/1497956/201907/1497956-20190725105139902-2001458724.png" alt=""></p>
<h1>圆角矩形</h1>
<div class="cnblogs_code">
<div class="cnblogs_code_toolbar">&nbsp;</div>
<pre>      GradientDrawable gradientDrawable = new GradientDrawable();
      gradientDrawable.setShape(GradientDrawable.RECTANGLE);
      gradientDrawable.setColor(Color.RED);
      gradientDrawable.setStroke(10,Color.BLUE);
      gradientDrawable.setCornerRadius(10);
      gradientDrawable.setSize(50,50);
      mTextView.setBackground(gradientDrawable);</pre>
<div class="cnblogs_code_toolbar">&nbsp;</div>
</div>
<p>效果图:</p>
<p><img src="https://img2018.cnblogs.com/blog/1497956/201907/1497956-20190725105351684-754395280.png" alt=""></p>
<h1>虚线矩形</h1>
<div class="cnblogs_code">
<pre>      GradientDrawable gradientDrawable = new GradientDrawable();
      gradientDrawable.setShape(GradientDrawable.LINEAR_GRADIENT);
      gradientDrawable.setStroke(1, Color.GREEN,30, 30);
      mTextView.setBackground(gradientDrawable);</pre>
</div>
<p>效果图:</p>
<p><img src="https://img2018.cnblogs.com/blog/1497956/201907/1497956-20190725114608383-663368380.png" alt="" class="medium-zoom-image"></p>
<h1>颜色渐变</h1>
<h3>线性渐变</h3>
<div class="cnblogs_code">
<div class="cnblogs_code_toolbar">&nbsp;</div>
<pre>      int[] colors = {Color.YELLOW, Color.GREEN, Color.BLUE};
      GradientDrawable gradientDrawable = new GradientDrawable();
      gradientDrawable.setShape(GradientDrawable.RECTANGLE);
      gradientDrawable.setColors(colors); //添加颜色组
      　gradientDrawable.setGradientType(GradientDrawable.LINEAR_GRADIENT);//设置线性渐变
      gradientDrawable.setSize(50,50);
      mTextView.setBackground(gradientDrawable);</pre>
<div class="cnblogs_code_toolbar">&nbsp;</div>
</div>
<p>效果图:</p>
<p><img src="https://img2018.cnblogs.com/blog/1497956/201907/1497956-20190725111016617-1515481208.png" alt=""></p>
<h3>改变线性渐变方向</h3>
<div class="cnblogs_code">
<div class="cnblogs_code_toolbar">&nbsp;</div>
<pre>      int[] colors = {Color.YELLOW, Color.GREEN, Color.BLUE};
      GradientDrawable gradientDrawable = new GradientDrawable();
      gradientDrawable.setShape(GradientDrawable.RECTANGLE);
      gradientDrawable.setColors(colors); //添加颜色组
      gradientDrawable.setGradientType(GradientDrawable.LINEAR_GRADIENT);//设置线性渐变
      gradientDrawable.setOrientation(GradientDrawable.Orientation.RIGHT_LEFT);//设置渐变方向
      gradientDrawable.setSize(50,50);
      mTextView.setBackground(gradientDrawable);</pre>
<div class="cnblogs_code_toolbar">&nbsp;</div>
</div>
<p>效果图:</p>
<p><img src="https://img2018.cnblogs.com/blog/1497956/201907/1497956-20190725112534867-55050029.png" alt=""></p>
<h3>半径渐变</h3>
<div class="cnblogs_code">
<div class="cnblogs_code_toolbar">&nbsp;</div>
<pre>      int[] colors = {Color.YELLOW, Color.GREEN, Color.BLUE};
      GradientDrawable gradientDrawable = new GradientDrawable();
      gradientDrawable.setShape(GradientDrawable.RECTANGLE);
      gradientDrawable.setColors(colors); //添加颜色组
      gradientDrawable.setGradientType(GradientDrawable.RADIAL_GRADIENT);//设置半径渐变
      gradientDrawable.setGradientRadius(50);//渐变的半径值
      gradientDrawable.setSize(50,50);
      mTextView.setBackground(gradientDrawable);</pre>
<div class="cnblogs_code_toolbar">&nbsp;</div>
</div>
<p>效果图:</p>
<p><img src="https://img2018.cnblogs.com/blog/1497956/201907/1497956-20190725111146350-1289010982.png" alt=""></p>
<h3>扫描渐变</h3>
<div class="cnblogs_code">
<div class="cnblogs_code_toolbar">&nbsp;</div>
<pre>      int[] colors = {Color.YELLOW, Color.GREEN, Color.BLUE};
      GradientDrawable gradientDrawable = new GradientDrawable();
      gradientDrawable.setShape(GradientDrawable.RECTANGLE);
      gradientDrawable.setColors(colors); //添加颜色组
      gradientDrawable.setGradientType(GradientDrawable.SWEEP_GRADIENT);//设置扫描渐变
      gradientDrawable.setGradientCenter(0.5f,0.5f);//渐变中心点
      gradientDrawable.setSize(50,50);
      mTextView.setBackground(gradientDrawable);</pre>
<div class="cnblogs_code_toolbar">&nbsp;</div>
</div>
<p><img src="https://img2018.cnblogs.com/blog/1497956/201907/1497956-20190725112304501-101313598.png" alt=""></p>
<h1>防抖</h1>
<div class="cnblogs_code">
<pre>gradientDrawable.setDither(true);</pre>
</div>
<p>可以让渐变的时候颜色阶梯降低,变得更柔和</p>
<p>&nbsp;</p>
<h1>透明度</h1>
<div class="cnblogs_code">
<pre>      GradientDrawable gradientDrawable = new GradientDrawable();
      gradientDrawable.setShape(GradientDrawable.RECTANGLE);
      gradientDrawable.setColor(Color.YELLOW);
      gradientDrawable.setAlpha(70);//设置透明度
      mTextView.setBackground(gradientDrawable);</pre>
</div>
<p><img src="https://img2018.cnblogs.com/blog/1497956/201907/1497956-20190725112820997-2016809731.png" alt=""></p>

</div>
<div id="MySignature" role="contentinfo">
    <br>
       

<span style="line-height: 15pt">访问我</span>

   <br>
   <br>
<img alt="" src="http://files.cnblogs.com/endv/Endv.gif" id="img" width="100%">      <br>         
<br><table width="100%" border="0" cellpadding="3" cellspacing="0">

<tbody>

   <tr><td align="center"> <br> <span style="line-height: 15pt"></span></td> </tr>
<tr>




<td align="center">
<img src="https://images.cnblogs.com/cnblogs_com/endv/615386/o_qrcode_for_gh_1a3bf96a4709_430.jpg" width="100" height="100" border="0" alt="www.endv.cn">
<br><span style="line-height: 15pt">关注天云</span>
<br>定期福利</td>

</tr>

</tbody></table>   <br>    <br>

<div class="sky">
        <div class="clouds_one"></div>
        <div class="clouds_two"></div>
        <div class="clouds_three"></div>
</div> <br><br><br>
来源：https://www.cnblogs.com/endv/p/16247691.html
頁: [1]
查看完整版本: Android开发 GradientDrawable详解