实现效果:
整理思路:
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>