Android：布局實例之常見用戶設置界面

本文轉載自查看原文 2014-07-09 15:55 74883 布局實例/ Android

實現效果：

整理思路：

1、控件：文字TextView 和右箭頭ImageView

2、因為考慮到點擊效果，設計為：最外層為全圓角，內層有四種情況，分別為上圓角、無圓角、下圓角和全圓角。

3、內層樣式效果：需要初始樣式、和點擊樣式

4、需要知識：結合style、shake、selector組合樣式

布局：

 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     android:background="#F0F3F6"
 7      >
 8 
 9     
10     <LinearLayout style="@style/wrap_layout" >
11         <!-- 上圓角-->
12         <LinearLayout style="@style/top_layout">
13             <TextView style="@style/usertext" android:text="個性簽名" />
14               <ImageView style="@style/img_arrow"/>
15         </LinearLayout>
16         
17         <!-- 分割線 -->
18           <View style="@style/bg_line"/>
19           <!-- 無圓角-->
20        <LinearLayout style="@style/mid_layout">
21             <TextView style="@style/usertext" android:text="我的資料" />
22               <ImageView style="@style/img_arrow"/>
23         </LinearLayout>
24              <View style="@style/bg_line"/>
25           <!-- 下圓角-->
26        <LinearLayout style="@style/bottom_layout">
27             <TextView style="@style/usertext" android:text="消息通知" />
28               <ImageView style="@style/img_arrow"/>
29         </LinearLayout>
30              
31     </LinearLayout>
32 
33     
34      <!-- 全圓角-->
35     <LinearLayout style="@style/wrap_layout">
36         <LinearLayout style="@style/single_layout">
37             <TextView style="@style/usertext" android:text="輔助功能"/>
38             <ImageView style="@style/img_arrow"/>
39         </LinearLayout>
40         
41     </LinearLayout>
42     
43 </LinearLayout>

布局文件

樣式：

 1     <!-- 最外層樣式 -->
 2     <style name="wrap_layout">
 3         <item name="android:orientation">vertical</item>
 4         <item name="android:layout_height">wrap_content</item>
 5         <item name="android:layout_width">match_parent</item>
 6         <item name="android:layout_marginLeft">8dp</item>
 7         <item name="android:layout_marginRight">8dp</item>
 8         <item name="android:layout_marginTop">8dp</item>
 9         <item name="android:padding">1px</item>
10         <item name="android:background">@drawable/bg_layout_shape</item>
11               
12     </style>
13 
14     <!-- 共用層樣式 -->
15     <style name="base_layout">
16         <item name="android:orientation">horizontal</item> 
17          <item name="android:layout_width">match_parent</item>       
18          <item name="android:layout_height">wrap_content</item>
19          <item name="android:paddingTop">16dp</item>
20          <item name="android:paddingBottom">16dp</item>
21          <item name="android:paddingLeft">12dp</item>
22          <item name="android:paddingRight">12dp</item>
23         <item name="android:gravity">center_vertical</item>   
24          <item name="android:focusable">true</item>  
25         <item name="android:clickable">true</item>       
26     </style>

layout樣式

 1 <!-- textview樣式 -->
 2     <style name="usertext">
 3         <item name="android:textSize">16dp</item>
 4         <item name="android:textColor">@color/text_clo</item>
 5         <item name="android:layout_width">wrap_content</item>
 6         <item name="android:layout_height">wrap_content</item>
 7         <item name="android:layout_weight">1</item>
 8     </style>
 9     
10     
11     <!-- 文本右邊箭頭樣式 -->
12     <style name="img_arrow">
13         <item name="android:layout_width">wrap_content</item>
14         <item name="android:layout_height">wrap_content</item>
15         <item name="android:src">@drawable/setting_arrow</item>
16         
17     </style>
18     
19     
20    <!-- view分割線樣式 -->
21     <style name="bg_line">
22         <item name="android:layout_width">match_parent</item>
23         <item name="android:layout_height">1px</item>
24         <item name="android:background">@color/border_clo</item>
25     </style>

控件樣式

 1  <!-- 上圓角樣式 -->    
 2     <style name="top_layout" parent="base_layout">        
 3         <item name="android:background">@drawable/top_layout_selector</item>
 4     </style>
 5     
 6     
 7     <!--無圓角樣式  -->
 8     <style name="mid_layout" parent="base_layout">
 9          <item name="android:background">@drawable/mid_layout_selector</item>
10     </style>
11     
12         <!-- 下圓角樣式 -->
13     <style name="bottom_layout"  parent="base_layout">
14           <item name="android:background">@drawable/bottom_layout_selector</item>
15     </style>
16     
17     <!-- 全圓角樣式 -->
18     <style name="single_layout" parent="base_layout">
19         <item name="android:background">@drawable/single_layout_selector</item>
20     </style>

點擊樣式和默認樣式

其中舉例上圓角的背景設置為：

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

top_layout_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <solid android:color="@color/blue"/>
    <corners android:topRightRadius="8dp" android:topLeftRadius="8dp"/>
</shape>

top_select.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <solid android:color="@color/white"/>
    <corners android:topRightRadius="8dp" android:topLeftRadius="8dp"/>
</shape>

top_unselect.xml

練習工程下載>>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Android常見界面布局 CH2-Android常見界面布局 Android用戶界面設計：布局基礎 android開發------編寫用戶界面之相對布局界面實例--圖片布局在前端 Android Launcher分析和修改2——Icon修改、界面布局調整、壁紙設置 Android 設置啟動界面從零開始--系統深入學習android（實踐-讓我們開始寫代碼-Android框架學習-1.用戶界面和布局）模仿墨跡天氣設置界面布局 Android studio界面布局的簡單介紹