FloatingActionButton拓展到一个新的活动 [英] FloatingActionButton expand into a new activity

问题描述

在Android材料设计原则页面，其中一个例子显示了FAB拓展到一个新的全屏幕。 （在全屏）

On the android material design principles page, one of the examples shows a FAB expanding into a new full screen. (Under "Full Screen")

<一个href=\"http://www.google.com/design/spec/components/buttons-floating-action-button.html#buttons-floating-action-button-transitions\">http://www.google.com/design/spec/components/buttons-floating-action-button.html#buttons-floating-action-button-transitions

我试图实现我的应用程序相同的效果，但收效甚微。结果
我设法创建一个扩展到使用这种code作为参考景色的FAB：<一href=\"https://gist.github.com/chris95x8/882b5c5d0aa2096236ba\">https://gist.github.com/chris95x8/882b5c5d0aa2096236ba.

I've tried to implement the same effect in my app, but with little success.
I managed to create a FAB that expands into a view using this code as reference: https://gist.github.com/chris95x8/882b5c5d0aa2096236ba.

它的工作，但我不知道我是否可以申请具有同等效力的活动转变。我试着找它，并与它打自己，但找不到任何可能的工作。

It worked, but I was wondering whether I could apply the same effect to an activity transition. I've tried looking it up and playing with it myself but could not find anything that might work.

我知道我可以让FAB扩展成片段，而不是一个全新的活动，但我不知道这是做什么工作，是否这是最佳的或没有。

I know I could make the FAB expand into a Fragment and not a whole new activity, but I'm not sure if that's what being done, and whether that's optimal or not.

所以我的问题是，是否有实施办法晶圆厂扩大显示作为活动的过渡效果，或者它应该只是显示一个新的片段？

And so my question is, is there a way to implement the fab-expanding reveal effect as an activity transition, or is it supposed to just reveal a new fragment?

推荐答案

我在开发的扩展应用程序一个 FloatingActionButton 进入一个新的活动。我不知道，如果你喜欢我的实现，但请参见图片在第一次：

I am developing an app which expands a FloatingActionButton into a new Activity. I'm not sure that if you like my implementation, but please see pictures at first:

所以，第一个画面显示 MainActivity 和最后一个节目 SecondActivity ，这是从FAB扩大。

So the first picture shows MainActivity and last one shows SecondActivity, which is "expanded" from FAB.

现在，我要提一提，我不是真正的扩展的一个FAB到一个新的活动，但我可以让用户觉得新页是从FAB 扩大，我认为这足以让开发者和用户。

Now, I want to mention that I'm not actually expanding a FAB into a new Activity but I can let user feel that the new page is expanded from that FAB, and I think that's enough for both developers and users.

下面的实现：

preparation：

1. A FloatingActionButton 当然，


2. 访问 https://github.com/kyze8439690/RevealLayout 并导入该库项目。它是用来玩揭示动画。它有一个自定义的 BakedBezierInterpolator 来控制显示的动画，并使其材料风格。

1. A FloatingActionButton of course,
2. Visit https://github.com/kyze8439690/RevealLayout and import this library to your project. It is used to play reveal animation. It has a custom BakedBezierInterpolator to control reveal animation and make it material-styled.

步骤：

1. 创建activity_main.xml中是这样的：

1. create activity_main.xml like this:

<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!--Your main content here-->

    <RevealLayout
        android:id="reveal_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="invisible">

        <View
            android:id="reveal_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:visibility="invisible"/>

    </RevealLayout>

</FrameLayout>

找到浏览：

find Views:

mRevealLayout = (RevealLayout) findViewById(R.id.reveal_layout);
mRevealView = findViewById(R.id.reveal_view);

当用户点击FAB扩展：

expand when user clicks FAB:

mFab.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        mFab.setClickable(false); // Avoid naughty guys clicking FAB again and again...
        int[] location = new int[2];
        mFab.getLocationOnScreen(location);
        location[0] += mFab.getWidth() / 2;
        location[1] += mFab.getHeight() / 2;

        final Intent intent = new Intent(MainActivity.this, SecondActivity.class);

        mRevealView.setVisibility(View.VISIBLE);
        mRevealLayout.setVisibility(View.VISIBLE);

        mRevealLayout.show(location[0], location[1]); // Expand from center of FAB. Actually, it just plays reveal animation.
        mFab.postDelayed(new Runnable() {
            @Override
            public void run() {
                startActivity(intent);
                /**
                 * Without using R.anim.hold, the screen will flash because of transition
                 * of Activities.
                 */
                overridePendingTransition(0, R.anim.hold);
            }
        }, 600); // 600 is default duration of reveal animation in RevealLayout
        mFab.postDelayed(new Runnable() {
            @Override
            public void run() {
                mFab.setClickable(true);
                mRevealLayout.setVisibility(View.INVISIBLE);
                mViewToReveal.setVisibility(View.INVISIBLE);
            }
        }, 960); // Or some numbers larger than 600.
    }
});

这是在res hold.xml /阿尼姆：

And here is hold.xml in res/anim:

<set
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false">

    <translate
        android:duration="960" <!-- Enough-large time is OK -->
        android:fromXDelta="0%"
        android:fromYDelta="0%"
        android:toXDelta="0%"
        android:toYDelta="0%"/>

</set>

这就是全部。

改进：

1. RevealLayout 有根据API 17装置（Android 4.2）中的错误（扮演长方形而不是圆形显示动画），你可以在构造函数中添加这些行它：

1. RevealLayout has a bug(plays rectangular instead of circular reveal animation) for devices under API 17(Android 4.2), you can add these lines in constructor of it:

if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN_MR2) {
    setLayerType(View.LAYER_TYPE_SOFTWARE, null);
}

如果你的 SecondActivity 包含内容复杂，一个简单的查看用作layout.xml ISN reveal_view 'T足够/完美。您可以包括在 RevealLayout reveal_layout第二个布局。这似乎浪费和硬如果第二个布局将不会出现在每一次相同的控制。但对我来说，它会的。所以，你可以，如果你应该做其他方面的改进。

If your SecondActivity contains complicated contents, a simple View used as reveal_view in layout.xml isn't enough/perfect. You can include second layout inside the RevealLayout reveal_layout. It seems wasteful and hard to control if the second layout won't appear same at every time. But for me, it will. So you can make other improvements if you should.

如果你想实现材料设计指南中显示完全相同的动画，您可以设置 RevealLayout 的layout_height到具体数目，而不是match_parent。扩大动画结束（或动画播放，这应该让动画顺利的全过程后的一段时间）之后，那么你可以动画translationY。重要的一点是，仅仅通过控制动画时间欺骗用户在视觉上。

If you want to implement totally same animation shown in Material Design Guide, you can set layout_height of the RevealLayout into specific number instead of match_parent. After expanding animation ends(or some time after the animation plays, which should make whole process of animation smoothly), then you can animate translationY. The important point is, just cheat users visually by controlling animation duration.

最后，这是我自己的经验/企图，我在开发Android应用的初学者。 如果有任何错误/进一步的改进，请留下评论/编辑我的答案。谢谢你。

Finally, this is my own experience/attempt and I'm a beginner in developing Android apps. If there are any mistakes/further improvements, please leave comments/edit my answer. Thank you.

这篇关于FloatingActionButton拓展到一个新的活动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！