android学习笔记---59_各种图形的使用介绍,android炫酷效果的实现

2013/5/19
59_各种图形的使用介绍
Java技术qq交流群：JavaDream：251572072
------------------------------------------------------------------
1.这里在android中的图形,大家可以参看,帮助文档的这个页面,
G:\android\android-sdk-windows\docs\guide\topics\resources\drawable-resource.html
2.在上面的帮助文档页面,可以看到图形的分类:
------------------------------------------
1.Bitmap File A bitmap graphic file (.png, .jpg, or .gif)
这是常见的图形
2.Nine-Patch File
A PNG file with stretchable regions to allow image resizing based on content (.9.png).
NinePatch是一种很有用的PNG图片格式，它可以在特定区域随文字大小进行缩放。如下：
NinePatch是一种很有用的PNG图片格式，它可以在特定区域随文字大小进行缩放。如下：
从上图可以看到，背景图片的中间区域会随着文字的大小进行缩放。
背景图片是一张NinePatch图片。
NinePatch图片可以使用android自带的draw9patch工具来制作，该工具在SDK安装路径的tools目录下。
执行该工具，然后点击“File”->“open 9-path”打开一张用于制作NinePatch图片的原来图片。
在画布的上方和左方的边上画线指定缩放区域，
勾选“Show patches”可显示画定的区域，绿色
为固定大小区域，红色为缩放区域，文字会摆放在红色
区域。制作完后，点击“File” “save 9-path”保存
图片，draw9patch工具会自动为图片加上*.9.png后缀。
把制作好的图片拷贝进项目的res/drawable目录，然后
编写代码。如下：

<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="退出" android:textColor="#330000"
android:background="@drawable/button"/>
-----------------------------------------------------------------------
3.Nine-Patch File,这种图片可以指定在特定的区域进行缩放,比如,在一个图片中有文字,
文字在图片的中间位置,右边是一个代表播放的三角图形,这时候当文字变多的时候,Nine-Patch File
这种图图形,就可以拉伸中间位置,这样就可以撑得下更多的文字,而原来右边的代表播放的三角图形
不会拉伸变化.
--------------------------------------------------
4.cmd进入命令界面:
输入:
G:\android\android-sdk-windows\tools>draw9patch
回车,这个时候就会看到制作9path图片的界面:
这时候:点击“File”->“open 9-path”打开一张用于制作NinePatch图片的原来图片。
在画布的上方和左方的边上画线指定缩放区域，
勾选“Show patches”可显示画定的区域，绿色
为固定大小区域，红色为缩放区域，文字会摆放在红色
区域。制作完后，点击“File” “save 9-path”保存
图片，draw9patch工具会自动为图片加上*.9.png后缀。
------------------------------------------------------------
5.Layer List 层列表图形:
可以使用一组图片合成一张图片
6.下面是文档中关于Layer List 层列表图形的介绍:
file location: res/drawable/filename.xml
需要使用资源id,来找到这个文件.
compiled resource datatype: Resource pointer to a LayerDrawable.resource reference: In Java: R.drawable.filename
In XML: @[package:]drawable/filename syntax:
syntax: <?xml version="1.0" encoding="utf-8"?>
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:drawable="@[package:]drawable/drawable_resource"
//指定某个图片
android:id="@[+][package:]id/resource_name"
//给这个图片指定一个id
//下面这四个属性:上面,右边,底部,左边离边框的距离.
android:top="dimension"
android:right="dimension"
android:bottom="dimension"
android:left="dimension" />
</layer-list>
----------------------------
7.item:用于指定合成图片的每一张的单个图片
8.下面是在应用中使用layer-list,层列表图形的例子的源码:
-------------------------------------------------------
a.一个相框中有一个美女图片,然后当点击切换按钮后,相框中的美女图片被
切换了.
-----------------------------------
b.drawable新建这个android项目:
c./drawable/src/com/credream/drawable/DrawableActivity.java
package com.credream.drawable;

