百变【自定义Dialog】，创建尽在【一行代码】之间，功能十分强大噢O(∩_∩)O

1.写在前面

一、 最近笔者在学习写一个小项目的时候，发现一个超好用的【自定义Dialog】，不仅创建起来非常简单，只需【一行代码】，不仅如此，弹出的风格变化万千（只需改动画的参数），但最重要的是功能非常强大（只需改布局参数），只要你需要弹出来的，都可以用它来搞定，真的非常方便，故分享给小伙伴们 O(∩_∩)O

二、 眼见为实，下面给你介绍三种很常见的功能

登录时候弹出的圆形进度条

美女查看大图放大拖拽是否脑洞大开

代替PopWindow也是游刃有余

三、此篇博文不仅仅能带走【百变Dialog】，还能收获额外的小知识哦！

2.预览成果

列举常用三种功能，效果如下图所示：

（1）弹出的圆形进度条　　 　　　　（2）弹出美女大图放大拖拽　　　　　（3）弹出PopWindow

落实创建这个【百变Dialog】创建尽在一行代码之间

3.本章核心要点【自定义Dialog】：

首先要明白我们为什么要自定义
4000
控件？（简述以下几个原因）：

特定的显示风格

我们的App肯定是有特殊的效果的，别人是没有的，是唯一的，这个效果呢，必须通过自定义才能显示出来。

处理特有的用户交互

就是我们与用户交互的方式比较特殊，比如说我们的本博文介绍的【百变dialog】，既有特殊显示风格，又有特殊的交互需求，那么此时没办法，我们就需要去自定义控件。

优化我们的布局

我们可以通过各种嵌套的方式去实现一个布局，但这样我们大家都非常的清楚，我们测量，绘制的过程是很慢的，那么此时我们肯定会想办法，能不能自己用自定义的方法去实现一个布局，从而提升我们的一个效率。

为了封装，提高开发效率

比如说我们实际开发中，有一些地方的控件啊，比如本博文说到的【百变dialog】，经常要复用，看着很是不舒服所以把它封装一下，变成一个自定义控件。

使用它的具体步骤（前戏），就两步很简单噢 (●’◡’●)

（1）把这个继承了Dialog的自定义【CustomDialog类】放入自己的安卓项目中

　———1.首先看看思路，要定义哪些参数：

　　　　


　———2.具体代码如下，要定义哪些参数：

public class CustomDialog extends Dialog {
//定义模板
public CustomDialog(Context context, int layout, int style) {
this(context, WindowManager.LayoutParams.WRAP_CONTENT, WindowManager.LayoutParams.WRAP_CONTENT, layout, style, Gravity.CENTER);
}

//定义属性
public CustomDialog(Context context, int width, int height, int layout, int style, int gravity, int anim) {
super(context, style);

//设置相关属性
setContentView(layout);
Window window = getWindow();//初始化窗口
WindowManager.LayoutParams layoutParams = window.getAttributes();//初始化布局参数
layoutParams.width = width; //设置dialog的宽
layoutParams.height = height;//设置dialog的高
layoutParams.gravity = gravity;//设置dialog的位置

window.setAttributes(layoutParams);//为dialog设置布局参数
window.setWindowAnimations(anim);//为dialog设置动画
}

//实例
public CustomDialog(Context context, int width, int height, int layout, int style, int gravity) {
this(context, width, height, layout, style, gravity, R.style.pop_anim_one);
}
}

PS:因为第三个构造函数中直接默认了一个dialog的动画，如果你不设置的话，默认是【从左往右】弹出的

（2）把这个默认的动画（从左往右弹出）先做好

　——— 【1】. 在工程目录下面的res目录下新建一个anim文件夹，在新建两个xml文件，创建【弹出】和【隐藏】时的动画：

　　　　　　　


　弹出的动画：anim/pop_in_one.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<!--平移动画-->
<translate
android:duration="@android:integer/config_shortAnimTime"
android:fromXDelta="-100%"
android:fromYDelta="0"
android:toXDelta="0"
android:toYDelta="0" />
</set>

　隐藏的动画：anim/pop_out_one.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<!--平移动画-->
<translate
android:duration="@android:integer/config_shortAnimTime"
android:fromXDelta="0"
android:fromYDelta="0"
android:toXDelta="100%"
android:toYDelta="0" />
</set>

