Button一个有趣的阴影问题

作者: sydMobile | 来源:发表于2018-03-21 17:21 被阅读1625次

发现这个问题还是在工作中,我们的UI设计师发现我们的APP上,在登录页面的登录按钮,下面有阴影效果,但是注册页面却没有阴影效果。

图片 图片

效果就像是上面的那样,可能在图片上不是很明显,我们可以发现在登录按钮下,有一个小阴影,而注册按钮是没有的。最初还以为是Button的背景有区别呢,查看后发现,背景用的都是一样的,都是一个shape文件。那就只能在布局中查看有什么不同了,查看布局得到,在登录页面Button的父布局LinearLayout的高度是match_parent,而在注册页面Button父布局的高度是wrap_content,这是他们的唯一不同之处。果然如果把wrap_content修改成match_parent的话,注册的button下面也会有阴影了。

你以为这就完事了吗?哈哈,并没有!
我又通过代码进行了实验,实验了什么内容呢?直接上图!

button

看看上面的图片中的button有什么不同吗?仔细观察的话,会发现从1号到9号button下面的阴影会逐渐加强,最上面的1号看上去就直接没有阴影。而它们的代码都是相同的,唯一不同的就是在付父布局中的位置。由此可以发现当button在屏幕的下方的时候,并且父布局不是wrap_content的话,会出现阴影效果(如果父布局大小写死,并且比button要的时候也会出现阴影),而在屏幕上方的button就没有这个问题。

TextView

这是使用的 TextView 就没有阴影效果。

好了,今天就分享这么一个小问题,以后大家遇到这种情况就知道是怎么回事了。

文章最早发布于我的微信公众号 Android开发者家园 中,欢迎大家扫描下面二维码关注微信公众获取更多知识内容。
本文为sydMobile原创文章,可以随意转载,但请务必注明出处!

欢迎大家关注我的微信公众号,和我交流分享

相关文章

网友评论

  • Sacowiw:确切的说是 Android 5.0 新加入的高度属性和 StateListAnimator 使 Button 有了阴影,看文档https://developer.android.google.cn/guide/topics/graphics/prop-animation.html#ViewState。Button 默认的 stateListAnimator 会让其在 z 轴上有变化,结合 Material Design 文档 https://material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-shadows 就更容易理解 Button 的阴影产生的原因了。去掉 Button 的阴影很简单,在 xml 中加入 android:stateListAnimator="@null" 或者全局主题中将 ButtonStyle 的 stateListAnimator 值设为 @NULL
  • 还没睡醒的榴莲:弄了半天原来安卓开发,
    布谷鸟也会编程:哈哈哈哈 ....:joy:
  • mrzhqiang:父控件 padding 8 的话,才有最好的阴影效果噢。因为在按下状态,阴影会有一定的变化。
  • 前山饭店:有意思的发现😎
  • adustdu2015:对,这是5.0的material design效果。
    侯大虎虎:@adustdu2015 对的,跟高度有个卵子关系,是5.0的效果
  • 许渺:阴影是5.0后material design的效果吧,加style就可以解决
    sollian:对,加style="?android:attr/borderlessButtonStyle"就去掉阴影了,刚查的
    sydMobile:有没有发现,button的所有设置都是一样的,出现的位置不同,button的阴影效果是不同的,屏幕最上面的button几乎看不到阴影。
  • sollian:没有找一下原因吗
    sollian:@sydMobile 不了解android的阴影实现方式,我试了一下,跟父控件的高度设置没有关系,从现象来看(可以看一下按钮按下去后的阴影状态),猜测灯光位置在屏幕顶部,然后越靠下的控件,影子拉的越长。
    sydMobile:button默认上下侧是有间隙的,和这个有关系吧。进一步研究中,你了解具体原因吗?

本文标题:Button一个有趣的阴影问题

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