从屏幕顶部滑出的 Dialog

推荐:

下面是从屏幕顶部滑出的布局,效果图如下(这里不是用的 Dialog ,因为从顶部滑出的 Dialog 要考虑手机最顶部的导航栏等,所以这里用的是为布局设置动画并且显示出来):

下面主要讲的是:

  • 自定义布局文件
  • 自定义从顶部滑出的动画
  • 在 Activity 中为布局设置动画并且显示出来

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

推荐:

猜你喜欢

转载自blog.csdn.net/wuqingsen1/article/details/83304212