android-自定义弹窗-仿58同城的分享弹窗

引子

 不废话，直接上效果图；（录屏软件录不了点击效果，如果用我的代码去测试的话，直接点击中间那个按钮就行了）

调用层的代码

Activity中的代码：

import android.os.Bundle;
import android.os.Handler;
import android.os.Looper;
import android.support.annotation.Nullable;
import android.view.View;
import android.widget.TextView;

import com.example.administrator.technologystackapp.R;
import com.example.administrator.technologystackapp.activities.activity.manager.BaseActivity;
import com.example.administrator.technologystackapp.activities.custom.dialog.SharePopDialog;

/**
 * 自定义的弹窗
 */
public class ActivityCustomDialog extends BaseActivity {

    private Handler handler = new Handler(Looper.getMainLooper());

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_custom_dialog);
        initView();
    }

    private TextView tv;

    private void initView() {
        tv = findViewById(R.id.tv);
        tv.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                SharePopDialog popDialog = new SharePopDialog();
34                 popDialog.showDialog(ActivityCustomDialog.this);
            }
        });
    }

}

activity的布局文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">

    <TextView
        android:id="@+id/tv"
        android:background="@drawable/active_button_background"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="自定义的dialog" />

</LinearLayout>

可以发现，调用非常简单。见上面的红色代码。

弹窗工具类以及其他相关的代码

SharePopDialog.java

import android.animation.ValueAnimator;
import android.app.Activity;
import android.app.Dialog;
import android.content.Context;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.Window;
import android.view.WindowManager;
import android.view.animation.OvershootInterpolator;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;

import com.example.administrator.technologystackapp.R;

public class SharePopDialog {

    public SharePopDialog() {
    }

    private Dialog dialog;// 利用android自带的dialog类
    private View dialogView;// 弹窗的内容view
    private RelativeLayout ll_up;// 弹窗内容的某部分
    private LinearLayout popListView;// 弹窗内容的某部分

    public void showDialog(Activity activity) {
        dialog = new Dialog(activity, R.style.dialog_loading_bar_no_frame);//创建一个dialog实例，
        dialogView = LayoutInflater.from(activity).inflate(R.layout.dialog_share_pop_v, null);//实例化一个view作为弹窗的内容view
        popListView = dialogView.findViewById(R.id.popListView);
        ll_up = dialogView.findViewById(R.id.ll_up);

        dialog.setContentView(dialogView);//设置弹窗的内容view
        dialog.setCanceledOnTouchOutside(true);//设置是否可以在窗口之外点击屏幕让弹窗消失
        dialog.setCancelable(true);//是否可以被按下back而让弹窗消失
        Window window = dialog.getWindow();//获得弹窗的 window对象
        if (window != null) {
            WindowManager.LayoutParams params = window.getAttributes();
            params.gravity = Gravity.BOTTOM;//初始化弹窗的位置，在底部
            params.width = getScreenPixelsWidth(activity);//弹窗的宽度是整个屏幕的宽度
            window.setWindowAnimations(R.style.popwindow_anim_style);// 弹窗的显示和消失，加入动画
        }

        dialog.show();//显示弹窗

        startAnimLayout();//上部分外层动画
        startAnim();// 上部分内层动画，每一个元素分开做动画
    }

    /**
     * 获取屏幕的宽度，单位是像素px
     * @param activity
     * @return
     */
    private int getScreenPixelsWidth(Context activity) {
        return activity.getResources().getDisplayMetrics().widthPixels;
    }

    private int animDuration = 500;// 动画执行的时长