　——— 【2】.在style文件中创建一个style引用刚创建的动画就就可以了

<!--自定义Dialog 的平移动画(从左到右)-->
<style name="pop_anim_one">
<item name="android:windowEnterAnimation">@anim/pop_in_one</item>
<item name="android:windowExitAnimation">@anim/pop_out_one</item>
</style>

　PS：到此前戏就做完了，待会你用的时候就可以爽翻天了 (￣▽￣)”！

4.具体案例详细解析

1.登录时候弹出的圆形进度条：

思路：登录时候弹出，自然是在登录按钮按下去的时候在创建并显示出来，并且dialog窗口外边不能的点击，否则，一点就没有了，因为只是自定义dialog【功能的模拟】，我就直接用handler延迟3秒发消息来隐藏自定义dialog。

（1）核心代码如下：

Handler handler = new Handler() {
@Override
public void handleMessage(Message msg) {
super.handleMessage(msg);
if (msg.what == DISMISS_DIALOG) {
//隐藏dialog
dialog.dismiss();
}
}
};

@OnClick(R.id.btn_login_enter)
public void onViewClicked() {

//(1)创建自定义dialog
dialog = new CustomDialog(getActivity(),
320, 320,
R.layout.dialog_loading,
R.style.Theme_dialog,
Gravity.CENTER);
//(2)显示diglog
dialog.show();
//(3)dialog窗口外点击无效
dialog.setCancelable(false);

//(4)延迟3秒发送隐藏dialog的消息
Message message = Message.obtain();
message.what = DISMISS_DIALOG;
handler.sendEmptyMessageDelayed(DISMISS_DIALOG, 3000);
}

（2）核心代码解析：

　——— 【PS】: 创建百变Dialog各个参数一览：



　——— 【1】.设置宽高：这里采用的是自由设置，多大多小都行

　——— 【2】.设置布局：布局也很简单，就一个【ProgressBar】和一个【TextView】

　　—— 本案例补充知识点【①】：改变【ProgressBar】原生样式：（详情请见本demo额外知识点补充）

　——— 【3】.设置风格：效果图所示，都是透明的比背景，在style文件中新建一个style就好了：

<!--全透明-->
<style name="Theme_dialog" parent="@android:style/Theme.Dialog">
<item name="android:windowBackground">@android:color/transparent</item>
<item name="android:windowNoTitle">true</item>
</style>

　——— 【4】.设置位置：“Gravity.CENTER”：设置在为屏幕的中央。

　——— 【5】.设置动画，因为自定义CustomDialog类中就默认动画的构造函数 ，所以这里不设置就表示【从左往右】弹出dialog。

2.美女查看大图放大拖拽：

思路：这个Fragment呈现出来的东西很简单，就是一个GridView的传统用法，把网络上的数据请求下来，简单的解析了一下并且简单的显示了一下，因为比较简单只有一个内容——图片，所以这里就不多赘述了；我们还是进入主题吧，要在点击图片时弹出dialog，必然要先初始化dialog，然后监听GridView中item的点击事件，然后弹出您选中item中图片。

（1）核心代码如下：

//初始化view
private void initView() {
//创建自定义dialog
dialog = new CustomDialog(getActivity(),
(5*width)/6,
height/2,
R.layout.dialog_girl,
R.style.Theme_dialog,
Gravity.CENTER,R.style.pop_anim_two);

//找photoView id
photoView = (PhotoView) dialog.findViewById(R.id.photoView);
}

//初始化监听器的
private void initListener() {
mGridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
//把选中的美女图片显示在dialog上
PicassoUtils.defaultLoadedImage(getActivity(),mGirlUrls.get(i),photoView);
//弹出dialog
dialog.show();
}
});
}

（2）核心代码解析：

　——— 【PS】: 创建百变Dialog各个参数一览：



　——— 【1】.设置宽高：这里根据屏幕的宽高的比例来设定的，此处dialog的宽为屏幕宽的5/6倍，dialog的高是屏幕高的1/2倍数，前提先获取一下屏幕的宽和高：

