一个不一样的凸起按钮(raised button)

noobcoder / 文 发表于2016-10-31 20:03 第次阅读 按钮

原文:A different raised button behavior 

自动引入Material Design之后,安卓有了三种按钮:

  • 浮动操作按钮

  • 凸起按钮(Raised buttons)

  • 扁平按钮

根据说明文档,凸起按钮的定义是:

A typically rectangular material button that lifts and displays ink reactions on press.

但是为什么要抬起呢?难道你的手指是磁铁吗?当你按下一个真实的按钮,压力会使按钮下陷才对。

默认的实现

安卓使用这个StateListAnimator来抬起凸起按钮。

从那个文件我们可以看到:

当按下按钮,发生z轴位移(4dp),将按钮从2dp提高到6dp。

当按钮没有被按下时,elevation为2dp。

当按钮禁用时,elevation变为0dp。

我所做的就是创建一个类似的,但是和它使用正的z-translation和2dp elevation不同,我把两者都设为0.

让按钮下陷

这里是一个能让按钮下陷的StateListAnimator:链接

现在你可以使用android:stateListAnimator属性把它设置到按钮上,但是这个方法不能让你使用另外的elevation,因为其值是硬编码的。

鉴于这个原因,我创建了一个自定义的StateListAnimator,可以在代码中使用传递给view的elevation。

你可以在这里获得它:RaiflatButton。(名字很丑,但想不出更好的了)。

现在你只需把普通的按钮替换成:

<com.github.rubensousa.raiflatbutton.RaiflatButton
    android:id="@+id/normalButton"
    style="@style/Base.Widget.AppCompat.Button.Colored"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Colored" />
    
<com.github.rubensousa.raiflatbutton.RaiflatImageButton
    android:id="@+id/imageButton"
    style="@style/Base.Widget.AppCompat.Button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_android" />

这里是一个简短的预览效果:

Untitled.gif

怎么样,看起来是不是自然多了?

收藏 赞 (6) 踩 (0)