美文网首页Android 精华Android开发Android知识
Hacks控件篇-Hack4 为背景添加圆角边框

Hacks控件篇-Hack4 为背景添加圆角边框

作者: diygreen | 来源:发表于2016-05-14 18:45 被阅读320次
圆角边框背景

作者:李旺成

时间:2016年5月14日


这个 Hack 将介绍使用自定义形状实现圆角边框背景。

圆角矩形按钮

曾经在 iOS 上非常流行圆角矩形按钮:

iOS圆角矩形按钮

在 Android 上要实现圆角矩形背景也比较简单,可以使用 .9 图片,这里介绍一种更高效,定制性更好的方案,使用自定义形状。

自定义圆角矩形背景

先看看效果:

圆角矩形按钮

实现很简单:

1、创建形状文件
在 res/drawable 目录下创建 button_rounded_background.xml 文件,内容如下:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#0000ff"/>
    <corners android:radius="15dp"/>
</shape>

简单解释:

  • solid:填充
    android:color指定填充的颜色
  • corners:圆角
    android:radius为角的弧度,值越大角越圆

使用 <shape> 可以实现很多效果,这里不展开了,感兴趣的可以参考官方文档。关于 shape 将会在 AndroidStudyDemo 系列AndroidStudyDemo 分类 中写一篇详解。

2、在布局中使用
将 button_rounded_background.xml 当成普通的 drawable 资源使用即可:

<Button android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="圆角矩形按钮"
    android:layout_centerInParent="true"
    android:textColor="#ffffff"
    android:textSize="30sp"
    android:padding="10dp"
    android:background="@drawable/button_rounded_background"/>

小结

好了,关于圆角矩形的实现介绍到这里,使用很简单,建议尽量使用这种方式来实现圆角矩形背景。定制性高,使用灵活。

项目地址

AndroidHacks合集
控件使用篇

项目示例代码:
RoundButtonActivity.java
button_rounded_background.xml
activity_round_button.xml

相关文章

  • Hacks控件篇-Hack4 为背景添加圆角边框

    作者:李旺成 时间:2016年5月14日 这个 Hack 将介绍使用自定义形状实现圆角边框背景。 圆角矩形按钮 曾...

  • CSS3随笔1

    一,边框 1.border-radius为元素添加圆角边框,使用方法如下: ...

  • flutter 控件添加阴影圆角边框

    快速添加阴影圆角边框代码

  • ios关于UI

    1.ios在控件上添加虚线边框 内容很详细,涉及到虚线边框圆角问题及解决过程。 2.ios截图 ①截某个显示图片的...

  • CSS3基础

    CSS3基础 -- 边框 圆角效果 向元素添加圆角边框 阴影 box-shadow 向盒子添加阴影。支持一个或者...

  • CSS3

    一些最重要CSS3模块如下:选择器 盒模型 背景和边框 边框 添加圆角元素:border-radius:25p...

  • css与div专题

    为div设置样式 背景 颜色背景 圆角背景 ie支持不是很好 边框背景 阴影背景 ie支持不是很好 圆形背景...

  • CSS3边框,背景,渐变,过渡,2d变换

    01-边框圆角.html 02-圆角应用.html 03-边框阴影.html 04-边框图片.html 01-背景...

  • CSS3简明教程之边框

    第2章 边框 圆角效果 border-radius border-radius是向样式添加圆角边框,使用方法: 不...

  • 自定义AlertView(继承UIView)

    继承UIView 可自定义控件,可自行添加控件,可设置控件背景图片,圆角,支持多行信息自动调整高度,使用如下: T...

网友评论

本文标题:Hacks控件篇-Hack4 为背景添加圆角边框

本文链接:https://www.haomeiwen.com/subject/wznmrttx.html