private void initData() {

//初始化窗口管理器
manager = (WindowManager) getActivity().getSystemService(Context.WINDOW_SERVICE);
//获取屏幕的宽和高
width = manager.getDefaultDisplay().getWidth();
height = manager.getDefaultDisplay().getHeight();
... ... ...
<
f93b
span class="hljs-keyword">... ... ...

}

　——— 【2】.设置布局：布局也很简单，就一个PhotoView（功能十分强大，可“放大图片”，“拖拽图片”等等）：

<?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"
android:orientation="vertical">

<uk.co.senab.photoview.PhotoView
android:id="@+id/photoView"
android:layout_width="match_parent"
android:layout_height="match_parent" />

</LinearLayout>

　——— 【3】.设置风格：同上一个案例一样（略）

　——— 【4】.设置位置：同上一个案例一样（略）

　——— 【5】.设置动画，这里的动画是自定义的“补间动画”，用到了“缩放”，“透明度”，“旋转”，自定义动画的方式和【前戏】一样，这里贴出核心动画代码：

　　弹出的动画：anim/pop_in_two.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<!--缩放动画-->
<scale
android:duration="800"
android:fromXScale="0.01"
android:fromYScale="0.01"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="1.0"
android:toYScale="1.0" />
<!--透明度动画-->
<alpha
android:duration="800"
android:fromAlpha="0.01"
android:toAlpha="1" />

<!--旋转动画-->
<rotate
android:fromDegrees="0"
android:toDegrees="1080"
android:pivotY="50%"
android:pivotX="50%"
android:duration="800"/>
</set>

　隐藏的动画：anim/pop_out_two.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<!--缩放动画-->
<scale
android:duration="800"
android:fromXScale="1.0"
android:fromYScale="1.0"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="0.01"
android:toYScale="0.01" />
<!--透明度动画-->
<alpha
android:duration="800"
android:fromAlpha="1"
android:toAlpha="0.01" />
<!--旋转动画-->
<rotate
android:fromDegrees="1080"
android:toDegrees="0"
android:pivotY="50%"
android:pivotX="50%"
android:duration="800"/>
</set>

　在style文件中创建一个style引用刚创建的动画就就可以了

<!--自定义Dialog 的缩放+旋转+透明度动画-->
<style name="pop_anim_two">
<item name="android:windowEnterAnimation">@anim/pop_in_two</item>
<item name="android:windowExitAnimation">@anim/pop_out_two</item>
</style>

　——— 【6】.本案例补充知识点【②】：PhotoView用法（详情请见本demo额外知识点补充）

　——— 【7】本案例补充知识点【③】：Picasso用法（详情请见本demo额外知识点补充）

3.代替PopWindow：

思路：这个最简单了，相信大伙看完前面两个案列，这个可以秒杀，没错，但我们还是简单看看吧

（1）核心解析：

　——— 【1】.设置宽高：同上一个案例类似（略）

　——— 【2】.设置布局：布局也很简单，看图都能写出来：

　

<?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:orientation="vertical">

<View style="@style/splitLine" />

<RelativeLayout
android:id="@+id/rl_mine_myInfo"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_marginTop="5dp"
android:background="@drawable/common_selector">

<de.hdodenhof.circleimageview.CircleImageView
android:id="@+id/img_mine_headShot"
android:layout_width="90dp"
android:layout_height="90dp"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="15dp"
android:src="@drawable/head_1" />

<TextView
android:id="@+id/tv_mine_nickName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="Zerlindar"
android:textSize="23dp" />

</RelativeLayout>

<View style="@style/splitLine" />

<TextView
android:layout_marginLeft="10dp"
android:id="@+id/tv_mine_pillBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:background="@drawable/common_selector"
android:drawableLeft="@mipmap/mine_pillbox"
android:drawablePadding="40dp"
android:gravity="center_vertical"
android:padding="15dp"
android:text="我的药盒"
android:textSize="17dp" />

<View style="@style/splitLine" />

<TextView
android:layout_marginLeft="10dp"
android:id="@+id/tv_mine_friendCycle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:background="@drawable/common_selector"
android:drawableLeft="@mipmap/mine_friendcircle"
android:drawablePadding="40dp"
android:gravity="center_vertical"
android:padding="15dp"
android:text="朋友圈"
android:textSize="17dp" />

