使用selector和shape实现圆角选项
2014-10-24 10:30
381 查看
最近在做一个项目,里边的设置页面要求圆角选项,类似QQ浏览器中的设置页面。废话不多说,上图看看大致效果:
做出这种效果,需要在drawable中加入四个selector(单个圆角选项、圆角上、圆角中部、圆角下)和一个shape(多个圆角选项外框)。
注意:
1、如果没有在代码中做setOnClickListener处理,想看到效果,需要加上android:clickable="true"属性,否则点击没有效果。
2、圆角选项外框的LinearLayout需要加上android:padding="1dp"属性,否则框内的选项会遮盖圆角框,就看不到外部边框了。
3、在圆角上、圆角下的selector中,获得焦点时的圆角角度比默认时偏小些,不然会有点空白情况发生。
下面是代码时间:
1、单个圆角选项:option_setting_bg_full.xml
2、多个圆角选项外框:option_setting_bg_all.xml
3、圆角上:option_setting_bg_top.xml
4、圆角中部:option_setting_bg_center.xml
5、圆角下:option_setting_bg_bottom.xml
在layout中的应用:layout.xml
做出这种效果,需要在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>
2、多个圆角选项外框:option_setting_bg_all.xml
<?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>
3、圆角上:option_setting_bg_top.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: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>
4、圆角中部:option_setting_bg_center.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="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>
5、圆角下:option_setting_bg_bottom.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: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>
在layout中的应用:layout.xml
<?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之shape与selector实现圆角
- Android之shape与selector实现圆角
- Android之shape与selector实现圆角
- Android之shape与selector实现圆角
- Android之shape与selector实现圆角
- Android使用shape实现非四角圆角
- android使用shape实现布局文件呈圆角
- Android之shape与selector实现圆角
- (转)Android之shape与selector实现圆角
- Android shape的使用实现圆角,虚线,渐变等效果
- Android 实现圆角按钮(selector和shape的简单用法)
- 使用shape实现圆角button
- android 使用shape 实现圆角图片__不用.9了
- Android圆角、点击背景----shape和selector和layer-list使用
- Android Shape Drawable 静态使用和动态使用(圆角,渐变实现)
- Android Shape Drawable 静态使用和动态使用(圆角,渐变实现)
- Android 实现圆角按钮(selector和shape的简单用法)
- Android之shape与selector实现圆角
- Android之shape与selector实现圆角
- Android之shape与selector实现圆角