    /**
     * 动画效果1
     */
    private void startAnimLayout() {
        //整体layout的动画，Y轴移动
        final int height = 20;
        final ValueAnimator anim = ValueAnimator.ofFloat(1, 0, 1);
        anim.setDuration(animDuration);
        anim.setInterpolator(new OvershootInterpolator());//先快后慢的插值器
        anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                float value = (float) animation.getAnimatedValue();
                ll_up.setTranslationY((1 - value) * height);
            }
        });
        anim.start();
    }

    /**
     * 动画效果2
     */
    private void startAnim() {
        int count = popListView.getChildCount();
        long delay = 0;

        for (int i = 0; i < count; i++) {
            final View child = popListView.getChildAt(i);
            child.setTranslationY(1 * 600);
            child.setAlpha(1 - 1);
        }

        for (int i = 0; i < count; i++) {
            final View child = popListView.getChildAt(i);

            ValueAnimator anim = ValueAnimator.ofFloat(1, 0);
            anim.setDuration(animDuration);
            anim.setInterpolator(new OvershootInterpolator());
            anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    float value = (float) animation.getAnimatedValue();
                    child.setTranslationY(value * 600);
                    child.setAlpha(1 - value);
                }
            });
            anim.setStartDelay(delay);
            anim.start();
            delay += 100;
        }
    }
}

弹窗的显示和消失的动画效果，将下面的代码加入到style.xml里面去

<style name="popwindow_anim_style">
        <item name="android:windowEnterAnimation">@anim/slide_in_from_bottom</item>
        <!-- 指定显示的动画xml -->
        <item name="android:windowExitAnimation">@anim/slide_out_to_bottom</item>
        <!-- 指定消失的动画xml -->
    </style>

弹窗的内容布局文件 dialog_share_pop_v.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:gravity="center"
    android:orientation="vertical"
    android:paddingBottom="10dp"
    android:paddingLeft="20dp"
    android:paddingRight="20dp">

    <RelativeLayout
        android:id="@+id/ll_up"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:layout_marginBottom="10dp"
        android:layout_marginTop="20dp"
        android:background="@drawable/dialog_background"
        android:gravity="center"
        android:orientation="vertical"
        android:paddingTop="10dp">

        <TextView
            android:id="@+id/tv_emp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:alpha="0.95"
            android:gravity="center"
            android:padding="5dp"
            android:text="      "
            android:textColor="#666666"
            android:textSize="18sp" />

        <LinearLayout
            android:id="@+id/popListView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_centerHorizontal="true"
            android:layout_marginBottom="20dp"
            android:layout_marginTop="10dp"
            android:gravity="bottom|left"
            android:orientation="horizontal">

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginLeft="0dp"
                android:layout_weight="1"
                android:gravity="center"
                android:orientation="vertical">

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@drawable/image_background2"
                    android:src="@mipmap/sns_pyquan_icon" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="5dp"
                    android:text="微信朋友圈"
                    android:textSize="12dp" />

            </LinearLayout>

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginLeft="0dp"
                android:layout_weight="1"
                android:gravity="center"
                android:orientation="vertical">

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@drawable/image_background2"
                    android:src="@mipmap/sns_pyquan_icon" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="5dp"
                    android:text="微信朋友圈"
                    android:textSize="12dp" />

            </LinearLayout>

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginLeft="0dp"
                android:layout_weight="1"
                android:gravity="center"
                android:orientation="vertical">

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@drawable/image_background2"
                    android:src="@mipmap/sns_pyquan_icon" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="5dp"
                    android:text="微信朋友圈"
                    android:textSize="12dp" />

            </LinearLayout>

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginLeft="0dp"
                android:layout_weight="1"
                android:gravity="center"
                android:orientation="vertical">

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@drawable/image_background2"
                    android:src="@mipmap/sns_pyquan_icon" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="5dp"
                    android:text="微信朋友圈"
                    android:textSize="12dp" />

            </LinearLayout>
        </LinearLayout>

    </RelativeLayout>


    <TextView
        android:id="@+id/share_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignTop="@id/ll_up"
        android:layout_marginTop="10dp"
        android:alpha="0.95"
        android:gravity="center"
        android:padding="5dp"
        android:text="分享"
        android:textColor="#666666"
        android:textSize="18sp" />

    <TextView
        android:id="@+id/btn_cancel"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/ll_up"
        android:background="@drawable/dialog_background2"
        android:gravity="center"
        android:padding="15dp"
        android:text="取消"
        android:textColor="#666666"
        android:textSize="18sp" />

</RelativeLayout>

两个anim（放在anim目录中）：

slide_in_from_bottom.xml (dialog切入动画)

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

slide_out_to_bottom.xml （dialog切出动画）

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

主要代码都在这里了。程序思路，也在代码注释中写明。

OK，先酱紫。