layer-list实现只有左、右和下边框的圆角矩形

项目中需要实现如下效果的布局

也就是一个左右下角带圆角,上方不带圆角的白色背景矩形,而且只有左、右和下边框,颜色为浅灰色。

当然,切一个.9图片作为背景也能实现,但是能用代码实现的还是尽量用代码实现,因为图片过多一个消耗内存,另一个还增加apk大小。

这种效果可以通过layer-lsit来实现,在drawable文件夹下面建一个xml文件,具体代码如下:

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
 3     <!--
 4         layer-list中的item是按照顺序从下往上叠加的,即先定义的item在下面,后面的依次往上面叠放
 5     -->
 6     <!-- 这里定义一个下面带圆角,上面不带圆角的矩形,边框颜色为@color/line_color -->
 7     <item>
 8          <shape>
 9                <corners android:bottomLeftRadius="5dp"
10                    android:bottomRightRadius="5dp" />
11                <stroke android:width="1px" android:color="@color/line_color" />
12          </shape>
13     </item>
14     <!--
15         这里定义一个下面带圆角,上面不带圆角的矩形,背景为白色
16         这里设置了android:right="1px" android:left="1px" android:bottom="1px"属性
17         android:right="1px"表示该item右边往里面缩了1px
18         android:left="1px"表示该item左边往里面缩了1px
19         android:bottom="1px"表示该item下面往里面缩了1px
20         这样,左、右、下都比原来缩小了1px,这缩小出来的郑刚是上面一个item的边框的左、右、下边框
21         而top没有缩小,所以覆盖了上面一个item的边框的上边框。
22         所以这个item叠加上面一个item之后的效果就是一个只含左、右、下灰色边框,下面带圆角,上面不带圆角的白色背景矩形
23      -->
24     <item android:right="1px" android:left="1px" android:bottom="1px">
25          <shape>
26                <corners android:bottomLeftRadius="5dp"
27                    android:bottomRightRadius="5dp" />
28                <solid android:color="@color/white" />
29          </shape>
30     </item>
31 </layer-list>

layer-lsit的用法注释中也讲的比较详细。

然后在View中设置背景为改drawable即可。

时间: 2024-10-19 01:42:41

layer-list实现只有左、右和下边框的圆角矩形的相关文章

17、如何对字符串进行左, 右, 居中对齐 18、如何去掉字符串中不需要的字符 19、如何读写文本文件 20、如何处理二进制文件 21、如何设置文件的缓冲

17.如何对字符串进行左, 右, 居中对齐 info = "GBK" print(info.ljust(20)) print(info.ljust(20,'#')) print(info.rjust(20,'#')) print(info.center(20,"#")) print(format(info,'<20')) print(format(info,'>20')) print(format(info,'^20')) result: GBK GBK

仅显示INPUT下边框

最近在倒腾前端的页面,在某次的需求中我想要这样的一个效果——仅显示INPUT输入框的下边框,和我想象的编写方式不一致,每个标签都有其对应的默认样式,不同的浏览器也有其不同的渲染方式,当然这些知识现在我还没有完全掌握,所以,下面简单记录一下我采用的一种简单实现方式以备后用. 1:渐进式实现的代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>仅显示INPU

设置View只显示透明下边框、透明背景框、阴影背景框的方法

实现的效果如下: 下面的代码是实现一个带边框的xml,很常见 <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"> <solid android:color="@android:color/transparent" /> <str

【iOS开发-57】案例改进:block动画、控件的removeFromSuperview、利用layer设置圆角矩形以及代理模式运用

接上述案例,案例改进:[iOS开发-50]利用创建新的类实现代码封装,从而不知不觉实践一个简单的MVC实验,附带个动画 在上述案例中,我们最后实现了一个动画,点击"下载"按钮变成"已下载"不可点击,然后中间出现提示框. (1)其中有一个小BUG,就是这个提示的透明度变成0之后,这个提示框并没有显示还留在内存中.需要: [tipsLabel removeFromSuperview]; (2)其次,我们可以用另一个代码实现动画,就是用block,这一次是2个block嵌

IOS第18天(1,核心动画layer, 旋转,缩放,平移,边框,剪裁,圆角)

****动画效果 - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event { [UIView animateWithDuration:1 animations:^{ // 旋转 // _imageView.layer.transform = CATransform3DMakeRotation(M_PI, 1, 1, 0); // 平移 // _imageView.layer.transform = CATransform3

使用position:relative制作下边框下的小三角

在制作tab选项卡的时候,有时会有下边框,且下边框下另一个头向下的小三角,这全然能够用css来实现,而不必使用背景图片. 由于使用背景图片时会有一个问题,选项卡内容字数不同.导致使用背景图片时无法控制它始终在中间显示. <ul class="technical_list"> <li class="active-tab">入门指南<div class="triangle"></div></li&

android 实现一个布局或者view 有上边框 下边框或者 做边框 有边框 或者单一边框的实现

代码中都有详细的解释,这里就不多说了,在使用的时候直接设置为background就行了 <?xml version="1.0" encoding="utf-8"?> <!-- 目的:给一个布局上下有边框,左右没有边框 --> <layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <!-- 先定义一个填充内容区域的颜

js实现Mac触摸板双指事件(上/下/左/右/放大/缩小)

前言 这几天在修复一个web问题时,需要捕获Mac触摸板双指事件(上.下.左.右.放大.缩小),但发现并没有现成的轮子,还是要自己造. 例如:jquery.mousewheel.js(添加跨浏览器的鼠标滚轮支持), 给得太简单,没有处理Mac双指行为,所以不能用. 目标 获取Mac触摸板双指行为,具体有两个,一个是实时拖动路线,二是手势(上.下.左.右.放大.缩小). 难点 双指行为只会触发mousewheel事件,其他什么的touch,mouse都不会触发,只能从这个下手. 双指特性 1.在快

mysql 左,右,内连接

左右连接 全相乘方法(效率很低) mysql> select * from test10; +------+-------+ | id   | sname | +------+-------+ |    1 | 云彩     | |    2 | 月亮      | |    3 | 星星      | +------+-------+ 3 rows in set (0.00 sec) mysql> select * from test11; +--------+-------+ | cat_