logo标签列表

Android：点击按钮时从屏幕底部显示布局

android
8
最近我从Play商店安装了一个名为Walnut的应用程序，在其中看到了一个新的弹出窗口功能。在主屏幕上有一个FloatingActionMenu，点击菜单按钮后，它将展开显示其中的选项，而在扩展菜单的顶部，有一个添加账户的选项，当点击该选项时，一个弹出窗口将从屏幕底部弹出到一定高度。我想知道这个从屏幕底部弹出的弹出窗口使用了什么功能。它真的是一个弹出窗口还是滑动抽屉？我想在我的Android应用程序中完全使用相同的功能。如果有人知道这个功能，请帮助我。下面是Walnut应用程序中点击按钮后弹出的弹出窗口布局的截图。Popup layout from the bootom of the screen
你能提供一下Walnut应用的截图吗？我几乎无法想象你试图实现什么。 - ribads
是的，我会附上翻译后的文本。请稍等。 - KJEjava48
@ribads，我已经附上了截图，请查看一下。 - KJEjava48
1
最好使用BottomSheet第三方库。 - Piyush
@KJEjava48 使用自定义设计的 snackBar。请查看答案。 - Amy
4个回答
12

你可以在其中使用自定义布局的对话框。你需要做的唯一事情就是从底部调用它，并像这样使用材料对话框表格样式

 final Dialog mBottomSheetDialog = new Dialog(getActivity(), R.style.MaterialDialogSheet);
                            mBottomSheetDialog.setContentView(view); // your custom view.
                            mBottomSheetDialog.setCancelable(true);
                            mBottomSheetDialog.getWindow().setLayout(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT);
                            mBottomSheetDialog.getWindow().setGravity(Gravity.BOTTOM);
                            mBottomSheetDialog.show();

我将我的布局高度从wrap content改为800，这是结果。

style.xml

<style name="MaterialDialogSheet" parent="@android:style/Theme.Dialog">
        <item name="android:windowIsTranslucent">true</item>
        <item name="android:windowBackground">@android:color/transparent</item>
        <item name="android:windowContentOverlay">@null</item>
        <item name="android:windowNoTitle">true</item>
        <item name="android:backgroundDimEnabled">true</item>
        <item name="android:windowIsFloating">false</item>
        <item name="android:windowAnimationStyle">@style/MaterialDialogSheetAnimation</item>
    </style>



<style name="MaterialDialogSheetAnimation">
        <item name="android:windowEnterAnimation">@anim/popup_show</item>
        <item name="android:windowExitAnimation">@anim/popup_hide</item>
    </style>

动画

popup_show.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:fromYDelta="100%p"
        android:toYDelta="0"
        android:duration="300"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"/>
</set>

popup_hide.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:fromYDelta="0"
        android:toYDelta="100%p"
        android:duration="300"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"/>
</set>

输入图像描述

可能是因为效果相似。等一下，我会发送我的弹出图片。 - KDeogharkar
哦，抱歉我的错误。这是我旧的项目，我忘记了 :) - KDeogharkar
我正在更新我的答案。 - KDeogharkar
放进drawable文件夹里临时保存。没问题。 - KDeogharkar
好的，忘记了在资源中创建anim文件夹并添加xml。 - KDeogharkar
显示剩余4条评论
3
@Raja Jawahar，有没有不使用第三方库的方法可以实现这个？ - KJEjava48
1
@KJEjava48.. Android提供了支持库中的此选项。http://code.tutsplus.com/articles/how-to-use-bottom-sheets-with-the-design-support-library--cms-26031 - Raja Jawahar
2
有没有不使用第三方库的方法可以实现这个？ - KJEjava48
当然可以。你只需要一种方法将自定义视图添加到你的活动中，然后根据显示该视图的事件管理其可见性（可能是动画效果）。此外，你还需要处理活动中的状态变化，例如BackPress、旋转和其他可能影响布局的变化。 - ribads
1
使用 Snackbar 来实现这个功能。
Snackbar snackbar = Snackbar
        .make(coordinatorLayout, "Welcome to AndroidHive", Snackbar.LENGTH_LONG);

snackbar.show();

XML设计：

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
    </android.support.design.widget.AppBarLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:paddingLeft="20dp"
        android:paddingRight="20dp"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <Button
            android:id="@+id/btnSimpleSnackbar"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="30dp"
            android:text="Simple Snackbar" />

        <Button
            android:id="@+id/btnActionCallback"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:text="With Action Callback" />

        <Button
            android:id="@+id/btnCustomSnackbar"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:text="Custom Color" />

    </LinearLayout>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_margin="16dp"
        android:src="@android:drawable/ic_dialog_email" />

</android.support.design.widget.CoordinatorLayout>

Build.gradle

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:23.0.1'
    compile 'com.android.support:design:23.0.1'
}

从这里得到了参考资料

我认为Snackbar用于显示带有操作的消息。据我所知，它只包含一个textView和一个操作。我认为我们无法使用XML布局自定义它。请查看我在问题中附加的屏幕截图中的布局。 - KJEjava48
我在添加截图之前发布了这个答案。 - Amy
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接