Android中, 很多时候系统原生的控件的格式并不能满足我们的需求,我们想要更加好看点的样式,像什么圆角矩形啊,颜色渐变啊,阴影效果啊等等的,这个时候就是我们的 ShapeDrawable发挥效果的时候了,接下来我们这两篇文章就来说一下Shape的一些应用吧,掌握点基础知识,才能好好更好地去应用啊。

其实很多东西并不难,我们也不是不懂,但是关键得懂得总结呀,对吧。

1)首先,我们要在res/drawable/ 路径下创建一个xml文件,其格式如下(这是在Android的官方文档中拿出来的,我觉得真的很丰满,一目了然):

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <shape
  3. xmlns:android="http://schemas.android.com/apk/res/android"
  4. android:shape=["rectangle" | "oval" | "line" | "ring"] >
  5. <corners
  6. android:radius="integer"
  7. android:topLeftRadius="integer"
  8. android:topRightRadius="integer"
  9. android:bottomLeftRadius="integer"
  10. android:bottomRightRadius="integer" />
  11. <gradient
  12. android:angle="integer"
  13. android:centerX="integer"
  14. android:centerY="integer"
  15. android:centerColor="integer"
  16. android:endColor="color"
  17. android:gradientRadius="integer"
  18. android:startColor="color"
  19. android:type=["linear" | "radial" | "sweep"]
  20. android:useLevel=["true" | "false"] />
  21. <padding
  22. android:left="integer"
  23. android:top="integer"
  24. android:right="integer"
  25. android:bottom="integer" />
  26. <size
  27. android:width="integer"
  28. android:height="integer" />
  29. <solid
  30. android:color="color" />
  31. <stroke
  32. android:width="integer"
  33. android:color="color"
  34. android:dashWidth="integer"
  35. android:dashGap="integer" />
  36. </shape>

shape是根元素,其android:shape属性定义了这个xml文件定义的形状,可以是retangle,oval,line 和 ring。

接下来我们结合代码和实际效果,一个一个地将这些元素都给过一遍吧。

corners(角)

<corners>表示的是矩形的四个角,只能用在android:shape = "rectangle" 的时候,一般情况下就是用来实现圆角矩形的效果,它只有5个子元素,如下:
  1. <corners
  2. android:radius="integer"
  3. android:topLeftRadius="integer"
  4. android:topRightRadius="integer"
  5. android:bottomLeftRadius="integer"
  6. android:bottomRightRadius="integer" />

一般是怎么应用的呢,如下:

1)创建shape文件,如 res / drawable/ corners.xml:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:shape="rectangle">
  4. <corners android:radius="15dp"/>
  5. </shape>

2)在xml中定义按钮的时候,将其android:background设置成上面的corners文件,如下:

  1. <Button
  2. android:layout_margin="5dp"
  3. android:layout_width="200dp"
  4. android:layout_height="50dp"
  5. android:background="@drawable/corners"
  6. android:text="Corner" />

3)然后就可以了,不过我这里多定义了几个样式的,大家可以看着,对比一下,效果图如下:

咦,怎么全黑了???哦!!!其实是因为默认填充的是黑色了,而按钮上的字体又是黑色的,所以就看不见了。
既然说到这,那就来说说solid属性吧。

Solid(填充)

Solid只有一个属性,就是填充的颜色,如下:
  1. <shape xmlns:android="http://schemas.android.com/apk/res/android"
  2. android:shape="rectangle">
  3. <corners android:radius="15dp"/>
  4. <solid android:color="#716283"/>
  5. </shape>

好,我们现在把填充的颜色给换了,不要黑色,再来看看效果吧。

这次对了,我们可以看到按钮上黑色的字体了,也可以看出一个一个的圆角了。
其中:
1)Corner按钮:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:shape="rectangle">
  4. <corners android:radius="15dp"/>
  5. <solid android:color="#716283"/>
  6. </shape>

我们可以看到4个角都变成圆角了,说明android:radius属性是对四个角都起作用的。

2)TopLeft 和 TopRight, BottomLeft 和 BottomRight 按钮
  1. <corners android:topLeftRadius="15dp"/>

如果只定义topLeftRadius的话,则只有左上角会变成圆角,同理,topRightRadius也只会改变右上角。

至于BottomLeftRadius,咦???又不对了,怎么反过来了????没错!!!!真的就是反过来了。。。我也不知道为什么会是这样,反正BottomLeft就是改变了右下角,BottomRight就是改变了左下角,大家这一点可要记好了。
3)如果同时定义radius跟topLeftRadius的话,会怎么样呢?
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:shape="rectangle">
  4. <corners
  5. android:radius="10dp"
  6. android:topLeftRadius="15dp"
  7. android:bottomRightRadius="15dp"/>
  8. <solid android:color="#716283"/>
  9. </shape>

则可以看到定义了radius的10dp就还是10dp,而topLeftRadius和bottomRightRadius,则会覆盖radius定义的10dp。

好了,现在我们看完corners和radius了,接下来再看看padding吧。

Padding

Padding支持四个属性,分别是left,right,top 和 bottom。
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:shape="rectangle">
  4. <corners android:topLeftRadius="15dp"/>
  5. <solid android:color="#716283"/>
  6. <padding android:left="30dp"/>
  7. </shape>

在原来的基础上再加上padding效果,我们来看看吧。

