canvas教程

AndroidShape渲染的使用(经典,学习研究不后悔)(二十八)

字号+ 作者:H5之家 来源:H5之家 2015-10-06 15:23 我要评论( )

AndroidShape渲染的使用(经典,学习研究不后悔)(二十八)_踏浪星空编程_新浪博客,踏浪星空编程,

Android Shape渲染的使用(经典,学习研究不后悔)(二十八) (2013-12-24 18:03:13)

标签: 杂谈

好久都没有写博文了,感觉自己变懒了,真对不起…-_-…   也有部分原因是因为我想写的东西网上已经有了,再加上还有很多方面小马我也正在学习,所以….这段时间一直暂停更新我的博客文章,看到博客的访问量一天天的增加,很开心 。。。O_O。。。这一阵子也看了各种各校的书籍,技术类的、非技术类的,也找到了自身很多的不足之处,我会用更多的心思来弥补不足,希望大家一起努力、加油!
       以上是对自己讲的一点废话,现在开始今天的主题,控件渲染Shade(也可以叫着色器,但坏小马不喜欢这么叫,着色器….怪怪的!)的使用,一直都有在关注这方面的东西,网上也有部分文章写得不错,但是还是觉得不过瘾,往往都是写一点点自己在工作中使用过的,有看到过很多人经典问这个边框那个边框的,呵呵,今天小马就总结下这方面的东西,希望对这块知识有兴趣的帅果、美驴们有所帮助或提高,也备自己不时之用,果断先看效果再一步步看代码!希望大家仔细看看我在XML及.java中添加的注释,相信你不会后悔花时间在这文章上的,今天的DEMO效果图如下:

shape


 


     工程目录结构如下,由于太长的原因,部分已缩进:

捕获


              好了,效果看完了,下一步开始看代码吧,亲…….静下心….一步步来!!!     PS:模拟器与eclipse效果中
预览的以下部分有点不一样,可能是eclipse与模拟器二者之前存在Bug吧…吼吼….
首先,先做个小小的铺垫:
Android提供的Shader类主要是渲染图像以及一些几何图形。
Shader有几个直接子类:
BitmapShader    : 主要用来渲染图像
LinearGradient  :用来进行线性渲染
RadialGradient  : 用来进行环形渲染
SweepGradient   : 扫描渐变—围绕一个中心点扫描渐变就像电影里那种雷达扫描,用来梯度渲染。
ComposeShader   : 组合渲染,可以和其他几个子类组合起来使用。
小记:Android控件渲染Shade的实现方式有两种,(一、JAVA代码实现;二、XML配置来实现),
        小马自己比较偏向XML实现,原因很简单:
         1.你代码实现写得再经典,不跑起来效果看不到!
        2.跑一遍Android模拟器,思路可以断一大节!(我很笨,经常这样 T_T)!
        3.JAVA代码的每个函数参数你也得一个个去啃(老板管效率,不管怎么实现,等你啃完参数时,XML已经看到效果了 O_o  ……走
             起…..)!
        4,这是最主要的一点,Eclipse或者I/O大会刚推出的Android Studio,实时显示,我就特别                  喜欢立竿见影 ^_^ !
        5.二者各有利弊,JAVA代码实现可以动态且灵活滴,XML配置的统一但不杂乱 @_@!!
Now……..   Ladies and 乡亲们,看举一种JAVA代码excmple,其余类型的与之类似,亲们自己“度娘 、谷哥 ”:
LinearGradient是线性渐变,用法如下:
Gradient是基于Shader类,所以我们通过Paint的setShader方法来设置这个渐变,代码如下:
Paint p=new Paint();
LinearGradient lg=newLinearGradien(0,0,100,100,Color.RED,Color.BLUE,Shader.TileMode.MIRROR);
Gradient是基于Shader类,所以我们通过Paint的setShader方法来设置这个渐变,代码如下:
p.setShader(lg);
canvas.drawCicle(0,0,200,p); //参数3为画圆的半径,类型为float型。
先不说效果了,PS:看着上面的代码,有没有想哭的冲动啊 ? ? ?感觉乱乱的,不知道是什么,然后单词gradient不懂,一查如下(晕),看着挺牛,还是只是个渲染!不管了,继续往下看…
再看XML布局文件代码:
           一:主布局文件代码如下(为了方便,布局是直接拖的,大家不用太关注):
