Android:点击按钮,从屏幕底部显示布局

时间:2016-03-23 09:27:39

标签: android

最近我已经从名为walnut的游戏商店安装了一个应用程序,我在其中看到了一个弹出的新功能。在主屏幕上有一个FloatingActionMenu,当点击菜单按钮时,它将展开其上的项目,在顶部在扩展菜单中有一个添加帐户的选项,点击该选项时,弹出窗口将从屏幕底部到达一定高度。我喜欢知道从屏幕底部使用该弹出窗口的功能。它真的是一个弹出窗口或滑动抽屉吗?我想在我的android应用程序中使用完全相同的功能。如果有人知道这个功能请帮帮我。下面是这个弹出式布局的截图,点击核桃应用程序中的按钮。 Popup layout from the bootom of the screen

4 个答案:

答案 0 :(得分:10)

您可以在其中使用包含自定义布局的对话框。你唯一需要做的就是从底部调用它并使用样式作为这样的材料对话框

 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();

我将布局高度更改为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>

enter image description here

答案 1 :(得分:5)

你可以使用BottomSheetLayout ..

https://github.com/Flipboard/bottomsheet

答案 2 :(得分:2)

你有什么自定义视图;所以尝试使用SnackBar会太麻烦。但是,您可以使用BottomSheet(https://github.com/Flipboard/bottomsheet)更轻松地实现此目的。

答案 3 :(得分: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'
}

获得Here

的参考资料