Android开发中仿斗鱼弹框的遮罩背景及额外想法“月亮图”

悟已往之不谏,知来者之可追。 — —陶渊明

开发背景

周末在家看斗鱼直播,登录账号时发现斗鱼的加载框背景挺好看的,故有了下文。
斗鱼-效果图(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

只是随便抠了个图,抠的很丑,重点放在整体效果上。
效果图:
在这里插入图片描述
以上所述,乃鄙人愚见,恐难入法眼;如有高见,望莫辞辛劳,请不吝赐教。

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值