<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"
    android:background="@drawable/background"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >
    <com.xiaoma.shadedemo.TextViewBorder
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="22dp"
        android:layout_marginTop="20dp"
        android:text=" JAVA实现带四条边框"
        android:textColor="@android:color/white"
        android:textSize="25sp" />
    <com.xiaoma.shadedemo.TextViewBorderLeftRight
        android:id="@+id/TextViewBorder01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@android:color/white"
        android:layout_alignLeft="@+id/textView1"
        android:layout_below="@+id/textView1"
        android:layout_marginTop="20dp"
        android:text="JAVA实现带左右边框"
        android:textSize="25sp" />
    <com.xiaoma.shadedemo.TextViewBorderUnder
        android:id="@+id/TextViewBorder02"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/TextViewBorder01"
        android:textColor="@android:color/white"
        android:layout_below="@+id/TextViewBorder01"
        android:layout_marginTop="33dp"
        android:text="JAVA代 实现下边框"
        android:textSize="25sp" />
    <TextView
        android:id="@+id/TextViewBorderUnder01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/button1"
        android:layout_below="@+id/TextViewBorder02"
        android:layout_marginTop="20dp"
        android:text="Shape XML实现边框"
        android:background="@drawable/shape_test"
        android:textColor="@android:color/white"
        android:textSize="25sp" />
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/TextViewBorder02"
        android:layout_below="@+id/TextViewBorderUnder01"
        android:layout_marginTop="29dp"
        android:background="@drawable/shape_selector"
        android:text="Selector与Shape混用按钮"
        android:textColor="@android:color/black" />
</RelativeLayout> 二:上面布局中使用的自定义控件代 及Shape渲染代 分别如下:                  2.1:JAVA实现带四条边框(自定义TextView JAVA代码一)
package com.xiaoma.shadedemo;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.widget.TextView;
public class TextViewBorder extends TextView
{
   
    // 方式一:
    public TextViewBorder(Context context, AttributeSet attrs)
    {
        super(context, attrs);
    }
    // 方式二:
   
   
    @Override
    protected void onDraw(Canvas canvas)
    {
        super.onDraw(canvas);
        Paint paint = new Paint();
        paint.setAntiAlias(true);
        paint.setColor(Color.GREEN);
        canvas.drawLine(0, 0, this.getWidth() - 1, 0, paint);// 绘制上边框
        canvas.drawLine(0, 0, 0, this.getHeight() - 1, paint); // 绘制左边框
        canvas.drawLine(this.getWidth() - 1, 0, this.getWidth() - 1, this.getHeight() - 1, paint); // 绘制右边框
        canvas.drawLine(0, this.getHeight() - 1, this.getWidth() - 1, this.getHeight() - 1, paint);// 绘制下边框
    }
   
}
 2.2:JAVA实现带左右边框(自定义TextView JAVA代 二)

package com.xiaoma.shadedemo;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.widget.TextView;
public class TextViewBorderLeftRight extends TextView
{
   
