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

引子

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

调用层的代码

Activity中的代码：

 1 import android.os.Bundle;
 2 import android.os.Handler;
 3 import android.os.Looper;
 4 import android.support.annotation.Nullable;
 5 import android.view.View;
 6 import android.widget.TextView;
 7 
 8 import com.example.administrator.technologystackapp.R;
 9 import com.example.administrator.technologystackapp.activities.activity.manager.BaseActivity;
10 import com.example.administrator.technologystackapp.activities.custom.dialog.SharePopDialog;
11 
12 /**
13  * 自定义的弹窗
14  */
15 public class ActivityCustomDialog extends BaseActivity {
16 
17     private Handler handler = new Handler(Looper.getMainLooper());
18 
19     @Override
20     protected void onCreate(@Nullable Bundle savedInstanceState) {
21         super.onCreate(savedInstanceState);
22         setContentView(R.layout.activity_custom_dialog);
23         initView();
24     }
25 
26     private TextView tv;
27 
28     private void initView() {
29         tv = findViewById(R.id.tv);
30         tv.setOnClickListener(new View.OnClickListener() {
31             @Override
32             public void onClick(View v) {
33                 SharePopDialog popDialog = new SharePopDialog();
34                 popDialog.showDialog(ActivityCustomDialog.this);
35             }
36         });
37     }
38 
39 }

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

  1 import android.animation.ValueAnimator;
  2 import android.app.Activity;
  3 import android.app.Dialog;
  4 import android.content.Context;
  5 import android.view.Gravity;
  6 import android.view.LayoutInflater;
  7 import android.view.View;
  8 import android.view.Window;
  9 import android.view.WindowManager;
 10 import android.view.animation.OvershootInterpolator;
 11 import android.widget.LinearLayout;
 12 import android.widget.RelativeLayout;
 13 
 14 import com.example.administrator.technologystackapp.R;
 15 
 16 public class SharePopDialog {
 17 
 18     public SharePopDialog() {
 19     }
 20 
 21     private Dialog dialog;// 利用android自带的dialog类
 22     private View dialogView;// 弹窗的内容view
 23     private RelativeLayout ll_up;// 弹窗内容的某部分
 24     private LinearLayout popListView;// 弹窗内容的某部分
 25 
 26     public void showDialog(Activity activity) {
 27         dialog = new Dialog(activity, R.style.dialog_loading_bar_no_frame);//创建一个dialog实例，采用透明风格（alt点  R.style.dialog_loading_bar_no_frame 进去看看就知道了）
 28         dialogView = LayoutInflater.from(activity).inflate(R.layout.dialog_share_pop_v, null);//实例化一个view作为弹窗的内容view
 29         popListView = dialogView.findViewById(R.id.popListView);
 30         ll_up = dialogView.findViewById(R.id.ll_up);
 31 
 32         dialog.setContentView(dialogView);//设置弹窗的内容view
 33         dialog.setCanceledOnTouchOutside(true);//设置是否可以在窗口之外点击屏幕让弹窗消失
 34         dialog.setCancelable(true);//是否可以被按下back而让弹窗消失
 35         Window window = dialog.getWindow();//获得弹窗的 window对象
 36         if (window != null) {
 37             WindowManager.LayoutParams params = window.getAttributes();
 38             params.gravity = Gravity.BOTTOM;//初始化弹窗的位置，在底部
 39             params.width = getScreenPixelsWidth(activity);//弹窗的宽度是整个屏幕的宽度
 40             window.setWindowAnimations(R.style.popwindow_anim_style);// 弹窗的显示和消失，加入动画
 41         }
 42 
 43         dialog.show();//显示弹窗
 44 
 45         startAnimLayout();//上部分外层动画
 46         startAnim();// 上部分内层动画，每一个元素分开做动画
 47     }
 48 
 49     /**
 50      * 获取屏幕的宽度，单位是像素px
 51      * @param activity
 52      * @return
 53      */
 54     private int getScreenPixelsWidth(Context activity) {
 55         return activity.getResources().getDisplayMetrics().widthPixels;
 56     }
 57 
 58     private int animDuration = 500;// 动画执行的时长
 59 
 60     /**
 61      * 动画效果1
 62      */
 63     private void startAnimLayout() {
 64         //整体layout的动画，Y轴移动
 65         final int height = 20;
 66         final ValueAnimator anim = ValueAnimator.ofFloat(1, 0, 1);
 67         anim.setDuration(animDuration);
 68         anim.setInterpolator(new OvershootInterpolator());//先快后慢的插值器
 69         anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
 70             @Override
 71             public void onAnimationUpdate(ValueAnimator animation) {
 72                 float value = (float) animation.getAnimatedValue();
 73                 ll_up.setTranslationY((1 - value) * height);
 74             }
 75         });
 76         anim.start();
 77     }
 78 
 79     /**
 80      * 动画效果2
 81      */
 82     private void startAnim() {
 83         int count = popListView.getChildCount();
 84         long delay = 0;
 85 
 86         for (int i = 0; i < count; i++) {
 87             final View child = popListView.getChildAt(i);
 88             child.setTranslationY(1 * 600);
 89             child.setAlpha(1 - 1);
 90         }
 91 
 92         for (int i = 0; i < count; i++) {
 93             final View child = popListView.getChildAt(i);
 94 
 95             ValueAnimator anim = ValueAnimator.ofFloat(1, 0);
 96             anim.setDuration(animDuration);
 97             anim.setInterpolator(new OvershootInterpolator());
 98             anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
 99                 @Override
100                 public void onAnimationUpdate(ValueAnimator animation) {
101                     float value = (float) animation.getAnimatedValue();
102                     child.setTranslationY(value * 600);
103                     child.setAlpha(1 - value);
104                 }
105             });
106             anim.setStartDelay(delay);
107             anim.start();
108             delay += 100;
109         }
110     }
111 }