import android.app.Activity;
import android.graphics.drawable.ClipDrawable;
import android.graphics.drawable.Drawable;
import android.graphics.drawable.LayerDrawable;
import android.graphics.drawable.LevelListDrawable;
import android.graphics.drawable.TransitionDrawable;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;

public class DrawableActivity extends Activity {
private ImageView imageView;

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
//2.找到imageView控件
imageView = (ImageView) this.findViewById(R.id.imageView);
}
//1.点击按钮后会执行这个方法,切换图片
public void changeImage(View v){
//LayerDrawable layerDrawable = (LayerDrawable) imageView.getDrawable();
//4.从imageview中取得,目前正在显示的照片,得到一个层列表图形layerDrawable
//7.直接取得列表图形资源,然后设置,然后显示.这时候就可以了.所以这里有个特点
//当drawable被imageview使用了,这时候要尝试修改它是没有用的,所以这里需要直接加载它
//然后,再给它赋值就额可以了.
LayerDrawable layerDrawable = (LayerDrawable)getResources().getDrawable(R.drawable.layerlist);
Drawable drawable = getResources().getDrawable(R.drawable.icon);
//6.首先取得资源对象.用getDrawable取得图形,得到图标这个图形,返回一个drawable图形.
//将应用部署后,发现当点击按钮后,并不可以成功的切换图片,这里又尝试这样做.
//5.这里第一个参数得到要切换的照片,这里指的是哪个在边框里面的图片
//,第二个参数:是要切换的那张照片的drawable图形.(层列表图形.)
layerDrawable.setDrawableByLayerId(R.id.userimage, drawable);
//3.设置更换完的图形,这里要求传一个Drawable进去.
imageView.setImageDrawable(layerDrawable);

}
}
------------------------------------------------------------
d./drawable/res/drawable/icon.png
e./drawable/res/drawable/user.png
f./drawable/res/drawable/layerlist.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">


<item android:drawable="@drawable/faceback" />

<item android:drawable="@drawable/user"
android:top="68dp"
android:right="18dp"
android:bottom="22dp"
android:left="18dp"
android:id="@+id/userimage"
/>


</layer-list>
-----------------------------------------------------------------------------
g./drawable/res/layout/main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/layerlist"
android:id="@+id/imageView"
/>

