Android:布局实例之常见用户设置界面

实现效果:

整理思路:

1、控件:文字TextView 和 右箭头ImageView

2、因为考虑到点击效果,设计为:最外层为全圆角,内层有四种情况,分别为上圆角、无圆角、下圆角和全圆角。

3、内层样式效果:需要初始样式、和点击样式

4、需要知识:结合style、shake、selector组合样式

布局:

 布局文件

样式:

复制代码
 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>
复制代码

复制代码
 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>

<?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>

<?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>

 

未经允许不得转载:A66网 » Android:布局实例之常见用户设置界面

赞 (0)
分享到:更多 ()

评论 0