    // 方式一:
    public TextViewBorderLeftRight(Context context, AttributeSet attrs)
    {
        super(context, attrs);
    }
    // 方式二:
   
   
    @Override
    protected void onDraw(Canvas canvas)
    {
        super.onDraw(canvas);
        Paint paint = new Paint();
        paint.setAntiAlias(true);
        paint.setColor(Color.GREEN);
        canvas.drawLine(0, 0, 0, getHeight(), paint);
        // canvas.drawLine(getWidth(), 0, getWidth() - 1, getHeight() - 1, paint);
        canvas.drawLine(this.getWidth() - 1, 0, this.getWidth() - 1, this.getHeight() - 1, paint);
        // canvas.drawLine(0, 0, 0, this.getHeight() - 1, paint);
        // canvas.drawLine(this.getWidth() - 1, 0, this.getWidth() - 1, this.getHeight() - 1, paint);
        // canvas.drawLine(0, this.getHeight() - 1, this.getWidth() - 1, this.getHeight() - 1, paint);
    }
   
}
 2.3:JAVA代 实现下边框(自定义TextView JAVA代 三)

package com.xiaoma.shadedemo;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.widget.TextView;
public class TextViewBorderUnder extends TextView
{
   
    // 方式一:
    public TextViewBorderUnder(Context context, AttributeSet attrs)
    {
        super(context, attrs);
    }
    // 方式二:
   
   
    @Override
    protected void onDraw(Canvas canvas)
    {
        super.onDraw(canvas);
        Paint paint = new Paint();
        paint.setAntiAlias(true);
        paint.setColor(Color.GREEN);
        // canvas.drawLine(0, 0, this.getWidth() - 1, 0, paint);
        // canvas.drawLine(0, getHeight(), getWidth() - 1, getHeight(), paint);
        // canvas.drawLine(this.getWidth() - 1, 0, this.getWidth() - 1, this.getHeight() - 1, paint);
        canvas.drawLine(0, getHeight() - 1, getWidth() - 1, getHeight() - 1, paint);
    }
   
}
 2.4:Shape XML实现边框(XML代 )

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <!-- <solid  android:color="#cceeff"/>   直接写这个的话,可以给控制添 一个整体的背景哦 -->
    <stroke
        android:width="0.5dp"
        android:color="#22ccff" />
    <padding  android:left="5dp" android:top="5dp" android:right="5dp" android:bottom="5dp"/>
    <size
        android:height="0.5dp"
        android:width="5dp" />
 <!-- 目前没有什么用,可 除,留在这个地方防止乱猜 -->
    <corners android:radius="10dp" />
 <!-- 这个radius里面的值需要个整型,单位用dp,用其它单位亦 影响 -->
</shape>
2.5:Selector与Shape混用控件效果实现
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 今天主要讲的是shape渲染,shape主要类型分四种,效果如下,我们常用rectangle,也就是矩形渲染,其它的都太丑了!! -->
    <item android:state_pressed="true"> <!--按钮按下时的渲染效果 -->
         <shape android:shape="oval">
             <corners android:radius="10dp" /> <!-- 四个角的角度 -->
    <!--gradient就是梯度渲染,简单说就是颜色渐变,type为渐变方式,总共三种 linear sweep  ridial,常用linear-->
             <gradient android:endColor="#eebbbb" android:startColor="#9900ee" android:type="linear" />
     <!-- padding属性是指定内容与控件边距,这个地方小马专门将距左边距设置较大,方便观察 -->
             <padding android:bottom="5dp" android:left="20dp" android:right="5dp" android:top="5dp" />
             <!-- solid填充整个区域,颜色为FFDDFF,如果使用整个区域填充的话,上面的gradient梯度会失效,即:覆盖 -->
             <!-- <solid  android:color="#FFDDFF"/> -->
             <!-- stroke为需要填充的边框,指定颜色及边框宽度  -->
             <stroke android:width="3dp" android:color="#000000" />
         </shape>
  <!-- <clip android:clipOrientation="vertical" android:gravity="right" android:drawable="@drawable/ic_launcher" /> --><!-- 试了下没用 -->
  <!-- <color android:color="#223344"/> -->
  <!-- <scale android:scaleWidth="15dp" android:scaleHeight=" 5dp" android:scaleGravity="center" /> -->
     </item>
    <item> <!-- 默认 -->
         <shape android:shape="rectangle">
             <corners android:radius="10dp" /> <!-- 四个角的角度 -->
    <!--gradient就是梯度渲染,简单说就是颜色渐变,type为渐变方式,总共三种 linear sweep  ridial,常用linear-->
    <!-- 这个地方一定注意,在使用gradient 签中使用android:type的前提是必须android:gradientRadius="20dp"已经设置,否则会报错 -->
             <gradient android:endColor="#acefda" android:startColor="#0099ff" android:type="linear" />
     <!-- padding属性是指定内容与控件边距,这个地方小马专门将距左边距设置较大,方便观察 -->
             <padding android:bottom="5dp" android:left="20dp" android:right="5dp" android:top="5dp" />
             <!-- solid填充整个区域,颜色为FFDDFF,如果使用整个区域填充的话,上面的gradient梯度会失效,即:覆盖 -->
             <!-- <solid  android:color="#FFDDFF"/> -->
             <!-- stroke为需要填充的边框,指定颜色及边框宽度  -->
             <stroke android:width="3dp" android:color="#000000" />
         </shape>
     </item>
