Android Shape自定义纯色圆角按钮
版权声明:分享技术,传播快乐。如果本博客对你有帮助,请在我的博客首页为我打赏吧!
在Android开发中,为响应美化应用中控件的效果,使用Shape定义图形效果,可以解决图片过多的问题。
首先看一下效果图:
整个页面布局为:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#e6e6e6"
android:orientation="vertical"
android:gravity="center_vertical" > <ImageView
android:id="@+id/iv1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="20dp"
android:layout_marginLeft="@dimen/activity_horizontal_margin"
android:layout_marginRight="@dimen/activity_horizontal_margin"
android:layout_above="@id/account_editor"
android:src="@drawable/head" /> <EditText
android:id="@+id/account_editor"
android:layout_width="fill_parent"
android:layout_height="@dimen/edit_box_height"
android:layout_below="@id/title_bar"
android:layout_marginLeft="@dimen/activity_horizontal_margin"
android:layout_marginRight="@dimen/activity_horizontal_margin"
android:layout_marginTop="@dimen/activity_vertical_margin"
android:background="@drawable/input_box"
android:ellipsize="end"
android:gravity="center_vertical"
android:hint="@string/mobile_hint"
android:inputType="numberDecimal"
android:maxLength="11"
android:paddingLeft="@dimen/input_box_left_padding"
android:paddingRight="40.0dip"
android:singleLine="true"
android:textColor="@color/grey_text"
android:textSize="@dimen/font_normal" /> <TextView
android:id="@+id/error"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/account_editor"
android:layout_marginLeft="@dimen/activity_horizontal_margin"
android:layout_marginRight="@dimen/activity_horizontal_margin"
android:layout_marginTop="@dimen/notice_vertical_padding"
android:ellipsize="end"
android:singleLine="true"
android:textColor="@color/red_text"
android:textSize="@dimen/font_small"
android:visibility="gone" /> <EditText
android:id="@+id/psw_editor"
android:layout_width="fill_parent"
android:layout_height="@dimen/edit_box_height"
android:layout_below="@+id/error"
android:layout_marginLeft="@dimen/activity_horizontal_margin"
android:layout_marginRight="@dimen/activity_horizontal_margin"
android:layout_marginTop="@dimen/activity_vertical_margin"
android:background="@drawable/input_box"
android:ellipsize="end"
android:gravity="center_vertical"
android:hint="@string/psw_hint"
android:inputType="textPassword"
android:maxLength="16"
android:paddingLeft="@dimen/input_box_left_padding"
android:singleLine="true"
android:textColor="@color/grey_text"
android:textSize="@dimen/font_normal" /> <Button
android:id="@+id/login"
style="@style/common_button_style"
android:layout_below="@id/psw_editor"
android:layout_marginLeft="@dimen/activity_horizontal_margin"
android:layout_marginRight="@dimen/activity_horizontal_margin"
android:layout_marginTop="@dimen/activity_vertical_margin"
android:text="@string/login"
/> <RelativeLayout
android:layout_width="wrap_content"
android:layout_height="30.0dip"
android:layout_below="@+id/login"
android:layout_centerHorizontal="true"
android:layout_marginTop="25.0dip" > <TextView
android:id="@+id/register"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/activity_horizontal_margin"
android:clickable="true"
android:text="@string/register"
android:textColor="@color/black_text"
android:textSize="@dimen/font_normal" /> <TextView
android:id="@+id/forgot_psw"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginRight="@dimen/activity_horizontal_margin"
android:clickable="true"
android:text="@string/forgot_psw"
android:textColor="@color/black_text"
android:textSize="@dimen/font_normal" />
</RelativeLayout> </RelativeLayout>
其中自定义Button的相关布局代码为:
<Button
android:id="@+id/login"
style="@style/common_button_style"
android:layout_below="@id/psw_editor"
android:layout_marginLeft="@dimen/activity_horizontal_margin"
android:layout_marginRight="@dimen/activity_horizontal_margin"
android:layout_marginTop="@dimen/activity_vertical_margin"
android:text="@string/login"
/>
首先我们看看这个自定义的样式:
<style name="common_button_style">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">@dimen/btn_next_height</item>
<item name="android:background">@drawable/selector_red_corners_button</item>
<item name="android:padding">6.0dip</item>
<item name="android:textColor">@android:color/white</item>
<item name="android:textSize">@dimen/font_large</item>
<item name="android:layout_gravity">center_horizontal</item> </style>
其中重点关注的就是它的backgroud属性了。
selector_red_corners_button.xml
<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="@drawable/shape_red_corners_button_pressed" />
<item android:state_pressed="false" android:drawable="@drawable/shape_red_corners_button" />
</selector>
shape_red_corners_button_pressed.xml
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="20.0px" />
<solid android:color="@color/red_dark" />
</shape>
shape_red_corners_button.xml
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="20.0px" />
<solid android:color="@color/red_light" />
</shape>
其中圆角弧度的大小可以通过修改android:radius="20.0px"的大小来控制。
<color name="red_dark">#ffb52121</color>
<color name="red_light">#ffcd2222</color>
代码下载(注意:由于是自己工作时候的工程,就删除了部分,但你值得拥有啊)
http://download.csdn.net/detail/jdsjlzx/8365315
Shape的属性:
- solid
描述:内部填充
属性:android:color 填充颜色
- size
描述:大小
属性:
android:width 宽
android:height 高
- gradient
描述:渐变色
属性:
android:startColor渐变起始颜色
android:endColor渐变结束颜色
android:centerColor渐变中间颜色
android:angle 渐变的角度,angle=0时,渐变色是从左向右,然后逆时针方向转;当angle=90时,渐变色从上往下。angle必然是45的倍数
android:type 渐变类型:linear(线性)、radial(放射性,以开始色为中心)、sweep(扫描线式渐变)
android:userLevel如果要使用LevelListDrawable对象,就要设置为true。设置true无渐变色,false有渐变色
android:grdientRadial渐变半径,只有设置type为radial时,此值才生效
android:centerX 渐变中心X点坐标的相对位置
android:centerY 渐变中心Y点坐标的相对位置
- stroke
描述:描边
属性:
android:width 描边宽度
android:color 描边颜色
android:dashwidth描边样式为虚线时的宽度,值为0时为实线,值大于0时为虚线
android:dashGap 描边为虚线时,虚线之间的间隔
- corners
描述:圆角
属性:
android:radius 四个角半径值
android:topLeftRadius左上角半径值
android:topRightRadius右上角半径值
android:bottomLeftRadius右下角半径值
android:bottomRightRadius左下角半径值
- padding
描述:内边距
属性:
android:left 左内边距
android:right 右内边距
android:top 上内边距
android:bottom 下内边距
实例代码
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" > <corners android:radius="5dp" /> <size
android:height="30dp"
android:width="20dp" /> <gradient
android:startColor="#9933cc"
android:endColor="#aa66cc"
android:angle="90"
/> <padding android:left="5dp"
android:right="5dp"
android:top="5dp"
android:bottom="5dp"/> </shape>
<Button
android:id="@+id/btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/tv_test"
android:background="@drawable/btn_shape"
android:text="按钮" />
Android Shape自定义纯色圆角按钮的更多相关文章
- android shape 圆圈 圆环 圆角
定义圆圈:比如角标: xml布局文件 <TextView android:id="@+id/item_order_pay_count" android:layout_widt ...
- Android shape自定义形状,设置渐变色
<?xml version="1.0" encoding="utf-8"?> <!-- android:shape=["rect ...
- Android shape的使用(圆角矩形)
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http: ...
- iOS中创建自定义的圆角按钮
iOS中很多时候都需要用到指定风格的圆角按钮,尽管UIButton提供了一个方式创建圆角按钮: + (id)buttonWithType:(UIButtonType)buttonType;//指定bu ...
- android 带边框的圆角按钮
新建buttonstyle.xml 代码如下 <?xml version="1.0" encoding="UTF-8"?> <layer-li ...
- Android 自己定义UI圆角button
Android实际开发中我们一般须要圆角的button,普通情况下我们能够让美工做出来对应的button图片.然后放上去就可以,另外我们能够在布局文件里直接设置,也能够达到一样的效果. 以下解说在布局 ...
- Android shape 渐变!描边!圆角!示例详解
看看shape的用法,确实很有帮助.这里我偷懒转一篇比较详细的帖子,和大家一起进步~! Android 中常常使用shape来定义控件的一些显示属性,今天看了一些shape的使用,对shape有了大体 ...
- android 圆角按钮和按钮颜色
1. android 设置圆角按钮后,按下按钮后,还能改变按钮的颜色 <?xml version="1.0" encoding="UTF-8"?> ...
- android shape(如自定义Button)
Shape 前言:有时候会去自己去画一些Button的样式来展现在UI当中,其中主要用到的就是Shape 先来看一段代码: <?xml version="1.0" encod ...
随机推荐
- 【R】如何确定最适合数据集的机器学习算法 - 雪晴数据网
[R]如何确定最适合数据集的机器学习算法 [R]如何确定最适合数据集的机器学习算法 抽查(Spot checking)机器学习算法是指如何找出最适合于给定数据集的算法模型.本文中我将介绍八 ...
- TP数据访问
重点学习了: 1,ThinkPHP查询数据 2.ThinkPHP添加数据 LianXiController.class.php <?php namespace Home\Controller; ...
- hessian接口参数,子类与父类不能有同名字段解决方法
hessian默认是使用 com.caucho.hessian.io.JavaSerializer 序列化,同名字段子类字段值被赋值两次,最终用父类null值赋给了子类同名字段,解决方法就是 指定序列 ...
- 【C语言入门教程】7.2 结构体数组的定义和引用
7.2 结构体数组的定义和引用 当需要使用大量的结构体变量时,可使用结构体定义数组,该数组包含与结构体相同的数据结构所组成的连续存储空间.如下例所示: struct student stu_a[50] ...
- MongoDB的学习和使用(固定集合[Capped Collections])
MongoDB 固定集合(Capped Collections) MongoDB 固定集合(Capped Collections)是性能出色且有着固定大小的集合,对于大小固定,我们可以想象其就像一个环 ...
- HDU 5120 Intersection(2014北京赛区现场赛I题 计算几何)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5120 解题报告:给你两个完全相同的圆环,要你求这两个圆环相交的部分面积是多少? 题意看了好久没懂.圆环 ...
- BZOJ1251——序列终结者
给你一个数列,让你实现区间加上一个值,区间翻转,区间最大值 裸splay,懒标记一发即可 #include <cstdio> #include <cstdlib> #inclu ...
- RHEL/CentOS 7最小化安装后需做的30件事情
导读 CentOS是一个工业标准的Linux发行版,是红帽企业版 Linux 的衍生版本.你安装完后马上就可以使用,但是为了更好地使用你的系统,你需要进行一些升级.安装新的软件包.配置特定服务和应用程 ...
- smem – Linux 内存监视软件
导读 Linux 系统的内存管理工作中,内存使用情况的监控是十分重要的,在各种 Linux 发行版上你会找到许多这种工具.它们的工作方式多种多样,在这里,我们将会介绍如何安装和使用这样的一个名为 sm ...
- am335x 虚拟机环境变量的设置及注释
我用的还是老的Linux3.2.0的内核,只是借用了TI am335x SDK 3.0里面的工具. 首先下载TI官方的SDK,上一章已经安装了一个Ubuntu14.04的虚拟机. TI 最新的SDK下 ...