详解Android用Shape制作单边框图的两种思路和坑

开发中遇到单/多边框的UI，简单的可以自己写shape图，复杂的一般都让设计配合制作9patch图了。

今天不说需要切图的情况，只聊简单的单/多边框，主要是实现思路。

效果很简单：

就以上图为例介绍，只有上边框，边框红色、宽1dp，其余为白色。

思路一

  • 两层画布叠加：底层红色；上层白色；
  • 上层白色画布下移1dp。

代码实现：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <!--下层画布，红色-->
  <item>
    <shape>
      <solid android:color="#f10606" />
    </shape>
  </item>
  <!--下层画布，白色，向下移1dp-->
  <item android:top="1dp">
    <shape>
      <solid android:color="#ffffff" />
    </shape>
  </item>
</layer-list>

其中 <item> 标签的 left 、 top 、 right 、 bottom 属性可以理解为 view 的 marginXX ，这样接下来的思路二也就顺理成章了。

思路二

margin有正值，也有负值，所以...

  • 两层画布：底层全部白色；上层只有红色边框，边框宽度1dp；
  • 上层红色边框分别设置左、右、下margin为-1dp（这里只要负值大于边框宽度即可，并且必须大于边框宽度）

代码实现：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <!--下层画布，全白色-->
  <item>
    <shape>
      <solid android:color="#ffffff" />
    </shape>
  </item>
  <!--上层画布，红色边框，宽度1dp；左、右、下设置margin-->
  <item
    android:bottom="-1dp"
    android:left="-1dp"
    android:right="-1dp"
    android:top="0dp">
    <shape>
      <stroke
        android:width="1dp"
        android:color="#f10606" />
    </shape>
  </item>
</layer-list>

单边框就这样了，同理，那二边框、三边框也就简单了。

按需自取。

坑？

你以为到则里就结束了？图样图森炮！

跑一下上边思路二的代码看看效果

神马情况， stroke 里 width 的值和 item 里 left 等的值转化为像素的比例还不一样？并且不同手机分辨率效果也不同，分辨率越高越容易出现。

当然，思路二里把 item 里 left 等的负值绝对值设置比 width 大的多一些就阔以了；另外，思路一是没这个问题的。

至于原因嘛，太晚了，睡一觉再研究吧。

更多shape使用请移步这里：

