Android从底部向上弹出的动画效果

 

下面介绍两种弹出方式，一种是利用TranslateAnimation动画，另一种是PopupWindow

左边是动画，右边是popupwindow。

第一种方式：

public class MainActivity extends AppCompatActivity {

    private LinearLayout mPopupLayout;
    private Button btn;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mPopupLayout = (LinearLayout) findViewById(R.id.start_ctrl);
        btn = findViewById(R.id.start_btn);

        startAnim();
    }

    private void startAnim() {
        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //设置动画，从自身位置的最下端向上滑动了自身的高度，持续时间为500ms
                final TranslateAnimation ctrlAnimation = new TranslateAnimation(
                        TranslateAnimation.RELATIVE_TO_SELF, 0, TranslateAnimation.RELATIVE_TO_SELF, 0,
                        TranslateAnimation.RELATIVE_TO_SELF, 1, TranslateAnimation.RELATIVE_TO_SELF, 0);
                ctrlAnimation.setDuration(400l);     //设置动画的过渡时间
                mPopupLayout.postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        mPopupLayout.setVisibility(View.VISIBLE);
                        mPopupLayout.startAnimation(ctrlAnimation);
                    }
                }, 500);
            }
        });
    }
}

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#DDE2E3"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/start_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="从底部弹出"/>

    <LinearLayout
        android:id="@+id/start_ctrl"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:orientation="vertical"
        android:visibility="gone">

        <Button
            android:id="@+id/start_login"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#F26968"
            android:gravity="center"
            android:paddingBottom="15dp"
            android:paddingTop="15dp"
            android:text="登陆"
            android:textColor="#FFFFFF"
            android:textSize="18sp" />

        <Button
            android:id="@+id/start_register"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#323339"
            android:gravity="center"
            android:paddingBottom="15dp"
            android:paddingTop="15dp"
            android:text="注册"
            android:textColor="#FFFFFF"
            android:textSize="18sp" />
    </LinearLayout>

</RelativeLayout>

 

第二种方式：

先创建一个popupwindow:

private PopupWindow mPopupWindow;
mPopupWindow = createPopupWindow(contentView);

 将需要的布局文件传入即可：

private PopupWindow createPopupWindow(View contentView) {
        contentView.measure(View.MeasureSpec.UNSPECIFIED, View.MeasureSpec.UNSPECIFIED);
        PopupWindow popupWindow = new PopupWindow(contentView, WindowManager.LayoutParams.MATCH_PARENT, WindowManager.LayoutParams.WRAP_CONTENT, true);
        popupWindow.setTouchable(true);
        popupWindow.setBackgroundDrawable(new BitmapDrawable());
        popupWindow.setFocusable(true);
        popupWindow.setAnimationStyle(R.style.PopupAnimation);
        popupWindow.setClippingEnabled(true);
        popupWindow.setSoftInputMode(PopupWindow.INPUT_METHOD_NEEDED);
        popupWindow.setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE);
        popupWindow.showAtLocation(mRootLayout, Gravity.NO_GRAVITY, 0, DimenUtils.getWindowHeight() - contentView.getMeasuredHeight());

        popupWindow.update();
        popupWindow.setOnDismissListener(new PopupWindow.OnDismissListener() {
            @Override
            public void onDismiss() {
                setWindowBackgroundAlpha(1.0f);//当PopupWindow消失的时候Window完全透明
            }
        });
        return popupWindow;
    }

第三种方式：

转载自：https://www.jianshu.com/p/e1d2cc82e756

private void show1() {
    Dialog bottomDialog = new Dialog(this, R.style.BottomDialog);
    View contentView = LayoutInflater.from(this).inflate(R.layout.dialog_content_normal, null);
    bottomDialog.setContentView(contentView);
    ViewGroup.LayoutParams layoutParams = contentView.getLayoutParams();
    layoutParams.width = getResources().getDisplayMetrics().widthPixels;
    contentView.setLayoutParams(layoutParams);
    bottomDialog.getWindow().setGravity(Gravity.BOTTOM);
    bottomDialog.getWindow().setWindowAnimations(R.style.BottomDialog_Animation);
    bottomDialog.show();
}

对话框的样式style：

<style name="BottomDialog" parent="@style/Base.V7.Theme.AppCompat.Light.Dialog">
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowBackground">@android:color/transparent</item>
</style>

在对话框中的按钮需要MD风格的波纹效果的话，对话框的style的parent需要设定parent="@style/Base.V7.Theme.AppCompat.Light.Dialog"，否则没有效果。同时将对话框所在window的标题去掉。android:windowBackground属性一定要设置成透明，否则自定义形状的对话框背景就是默认的白色了。如果不设置为透明，比如我们通常要设置的圆角对话框就没有效果

对话框显示时从底部进入，关闭时从底部滑出。动画样式：

<style name="BottomDialog.Animation" parent="Animation.AppCompat.Dialog">
    <item name="android:windowEnterAnimation">@anim/translate_dialog_in</item>
    <item name="android:windowExitAnimation">@anim/translate_dialog_out</item>
</style>

tranlate_dialog_in.xml:

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

tranlate_dialog_out.xml:

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

实现底部对话框的原理就是修改对话框的内容布局contentView的参数，使它的宽度刚好等于屏幕的宽度，并且设置对话框所在Window的gravity属性为bottom。

需要注意的是，上面代码中需要在调用contentView.getLayoutParams()需要在setContentView方法后，否则获取到的LayoutParams为null，当然也可以自己new一个LayoutParams设置给contentView。

如果是要实现底部圆角对话框，原理也相似，只需要给contentView添加一个圆角的背景shape，并减小contentView的宽度给左右两边留一定的距离，同时给底部设置边距。
 

private void show2() {
    Dialog bottomDialog = new Dialog(this, R.style.BottomDialog);
    View contentView = LayoutInflater.from(this).inflate(R.layout.dialog_content_circle, null);
    bottomDialog.setContentView(contentView);
    ViewGroup.MarginLayoutParams params = (ViewGroup.MarginLayoutParams) contentView.getLayoutParams();
    params.width = getResources().getDisplayMetrics().widthPixels - DensityUtil.dp2px(this, 16f);
    params.bottomMargin = DensityUtil.dp2px(this, 8f);
    contentView.setLayoutParams(params);
    bottomDialog.getWindow().setGravity(Gravity.BOTTOM);
    bottomDialog.getWindow().setWindowAnimations(R.style.BottomDialog_Animation);
    bottomDialog.show();
}

第三种方式的git代码：https://github.com/buder-cp/base_component_learn/blob/master/BottomDialog-master.zip