Android绘图之XML绘图

刚开始我接触Android的时候,觉得XML文件就是布局文件,后来才发现XML的功能远不止如此,它可以存放很多数据(比如字符串),可以配置列表,甚至还可以变成一张图,一幅画。下面就简单地说一下XML文件怎么变成一幅画。

首先要声明,Android的XML绘图文件用的是Layout XML File,而且要放在drawable文件夹下!!!(话说难道就没有人和我有相同的问题吗?我看到的几乎所有的博客和教材都没有提到这一点。我刚开始把XML文件放到了layout文件夹下,怎么也转不起来,后来用geogle才找到了答案)

下面开始进入正式的内容:

一:Bitmap

XML的Bitmap没什么技术含量可言,以下这几行代码就是draw.xml文件的全部内容,再说一次,一定要放在drawable文件夹下。

<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@drawable/abc" />
而引用这个文件则在activity_main.xml(当然,可以在layout文件下的任意一个布局文件中引用)中,代码如下:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/circle"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Hello world"
        android:textSize="50dp"
        android:background="@drawable/draw"/>
</LinearLayout>

二:Shape

Shape可以说是XML绘图的精华,这部分我参考了大神小小工匠 Android-Xml绘图,向前辈学习!

下面是Shape支持的参数

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    //默认为rectangle
    android:shape=["rectangle"|"oval"|"line"|"ring"]>
    <corners //当shape="rectangle"时使用
        //半径,会被后面的单个半径属性覆盖
        android:radius="integer"
<span style="white-space:pre">	</span>android:topLeftRadius="integer"
        android:topRightRadius="integer"
        android:bottomLegtRadius="integer"
        android:bottomRightRadius="integer"/>
    <gradient   //渐变
        android:angle="integer"
        android:centerX="integer"
        android:centerY="integer"
        android:centerColor="color"
      <span style="white-space:pre">	</span>android:endColor="color"
        android:gradientRadius="integer"
        android:startColor="color"
        android:type=["linear"|"radial"|"sweep"]
        android:useCenter=["true"|"false"]/>
    <padding
        android:left="integer"
        android:top="integer"
        android:right="integer"
<span style="white-space:pre">	</span>android:bottom="integer"/>
    <size //指定大小,一般用在ImageView配合scaleType属性使用
        android:width="integer"
        android:height="integer"/>
    <solid  //填充颜色
        android:color="color"/>
    <stroke //指定边框
        android:width="integer"
        android:color="color"
        //虚线宽度
        android:dashWidth="integer"
        //虚线间隔宽度
        android:dashGap="integer"/>
</shape>




下面是一些解释:

gradient: 设置形状的渐变颜色,可以是线性渐变、辐射渐变、扫描性渐变

android:type 渐变的类型
    linear 线性渐变,默认的渐变类型
    radial 放射渐变,设置该项时,android:gradientRadius也必须设置
    sweep 扫描性渐变
android:startColor 渐变开始的颜色
android:endColor 渐变结束的颜色
android:centerColor 渐变中间的颜色
android:angle 渐变的角度,线性渐变时才有效,必须是45的倍数,0表示从左到右,90表示从下到上
android:centerX 渐变中心的相对X坐标,放射渐变时才有效,在0.0到1.0之间,默认为0.5,表示在正中间
android:centerY 渐变中心的相对X坐标,放射渐变时才有效,在0.0到1.0之间,默认为0.5,表示在正中间
android:gradientRadius 渐变的半径,只有渐变类型为radial时才使用
android:useLevel 如果为true,则可在LevelListDrawable中使用

corners: 设置圆角,只适用于rectangle类型,可分别设置四个角不同半径的圆角,当设置的圆角半径很大时,比如200dp,就可变成弧形边了

android:radius 圆角半径,会被下面每个特定的圆角属性重写
android:topLeftRadius 左上角的半径
android:topRightRadius 右上角的半径
android:bottomLeftRadius 左下角的半径
android:bottomRightRadius 右下角的半径

stroke: 设置描边,可描成实线或虚线。

android:color 描边的颜色
android:width 描边的宽度
android:dashWidth 设置虚线时的横线长度
android:dashGap 设置虚线时的横线之间的距离

大致就是这些,更详细的可以点击上面的链接去看小小工匠前辈的文章。

三:layer

Layer是PhotoShop中的功能,在Android中,同样可以用layer实现图层的概念。
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >


    <item                                                                                                                                                     android:drawable="drawable/abc">
        
    </item>                                                                                                                                                                                       
   <item  
        android:left="2dp"
        android:top="4dp">
        <shape>
            <solid android:color="@android:color/darker_gray" />
            <corners android:radius="10dp" />
        </shape>
    </item>                                                                                                                                                 </layer-list>





通过layer,layer-list可以很方便的实现图层效果,图片会一次叠加。

四:selector

Selector的作用在于帮助开发者实现静态绘图中的实践反馈,通过给定的不同事件设置不同的图像。
<?xml version="1.0" encoding="utf-8" ?>     
<selector xmlns:android="http://schemas.android.com/apk/res/android">   
<!-- 默认时的背景图片-->    
  <item android:drawable="@drawable/pic1" />      
<!-- 没有焦点时的背景图片 -->    
  <item android:state_window_focused="false"     
        android:drawable="@drawable/pic1" />     
<!-- 非触摸模式下获得焦点并单击时的背景图片 -->    
  <item android:state_focused="true" android:state_pressed="true"   android:drawable= "@drawable/pic2" />   
<!-- 触摸模式下单击时的背景图片-->    
<item android:state_focused="false" android:state_pressed="true"   android:drawable="@drawable/pic3" />    
<!--选中时的图片背景-->    
  <item android:state_selected="true"   android:drawable="@drawable/pic4" />     
<!--获得焦点时的图片背景-->    
  <item android:state_focused="true"   android:drawable="@drawable/pic5" />     

以上几种功能可以配合使用,比如Selector中也可以出现Shape。

阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页