</selector>

怎么 ?看着JAVA自定义TextView代 是不是觉得特别的繁琐?今天的主题就是来解决这个问题的….…^_^………下面着重来讲一下Selector与Shape混用控件效果Selector实现的细节,(请仔细看下XML里面的注释 O_O)
每个Item过是由Shape来进行渲染生成最终的效果,首先来看 Shape节点的常用属性<shape android:shape=”rectangle”>:
这个shape属性总共分三种 rectangle(矩形)、oval(椭圆) 、line( 除线)、ring(铃,这个存在不知道有什么意义),其效果分别如下:
1.rectangle

rectangle


2.oval

oval


3.line

line类型


4.ring

ring类型


        其中,gradient 签中的type为渐变方式,总共三种 linear sweep  ridial,常用linear,其效果分别为(注意:ridial试了 任何效果 T_T)
1.linear效果

线性linea


2.sweep效果

sweep_type


           好了,代 及整体效果已经分解完毕了,如果认真从头到尾的看一边的话,肯定有所收获的,对了,以上的Shape渲染写好了,可以在任意控件上使用…不限于TextView,上面的例子只是拿TextView来开刀用的…大家别误会,呵呵….^_^…. ,最后,小马希望在文 中有什么不清楚或不明白或有错误的地方,请大家直接指出…有错必改的….这个源 小马已经上 到最下面附件中,有兴趣或有用的朋友可以直接下载来跑跑改改看,有批评才有进步,希望有什么不好的,直接指出….在此先谢谢大家啦….
官网参考链接如下(只是没效果图,所以大家也懒得去看这个东西)

这段时间也有在关注各种各 的东西,老听人说学这学那的人越来越多什么的,也希望大家不要随便听人家讲,我敢说….安卓虽然在很多人眼里看来简单、烂,但我觉得如果要深入的话,水还是很深的,如果用心,一定可以做的越来越好的,一步一步来,大家一起努力!做安卓的人越来越多,越有竞争!越有动力!!!这 才会进步!哈哈…. 油 油 油! O_O


转发至微博

 

转发至微博

分享:

喜欢

0

赠金笔

阅读┊ ┊ ┊┊ ┊打印┊

加载中,请稍候......

前一篇:Android研究院之应用开发使用Sencha完成APK局部更新(二十七)

后一篇:Android研究院之应用开发线程池的经典使用(二十九)

评论 重要提示:警惕虚假中奖信息

  • 评论加载中,请稍候...
  • 发评论

    登录名: 密码: 找回密码 注册

    昵   称:

       

    以上网友发言只代表其个人观点,不代表新浪网的观点或立场。

    < 前一篇Android研究院之应用开发使用Sencha完成APK局部更新(二十七)

    后一篇 >Android研究院之应用开发线程池的经典使用(二十九)

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    网友点评