弹窗的显示和消失的动画效果，将下面的代码加入到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

  1 <?xml version="1.0" encoding="utf-8"?>
  2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3     android:layout_width="match_parent"
  4     android:layout_height="wrap_content"
  5     android:layout_alignParentBottom="true"
  6     android:gravity="center"
  7     android:orientation="vertical"
  8     android:paddingBottom="10dp"
  9     android:paddingLeft="20dp"
 10     android:paddingRight="20dp">
 11 
 12     <RelativeLayout
 13         android:id="@+id/ll_up"
 14         android:layout_width="match_parent"
 15         android:layout_height="150dp"
 16         android:layout_marginBottom="10dp"
 17         android:layout_marginTop="20dp"
 18         android:background="@drawable/dialog_background"
 19         android:gravity="center"
 20         android:orientation="vertical"
 21         android:paddingTop="10dp">
 22 
 23         <TextView
 24             android:id="@+id/tv_emp"
 25             android:layout_width="match_parent"
 26             android:layout_height="wrap_content"
 27             android:alpha="0.95"
 28             android:gravity="center"
 29             android:padding="5dp"
 30             android:text="      "
 31             android:textColor="#666666"
 32             android:textSize="18sp" />
 33 
 34         <LinearLayout
 35             android:id="@+id/popListView"
 36             android:layout_width="match_parent"
 37             android:layout_height="match_parent"
 38             android:layout_centerHorizontal="true"
 39             android:layout_marginBottom="20dp"
 40             android:layout_marginTop="10dp"
 41             android:gravity="bottom|left"
 42             android:orientation="horizontal">
 43 
 44             <LinearLayout
 45                 android:layout_width="0dp"
 46                 android:layout_height="wrap_content"
 47                 android:layout_marginLeft="0dp"
 48                 android:layout_weight="1"
 49                 android:gravity="center"
 50                 android:orientation="vertical">
 51 
 52                 <ImageView
 53                     android:layout_width="wrap_content"
 54                     android:layout_height="wrap_content"
 55                     android:background="@drawable/image_background2"
 56                     android:src="@mipmap/sns_pyquan_icon" />
 57 
 58                 <TextView
 59                     android:layout_width="wrap_content"
 60                     android:layout_height="wrap_content"
 61                     android:layout_marginTop="5dp"
 62                     android:text="微信朋友圈"
 63                     android:textSize="12dp" />
 64 
 65             </LinearLayout>
 66 
 67             <LinearLayout
 68                 android:layout_width="0dp"
 69                 android:layout_height="wrap_content"
 70                 android:layout_marginLeft="0dp"
 71                 android:layout_weight="1"
 72                 android:gravity="center"
 73                 android:orientation="vertical">
 74 
 75                 <ImageView
 76                     android:layout_width="wrap_content"
 77                     android:layout_height="wrap_content"
 78                     android:background="@drawable/image_background2"
 79                     android:src="@mipmap/sns_pyquan_icon" />
 80 
 81                 <TextView
 82                     android:layout_width="wrap_content"
 83                     android:layout_height="wrap_content"
 84                     android:layout_marginTop="5dp"
 85                     android:text="微信朋友圈"
 86                     android:textSize="12dp" />
 87 
 88             </LinearLayout>
 89 
 90             <LinearLayout
 91                 android:layout_width="0dp"
 92                 android:layout_height="wrap_content"
 93                 android:layout_marginLeft="0dp"
 94                 android:layout_weight="1"
 95                 android:gravity="center"
 96                 android:orientation="vertical">
 97 
 98                 <ImageView
 99                     android:layout_width="wrap_content"
100                     android:layout_height="wrap_content"
101                     android:background="@drawable/image_background2"
102                     android:src="@mipmap/sns_pyquan_icon" />
103 
104                 <TextView
105                     android:layout_width="wrap_content"
106                     android:layout_height="wrap_content"
107                     android:layout_marginTop="5dp"
108                     android:text="微信朋友圈"
109                     android:textSize="12dp" />
110 
111             </LinearLayout>
112 
113             <LinearLayout
114                 android:layout_width="0dp"
115                 android:layout_height="wrap_content"
116                 android:layout_marginLeft="0dp"
117                 android:layout_weight="1"
118                 android:gravity="center"
119                 android:orientation="vertical">
120 
121                 <ImageView
122                     android:layout_width="wrap_content"
123                     android:layout_height="wrap_content"
124                     android:background="@drawable/image_background2"
125                     android:src="@mipmap/sns_pyquan_icon" />
126 
127                 <TextView
128                     android:layout_width="wrap_content"
129                     android:layout_height="wrap_content"
130                     android:layout_marginTop="5dp"
131                     android:text="微信朋友圈"
132                     android:textSize="12dp" />
133 
134             </LinearLayout>
135         </LinearLayout>
136 
137     </RelativeLayout>
138 
139 
140     <TextView
141         android:id="@+id/share_title"
142         android:layout_width="match_parent"
143         android:layout_height="wrap_content"
144         android:layout_alignTop="@id/ll_up"
145         android:layout_marginTop="10dp"
146         android:alpha="0.95"
147         android:gravity="center"
148         android:padding="5dp"
149         android:text="分享"
150         android:textColor="#666666"
151         android:textSize="18sp" />
152 
153     <TextView
154         android:id="@+id/btn_cancel"
155         android:layout_width="match_parent"
156         android:layout_height="wrap_content"
157         android:layout_below="@id/ll_up"
158         android:background="@drawable/dialog_background2"
159         android:gravity="center"
160         android:padding="15dp"
161         android:text="取消"
162         android:textColor="#666666"
163         android:textSize="18sp" />
164 
165 </RelativeLayout>