悟已往之不谏,知来者之可追。 — —陶渊明
周末在家看斗鱼直播,登录账号时发现斗鱼的加载框背景挺好看的,故有了下文。 斗鱼-效果图(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属性,色值为白色,此文件只是随便测试使用,具体使用时另请更换。
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只是随便抠了个图,抠的很丑,重点放在整体效果上。 效果图: 以上所述,乃鄙人愚见,恐难入法眼;如有高见,望莫辞辛劳,请不吝赐教。