关于ShapeDrawable应用的一些介绍(上)
在Android中, 很多时候系统原生的控件的格式并不能满足我们的需求,我们想要更加好看点的样式,像什么圆角矩形啊,颜色渐变啊,阴影效果啊等等的,这个时候就是我们的 ShapeDrawable发挥效果的时候了,接下来我们这两篇文章就来说一下Shape的一些应用吧,掌握点基础知识,才能好好更好地去应用啊。
其实很多东西并不难,我们也不是不懂,但是关键得懂得总结呀,对吧。
1)首先,我们要在res/drawable/ 路径下创建一个xml文件,其格式如下(这是在Android的官方文档中拿出来的,我觉得真的很丰满,一目了然):
- <?xml version="1.0" encoding="utf-8"?>
- <shape
- xmlns:android="http://schemas.android.com/apk/res/android"
- android:shape=["rectangle" | "oval" | "line" | "ring"] >
- <corners
- android:radius="integer"
- android:topLeftRadius="integer"
- android:topRightRadius="integer"
- android:bottomLeftRadius="integer"
- android:bottomRightRadius="integer" />
- <gradient
- android:angle="integer"
- android:centerX="integer"
- android:centerY="integer"
- android:centerColor="integer"
- android:endColor="color"
- android:gradientRadius="integer"
- android:startColor="color"
- android:type=["linear" | "radial" | "sweep"]
- android:useLevel=["true" | "false"] />
- <padding
- android:left="integer"
- android:top="integer"
- android:right="integer"
- android:bottom="integer" />
- <size
- android:width="integer"
- android:height="integer" />
- <solid
- android:color="color" />
- <stroke
- android:width="integer"
- android:color="color"
- android:dashWidth="integer"
- android:dashGap="integer" />
- </shape>
shape是根元素,其android:shape属性定义了这个xml文件定义的形状,可以是retangle,oval,line 和 ring。
corners(角)
- <corners
- android:radius="integer"
- android:topLeftRadius="integer"
- android:topRightRadius="integer"
- android:bottomLeftRadius="integer"
- android:bottomRightRadius="integer" />
一般是怎么应用的呢,如下:
- <?xml version="1.0" encoding="utf-8"?>
- <shape xmlns:android="http://schemas.android.com/apk/res/android"
- android:shape="rectangle">
- <corners android:radius="15dp"/>
- </shape>
2)在xml中定义按钮的时候,将其android:background设置成上面的corners文件,如下:
- <Button
- android:layout_margin="5dp"
- android:layout_width="200dp"
- android:layout_height="50dp"
- android:background="@drawable/corners"
- android:text="Corner" />
3)然后就可以了,不过我这里多定义了几个样式的,大家可以看着,对比一下,效果图如下:
Solid(填充)
- <shape xmlns:android="http://schemas.android.com/apk/res/android"
- android:shape="rectangle">
- <corners android:radius="15dp"/>
- <solid android:color="#716283"/>
- </shape>
好,我们现在把填充的颜色给换了,不要黑色,再来看看效果吧。
- <?xml version="1.0" encoding="utf-8"?>
- <shape xmlns:android="http://schemas.android.com/apk/res/android"
- android:shape="rectangle">
- <corners android:radius="15dp"/>
- <solid android:color="#716283"/>
- </shape>
我们可以看到4个角都变成圆角了,说明android:radius属性是对四个角都起作用的。
- <corners android:topLeftRadius="15dp"/>
如果只定义topLeftRadius的话,则只有左上角会变成圆角,同理,topRightRadius也只会改变右上角。
- <?xml version="1.0" encoding="utf-8"?>
- <shape xmlns:android="http://schemas.android.com/apk/res/android"
- android:shape="rectangle">
- <corners
- android:radius="10dp"
- android:topLeftRadius="15dp"
- android:bottomRightRadius="15dp"/>
- <solid android:color="#716283"/>
- </shape>
则可以看到定义了radius的10dp就还是10dp,而topLeftRadius和bottomRightRadius,则会覆盖radius定义的10dp。
Padding
- <?xml version="1.0" encoding="utf-8"?>
- <shape xmlns:android="http://schemas.android.com/apk/res/android"
- android:shape="rectangle">
- <corners android:topLeftRadius="15dp"/>
- <solid android:color="#716283"/>
- <padding android:left="30dp"/>
- </shape>
在原来的基础上再加上padding效果,我们来看看吧。
关于ShapeDrawable应用的一些介绍(中)之Gradient
关于ShapeDrawable应用的一些介绍(上)的更多相关文章
- 关于ShapeDrawable应用的一些介绍(中)之Gradient
版权声明:本文为博主原创文章,未经博主允许不得转载. Gradient,渐变,是在界面设计中最经常用到的一种技巧,只要涉及到颜色的处理,浓妆淡抹总相宜,说的就是它. 在Android中,当然也提供了这 ...
- [Python爬虫] 在Windows下安装PhantomJS和CasperJS及入门介绍(上)
最近在使用Python爬取网页内容时,总是遇到JS临时加载.动态获取网页信息的困难.例如爬取CSDN下载资源评论.搜狐图片中的“原图”等,此时尝试学习Phantomjs和CasperJS来解决这个问题 ...
- 【转载】Direct3D HLSL介绍(上)
原文路径:http://www.csharpwin.com/csharpspace/3087.shtml 写过Direct3D程序的朋友们可能还记得,在以往,大家常为如何表现更多真实的材质(如玻璃.金 ...
- Swift UI控件详细介绍(上)
UI控件 首先介绍一下AppDelegate.swift@UIApplicationMain 调用了OC中的UIApplicationMain函数:UIApplicationMain是iOS应用程序的 ...
- ASP.NET MVC 入门介绍 (上)
MVC模式 MVC模式是一种软件架构模式.它把软件系统分为三个部分:模型(Model),视图(View)和控制器(Controller).MVC模式最早由Trygve Reenskaug在1974年提 ...
- Android init介绍(上)
1. 介绍 init进程是Linux系统第一个用户进程,是Android系统应用程序的根进程,即1号进程(PID为1):Android中的init文件位于/init,代码位于system/core/i ...
- Bootstrap 学习笔记 项目实战 首页内容介绍 上
效果图: HTML代码: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset ...
- webpack介绍—上
6.1 webpack概念的引入 在网页中会引用哪些常见的静态资源? JS .js. .jsx ..coffee. .ts(TypeScript 类 C# 语言) CSS .css. .less. . ...
- webpack 项目接入Vite的通用方案介绍(上)
愿景 希望通过本文,能给读者提供一个存/增量项目接入Vite的点子,起抛砖引玉的作用,减少这方面能力的建设成本 在阐述过程中同时也会逐渐完善webpack-vite-serve这个工具 读者可直接fo ...
随机推荐
- xhtml1-strict.dtd
<!-- Extensible HTML version 1.0 Strict DTD This is the same as HTML 4 Strict except for changes ...
- 2018.10.9 上线发现elasticsearch写入速度超级慢,原来罪魁祸首是阿里云服务的OSS的锅
问题描述: 按照项目计划,今天上线部署日志系统(收集线上的所有日志,便于问题排查). 运维按照以前的部署过程,部署elasticsearch,部署结束之后,通过x-pack的monitor发现elas ...
- 查找索引/ie滤镜/动态背景/属性attr和prop
1. 查找索引 查找当前元素在指定范围内的索引序号,示例: $('.right_newestState_con').find('em').index($(this)); 2. ie滤镜 利用ie的私有 ...
- SQL中EXTRACT() 函数
EXTRACT()("提取"的意思) 函数用于返回日期/时间的单独部分,比如年.月.日.小时.分钟等等. 就是返回出来具体的年,月,日 2008-12-29 16:25:46.63 ...
- node post和get请求原理
重要:GET和POST请求他们都是上行请求,都是把数据从浏览器带向服务器的方式, GET 请求实际上就是识别URL中的querystring部分POST请求,一般用来发送大量的内容,此时node非常害 ...
- Ceph 文件系统的安装
yum install -y wget wget https://pypi.python.org/packages/source/p/pip/pip-1.5.6.tar.gz#md5=01026f87 ...
- vs2008 打开项目 无法读取项目文件
卸载vs2015之后 出现问题 C:\Windows\SysWOW64\regedit.exe 64系统运行这个 删除 HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\MS ...
- 数据迁移 Migration
- 为 Elasticsearch 添加中文分词,对比分词器效果
转自:http://keenwon.com/1404.html 为 Elasticsearch 添加中文分词,对比分词器效果 Posted in 后端 By KeenWon On 2014年12月12 ...
- vue-router 懒加载
懒加载:也叫延迟加载,即在需要的时候进行加载,按需加载. 那vue 为什么需要懒加载呢? 使用 vue-cli构建的项目,在默认情况下,执行 npm run build 会将所有的 js代码打包为一 ...