标签:圆角选项 android selector shape
最近在做一个项目,里边的设置页面要求圆角选项,类似QQ浏览器中的设置页面。废话不多说,上图看看大致效果:
做出这种效果,需要在drawable中加入四个selector(单个圆角选项、圆角上、圆角中部、圆角下)和一个shape(多个圆角选项外框)。
注意:
1、如果没有在代码中做setOnClickListener处理,想看到效果,需要加上android:clickable="true"属性,否则点击没有效果。
2、圆角选项外框的LinearLayout需要加上android:padding="1dp"属性,否则框内的选项会遮盖圆角框,就看不到外部边框了。
3、在圆角上、圆角下的selector中,获得焦点时的圆角角度比默认时偏小些,不然会有点空白情况发生。
下面是代码时间:
1、单个圆角选项:option_setting_bg_full.xml
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <!-- 点击时 --> <item android:state_pressed="true"> <shape> <solid android:color="@color/mine_option_bg_pre" /> <corners android:radius="5dp" /> <stroke android:width="1dp" android:color="#afafaf" /> </shape> </item> <!-- 获得焦点时 --> <item android:state_focused="true"> <shape> <solid android:color="@color/mine_option_bg_pre" /> <corners android:radius="5dp" /> <stroke android:width="1dp" android:color="#afafaf" /> </shape> </item> <!-- 默认状态 --> <item> <shape> <solid android:color="@color/mine_option_bg_nor" /> <corners android:radius="5dp" /> <stroke android:width="1dp" android:color="#afafaf" /> </shape> </item> </selector>
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" > <solid android:color="@color/mine_option_bg_nor" /> <corners android:topLeftRadius="5dp" android:topRightRadius="5dp" android:bottomLeftRadius="5dp" android:bottomRightRadius="5dp" /> <stroke android:width="1dp" android:color="#afafaf" /> </shape>
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android" > <!-- 点击时 --> <item android:state_pressed="true"> <shape> <solid android:color="@color/mine_option_bg_pre" /> <corners android:topLeftRadius="4dp" android:topRightRadius="4dp" android:bottomLeftRadius="0dp" android:bottomRightRadius="0dp" /> <stroke android:width="0dp" android:color="#afafaf" /> </shape> </item> <!-- 获得焦点时 --> <item android:state_focused="true"> <shape> <solid android:color="@color/mine_option_bg_pre" /> <corners android:topLeftRadius="4dp" android:topRightRadius="4dp" android:bottomLeftRadius="0dp" android:bottomRightRadius="0dp" /> <stroke android:width="0dp" android:color="#afafaf" /> </shape> </item> <!-- 默认状态 --> <item> <shape> <solid android:color="@color/mine_option_bg_nor" /> <corners android:topLeftRadius="5dp" android:topRightRadius="5dp" android:bottomLeftRadius="0dp" android:bottomRightRadius="0dp" /> <stroke android:width="0dp" android:color="#afafaf" /> </shape> </item> </selector>
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android" > <!-- 点击时 --> <item android:state_pressed="true"> <shape> <solid android:color="@color/mine_option_bg_pre" /> <corners android:radius="0dp"/> <stroke android:width="0dp" android:color="#afafaf" /> </shape> </item> <!-- 获得焦点时 --> <item android:state_focused="true"> <shape> <solid android:color="@color/mine_option_bg_pre" /> <corners android:radius="0dp"/> <stroke android:width="0dp" android:color="#afafaf" /> </shape> </item> <!-- 默认状态 --> <item> <shape> <solid android:color="@color/mine_option_bg_nor" /> <corners android:radius="0dp"/> <stroke android:width="0dp" android:color="#afafaf" /> </shape> </item> </selector>
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android" > <!-- 点击时 --> <item android:state_pressed="true"> <shape> <solid android:color="@color/mine_option_bg_pre" /> <corners android:bottomLeftRadius="5dp" android:bottomRightRadius="5dp"/> <stroke android:width="0dp" android:color="#afafaf" /> </shape> </item> <!-- 获得焦点时 --> <item android:state_focused="true"> <shape> <solid android:color="@color/mine_option_bg_pre" /> <corners android:bottomLeftRadius="5dp" android:bottomRightRadius="5dp"/> <stroke android:width="0dp" android:color="#afafaf" /> </shape> </item> <!-- 默认状态 --> <item> <shape> <solid android:color="@color/mine_option_bg_nor" /> <corners android:bottomLeftRadius="5dp" android:bottomRightRadius="5dp"/> <stroke android:width="0dp" android:color="#afafaf" /> </shape> </item> </selector>
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/app_base_bg" android:orientation="vertical" > <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginLeft="@dimen/space_10" android:layout_marginRight="@dimen/space_10" android:layout_marginTop="@dimen/space_20" android:background="@drawable/option_setting_bg_full" android:clickable="true" > <ImageView android:id="@+id/set_option_head_img" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" android:layout_centerVertical="true" android:layout_marginBottom="@dimen/space_20" android:layout_marginEnd="@dimen/space_10" android:layout_marginLeft="@dimen/space_20" android:layout_marginRight="@dimen/space_10" android:layout_marginStart="@dimen/space_20" android:layout_marginTop="@dimen/space_20" android:contentDescription="@string/iv_cont_des_string" android:src="@drawable/setting_head_def" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_marginBottom="@dimen/space_20" android:layout_marginTop="@dimen/space_20" android:layout_toEndOf="@+id/set_option_head_img" android:layout_toRightOf="@+id/set_option_head_img" android:orientation="vertical" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="单个圆角选项" android:textColor="@color/black" android:textSize="@dimen/text_size_15" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="这里只有一个圆角按钮" android:textColor="#666666" android:textSize="@dimen/text_size_13" /> </LinearLayout> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentEnd="true" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:contentDescription="@string/iv_cont_des_string" android:src="@drawable/option_more" /> </RelativeLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginLeft="@dimen/space_10" android:layout_marginRight="@dimen/space_10" android:layout_marginTop="@dimen/space_20" android:background="@drawable/option_setting_bg_all" android:clickable="true" android:orientation="vertical" android:padding="1dp" > <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/option_setting_bg_top" android:baselineAligned="false" android:clickable="true" android:orientation="horizontal" > <LinearLayout android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:orientation="vertical" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="start|center_vertical" android:padding="@dimen/space_10" android:text="按钮一" android:textColor="@color/black" android:textSize="20sp" /> </LinearLayout> <LinearLayout android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:orientation="vertical" > <ImageView android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="end|center_vertical" android:contentDescription="@string/iv_cont_des_string" android:src="@drawable/option_more" /> </LinearLayout> </LinearLayout> <View android:layout_width="match_parent" android:layout_height="1dp" android:background="#cfcfcf" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/option_setting_bg_center" android:baselineAligned="false" android:clickable="true" android:orientation="horizontal" > <LinearLayout android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:orientation="vertical" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="start|center_vertical" android:padding="@dimen/space_10" android:text="按钮二" android:textColor="@color/black" android:textSize="20sp" /> </LinearLayout> <LinearLayout android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:orientation="vertical" > <ImageView android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="end|center_vertical" android:contentDescription="@string/iv_cont_des_string" android:src="@drawable/option_more" /> </LinearLayout> </LinearLayout> <View android:layout_width="match_parent" android:layout_height="1dp" android:background="#cfcfcf" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/option_setting_bg_bottom" android:baselineAligned="false" android:clickable="true" android:orientation="horizontal" > <LinearLayout android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:orientation="vertical" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="start|center_vertical" android:padding="@dimen/space_10" android:text="按钮三" android:textColor="@color/black" android:textSize="20sp" /> </LinearLayout> <LinearLayout android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:orientation="vertical" > <ImageView android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="end|center_vertical" android:contentDescription="@string/iv_cont_des_string" android:src="@drawable/option_more" /> </LinearLayout> </LinearLayout> </LinearLayout> </LinearLayout>
标签:圆角选项 android selector shape
原文地址:http://blog.csdn.net/myatlantis/article/details/40422845