使用selector和shape实现圆角选项
来源:互联网 发布:mac腾讯视频离线缓存 编辑:程序博客网 时间:2024/06/05 14:28
最近在做一个项目,里边的设置页面要求圆角选项,类似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>
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>
0 0
- 使用selector和shape实现圆角选项
- shape和selector的 使用
- shape和selector的使用
- selector和shape结合使用
- Android:shape和selector使用
- Android 实现圆角按钮(selector和shape的简单用法)
- Android 实现圆角按钮(selector和shape的简单用法)
- Android中 shape和selector的使用
- shape和selector的结合使用
- shape和selector的结合使用
- shape和selector的结合使用
- shape和selector的结合使用
- shape和selector的结合使用
- shape和selector的结合使用
- shape和selector的结合使用
- shape和selector的结合使用
- shape和selector的结合使用
- [Android]shape和selector的结合使用
- ExtJs的radiogroup的使用
- 优秀程序员所具备的7个好习惯
- 【OpenCV】邻域滤波:方框、高斯、中值、双边滤波
- pat 1001 A+B Format
- Android中ViewStub的使用
- 使用selector和shape实现圆角选项
- jdk之间的转换
- SpringMVC中Ajax异步上传图片的方法
- c和指针阅读笔记
- Ajax中Get请求与Post请求的区别
- AE新手基础入门教程50套从新手到高手
- 分析oracle索引空间使用情况,以及索引是否需要重建
- 在WPF中把Canvas保存为图片,文本文件,xps文件
- java 内存溢出解决方案