<View style="@style/splitLine" />

<TextView
android:layout_marginLeft="10dp"
android:id="@+id/tv_mine_feedback"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:background="@drawable/common_selector"
android:drawableLeft="@mipmap/mine_feedback"
android:drawablePadding="40dp"
android:gravity="center_vertical"
android:padding="15dp"
android:text="记录不良反应"
android:textSize="17dp" />

<View style="@style/splitLine" />
</LinearLayout>

　——— 【3】.设置风格：同上一个案例一样（略）

　——— 【4】.设置位置：“Gravity.BOTTOM”：设置在底部

　——— 【5】.设置动画，这里的动画是自定义的“补间动画”，用到了“平移”，自定义动画的方式和【前戏】一样，这里贴出核心动画代码：

　　弹出的动画：anim/pop_in_three.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<!--平移动画-->
<translate
android:duration="@android:integer/config_shortAnimTime"
android:fromXDelta="0"
android:fromYDelta="100%"
android:toXDelta="0"
android:toYDelta="0" />
</set>

　　隐藏的动画：anim/pop_out_three.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<!--平移动画-->
<translate
android:duration="@android:integer/config_shortAnimTime"
android:fromXDelta="0"
android:fromYDelta="0"
android:toXDelta="0"
android:toYDelta="100%" />
</set>

　在style文件中创建一个style引用刚创建的动画就就可以了

<!--自定义Dialog 的平移动画(从下到上)-->
<style name="pop_anim_three">
<item name="android:windowEnterAnimation">@anim/pop_in_three</item>
<item name="android:windowExitAnimation">@anim/pop_out_three</item>
</style>

　——— 【7】本案例补充知识点【④】：Andoird圆形头像设置 — 实现相机、相册选择并裁剪+封装（封装后：实现相机、相册选择并裁剪只需一行代码）

5.本demo额外知识点补充：

1.改变【ProgressBar】原生样式：

　　　　　　　　　　　　






　　用indeterminateDrawable属性就可以了：

<ProgressBar
android:indeterminateDrawable="@drawable/progress_ring_green"
... ... />

　　drawable/progress_ring_green.xml：

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="360" >
<shape
android:innerRadiusRatio="3"
android:shape="ring"
android:thicknessRatio="8"
android:useLevel="false" >
<gradient
android:centerColor="#ffffff"
android:centerY="0.50"
android:endColor="@color/colorNavigation"
android:startColor="@android:color/white"
android:type="sweep"
android:useLevel="false" />
</shape>
</rotate>

2.PhotoView用法：

【GitHub地址】为：https://github.com/chrisbanes/PhotoView**

（1）添加库和依赖

（2）使用它的方式，推荐第一种，因为第一种更简单：

　　第 1 种：在布局文件中直接使用PhotoView，然后用Picasso加载对应的url到该组件就行了





　　第 2 种：在布局文件中直接使用普通的ImageView，然后用Picasso加载对应的url，到该组件，然后用PhotoViewAttacher转一下就好了！

3.Picasso用法：

可以参考博主的另一篇博客：快速上手Picasso，玩转Android图像加载

4.Andoird圆形头像设置 — 实现相机、相册选择并裁剪尽在一行代码之间（兼容5.0/6.0/7.0）：

可以参考博主的另一篇博客：Andoird圆形头像设置 —— 实现相机、相册选择并裁剪尽在一行代码之间（兼容5.0/6.0/7.0）

6.本章小结

这是篇博文详细的记录了一个【百变Dialog】的编写过程，之前也说过我会用心尽可能的详细的去创作每一篇博文，无论简单还是难（虽然现在的水平只能写点简单的），我都会一点一滴记录它是如何完成的，并且中间会扩展一些东西，包括一些常用到的android开发技术，和我自己开发过程中遇到的问题，我都会提到，因为这样创作的话对于新手来说提升会很大，因为我自己的水平也不高，入Android门不久，没有太多的经验，所以大神勿喷噢O(∩_∩)O，不足之处，望请指正，不胜感激(●’◡’●)

7.Demo下载链接

下载地址为：百变【自定义Dialog】，创建尽在【一行代码】之间