很明显,我们看到按钮上的文字明显比其他没设置padding按钮多了一些空间的出来,其实就跟我们平常认识的padding一样效果了。
关于gradient(渐变)就在下一篇中再说吧。

关于ShapeDrawable应用的一些介绍(中)之Gradient

关于ShapeDrawable应用的一些介绍(上)的更多相关文章

  1. 关于ShapeDrawable应用的一些介绍(中)之Gradient

    版权声明:本文为博主原创文章,未经博主允许不得转载. Gradient,渐变,是在界面设计中最经常用到的一种技巧,只要涉及到颜色的处理,浓妆淡抹总相宜,说的就是它. 在Android中,当然也提供了这 ...

  2. [Python爬虫] 在Windows下安装PhantomJS和CasperJS及入门介绍(上)

    最近在使用Python爬取网页内容时,总是遇到JS临时加载.动态获取网页信息的困难.例如爬取CSDN下载资源评论.搜狐图片中的“原图”等,此时尝试学习Phantomjs和CasperJS来解决这个问题 ...

  3. 【转载】Direct3D HLSL介绍(上)

    原文路径:http://www.csharpwin.com/csharpspace/3087.shtml 写过Direct3D程序的朋友们可能还记得,在以往,大家常为如何表现更多真实的材质(如玻璃.金 ...

  4. Swift UI控件详细介绍(上)

    UI控件 首先介绍一下AppDelegate.swift@UIApplicationMain 调用了OC中的UIApplicationMain函数:UIApplicationMain是iOS应用程序的 ...

  5. ASP.NET MVC 入门介绍 (上)

    MVC模式 MVC模式是一种软件架构模式.它把软件系统分为三个部分:模型(Model),视图(View)和控制器(Controller).MVC模式最早由Trygve Reenskaug在1974年提 ...

  6. Android init介绍(上)

    1. 介绍 init进程是Linux系统第一个用户进程,是Android系统应用程序的根进程,即1号进程(PID为1):Android中的init文件位于/init,代码位于system/core/i ...

  7. Bootstrap 学习笔记 项目实战 首页内容介绍 上

    效果图: HTML代码: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset ...

  8. webpack介绍—上

    6.1 webpack概念的引入 在网页中会引用哪些常见的静态资源? JS .js. .jsx ..coffee. .ts(TypeScript 类 C# 语言) CSS .css. .less. . ...

  9. webpack 项目接入Vite的通用方案介绍(上)

    愿景 希望通过本文,能给读者提供一个存/增量项目接入Vite的点子,起抛砖引玉的作用,减少这方面能力的建设成本 在阐述过程中同时也会逐渐完善webpack-vite-serve这个工具 读者可直接fo ...

随机推荐

  1. Objective-C—— @Property详解

    实例变量:属性其实说直白点就是 ivar + setter + getter(实例变量+存取方法),不过在OC中属性多了字面量这一系列特殊关键字使得OC属性有些不同. 成员属性我们应该都使用过,比如现 ...

  2. Go中的main函数和init函数

    Go里面有两个保留的函数:init函数(能够应用于所有的package)和main函数(只能应用于package main).这两个函数在定义时不能有任何的参数和返回值.虽然一个package里面可以 ...

  3. Assembly之instruction之JUMP

    JMP  Jump unconditionally Syntax   JMP  label Operation PC + 2 × offset −> PC Description The 10- ...

  4. 2星|《10W+走心文案是怎样炼成的》:标题党。实际是台湾创意总监的一些人生感悟和两三个很一般的创意文案

    10W+走心文案是怎样炼成的 作者是台湾人,曾在台湾奥美担任创意总监,做过一些广告.本书是他的一些经验介绍. 总体来说是标题党,作者的广告基本是电视广告,跟文案也有关系,估计播放量也很容易过10W+, ...

  5. 揭开jQuery的面纱

    简单地说,jQuery是一个优秀的JavaScript类库,也就是使用JavaScript面向对象的性质编写的一个JavaScript类的集合.jQuery究竟能为我们提供哪些功能呢?简单地说可以从七 ...

  6. PAT_A1076#Forwards on Weibo

    Source: PAT A1076 Forwards on Weibo (30 分) Description: Weibo is known as the Chinese version of Twi ...

  7. GETDATE()

    定义和用法 GETDATE() 函数从 SQL Server 返回当前的时间和日期. 语法 GETDATE() 实例 例子 1 使用下面的 SELECT 语句: SELECT GETDATE() AS ...

  8. 【剑指Offer】54、字符流中第一个不重复的字符

      题目描述:   请实现一个函数用来找出字符流中第一个只出现一次的字符.例如,当从字符流中只读出前两个字符"go"时,第一个只出现一次的字符是"g".当从该字 ...

  9. js:多种方法实现数组去重

    面试的时候数组去重要多种方法实现, 只想到一种判断重复删除的方法,而且还没写对.后来大概看了一下网上的方法. 下午想到一个网上没见过的filter方法,于是整理了一下,基于以前看到的思想,然后用了一些 ...

  10. codevs 2602 最短路径问题——良心题解

    2602 最短路径问题 时间限制: 1 s 空间限制: 32000 KB 题目等级 : 黄金 Gold 题解 题目描述 Description 平面上有n个点(n<=100),每个点的坐标均在- ...