悟已往之不谏,知来者之可追。 — —陶渊明
开发背景
周末在家看斗鱼直播,登录账号时发现斗鱼的加载框背景挺好看的,故有了下文。
斗鱼-效果图(ios手机截图,android手机没有看到这个背景):
看到截图,若有所思。
觉得shape中的gradient应该可以实现这种渐变的效果,先随便写写看。
经过多次调试渐变颜色及渐变半径,得到
最终效果图(视频转GIF很头疼,试了很多个效果都不好,凑合随便看看):
效果还可以吧,具体斗鱼是怎么实现的没有研究。
实现代码
shape文件:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:endColor="#424242"
android:startColor="#FFFFFF"
android:centerX="0.5"
android:centerY="0.5"
android:gradientRadius="860"
android:type="radial" />
</shape>
shape文件的效果图:
核心代码就这么多!
还有就是,dialog的背景设置,弹出时设置为渐变背景,关闭时重置为原来背景。
Java代码:
@Override
public void onCancel(DialogInterface dialogInterface) {
//获取页面的窗口,并设置背景,设置为原来的白色背景
Window windowActivity = mActivity.getWindow();
Drawable drawable = ContextCompat.getDrawable(mActivity,R.drawable.bg_dialog_close);
windowActivity.setBackgroundDrawable(drawable);
}
/**
* 窗口设置
*/
public void windowSetting(){
//获取对话框的窗口,并设置窗口弹出关闭的动画
Window windowDialog = getWindow();
windowDialog.setWindowAnimations(R.style.DialogWindowAnim);
//获取页面的窗口,并设置背景,设置为渐变效果
Window windowActivity = mActivity.getWindow();
Drawable drawableActivity = ContextCompat.getDrawable(mActivity,R.drawable.bg_dialog_open);
windowActivity.setBackgroundDrawable(drawableActivity);
}
此处是自定义的dialog,继承自Dialog,并设置了弹框关闭的监听事件-setOnCancelListener(this)。
在show()方法之后调用了windowSetting(),用来设置窗口动画及渐变背景。在弹框关闭监听事件的回调方法中,重新设置页面背景。
备注:bg_dialog_open便是上述的核心代码shape文件,bg_dialog_close是页面默认背景,也是一个shape文件,代码中只有solid属性,色值为白色,此文件只是随便测试使用,具体使用时另请更换。
额外想法-Moon
shape简直就是一个开发利器,简直不要太爽,随便一修改,一幅"诗人举头望月图"跃然而出。
只是随便修改了颜色,半径及圆心,代码如下:
shape文件:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:endColor="#000000"
android:startColor="#DFDFDF"
android:centerColor="#FFFFFF"
android:centerX="0.7"
android:centerY="0.1"
android:gradientRadius="700"
android:type="radial" />
</shape>
诗人李白图片下载地址(百度):
下载图片
http://image.baidu.com/search/down?tn=download&ipn=dwnl&word=download&ie=utf8&fr=result&url=http%3A%2F%2Fpic.616pic.com%2Fys_bnew_img%2F00%2F07%2F87%2FQOYEjZffn1.jpg&thumburl=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D1878199100%2C4225937508%26fm%3D15%26gp%3D0.jpg
只是随便抠了个图,抠的很丑,重点放在整体效果上。
效果图:
以上所述,乃鄙人愚见,恐难入法眼;如有高见,望莫辞辛劳,请不吝赐教。