Android基础————UI布局之UI美化分解详解

UI美化
（1）color资源：
1、values的color常量：
引用方式：@color/xxx
	1. 设置字体的颜色
	   android:textColor="@color/white"

	2. 设置布局的背景颜色
	   android:background="@color/white"
2、drawable的color资源
	1､ 在drawable目录下创建.xml文件，根标签为<color>
	2、在<color>标签中使用其android:color属性设置颜色值（如：#RGB或@color/xxx)
	3、一般作为背景使用，引用方式：@drawable/xxx

（2）Level-list:(实例是开关灯效果、android系统电池状态改变的显示)

注意：
<!-- textColor 使用values中定义好的color没有问题
     drawable中创建了一个xml（跟标签color》》》》属于drawable》》》》一般用在背景）
-->

在level-List中可以放置多张图片，根据优先级显示不同图片；
level-list属于drawable中资源文件，跟标签是<level-list>；

创建item指定图片以及层级就可以实现：
 <item  
        android:drawable="@drawable/lamp_off"
        android:minLevel="0"
        android:maxLevel="20"
        />
（3）layer-list图层资源：
将多个图片按层关系排放形成一张图片，类似帧布局；
属于drawable中资源文件，根标签为<layer-list>；

创建item指定图片以及层级就可以实现：
    <item android:drawable="@drawable/back" ></item>
    
    <item android:drawable="@drawable/qq"
        android:left="10dp"
        android:right="20dp"
        android:top="20dp"
        android:bottom="30dp"
        ></item>
（4）selector背景选择器：
作用：根据UI控件的不同状态选择相应的图片或颜色资源作为控件的背景
常用的状态：
android:state_checked="false|true" 是否勾选的状态
android:state_selected="false|true" 是否选择的状态
android:state_pressed="false|true" 点击或按下的状态	
默认显示的图片必须放在后面
android:state_enabled＝“false|true“ 是设置是否响应事件,指所有事件

用法：
1. 在drawable目录下创建.xml文件，根标签为<selector>
2. 增加<item>标签，并设置不同状态和对应的资源:
	<1>.  设置drawable selector资源如下：
    <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >

    <item android:drawable="@drawable/ic_relation_gray" android:state_checked="false"></item>
    <item android:drawable="@drawable/ic_relation_red" android:state_checked="true"></item>
</selector>

	<2>. 设置color selector资源如下：
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:color="#000" android:state_checked="false" />
    <item android:color="#f00" android:state_checked="true" />
</selector>

3、在UI控件的background属性引用,属性值：@drawable/xx；@color/xx

（5）style样式：
作用：android中的样式用于为界面控件定义显示风格，其包含一个或者多个view控件属性的集合。如：需要定义字体的颜色和大小
位置：res/values/styles.xml
定义样式：
 <?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="CodeFont" parent="@android:style/TextAppearance.Medium">
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:textColor">#00FF00</item>
        <item name="android:typeface">monospace</item>
    </style>
</resources>


--参考系统的style.xml,路径：
/sdk/platforms/android-19/data/res/values/styles.xml

--参考系统的themes.xml，路径：
/sdk/platforms/android-19/data/res/values/themes.xml

引用样式：在指定UI控件的style属性引用指定样式：
引用样式前：
<TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:textColor="#00FF00"
    android:typeface="monospace"
    android:text="@string/hello" />

引用样式后：
<TextView
    style="@style/CodeFont"
    android:text="@string/hello" />
属性的优先级高于样式。

样式的两种继承：
1.parent属性方式
<resources>
    <style name="CodeFont" parent="@android:style/TextAppearance.Medium">
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:textColor">#00FF00</item>
        <item name="android:typeface">monospace</item>
    </style>
</resources>

2.前缀方式来继承
<style name="CodeFont" parent="@android:style/TextAppearance.Medium">  //使用parent属性

//前缀方式来继承。
<style name="CodeFont.Red">
        <item name="android:textColor">#FF0000</item>
    </style>

<style name="CodeFont.Red.Big">
        <item name="android:textSize">30sp</item>
 </style>

 （6）clip裁剪：clip实现图片的裁剪

1.clip属于drawable中资源文件，跟标签是<clip>：
<?xml version="1.0" encoding="utf-8"?>
<clip xmlns:android="http://schemas.android.com/apk/res/android" 
    android:drawable="@drawable/android1"
    android:clipOrientation="vertical"
    android:gravity="bottom">
    
	<!-- android:drawable: 指定要裁剪的原图像
		 android:clipOrientation：设置裁剪的方向 水平或者垂直 
		 android:gravity：表示如何裁剪（从哪个方向开始）-->
</clip>

2.默认不显示，代码中设置裁剪渐变出来
ClipDrawable  drawable = (ClipDrawable) imageView.getDrawable();
/**
* 裁剪比例：ClipDrawable类内部预设了一个最大level值10000(Android SDK并未提供api修改该值)
* 如果level值为0，表示裁剪的宽度或者高度为0，也就是说，图像无法显示。如果值为10000 表示显示全部图像(不进行任何裁剪)
*/
drawable.setLevel(drawable.getLevel()+1000);

（7）Inset：属于drawable中资源文件，跟标签是<inset>

inset属于drawable中资源文件，跟标签是<inset>
<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android" 
    android:drawable="@drawable/inset"
    android:insetLeft="50dp"
    android:insetRight="50dp"
    android:insetTop="50dp"
    android:insetBottom="50dp"
    >
</inset>
元素解释：
android:insetTop：图像距离上边的距离。

android:insetRight：图像距离右侧的距离。

android:insetBottom：图像距离底边的距离。

android:insetLeft：图像距离左侧的距离。

（8）transition过度效果：transition实现图片的过度效果

1.transition属于drawable中资源文件，跟标签是<transition>
<?xml version="1.0" encoding="utf-8"?>
<transition xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:drawable = "@drawable/lamp_off"/>
    <item android:drawable = "@drawable/lamp_on"/>

</transition>

2.代码中设置过度效果
private void initView() {
		// TODO Auto-generated method stub
		image =(ImageView) findViewById(R.id.image);
		transitionDrawable = (TransitionDrawable) image.getDrawable();
	}
	
public void btnOnClick(View view){
		switch (view.getId()) {
		case R.id.btnOpen:
			transitionDrawable.startTransition(3000);
			break;
		case R.id.btnClose:
			transitionDrawable.reverseTransition(3000);
			break;
		default:
			break;
		}
	}