如何在android中从屏幕的底部到中间滑动对话框

时间:2012-02-16 04:30:33

标签: android

我想在动画上显示我的活动对话框。我的对话框将从活动底部滑动到活动中间。

/ **** ****编辑/

我很抱歉我的问题不清楚。我的意思是我的对话框将从底部滑动到中间,但对话框的底部放在活动的底部,如下图enter image description here

8 个答案:

答案 0 :(得分:158)

为此你需要2个动画并把它放在res / anim文件夹中

  1. slide_up_dialog.xml
  2. <?xml version="1.0" encoding="utf-8"?>
    <translate xmlns:android="http://schemas.android.com/apk/res/android"
        android:fromYDelta="50%p" android:toYDelta="0%p"
        android:duration="@android:integer/config_longAnimTime"/>
    

    2.slide_out_down.xml

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

    现在你必须在style.xml中创建一个自定义样式

    <style name="DialogAnimation">
            <item name="android:windowEnterAnimation">@anim/slide_up_dialog</item>
            <item name="android:windowExitAnimation">@anim/slide_out_down</item>
    </style>
    

    接下来是在同一个style.xml中扩展android Theme.Dialog主题,并提供我们创建的自定义样式的引用。

    <!-- Animation for dialog box -->
        <style name="DialogSlideAnim" parent="@android:style/Theme.Dialog">
            <item name="android:windowAnimationStyle">@style/DialogAnimation</item>
        </style>
    

    最后在创建这样的对话框时调用此样式。

    dialog = new Dialog(new ContextThemeWrapper(this, R.style.DialogSlideAnim));
    

    yeap ....现在Dialog已准备好滑动..... !!

    <强>更新

    正如@MichealP建议的那样,这会将窗口置于底部

    getWindow().setGravity(Gravity.BOTTOM); 
    

    并修改样式以删除tittle和背景

    <item name="android:windowBackground">@null</item> 
    <item name="android:windowFrame">@null</item> 
    <item name="android:windowNoTitle">true</item>
    

    正如@ sikni8所说,这将使黑色边框透明

    getWindow().setBackgroundDrawableResource(android.R.color.transparent);
    

答案 1 :(得分:8)

我在这里尝试了所有的答案,但它不适合我。我知道所有答案都是很久以前写的。那么让我展示一下如何让它发挥作用。  I followed this article.

简而言之: 创建res / anim / slide_up.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate 
      android:duration="@android:integer/config_mediumAnimTime" 
      android:fromYDelta="100%" 
      android:interpolator="@android:anim/accelerate_interpolator" 
      android:toYDelta="0">
    </translate>
</set>

然后,创建res / anim / slide_bottom.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate 
        android:duration="@android:integer/config_mediumAnimTime" 
        android:fromYDelta="0%p" 
        android:interpolator="@android:anim/accelerate_interpolator" 
        android:toYDelta="100%p">
    </translate>
</set>

然后在res / values / styles.xml中添加样式

<style name="DialogAnimation">
    <item name="android:windowEnterAnimation">@anim/slide_up_dialog</item>
    <item name="android:windowExitAnimation">@anim/slide_out_down</item>
</style>

现在,您可以将此动画样式设置为对话框或警告对话框,如下所示。

Dialog dialog = new Dialog(this);
dialog.getWindow().getAttributes().windowAnimations = animationSource;

或者,

Dialog dialog = new Dialog(this);
WindowManager.LayoutParams lp = new WindowManager.LayoutParams();
lp.copyFrom(dialog.getWindow().getAttributes());
lp.width = WindowManager.LayoutParams.MATCH_PARENT;
lp.height = WindowManager.LayoutParams.WRAP_CONTENT;
lp.gravity = Gravity.BOTTOM;
lp.windowAnimations = R.style.DialogAnimation;
dialog.getWindow().setAttributes(lp);

我只为对话框显示了示例,但正如我之前所说,您也可以将此方法用于警告对话框。

答案 2 :(得分:4)

您可以使用底部表格。我对此提出了一些信息。

借助Android支持库23.2,Google宣布支持Bottom Sheets。根据Material Design,Bottom Sheets是仅在用户启动的操作后显示的元素,用于显示更多内容。

底层有两种主要类型:

模态底页 是菜单或简单对话框的替代方案。他们还可以呈现来自其他应用的深层链接内容。它们主要用于移动。

持久性底页 显示应用内内容

有一个简单的例子

在Android上制作BottomSheet非常简单,您只需使用 CoordinatorLayout 作为布局的主要元素,并将BottomSheet行为附加到视图中。

1步 - activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff">

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/AppTheme.PopupOverlay" />

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

<Button
    android:id="@+id/btnButtonSheet"
    android:text="Camera"
    android:textColor="#1e1e1e"
    android:layout_marginLeft="16dp"
    android:layout_marginRight="16dp"
    android:layout_marginBottom="8dp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

<!-- Adding bottom sheet after main content -->
<include layout="@layout/bottom_sheet" />

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

