ui佈局的設計技巧與美化

woff

在我們安卓佈局使用佈局文件可以對各個控件的位置和屬性進行設置，但是在佈局一個複雜的界面，這樣使得界面比較繁雜不明朗清晰，所以可以使用一個特殊的標籤來實現特殊的功能，那就是include標籤了，顧名思義包含標籤，它可以使幾個不同的佈局文件整合在一起。
  具體如下：
主佈局:include_main

1. <?xml version="1.0" encoding="utf-8"?>
   
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   
3.     android:layout_width="match_parent"
   
4.     android:layout_height="match_parent"
   
5.     android:orientation="vertical" >
   
6.     <include
   
7.         android:id="@+id/child1"
   
8.         android:layout_height="416dp"
   
9.         layout="@layout/include_child1" />
   
10.     <include
    
11.         android:id="@+id/child2"
    
12.         layout="@layout/include_child2"
    
13.         />
    
14. </LinearLayout>

複製代碼

  子布局1：child1
  

1. <?xml version="1.0" encoding="utf-8"?>
   
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   
3.     android:layout_width="match_parent"
   
4.     android:layout_height="wrap_content"
   
5.     android:orientation="vertical" >
   
6.     <TextView
   
7.         android:text="include子布局1"
   
8.         android:layout_width="wrap_content"
   
9.         android:layout_height="wrap_content"
   
10.         />
    
11. </LinearLayout>

複製代碼

子布局2：child2

1. <?xml version="1.0" encoding="utf-8"?>
   
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   
3.     android:layout_width="match_parent"
   
4.     android:layout_height="wrap_content"
   
5.     android:orientation="vertical" >
   
6.     <TextView
   
7.         android:text="include子布局2"
   
8.         android:layout_width="fill_parent"
   
9.         android:layout_height="wrap_content"
   
10.         />
    
11. </LinearLayout>

複製代碼

這樣佈局程序可讀性大大提高，模塊清晰明朗。

2.自定義控件效果在res文件下創建（folder）文件-文件名 ​​為drawable,然後再其文件下創建xml文件，其下面可供選擇的有shape形狀、gradient漸變、圓角corners、Stroke描邊、solid實心、rotate旋轉、selector選擇器等等
常用shape selector如下

1. <?xml version="1.0" encoding="utf-8"?>
   
2. <shape xmlns:android="http://schemas.android.com/apk/res/android" >
   
3.    
   
4.     <corners android:radius="5.0dip"></corners>
   
5.     <padding android:right="5dip" android:bottom="5dip"></padding>
   
6.     <solid  android:color="#1d953f"></solid>
   
7.     <stroke android:width="5.0dip" android:color="#1d9530"></stroke>
   
8. </shape>

複製代碼

根據自己的需求來設置參數，其中還可以設置其形狀android :shape="oval"oval為橢圓形，ring環形，rectangle矩形，直線型line

1. <?xml version="1.0" encoding="utf-8"?>
   
2. <selector xmlns:android="http://schemas.android.com/apk/res/android" >
   
3.     <item android:state_pressed="false" android:drawable="@drawable/normal"></item>
   
4.     <item android:state_focused="false"  android:drawable="@drawable/normal"></item>
   
5.     <item android:state_pressed="true" android:drawable="@drawable/press"></item>
   
6.     <item android:state_focused="true"  android:drawable="@drawable/focused"></item>
   
7. </selector>

複製代碼

android:state_focused這個為獲取焦點事件，android:state_pressed為按下事件可以自己定義其獲取焦點前後和按下按鍵前後效果，其中@drawable/可添加圖片和自定義的drawable佈局 最後在控件引用的時候：android:background="@drawable/你自定義文件"注意在chechbox等一些控件自定義時要使用android:button="@drawable/你自定義文件",或者在style文件中設置

1. <style name="logincheckbox" parent="@android:style/Widget.CompoundButton.CheckBox">
   
2.       <item name="android:button">@drawable/logincheckbox</item>
   
3.    </style>

複製代碼

控件引用的時候用style="@style/style名字"
3.巧妙的使用style來定義效果

1. <style name="CustomButton" parent="@android:style/Widget.Button">
   
2.         <!-- 水平、垂直居中 -->
   
3.         <item name="android:gravity">center_vertical|center_horizontal</item>
   
4.         <!--字體顏色-->
   
5.         <item name="android:textColor">#FFFFFFFF</item>
   
6.         <!--指定文本陰影的顏色，需要與shadowRadius一起使用-->
   
7.         <item name="android:shadowColor">#FF000000</item>
   
8.         <!--設置陰影橫向坐標開始的位置-->
   
9.         <item name="android:shadowDx">0</item>
   
10.         <!--設置陰影縱向坐標開始的位置-->
    
11.         <item name="android:shadowDy">-1</item>
    
12.         <!--設置陰影的半徑，設置為0.1就變成文本的顏色了-->
    
13.         <item name="android:shadowRadius">0.2</item>
    
14.         <item name="android:textSize">16sp</item>
    
15.         <item name="android:textStyle">bold</item>
    
16.         <!--這裡引用定義的按鈕樣式-->
    
17.         <item name="android:background">@drawable/custom_button</item>
    
18.         <item name="android:focusable">true</item>
    
19.         <item name="android:clickable">true</item>
    
20.     </style>

複製代碼

根據自己的需要靈活巧妙的來設置其屬性來滿足需求
4.巧妙地使用動畫效果
5.使用九妹（.9patch ）無失真圖片拉伸處理