<Button
android:background="@drawable/rectangle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="切换"
android:onClick="changeImage"
/>
</LinearLayout>
注意:层列表图形,就可以用来开发,给图片加相框的功能
只要是想要多张照片合成一张照片的时候,都可以用到
层列表图形
------------------------------------------------------------------------------
9.下面开始学习:State List 状态列表图形
当我们点击某个按钮,或者是某个控件的时候,会切换图片
也就是随着,控件的状态来显示不同的图形.
----------------------------------------------------------
10.这里实现,当按钮显示的时候显示一张照片,当按钮被按下去的时候
显示另一张照片
----------------------------------------
a.file location: res/drawable/filename.xml
The filename is used as the resource ID.
-----------------------------------------------
b. resource reference: In Java: R.drawable.filename
In XML: @[package:]drawable/filename
--------------------------------------------
c.这里是语法:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"
//这个是选择器,根据不同的状态选择下面的不同条目
android:constantSize=["true" | "false"]
android:dither=["true" | "false"]
android:variablePadding=["true" | "false"] >
<item
//条目用于指定哪个状态,显示什么图片
android:drawable="@[package:]drawable/drawable_resource"
//这个属性用来显示某个图片
android:state_pressed=["true" | "false"]]
//true:按下这个显示控件的时候,显示这张照片
//false:没有按下这个显示控件的时候,显示这张照片
android:state_focused=["true" | "false"]
//true:当这个显示控件得到焦点的时候,显示这张照片
//false:当这个显示控件没得到焦点的时候,显示这张照片
android:state_hovered=["true" | "false"]
//这个没有标明,用的时候可以查查.
android:state_selected=["true" | "false"]
//true:当这个显示控件被选择的时候,显示这张照片
//false:当这个显示控件不被选择的时候,显示这张照片
//这里选择是指的用上下键,当有框,或不同颜色,指定这个控件被选择的时候
android:state_checkable=["true" | "false"]
//true:当这个显示控件可以被勾选的时候,显示这张照片
//false:当这个显示控件不可以被勾选的时候,显示这张照片
android:state_checked=["true" | "false"]
//true:当这个显示控件被勾选的时候,显示这张照片
//false:当这个显示控件不被勾选的时候,显示这张照片
android:state_enabled=["true" | "false"]
//true:当这个显示控件被可用的时候,显示这张照片
//false:当这个显示控件不可用的时候,显示这张照片
android:state_window_focused=["true" | "false"] />
//true:当该控件所在窗口获得焦点的时候,显示这张照片
//false:当该控件所在窗口没获得焦点的时候,显示这张照片
//这些就是显示控件的不同状态.
</selector>
-----------------------------------------------------------------
10.Level List级别列表图形.
Level List类型图形
Livel List类型图形可以用于管理一组可进行切换的图片。
使用setLevel方法可以进行图片切换，Android会根据level的值自动选择对应的图片。
手机显示剩余电量就是用Level List图形来显示不同图片的。
---------------------------------------------------------------------------
a.file location: res/drawable/filename.xml
The filename is used as the resource ID.
b.resource reference: In Java: R.drawable.filename
In XML: @[package:]drawable/filename
c.<?xml version="1.0" encoding="utf-8"?>
<level-list
xmlns:android="http://schemas.android.com/apk/res/android" >
<item
//图片的位置
android:drawable="@drawable/drawable_resource"
//这里定义了两个范围,当
android:maxLevel="integer"
android:minLevel="integer" />
</level-list>
------------------------------------------------------------------
11.Transition Drawable 过程图形.
也就是从一张图片过度到另一张图片
----------------------------------------
a.file location: res/drawable/filename.xml
The filename is used as the resource ID.
b.resource reference: In Java: R.drawable.filename
In XML: @[package:]drawable/filename
c.<?xml version="1.0" encoding="utf-8"?>
<transition
xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:drawable="@[package:]drawable/drawable_resource"
android:id="@[+][package:]id/resource_name"
android:top="dimension"
android:right="dimension"
android:bottom="dimension"
android:left="dimension" />
</transition>
--------------------------------------------------------------------
12.Clip Drawable剪切图形
Clip Drawable类型图形（裁剪图形）
-----------------------------------------
a.file location: res/drawable/filename.xml
The filename is used as the resource ID.
b.resource reference: In Java: R.drawable.filename
In XML: @[package:]drawable/filename
c. <?xml version="1.0" encoding="utf-8"?>
<clip
xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/drawable_resource"
android:clipOrientation=["horizontal" | "vertical"]
android:gravity=["top" | "bottom" | "left" | "right" | "center_vertical" |
"fill_vertical" | "center_horizontal" | "fill_horizontal" |
"center" | "fill" | "clip_vertical" | "clip_horizontal"] />
----------------------------------------------------------------------------------
13.Scale Drawable缩放图形
这个在实际应用中不多.
用到的时候可以看着文档实现;
file:///G:/android/android-sdk-windows/docs/guide/topics/resources/drawable-resource.html#StateList
------------------------------------------
14.Shape Drawable形状类型图形.
----------------------------------------
a.file location: res/drawable/filename.xml
The filename is used as the resource ID.
b.resource reference: In Java: R.drawable.filename
In XML: @[package:]drawable/filename
----------------------------------------------------
c.
android:shape=["rectangle" | "oval" | "line" | "ring"] >
矩形,椭圆形,线性,环形.
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape=["rectangle" | "oval" | "line" | "ring"] >
//这个用来指定形状
<corners
//这个指的是圆角的,圆角的大小由半径决定的.
android:radius="integer"
//如果一个矩形的四个角的圆角,大小都一样的话就只设置这个就行了
android:topLeftRadius="integer"
android:topRightRadius="integer"
android:bottomLeftRadius="integer"
android:bottomRightRadius="integer"
//如果矩形的,四个圆角的大小不一样的话,那么需要进行每个圆角的半径设置,这时候就
//用到了下面的四个属性.
/>
<gradient
//这个是渐变,用来指定渐变的颜色,可以由一种颜色过渡到另一种颜色,
//还可以在从一种颜色过渡到另一种颜色的时候,指定一个中间色.
android:angle="integer"
//这个是角度.渐变是有角度的,从一种颜色过渡到另一个颜色,
//指定是水平的还是180度...还是多少度..等等.
android:centerX="integer"//中间过渡色出现在什么地方
android:centerY="integer"////中间过渡色出现在什么地方
android:centerColor="integer"//指定中间过渡色是什么颜色.
//这三个用来指定过渡色
android:endColor="color"//过渡色的结束颜色
android:gradientRadius="integer"//当时圆形渐变色的时候,需要指定渐变的半径
android:startColor="color"//过渡色的开始颜色
android:type=["linear" | "radial" | "sweep"]//指定是什么渐变色,比如,
//线性渐变色,还是圆形渐变色...当时圆形渐变色的时候,需要指定渐变半径
android:usesLevel=["true" | "false"] />//是否使用级别,可以设为默认值就可以
<padding//指定内间距,假设定义了一个矩形,那么内间距,就是内容离矩形的边界线的距离.
android:left="integer"
android:top="integer"
android:right="integer"
android:bottom="integer" />
<size//代表,线框的宽
android:width="integer"//定义边界线的粗细.
android:height="integer"
android:dashWidth="integer"//当边界是虚线的时候,用来定义
android:dashGap="integer"//定义虚线的宽度.
/>
<solid//单一填充色,这个和渐变色是不可以同时使用的.
android:color="color" />
<stroke//这个和size差不多
android:width="integer"
android:color="color"
android:dashWidth="integer"
android:dashGap="integer" />
</shape>
----------------------------------------------------
1.下面的源码,是对,包含以上的几种类型图形的demo
---------------------------------------------------
a.drawable新建这个android项目
b./drawable/src/com/credream/drawable/DrawableActivity.java
package com.credream.drawable;

