从屏幕顶部滑出的 Dialog

最新推荐文章于 2021-05-29 00:06:00 发布

吴庆森

最新推荐文章于 2021-05-29 00:06:00 发布

阅读量3.5k

点赞数 2

分类专栏： dialog Android Dialog 文章标签：从屏幕顶部滑出的 Dialog

本文链接：https://blog.csdn.net/wuqingsen1/article/details/83304212

版权

dialog 同时被 2 个专栏收录

5 篇文章 1 订阅

订阅专栏

Android Dialog

5 篇文章 3 订阅

订阅专栏

1.自定义布局文件

下面是 activity_main 布局文件：

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

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Hello World!" />

    <!-- 下滑弹出的布局阴影部分 -->
    <View
        android:id="@+id/shadeView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#70000000"
        android:visibility="gone"/>

    <!-- 下滑弹出的布局 -->
    <LinearLayout
        android:id="@+id/llRank"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#FFFFFF"
        android:orientation="vertical"
        android:paddingLeft="20dp"
        android:visibility="gone">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:gravity="center_vertical"
            android:text="综合排序" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:gravity="center_vertical"
            android:text="价格又高到低" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:gravity="center_vertical"
            android:text="价格又高到低" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:gravity="center_vertical"
            android:text="月销量" />

    </LinearLayout>
</RelativeLayout>

2.自定义从顶部滑出的动画

在 anim 包中自定义从顶部滑出的动画，名字为 dialog_top_in ，代码如下：

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale
        android:interpolator="@android:anim/accelerate_interpolator"
        android:fromXScale="1.0"
        android:toXScale="1.0"
        android:fromYScale="0.0"
        android:toYScale="1.0"
        android:pivotX="100%"
        android:pivotY="0%"
        android:fillAfter="false"
        android:duration="200"/>
</set>

3.在 Activity 中为布局设置动画并且显示出来

下面是 MainActivity 中的代码：

public class MainActivity extends AppCompatActivity {
    private View shadeView;
    private LinearLayout llRank;
    private Animation mHideAction;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        shadeView = findViewById(R.id.shadeView);
        llRank = findViewById(R.id.llRank);

        //延迟一秒显示位于顶部的dialog
        new Handler().postDelayed(new Runnable() {
            @Override
            public void run() {
                //设置动画以及显示布局
                mHideAction = AnimationUtils.loadAnimation(MainActivity.this, R.anim.dialog_top_in);
                llRank.startAnimation(mHideAction);
                llRank.setVisibility(View.VISIBLE);
                //显示阴影
                shadeView.setVisibility(View.VISIBLE);
            }
        }, 1000);

        //阴影点击事件，隐藏阴影和布局
        shadeView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                shadeView.setVisibility(View.GONE);
                llRank.setVisibility(View.GONE);
            }
        });
    }
}