带支持库的 FloatingActionButton 示例 [英] FloatingActionButton example with Support Library
问题描述
最近，我阅读了这些帖子:
Recently, I read these posts:
但是，他们都没有给出关于创建新 FloatingActionButton 的详细示例.太难理解了，所以才问这个问题.
But, none of them give me a detail example about creating a new FloatingActionButton. It's so hard to understand, which is why I am asking this question.
谁能给我举个例子?
我刚刚在 FloatingActionButton (FAB) 上发现了一些问题，我想改进另一个答案.见下面我的回答.
I just found some issues on FloatingActionButton (FAB), and I want to improve another answer. See my answer below.
推荐答案
所以在你的 build.gradle 文件中，添加:
So in your build.gradle file, add this:
compile 'com.android.support:design:27.1.1'
AndroidX 注意:Google 正在推出新的 AndroidX 扩展库 替换旧的支持库.要使用 AndroidX，首先确保 您已经更新了 gradle.properties 文件，编辑 build.gradle 以将 compileSdkVersion 设置为 28(或更高)，并使用以下内容一行而不是之前的 compile 一行.
AndroidX Note: Google is introducing new AndroidX extension libraries to replace the older Support Libraries. To use AndroidX, first make sure you've updated your gradle.properties file, edited build.gradle to set compileSdkVersion to 28 (or higher), and use the following line instead of the previous compile one.
implementation 'com.google.android.material:material:1.0.0'
接下来，在您的 themes.xml 或 styles.xml 或其他任何内容中，确保您设置了它 - 这是您的应用的强调色 - 以及您的 FAB 的颜色除非你覆盖它(见下文):
Next, in your themes.xml or styles.xml or whatever, make sure you set this- it's your app's accent color-- and the color of your FAB unless you override it (see below):
<item name="colorAccent">@color/floating_action_button_color</item>
在布局的 XML 中:
In the layout's XML:
<RelativeLayout
...
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.design.widget.FloatingActionButton
android:id="@+id/myFAB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_plus_sign"
app:elevation="4dp"
... />
</RelativeLayout>
或者，如果您使用的是上面的 AndroidX 材质库，您可以使用这个:
Or if you are using the AndroidX material library above, you'd instead use this:
<RelativeLayout
...
xmlns:app="http://schemas.android.com/apk/res-auto">
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/myFAB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:srcCompat="@drawable/ic_plus_sign"
app:elevation="4dp"
... />
</RelativeLayout>
您可以在文档中看到更多选项(此处提供材料文档) (setRippleColor 等)，但需要注意的一点是:
You can see more options in the docs (material docs here) (setRippleColor, etc.), but one of note is:
app:fabSize="mini"
另一个有趣的 - 要更改一个 FAB 的背景颜色，添加:
Another interesting one-- to change the background color of just one FAB, add:
app:backgroundTint="#FF0000"
(例如将其更改为红色)到上面的 XML.
(for example to change it to red) to the XML above.
无论如何，在代码中，在 Activity/Fragment 的视图膨胀之后......
Anyway, in code, after the Activity/Fragment's view is inflated....
FloatingActionButton myFab = (FloatingActionButton) myView.findViewById(R.id.myFAB);
myFab.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
doMyThing();
}
});
观察:
- 如果您有一个位于接缝"上的按钮，可将两个视图分开(例如，使用RelativeLayout)具有负底布局边距与边框重叠，您会注意到一个问题:FAB 的大小实际上非常不同在棒棒糖和棒棒糖上.棒棒糖前.您实际上可以在 AS 的可视化布局编辑器中看到这一点当你在 API 之间切换时——当你切换到棒棒糖前.额外尺寸的原因似乎是shadow 在各个方向扩展视图的大小.所以你必须当您调整 FAB 的边距时，如果它接近其他边距，请考虑到这一点东西.
这是一种删除或如果填充太多，请更改填充:
- If you have one of those buttons that's on a "seam" splitting two views (using a RelativeLayout, for example) with, say, a negative bottom layout margin to overlap the border, you'll notice an issue: the FAB's size is actually very different on lollipop vs. pre-lollipop. You can actually see this in AS's visual layout editor when you flip between APIs-- it suddenly "puffs out" when you switch to pre-lollipop. The reason for the extra size seems to be that the shadow expands the size of the view in every direction. So you have to account for this when you're adjusting the FAB's margins if it's close to other stuff.
Here's a way to remove or change the padding if there's too much:
if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {
RelativeLayout.LayoutParams p = (RelativeLayout.LayoutParams) myFab.getLayoutParams();
p.setMargins(0, 0, 0, 0); // get rid of margins since shadow area is now the margin
myFab.setLayoutParams(p);
}
另外，我打算以编程方式将 FAB 放在接缝"上通过抓取 FAB 的高度，在相对布局中的两个区域之间，除以二，并将其用作边距偏移量.但myFab.getHeight() 返回零，即使在视图膨胀后，它似乎.相反，我使用 ViewTreeObserver 仅获取高度在它布置好之后，然后设置位置.看到这个提示此处.它看起来像这样:
ViewTreeObserver viewTreeObserver = closeButton.getViewTreeObserver();
if (viewTreeObserver.isAlive()) {
viewTreeObserver.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
@Override
public void onGlobalLayout() {
if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN) {
closeButton.getViewTreeObserver().removeGlobalOnLayoutListener(this);
} else {
closeButton.getViewTreeObserver().removeOnGlobalLayoutListener(this);
}
// not sure the above is equivalent, but that's beside the point for this example...
RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) closeButton.getLayoutParams();
params.setMargins(0, 0, 16, -closeButton.getHeight() / 2); // (int left, int top, int right, int bottom)
closeButton.setLayoutParams(params);
}
});
}
不确定这是否是正确的方法，但它似乎有效.
Not sure if this is the right way to do it, but it seems to work.
如果你想在接缝"上使用 FAB，你可以使用 layout_anchor 和 layout_anchorGravity 这里是一个例子:
If you want the FAB on a "seam" you can use layout_anchor and layout_anchorGravity here is an example:
<android.support.design.widget.FloatingActionButton
android:layout_height="wrap_content"
android:layout_width="wrap_content"
app:layout_anchor="@id/appbar"
app:layout_anchorGravity="bottom|right|end"
android:src="@drawable/ic_discuss"
android:layout_margin="@dimen/fab_margin"
android:clickable="true"/>
Remember that you can automatically have the button jump out of the way when a Snackbar comes up by wrapping it in a CoordinatorLayout.
更多:
- Google's Design Support Library Page
- the FloatingActionButton docs
- "Material Now" talk from Google I/O 2015 - Support Design Library introduced at 17m22s
- Design Support Library sample/showcase
这篇关于带支持库的 FloatingActionButton 示例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