public class DrawableActivity extends Activity {
private ImageView imageView;

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
//2.找到imageView控件
imageView = (ImageView) this.findViewById(R.id.imageView);
}
//1.点击按钮后会执行这个方法,切换图片
public void changeImage(View v){
//这个是用来测试,裁剪动画的.
ClipDrawable clipDrawable = (ClipDrawable) imageView.getDrawable();
//取得裁剪图形.
clipDrawable.setLevel(clipDrawable.getLevel()+1000);
//指定级别,如果级别值是0,代表全部裁剪,所以设置为0的时候,会全部裁剪,看不到
//当为10000的时候会不裁剪.全部显示.

//得到相应的,这里v是传进来的,这里需要(Button)v把传进来的v转换为button控件
//然后调用button控件的.getBackground(),方法,(TransitionDrawable)
//这里再把button的Background转换为过度显示图形.
//然后设置,过度的事件为500毫秒.
TransitionDrawable transitionDrawable = (TransitionDrawable) ((Button)v).getBackground();
transitionDrawable.startTransition(500);

/*下面是用来实现图片的级别列表图形的,也就是当级别12,在对应的图片设置的级别
* 范围内的时候,就会显示对应的图片
* LevelListDrawable levelListDrawable = (LevelListDrawable) imageView.getDrawable();
levelListDrawable.setLevel(12);*/

/*下面这个部分是用来测试层列表图形的
*
* //LayerDrawable layerDrawable = (LayerDrawable) imageView.getDrawable();
//4.从imageview中取得,目前正在显示的照片,得到一个层列表图形layerDrawable
//7.直接取得列表图形资源,然后设置,然后显示.这时候就可以了.所以这里有个特点
//当drawable被imageview使用了,这时候要尝试修改它是没有用的,所以这里需要直接加载它
//然后,再给它赋值就额可以了.
LayerDrawable layerDrawable = (LayerDrawable)getResources().getDrawable(R.drawable.layerlist);
Drawable drawable = getResources().getDrawable(R.drawable.icon);
//6.首先取得资源对象.用getDrawable取得图形,得到图标这个图形,返回一个drawable图形.
//将应用部署后,发现当点击按钮后,并不可以成功的切换图片,这里又尝试这样做.
//5.这里第一个参数得到要切换的照片,这里指的是哪个在边框里面的图片
//,第二个参数:是要切换的那张照片的drawable图形.(层列表图形.)
layerDrawable.setDrawableByLayerId(R.id.userimage, drawable);
//3.设置更换完的图形,这里要求传一个Drawable进去.
imageView.setImageDrawable(layerDrawable);
*/
}
}
-----------------------------------------------------------------------
c.建立这个文件夹
/drawable/res/drawable
d.在该文件夹中,放上如下文件:
/drawable/res/drawable/bg_normal.9.png
/drawable/res/drawable/bg_selected.9.png
------------------------------------------
e./drawable/res/drawable/clip.xml
<?xml version="1.0" encoding="utf-8"?>
<clip xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/user"
android:clipOrientation="horizontal"
android:gravity="left" />

