Android的UI美化

资源文件的使用
  一, res中文件放置的类型
res/animator  存放属性动画 xml文件
res/anim  存放补间动画  xml文件
res/drawable  存储的是图片的文件  .xml文件
res/drawable-hdpi 图片
res/layout  布局
        res/menu 菜单
res/values  存储的是键值队的xml文件
strings  字符串
dimens  尺寸
style 样式
colors  颜色
arrays  字符串数组
   二, android中资源文件包括两个部分
1, 可以通过R直接引用  存放在 res 文件中
2, 不可以通过R直接引用  存放在 assets文件中   AssetManager
   三,  color 资源
values 中的color常量
1, 在res/vlaues/ 中定义一个colors.xml <color name="red">#f00</color>
2, 引用  @color/red
drawable中的color常量
1, 在drawable中创建一个xml文件   标签以<color>
2, 在标签中通过属性设置颜色: android:color = "@color/red"
3, 引用:  @drawable/****
    四, StateListDrawable   状态集合的图片  xml的文件
标签: <selector/>
android:state_pressed      是否处于按下的状态
android:state_focused      是否获取到焦点的状态
android:state_checked      是否被勾选的状态
  五, LayerDrawable  包含了Drawable的资源文件  按照数组的方式叠加文件
标签:  <layer-list/>
相框  进度条  星级评论
  六, ShapeDrawable   可以在xml中做自定义的形状
可以绘制:  矩形  椭圆形  线  环形
标签: <shape />
  七,  ClipDrawable  代表从其他的图片上截取片段
标签: <clip/>
  八, TransitionDrawable 简单的动画  从一张图片过度到另一张图片  不会直接改变  是一帧一帧变化
标签: <transition/>
  九, levelDrawable  等级的
标签: <level-list/>
  十,  样式   style (作用在View之上 , 把公共的属性提取)
位置: res/values/styles.xml中
引用 :  @style/***
可以定义子类:
1, 前缀式:  父样式的名字在子样式名字的前面出现  格式: {父样式}. {子样式}
2, parent式:    设置属性  parent="父样式"
 十一,  主题

Theme   (作用在 Activity和Application上)

实例：

[html]  view plain  copy

 print ?

1. <TextView  
2.       android:id="@+id/tv"  
3.       android:layout_width="wrap_content"  
4.       android:layout_height="wrap_content"  
5.       android:text="Hello World!"  
6.       android:background="@drawable/bg"  
7.       android:textSize="40dp" />  
8.   
9.   <ImageButton  
10.       android:layout_width="wrap_content"  
11.       android:layout_height="wrap_content"  
12.       android:src="@drawable/my_selector"  
13.       android:background="@null"  
14.       />  
15.   <RadioGroup  
16.       android:layout_width="wrap_content"  
17.       android:layout_height="wrap_content"  
18.       android:orientation="vertical"  
19. gt;  
20.       <RadioButton  
21.           android:id="@+id/man"  
22.           android:text="男"  
23.           android:drawableLeft="@drawable/my_selector_rb"  
24.           android:checked="true"  
25.           android:button="@null"  
26.           android:layout_width="wrap_content"  
27.           android:layout_height="wrap_content" />  
28.       <RadioButton  
29.           android:id="@+id/woman"  
30.           android:text="女"  
31.           android:drawableLeft="@drawable/my_selector_rb"  
32.           android:layout_width="wrap_content"  
33.           android:button="@null"  
34.           android:layout_marginLeft="100dp"  
35.           android:layout_height="wrap_content" />  
36.   </RadioGroup>  
37.   <EditText  
38.       android:layout_width="wrap_content"  
39.       android:layout_height="wrap_content"  
40.       android:background="@drawable/my_select_edit"  
41.       android:ems="10"/>  

[html]  view plain  copy

 print ?

1. //<span style="font-family: Arial, Helvetica, sans-serif;">ImageButton</span>  
2. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
3.     <item android:state_pressed="true" android:drawable="@drawable/pressed"/>  
4.     <item android:state_pressed="false" android:drawable="@drawable/normal"/>  
5. </selector>  

[html]  view plain  copy

 print ?

1. //<span style="font-family: Arial, Helvetica, sans-serif;">RadioGroup</span>  
2. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
3.     <item android:drawable="@drawable/home_active" android:state_checked="true"></item>  
4.     <item android:drawable="@drawable/home_unactive" android:state_checked="false"></item>  
5. </selector>  

[html]  view plain  copy

 print ?

1. //<span style="font-family: Arial, Helvetica, sans-serif;">EditText</span>  
2. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
3.    <item android:state_focused="true" android:drawable="@drawable/blue"/>  
4.    <item android:state_focused="false" android:drawable="@drawable/white"/>  
5. </selector>  

效果：

[html]  view plain  copy

 print ?

1. <ImageView  
2.        android:id="@+id/imageView1"  
3.        android:layout_width="wrap_content"  
4.        android:layout_height="wrap_content"  
5.        android:background="@drawable/my_layer_image" />  
6.   
7.    <RatingBar  
8.        android:id="@+id/ratingBar1"  
9.        android:layout_width="wrap_content"  
10.        android:layout_height="wrap_content"  
11.        android:progressDrawable="@drawable/my_layer_rating"  
12.        android:numStars="5"  
13.        android:rating="2"  
14.        android:stepSize="0.5"/>  

//qq相框

[html]  view plain  copy

 print ?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <layer-list xmlns:android="http://schemas.android.com/apk/res/android">  
3.     <item  
4.         android:id="@+id/back"  
5.         android:drawable="@drawable/back"  
6.         ></item>  
7.   
8.     <item  
9.         android:id="@+id/qq"  
10.         android:drawable="@drawable/qq"  
11.         android:left="15dp"  
12.         android:top="20dp"  
13.         android:bottom="40dp"  
14.         android:right="30dp"  
15.         ></item>  
16. </layer-list>  

//星级评论

[html]  view plain  copy

 print ?

1. <layer-list xmlns:android="http://schemas.android.com/apk/res/android">  
2.     <item android:id="@android:id/background"  
3.         android:drawable="@drawable/unselect"  
4.         ></item>  
5.   
6.     <item android:id="@android:id/secondaryProgress"  
7.         android:drawable="@drawable/unselect"  
8.         ></item>  
9.   
10.     <item android:id="@android:id/progress"  
11.         android:drawable="@drawable/selected"></item>  
12. </layer-list>  

效果：

[java]  view plain  copy

 print ?

1. public class ClipActivity extends Activity {  
2.   
3.     private ImageView iv;  
4.       
5.     @Override  
6.     protected void onCreate(Bundle savedInstanceState) {  
7.         super.onCreate(savedInstanceState);  
8.         setContentView(R.layout.activity_clip);  
9.           
10.         iv = (ImageView) findViewById(R.id.imageView1);  
11.     }  
12.       
13.     public void clip(View v)  
14.     {  
15.         ClipDrawable drawable = (ClipDrawable)iv.getDrawable();   
16.           
17.         int curLevel = drawable.getLevel();  
18.           
19.         drawable.setLevel(curLevel + 1000);  
20.           
21.     }  
22. }  

[html]  view plain  copy

 print ?

1. <ImageView  
2.         android:id="@+id/imageView1"  
3.         android:layout_width="wrap_content"  
4.         android:layout_height="wrap_content"  
5.         android:src="@drawable/my_clip"/>  
6.   
7.     <Button  
8.         android:id="@+id/button1"  
9.         android:layout_width="wrap_content"  
10.         android:layout_height="wrap_content"  
11.         android:text="点击截取"   
12.         android:onClick="clip"/>  

[html]  view plain  copy

 print ?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <clip xmlns:android="http://schemas.android.com/apk/res/android"  
3.   
4.     android:clipOrientation="horizontal"  
5.     android:drawable="@drawable/android1"  
6.     android:gravity="left">  
7.       
8. </clip>  

效果：

[java]  view plain  copy

 print ?

1. public class TransitionActivity extends Activity {  
2.   
3.     private ImageView iv;  
4.       
5.     private TransitionDrawable drawable;  
6.       
7.     @Override  
8.     protected void onCreate(Bundle savedInstanceState) {  
9.         super.onCreate(savedInstanceState);  
10.         setContentView(R.layout.activity_transition);  
11.           
12.         iv = (ImageView) findViewById(R.id.imageView1);  
13.           
14.         drawable = (TransitionDrawable) iv.getDrawable();  
15.     }  
16.   
17.     public void open(View v)  
18.     {  
19.         drawable.startTransition(5000);  
20.     }  
21.       
22.     public void close(View v)  
23.     {  
24.         drawable.reverseTransition(5000);  
25.           
26.     }  
27. }  

[html]  view plain  copy

 print ?

1. <ImageView  
2.         android:id="@+id/imageView1"  
3.         android:layout_width="wrap_content"  
4.         android:layout_height="wrap_content"  
5.         android:src="@drawable/transition" />  
6.   
7.     <Button  
8.         android:id="@+id/button1"  
9.         android:layout_width="wrap_content"  
10.         android:layout_height="wrap_content"  
11.         android:text="开灯"   
12.         android:onClick="open"/>  
13.   
14.     <Button  
15.         android:id="@+id/button2"  
16.         android:layout_width="wrap_content"  
17.         android:layout_height="wrap_content"  
18.         android:text="关灯"   
19.         android:onClick="close"/>  

[html]  view plain  copy

 print ?

1. <transition xmlns:android="http://schemas.android.com/apk/res/android" >  
2.       
3.     <item android:drawable="@drawable/lamp_off"></item>  
4.     <item android:drawable="@drawable/lamp_on"></item>  
5. </transition>  

效果：

[java]  view plain  copy

 print ?

1. public class LevelActivity extends Activity {  
2.   
3.     private ImageView iv;  
4.   
5.     @Override  
6.     protected void onCreate(Bundle savedInstanceState) {  
7.         super.onCreate(savedInstanceState);  
8.         setContentView(R.layout.activity_level);  
9.   
10.         iv = (ImageView) findViewById(R.id.imageView1);  
11.     }  
12.   
13.     public void clickButton(View v) {  
14.         switch (v.getId()) {  
15.         case R.id.button1:  
16.   
17.             iv.setImageLevel(1);  
18.   
19.             break;  
20.   
21.         case R.id.button2:  
22.   
23.             iv.setImageLevel(2);  
24.   
25.             break;  
26.   
27.         case R.id.button3:  
28.   
29.             iv.setImageLevel(3);  
30.   
31.             break;  
32.   
33.         case R.id.button4:  
34.   
35.             iv.setImageLevel(4);  
36.   
37.             break;  
38.         }  
39.     }  
40. }  

[html]  view plain  copy

 print ?

1. <ImageView  
2.        android:id="@+id/imageView1"  
3.        android:layout_width="wrap_content"  
4.        android:layout_height="wrap_content"  
5.        android:src="@drawable/my_level" />  
6.   
7.    <LinearLayout  
8.        android:layout_width="wrap_content"  
9.        android:layout_height="wrap_content"  
10.        android:layout_marginTop="50dp" >  
11.   
12.        <Button  
13.            android:id="@+id/button1"  
14.            android:layout_width="wrap_content"  
15.            android:layout_height="wrap_content"  
16.            android:onClick="clickButton"  
17.            android:text="wifi1" />  
18.   
19.        <Button  
20.            android:id="@+id/button2"  
21.            android:layout_width="wrap_content"  
22.            android:layout_height="wrap_content"  
23.            android:onClick="clickButton"  
24.            android:text="wifi2" />  
25.   
26.        <Button  
27.            android:id="@+id/button3"  
28.            android:layout_width="wrap_content"  
29.            android:layout_height="wrap_content"  
30.            android:onClick="clickButton"  
31.            android:text="wifi3" />  
32.   
33.        <Button  
34.            android:id="@+id/button4"  
35.            android:layout_width="wrap_content"  
36.            android:layout_height="wrap_content"  
37.            android:onClick="clickButton"  
38.            android:text="wifi4" />  

[html]  view plain  copy

 print ?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <level-list xmlns:android="http://schemas.android.com/apk/res/android">  
3.   
4.     <item  
5.         android:drawable="@drawable/wifi1"  
6.         android:maxLevel="1"></item>  
7.   
8.     <item  
9.         android:drawable="@drawable/wifi2"  
10.         android:maxLevel="2"></item>  
11.   
12.   
13.     <item  
14.         android:drawable="@drawable/wifi3"  
15.         android:maxLevel="3"></item>  
16.   
17.   
18.     <item  
19.         android:drawable="@drawable/wifi4"  
20.         android:maxLevel="4"></item>  
21.   
22. </level-list>  

效果：

[html]  view plain  copy

 print ?

1. <Button  
2.       android:id="@+id/button1"  
3.       android:layout_width="wrap_content"  
4.       android:layout_height="wrap_content"  
5.       android:text="Button"   
6.       android:background="@drawable/my_shape_rectangle"/>  
7.   
8.   <Button  
9.       android:id="@+id/button2"  
10.       android:layout_width="wrap_content"  
11.       android:layout_height="wrap_content"  
12.       android:text="Button"   
13.       android:layout_marginTop="40dp"  
14.       android:background="@drawable/my_shape_rectangle02"/>  
15.   
16.   <Button  
17.       android:id="@+id/button3"  
18.       android:layout_width="wrap_content"  
19.       android:layout_height="wrap_content"  
20.       android:layout_marginTop="40dp"  
21.       android:background="@drawable/my_shape_oval"  
22.       android:text="Button" />  

[html]  view plain  copy

 print ?

1. //my_shape_rectangle  

[html]  view plain  copy

 print ?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <shape xmlns:android="http://schemas.android.com/apk/res/android"   
3.     android:shape="rectangle"  
4.     >  
5.       
6.     <!-- 设置填充的颜色 -->  
7.     <solid  android:color="#0ff"/>  
8.       
9.     <!-- 设置内边距 -->  
10.     <padding   
11.         android:left="15dp"  
12.         android:top="15dp"  
13.         android:right="15dp"  
14.         android:bottom="15dp"  
15.         />  
16.       
17.     <!-- 设置矩形的边 android:dashWidth="" 虚线的宽度   android:dashGap=""  虚线的间距-->  
18.     <stroke   
19.         android:width="3dp"  
20.         android:color="#000000"  
21.         android:dashWidth="10dp"  
22.         android:dashGap="5dp"  
23.         />  
24.   
25. </shape>  

// my_shape_rectangle02

[html]  view plain  copy

 print ?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <shape xmlns:android="http://schemas.android.com/apk/res/android"   
3.     android:shape="rectangle"  
4.     >  
5.       
6.     <!-- 设置渐变的颜色 -->  
7.     <gradient   
8.         android:startColor="#FFFF00"  
9.         android:endColor="#00FFFF"  
10.         android:angle="45"  
11.         />  
12.       
13.     <!-- 设置圆角矩形 -->  
14.     <corners   
15.         android:topLeftRadius="20dp"  
16.         android:topRightRadius="20dp"  
17.         android:bottomLeftRadius="20dp"  
18.         android:bottomRightRadius="20dp"  
19.         />  
20.   
21. </shape>  

[html]  view plain  copy

 print ?

1. //<span style="font-family: Arial, Helvetica, sans-serif;">my_shape_oval</span>  

[html]  view plain  copy

 print ?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <shape xmlns:android="http://schemas.android.com/apk/res/android"   
3.     android:shape="oval"  
4.     >  
5.       
6.     <gradient   
7.         android:startColor="#FF0000"  
8.         android:endColor="#0000FF"  
9.         android:angle="45"  
10.         android:type="sweep"  
11.         />  
12.   
13. </shape>  

效果图：

[html]  view plain  copy

 print ?

1. <Button  
2.        android:id="@+id/button1"  
3.        android:text="Button"   
4.        style="@style/ButtonStyle"/>  
5.   
6.    <Button  
7.        android:id="@+id/button2"  
8.       style="@style/ButtonStyle.color"  
9.        android:text="Button" />  
10.   
11.    <Button  
12.        android:id="@+id/button3"  
13.        style="@style/Background"  
14.        android:text="Button" />  

[html]  view plain  copy

 print ?

1. <resources xmlns:android="http://schemas.android.com/apk/res/android">  
2.   
3.     <style name="AppBaseTheme" parent="android:Theme.Light"></style>  
4.     <!-- Application theme. -->  
5.     <style name="AppTheme" parent="AppBaseTheme">  
6.         <!-- All customizations that are NOT specific to a particular API-level can go here. -->  
7.     </style>  
8.     <!-- 自定义样式 -->  
9.     <style name="ButtonStyle">  
10.         <item name="android:layout_width">wrap_content</item>  
11.         <item name="android:layout_height">wrap_content</item>  
12.         <item name="android:padding">30dp</item>  
13.         <item name="android:textSize">25sp</item>  
14.   
15.     </style>  
16.     <!-- 继承关系 -->  
17.     <style name="ButtonStyle.color">  
18.         <item name="android:textColor">@color/red</item>  
19.     </style>  
20.   
21.     <style name="Background" parent="ButtonStyle">  
22.         <item name="android:background">#00FFFF</item>  
23.     </style>  
24.     <!-- 自定义主题 -->  
25.     <style name="MyTheme" parent="AppTheme">  
26.   
27.         <item name="android:background">#FAF0E6</item>  
28.     </style>  
29. </resources>  

效果：