Android L FAB 按钮阴影
Posted
技术标签:
【中文标题】Android L FAB 按钮阴影【英文标题】:Android L FAB Button shadow 【发布时间】:2014-08-20 06:02:55 【问题描述】:在材料设计指南中,Google 提出了a new style of button,FAB 按钮。我找到了如何制作它的说明,但我无法添加阴影。如何实现?
【问题讨论】:
设置按钮的高度,使用setElevation(float)
。
是的,我已经做到了,但是我的按钮是一个圆形,而这里的阴影是一个正方形。谢谢你的回答
android.graphics.Outline 和 View.setOutline(Outline) 应该根据 L 文档为您解决问题。
我看到了,但我没有成功使用它……你能给我一个例子吗?
有格式良好的库com.shamanland:fab:0.0.3
,它自动支持阴影,查看这个帖子:***.com/a/25098626/1891118
【参考方案1】:
查看“activity.java”,可能有你需要的代码。
我制作了这样的 Fab - Button:
layout.xml
<Button
style="?android:attr/buttonStyleSmall"
android:layout_
android:layout_
android:text="+"
android:textSize="40sp"
android:background="@drawable/ripple"
android:id="@+id/fabbutton"
android:layout_margin="@dimen/activity_horizontal_margin"
android:elevation="3dp"
android:paddingBottom="16dp"
android:fontFamily="sans-serif-light"
android:layout_alignParentEnd="true"
android:layout_gravity="right|bottom" />
ripple.xml
<?xml version="1.0" encoding="utf-8"?>
<ripple android:color="#ffb300" xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/fab"></item>
</ripple>
fab.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="@color/accentColor" />
</shape>
Activity.java
import android.graphics.Outline;
...
Button fab = (Button) rootView.findViewById(R.id.fabbutton);
Outline mOutlineCircle;
int shapeSize = getResources().getDimensionPixelSize(R.dimen.shape_size);
mOutlineCircle = new Outline();
mOutlineCircle.setRoundRect(0, 0, shapeSize, shapeSize, shapeSize / 2);
fab.setOutline(mOutlineCircle);
fab.setClipToOutline(true);
此代码在android studio v0.8.1 中将显示为错误,其他android l 组件也是如此。下个版本会修复。
结果:
【讨论】:
这是我搜索的!! OutlineHelper 是什么? 非常感谢,只需将 112 放入 R.dimen.shape_sizeandroid:elevation
?
@VishalVijay 这用于按钮获得小阴影。如果设置得更高,阴影会更宽。
@theyanu android:elevation
仅在 android L 中可用?【参考方案2】:
您可以使用按钮:
<ImageButton
android:id="@+id/fab"
android:background="@drawable/ripple"
android:stateListAnimator="@anim/anim"
android:src="@drawable/ic_action_add"
android:elevation="4dp"
/>
ic_action_add
是您的图标。
drawable/ripple.xml 是:
<ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="?android:colorControlHighlight">
<item>
<shape android:shape="oval">
<solid android:color="?android:colorAccent" />
</shape>
</item>
</ripple>
anim/anim.xml 是:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_enabled="true"
android:state_pressed="true">
<objectAnimator
android:duration="@android:integer/config_shortAnimTime"
android:propertyName="translationZ"
android:valueFrom="@dimen/button_elevation"
android:valueTo="@dimen/button_press_elevation"
android:valueType="floatType" />
</item>
<item>
<objectAnimator
android:duration="@android:integer/config_shortAnimTime"
android:propertyName="translationZ"
android:valueFrom="@dimen/button_press_elevation"
android:valueTo="@dimen/button_elevation"
android:valueType="floatType" />
</item>
</selector>
Dimens.xml 是
<resources>
<dimen name="fab_size">56dp</dimen>
<dimen name="button_elevation">2dp</dimen>
<dimen name="button_press_elevation">4dp</dimen>
</resources>
使用 elevation 属性,您应该通过代码设置 Outline:
public class MainActivity extends Activity
@Override
protected void onCreate(Bundle savedInstanceState)
super.onCreate(savedInstanceState);
setContentView(R.layout.layoutfab);
//Outline
Button fab = (Button) findViewById(R.id.fab)
ViewOutlineProvider viewOutlineProvider = new ViewOutlineProvider()
@Override
public void getOutline(View view, Outline outline)
// Or read size directly from the view's width/height
int size = getResources().getDimensionPixelSize(R.dimen.fab_size);
outline.setOval(0, 0, size, size);
;
fab.setOutlineProvider(viewOutlineProvider);
【讨论】:
你知道有没有标准的android plus图标可以使用吗?我试图在 android drawables 中找到 'ic_action_add' 但什么也没找到。 @Gabriele Mariotti 很好的答案!正如您在***.com/a/26497783/937715 中提到的那样,只需 ping 即可让您知道此处的 .setOutline() 应替换为 .setOutlineProvider()。 @TheHungryAndroider 你找到了吗? @GabrieleMariotti 您忘记在 Activity 中将按钮更改为 ImageButton【参考方案3】:使用Outline
可以轻松解决圆形阴影的问题,无需任何技巧:只需将这些属性添加到XML布局中的按钮(除了自定义背景):
android:elevation="5dp"
android:stateListAnimator="@null"
虽然 Android Studio 可能在布局预览中显示错误,但在设备上启动时可以正常工作。
【讨论】:
以上是关于Android L FAB 按钮阴影的主要内容,如果未能解决你的问题,请参考以下文章