----------------------------------------------------------
f./drawable/res/drawable/faceback.png
/drawable/res/drawable/icon.png
--------------------------------------------
g./drawable/res/drawable/layerlist.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">


<item android:drawable="@drawable/faceback" />

<item android:drawable="@drawable/user"
android:top="68dp"
android:right="18dp"
android:bottom="22dp"
android:left="18dp"
android:id="@+id/userimage"
/>


</layer-list>
--------------------------------------------------------------------------------
h./drawable/res/drawable/levellist.xml
<?xml version="1.0" encoding="utf-8"?>
<level-list xmlns:android="http://schemas.android.com/apk/res/android" >

<item android:drawable="@drawable/faceback" android:minLevel="0" android:maxLevel="10" />
<item android:drawable="@drawable/user" android:minLevel="11" android:maxLevel="20"/>
</level-list>
-------------------------------------------------------------
i./drawable/res/drawable/rectangle.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">

<gradient
android:startColor="#FFFF0000"
android:endColor="#80FF00FF"
android:angle="270"/>

<padding android:left="7dp"
android:top="7dp"
android:right="7dp"
android:bottom="7dp" />

<corners android:radius="8dp" />

<stroke
android:width="2dp"
android:color="#FFFFFF"
android:dashWidth="8dp"
android:dashGap="4dp" />
</shape>
-----------------------------------------------
j./drawable/res/drawable/statelist.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:state_pressed="true" android:state_enabled="true" android:drawable="@drawable/bg_selected" /> 

<item android:state_selected="true" android:drawable="@drawable/bg_selected" /> 

<item android:drawable="@drawable/bg_normal" /> 

</selector>
-------------------------------------------------------------------------
k./drawable/res/drawable/transition.xml
<?xml version="1.0" encoding="utf-8"?>
<transition xmlns:android="http://schemas.android.com/apk/res/android">

<item android:drawable="@drawable/bg_normal" />
<item android:drawable="@drawable/bg_selected" />
</transition>
-----------------------------------------------------------
l./drawable/res/drawable/user.png
----------------------------------------------
m./drawable/res/layout/main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>


<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/clip"
android:id="@+id/imageView"
/>


<Button
android:background="@drawable/rectangle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="切换"
android:onClick="changeImage"
/>
</LinearLayout>
------------------------------------------------------------

更多相关文章

随机推荐