android shape的使用详解以及常用效果（渐变色、分割线、边框、半透明阴影效果等）

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Android自定义View实现shape图形绘制

    Android自定义View实现shape图形绘制

    概述 之前曾写过一篇文章介绍了Android中drawable使用Shape资源,通过定义drawable中的shape资源能够绘制简单的图形效果,如矩形,椭圆形,线形和圆环等.后来我在项目中正好遇到这样一个需求,要在特定的位置上显示一条垂直的虚线.正当我胸有成竹的把上面的资源文件放入进去的时候,我才发现它并不能符合我的要求.使用shape画出的垂直虚线,其实就是将一条水平的线,旋转90度.但这样做的弊端就是,该View有效区域为旋转90度后与原来位置相重合的区域,还不能随意的改动,这样的效果根

  • Android shape和selector 结合使用实例代码

    Android shape和selector 结合使用实例代码

    shape和selector是Android UI设计中经常用到的,比如我们要自定义一个圆角Button,点击Button有些效果的变化,就要用到shape和selector.可以这样说,shape和selector在美化控件中的作用是至关重要的. 1.Shape 简介 作用:XML中定义的几何形状 位置:res/drawable/文件的名称.xml 使用的方法: Java代码中:R.drawable.文件的名称 XML中:android:background="@drawable/文件的名称&

  • Android开发教程之shape和selector的结合使用

    Android开发教程之shape和selector的结合使用

    shape和selector是Android UI设计中经常用到的,比如我们要自定义一个圆角Button,点击Button有些效果的变化,就要用到shape和selector.可以这样说,shape和selector在美化控件中的作用是至关重要的. 1.Shape 简介 作用:XML中定义的几何形状 位置:res/drawable/文件的名称.xml 使用的方法: Java代码中:R.drawable.文件的名称 XML中:android:background="@drawable/文件的名称&

  • Android中Shape的用法详解

    Android中Shape的用法详解

    ShapeDrawable是一种很常见的Drawable,可以理解为通过颜色来构造的图形,它既可以是纯色的图形,也可以是具有渐变效果的图形,ShapeDrawabled语法稍显复杂,如下所示: <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape=["rectangle" | "oval" | "line" | &q

  • Android shape 绘制图形的实例详解

    Android shape 绘制图形的实例详解

    Android shape 绘制图形 Android 绘制图形可以使用shape也可以使用自定义控件的方式,这里我们说下shape的方式去实现. 在绘制图形之前,我们先来了解下shape的几个属性. shape /* * 线行 圆形 矩形 / android:shape="line" android:shape="oval" android:shape="rectangle" size 图形的大小 <size android:height=

  • 详解android shape的使用总结

    详解android shape的使用总结

    shape用于设定形状,可以在selector,layout等里面使用,有6个子标签,各属性如下: <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" > <!-- 圆角 --> <corners android:radius="9dp&q

  • Android使用shape使组件呈现出特殊效果的方法

    Android使用shape使组件呈现出特殊效果的方法

    本文实例讲述了Android使用shape使组件呈现出特殊效果的方法.分享给大家供大家参考,具体如下: 使用到的布局文件 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent"

  • Android中drawable使用Shape资源

    本文实例为大家分享了drawable使用Shape资源的具体内容,供大家参考,具体内容如下 1.画一条水平方向的虚线 <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="line" > <stroke andro

  • Android中的Shape和Selector的结合使用实例

    Android中的Shape和Selector的结合使用实例

    一:在Android程序开发中,我们经常会去用到Shape这个东西去定义各种各样的形状,首先我们了解一下Shape下面有哪些标签,都代表什么意思: (1).solid:填充 android:color指定填充的颜色 (2).gradient:渐变 android:startColor和android:endColor分别为起始和结束颜色, android:angle是渐变角度,必须为45的整数倍. 另外渐变默认的模式为android:type="linear",即线性渐变, 可以指定渐

  • 详解Android用Shape制作单边框图的两种思路和坑

    开发中遇到单/多边框的UI,简单的可以自己写shape图,复杂的一般都让设计配合制作9patch图了. 今天不说需要切图的情况,只聊简单的单/多边框,主要是实现思路. 效果很简单: 就以上图为例介绍,只有上边框,边框红色.宽1dp,其余为白色. 思路一 两层画布叠加:底层红色:上层白色: 上层白色画布下移1dp. 代码实现: <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:andro

  • 详解node服务器中打开html文件的两种方法

    详解node服务器中打开html文件的两种方法

    本文介绍了详解node服务器中打开html文件的两种方法,分享给大家,具体如下: 方法1:利用 Express 托管静态文件,详情查看这里 方法2:使用fs模块提供的readFile方法打开文件,让其以text/html的形式输出. 代码: var express = require('express'); var fs=require("fs"); var app = express(); //方法1:通过express.static访问静态文件,这里访问的是ajax.html //

  • 详解Springboot整合ActiveMQ（Queue和Topic两种模式）

    写在前面: 从2018年底开始学习SpringBoot,也用SpringBoot写过一些项目.这里对学习Springboot的一些知识总结记录一下.如果你也在学习SpringBoot,可以关注我,一起学习,一起进步. ActiveMQ简介 1.ActiveMQ简介 Apache ActiveMQ是Apache软件基金会所研发的开放源代码消息中间件:由于ActiveMQ是一个纯Java程序,因此只需要操作系统支持Java虚拟机,ActiveMQ便可执行. 2.ActiveMQ下载 下载地址:htt

  • 详解android项目由Gradle 2.2 切换到 3.0的坑

    问题1.运行的时候一直报如下错误 Error:Execution failed for task ':app:transformDexArchiveWithExternalLibsDexMergerForApiTestDebug'.  > java.lang.RuntimeException: com.android.builder.dexing.DexArchiveMergerException: Unable to merge dex 查了很多资料,大概意识是引用重复的库或jar的问题. 然

  • 详解Android TextView属性ellipsize多行失效的解决思路

    本文介绍了Android TextView属性ellipsize多行失效的解决思路,分享给大家,具体如下: 多余文字显示省略号的常规做法 android:ellipsize="end" //省略号显示在末尾 android:ellipsize="middle" //省略号显示在中间 但是设置android:maxLines="2" 以后,ellipsize的值end有效,middle无效,本方法解决middle无效的问题 /** * 字符串显示到

  • 详解Android Service与Activity之间通信的几种方式

    在Android中,Activity主要负责前台页面的展示,Service主要负责需要长期运行的任务,所以在我们实际开发中,就会常常遇到Activity与Service之间的通信,我们一般在Activity中启动后台Service,通过Intent来启动,Intent中我们可以传递数据给Service,而当我们Service执行某些操作之后想要更新UI线程,我们应该怎么做呢?接下来我就介绍两种方式来实现Service与Activity之间的通信问题 通过Binder对象 当Activity通过调

  • 详解Python下载图片并保存本地的两种方式

    一:使用Python中的urllib类中的urlretrieve()函数,直接从网上下载资源到本地,具体代码: import os,stat import urllib.request img_url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1516371301&di=d99af0828bb301fea27c2149a7070" \ "d44&am

  • 详解在springboot中使用Mybatis Generator的两种方式

    介绍 Mybatis Generator(MBG)是Mybatis的一个代码生成工具.MBG解决了对数据库操作有最大影响的一些CRUD操作,很大程度上提升开发效率.如果需要联合查询仍然需要手写sql.相信很多人都听说过微服务,各个微服务之间是松耦合的.每个微服务仅关注于完成一件任务并很好地完成该任务.在一个微服务的开发过程中很可能只关注对单表的操作.所以MBG在开发过程中可以快速的生成代码提升开发效率. 本文将说到在springboot的项目中如何去配置(XML形式和Java配置类形式)和使用M

  • 详解python中字典的循环遍历的两种方式

    开发中经常会用到对于字典.列表等数据的循环遍历,但是python中对于字典的遍历对于很多初学者来讲非常陌生,今天就来讲一下python中字典的循环遍历的两种方式. 注意: python2和python3中,下面两种方法都是通用的. 1. 只对键的遍历 一个简单的for语句就能循环字典的所有键,就像处理序列一样: d = {'name1' : 'pythontab', 'name2' : '.', 'name3' : 'com'} for key in d: print (key, ' value

  • 详解将Eclipse代码导入到AndroidStudio的两种方式

    详解将Eclipse代码导入到AndroidStudio的两种方式

    说到使用AndroidStudio,除了新建的项目,我们都会面临的问题是原先Eclipse的代码该怎么导入到AndroidStudio中使用. 这方面相关的资料还比较少,自己摸索了一下,总结出这篇博客,希望能让开发者少走些弯路. OK,进入正题. Google为了让我们更加方便的使用AndroidStudio,提供了两种导入Eclipse代码的方式:一种兼容Eclipse,一种是全新的Android Gradle Project. 这里,我们先从兼容模式说起. 兼容模式 这种模式下,保证了Ecl

随机推荐