2步 - 添加bottom_sheet.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/bottom_sheet"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#fff"
android:orientation="vertical"
app:behavior_hideable="true"
app:behavior_peekHeight="0dp"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_gravity="center_vertical">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Select your options!"
        android:gravity="center"
        android:textColor="#1e1e1e"
        android:textSize="16dp"
        android:layout_margin="8dp"
        android:textStyle="bold" />

</LinearLayout>
<Button
    android:id="@+id/btnPhoto"
    android:text="Photo"
    android:textColor="#1e1e1e"
    android:layout_marginLeft="16dp"
    android:layout_marginRight="16dp"
    android:layout_marginBottom="8dp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

<Button
    android:id="@+id/btnCamera"
    android:text="Camera"
    android:textColor="#1e1e1e"
    android:layout_marginLeft="16dp"
    android:layout_marginRight="16dp"
    android:layout_marginBottom="8dp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

<Button
    android:id="@+id/btnCancel"
    android:text="Cancel"
    android:background="#a2a2a3"
    android:textColor="#1e1e1e"
    android:layout_marginLeft="16dp"
    android:layout_marginRight="16dp"
    android:layout_marginBottom="8dp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

</LinearLayout>

3步 - 让您的MainActivity如下:

public class MainActivity extends AppCompatActivity {

@BindView(R.id.btnButtonSheet)
Button btnBottomSheet;

@BindView(R.id.bottom_sheet)
LinearLayout layoutBottomSheet;

BottomSheetBehavior sheetBehavior;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    ButterKnife.bind(this);

    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);

    sheetBehavior = BottomSheetBehavior.from(layoutBottomSheet);


    sheetBehavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
        @Override
        public void onStateChanged(@NonNull View bottomSheet, int newState) {
            switch (newState) {
                case BottomSheetBehavior.STATE_HIDDEN:
                    break;
                case BottomSheetBehavior.STATE_EXPANDED: {
                    btnBottomSheet.setText("Close");
                }
                break;
                case BottomSheetBehavior.STATE_COLLAPSED: {
                    btnBottomSheet.setText("Expand");
                }
                break;
                case BottomSheetBehavior.STATE_DRAGGING:
                    break;
                case BottomSheetBehavior.STATE_SETTLING:
                    break;
            }
        }

        @Override
        public void onSlide(@NonNull View bottomSheet, float slideOffset) {

        }
    });
}

@OnClick(R.id.btnButtonSheet)
public void toggleBottomSheet() {
    if (sheetBehavior.getState() != BottomSheetBehavior.STATE_EXPANDED) {
        sheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
        btnBottomSheet.setText("Close Bottom sheet");
    } else {
        sheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
        btnBottomSheet.setText("Expand Bottom sheet");
    }
}
}

答案 3 :(得分:3)

您可以使用模式底页reference)。

  1. 添加设计支持库

    implementation "com.android.support:design:$version_support"
    
  2. 创建一个扩展Fragment并覆盖BottomSheetDialogFragment

    onCreateView

    class BottomDialogFragment : BottomSheetDialogFragment() { 
    
        companion object {
            fun newInstance() = BottomDialogFragment()
        }
    
        override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
            return inflater.inflate(R.layout.dialog_layout, container)
        }
    }
    
  3. 显示对话框

    val dialog = BottomDialogFragment.newInstance()
    dialog.show(supportFragmentManager, BottomDialogFragment::class.java.simpleName)
    

答案 4 :(得分:1)

这是显示

时动画对话框的最简单方法
dialog.setOnShowListener(new DialogInterface.OnShowListener() {

    @Override
    public void onShow(DialogInterface dialogInterface) {
        View view = dialog.getWindow().getDecorView();
        //for enter from left
        //ObjectAnimator.ofFloat(view, "translationX", -view.getWidth(), 0.0f).start(); 

        //for enter from bottom
        ObjectAnimator.ofFloat(view, "translationY", view.getHeight(), 0.0f).start();
    }

});

除此之外,在从底部设置动画

时,使对话框背景全屏显示
Window window = dialog.getWindow();
window.setLayout(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT);
window.setBackgroundDrawableResource(android.R.color.transparent);

答案 5 :(得分:0)

除了arunsoorya的回答:

更改 slide_up_dialog.xml

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

slide_out_down.xml

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromYDelta="0%p" 
    android:toYDelta="50%p"
    android:duration="@android:integer/config_longAnimTime"/>

答案 6 :(得分:0)

新的Material Design库为您提供BottomSheetDialog的外观和更简便的实现方式

答案 7 :(得分:0)

除了所有其他答案外,您还可以将此动画用于顶部栏。 从这里https://www.tutlane.com/tutorial/android/android-slide-up-down-animations-with-examples

slide_up.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/linear_interpolator">
    <scale
        android:duration="500"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:toXScale="1.0"
        android:toYScale="0.0" />
</set>

slide_down.xml

<set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/linear_interpolator">
    <scale
        android:duration="500"
        android:fromXScale="1.0"
        android:fromYScale="0.0"
        android:toXScale="1.0"
        android:toYScale="1.0" />
</set>

输出看起来像这样

enter image description here