最近，实现了这么一个功能，本来是将用户的登录注册、退登注销等做成了sdk，便于模块化复用。

这中间涉及到UI，公司多个项目最好是统一这方面的UI，才能实现完全复用。当然，一些小改动还是必要的，如设置状态栏颜色、页面背景等等。所以做了一些简单的UI可配置处理。

class JBUserCenterUIConfig: Serializable {

    // 页面背景
    @ColorInt
    var pageBackgroundColor: Int = 0
    // 页面背景
    var pageBackgroundDrawable: Drawable? = null

    // 状态栏
    @ColorInt
    var pageStatusBarColor: Int = 0
    // 状态栏 深色or浅色 模式（默认深色）
    var isStatusBarDarkMode: Boolean = true

    // 底部导航栏
    @ColorInt
    var pageNavBarColor: Int = 0

    // 标题栏
    @ColorInt
    var pageTitleBarColor: Int = 0

    // card color
    @ColorInt
    var pageCardColor: Int = 0

    // 分割线颜色
    @ColorInt
    var pageCardDividerColor: Int = 0

    // 标题文字
    var pageTitle: String? = ""

    // 标题文字颜色
    @ColorInt
    var pageTitleColor: Int = 0

    // 固定显示文本的颜色
    @ColorInt
    var pageStableTextColor: Int = 0

    // 文本需要透明的颜色
    @ColorInt
    var pageAlphaTextColor: Int = 0

    // 高亮颜色（一般用于确定按钮的背景等）
    @ColorInt
    var pageHighLightColor: Int = 0

    // 左上角返回箭头
    var pageBackArrow: Drawable? = null

    // 透明的指示小箭头
    var pageAlphaLabelArrow: Drawable? = null

    // edit clear icon
    var pageEditClearIcon: Drawable? = null

}

那么在宿主应用即可以实现UI配置

   /**
     * 定制用户中心相关UI(个人信息页、绑定页等)
     */
    private fun generateUserCenterUI() {
        val jbUserConfig = JBUserCenterConfig()
        // 个人信息
        jbUserConfig.userInfoUIConfig = JBUserCenterUIConfig().also {
            it.pageBackgroundDrawable = ResourceManager.getDrawable(R.drawable.app_weather_common_bg)
            it.pageTitleColor = Color.parseColor("#FFFFFF")
            it.pageStatusBarColor = Color.parseColor("#364175")
            it.pageNavBarColor = Color.parseColor("#55629A")
            it.pageCardColor = Color.parseColor("#66000000")
            it.pageCardDividerColor = Color.parseColor("#1aeeeeee")
            it.isStatusBarDarkMode = false

            // 文字
            it.pageTitleColor = Color.parseColor("#FFFFFF")
            it.pageStableTextColor = Color.parseColor("#FFFFFF")
            it.pageAlphaTextColor = Color.parseColor("#99FFFFFF")

            // 图标
            it.pageBackArrow = ResourceManager.getDrawable(R.mipmap.nav_ic_back_white)
            it.pageAlphaLabelArrow = ResourceManager.getDrawable(R.mipmap.icon_arrow_alpha_right)
        }

        // 绑定手机号
        jbUserConfig.bindUIConfig = JBUserCenterUIConfig().also {
            it.pageBackgroundDrawable = ResourceManager.getDrawable(R.drawable.app_weather_common_bg)
            it.pageTitleColor = Color.parseColor("#FFFFFF")
            it.pageStatusBarColor = Color.parseColor("#364175")
            it.pageNavBarColor = Color.parseColor("#55629A")
            it.pageCardColor = Color.parseColor("#66000000")
            it.pageCardDividerColor = Color.parseColor("#1aeeeeee")
            it.isStatusBarDarkMode = false
            // 文字
            it.pageTitleColor = Color.parseColor("#FFFFFF")
            it.pageStableTextColor = Color.parseColor("#FFFFFF")
            it.pageAlphaTextColor = Color.parseColor("#99FFFFFF")
            it.pageHighLightColor = Color.parseColor("#3ABEFF")

            // 图标
            it.pageBackArrow = ResourceManager.getDrawable(R.mipmap.nav_ic_back_white)
            it.pageEditClearIcon = ResourceManager.getDrawable(R.mipmap.icon_edit_clear)
        }
        JBUserCenterUIConfigManager.setJBUserCenterUIConfig(jbUserConfig)
    }

这里做一下延伸记录：动态设置背景

通常，在xml中设置背景

android:background

可以是颜色，图片，shape等。

如果想在代码中动态设置，则要知道相应的api。

1、background对应的动态属性值修改方法是setBackgroundResource

2、setBackgroundResource(@DrawableRes int resid)，可支持颜色，图片，shape等

如setBackgroundResource(R.color.white)

3、拓展一下，跟setBackgroundResource对应的还有：

setBackground(Drawable background)

setBackgroundDrawable(Drawable background)

setBackgroundColor(@ColorInt int color)

前面两种使用Drawable类型设置，Drawable可通过resource.getDrawable(resId)获取资源或者自定义Drawable，第三种支持ColorInt类型。

所以，准确来说，background对应的代码是setBackgroundResource、setBackground、

setBackgroundDrawable、setBackgroundColor。

1. Color.parseColor("#FFFFFF")，返回类型ColorInt.

2. Color.rgb(255,255,255)，返回类型ColorInt.

3. Resources resource = (Resources) getResources();

ColorStateList csl = (ColorStateList) resource.getColorStateList(R.color.white);

遇到因为设置颜色资源类型不正确，导致报错如下：

 java.lang.RuntimeException: Unable to start activity ComponentInfo{com.xxx/com.xxx.activity.JBUserLoginActivity}: android.content.res.Resources$NotFoundException: Resource ID #0xff000000
        at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:3488)
        at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:3635)
        at android.app.servertransaction.LaunchActivityItem.execute(LaunchActivityItem.java:83)
        at android.app.servertransaction.TransactionExecutor.executeCallbacks(TransactionExecutor.java:135)
        at android.app.servertransaction.TransactionExecutor.execute(TransactionExecutor.java:95)
        at android.app.ActivityThread$H.handleMessage(ActivityThread.java:2175)
        at android.os.Handler.dispatchMessage(Handler.java:107)
        at android.os.Looper.loop(Looper.java:237)
        at android.app.ActivityThread.main(ActivityThread.java:7860)
        at java.lang.reflect.Method.invoke(Native Method)
        at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:493)
        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1075)
     Caused by: android.content.res.Resources$NotFoundException: Resource ID #0xff000000
        at android.content.res.ResourcesImpl.getValueForDensity(ResourcesImpl.java:259)
        at android.content.res.Resources.getDrawableForDensity(Resources.java:920)
        at android.content.res.Resources.getDrawable(Resources.java:860)
        at android.content.Context.getDrawable(Context.java:689)
        at android.view.View.setBackgroundResource(View.java:24579)
        at com.xxx.activity.JBUserLoginActivity.onViewInitialized(JBUserLoginActivity.kt:72)
        at com.xxx.Activity.onCreate(KiiBaseActivity.kt:56)
        at android.app.Activity.performCreate(Activity.java:7955)
        at android.app.Activity.performCreate(Activity.java:7944)
        at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1307)
        at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:3463)
        at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:3635) 
        at android.app.servertransaction.LaunchActivityItem.execute(LaunchActivityItem.java:83) 
        at android.app.servertransaction.TransactionExecutor.executeCallbacks(TransactionExecutor.java:135) 
        at android.app.servertransaction.TransactionExecutor.execute(TransactionExecutor.java:95) 
        at android.app.ActivityThread$H.handleMessage(ActivityThread.java:2175) 
        at android.os.Handler.dispatchMessage(Handler.java:107) 
        at android.os.Looper.loop(Looper.java:237) 
        at android.app.ActivityThread.main(ActivityThread.java:7860) 
        at java.lang.reflect.Method.invoke(Native Method) 
        at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:493) 
        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1075) 
 

vscode怎么设置动态背景

1.在vscode插件中下载background插件

2.选择-》首页-》首选项-》设置 or ctrl+,

3.在设置中搜索background

点击进入settings.json文件

4.设置配置（可以直接粘贴，图片路劲修改成你本地的图片即可）

{
    "diffEditor.ignoreTrimWhitespace": false,  //
    "background.useDefault": false,  //是否使用默认背景
    "background.enabled": true,   //是否启动
    "background.customImages": [  //这个数组里面只能存放最多三张图片

        //注释：如果图片是本地就使用本地地址，写法参照我这样就好了
        //      如果图片是网络上的就直接使用网址图片地址


        // "file:///H:/image/BB374F7F-66FB-4e55-A604-E14613493544.png",
        // "file:///H:/image/Dingtalk_20201220114712.jpg",
        // "file:///H:/image/Dingtalk_20201220114744.jpg",
        "file:///H:/image/Dingtalk_20201220114815.jpg",
        // "file:///H:/image/Dingtalk_20201220114759.jpg",
        // "file:///H:/image/Dingtalk_20201220114854.jpg",
        // "file:///H:/image/77B6C122-B2DC-45ce-A4EF-6A8762A564A0.png",
    ],
    "background.style": {  //背景图片的样式
        "content": "''",
        "pointer-events": "none",
        "position": "absolute",
        "z-index": "99999",
        "width": "100%",
        "height": "100%",
        "background-position": "100% 100%",
        "background-repeat": "no-repeat",
        "opacity": 0.25
    },

}

5. 如何设置成动态的背景图

我测试过，除了图片的格式之外，其他的格式都无法生成背景图片，所以，想要酷炫的动态背景，可以使用能生成动态图片的软件。
方法：使用剪辑软件，剪辑一段酷炫视频片段，然后生成".gif"后缀的图片即可。

装逼必备canvas

canvas简单来说就是一块画布，通过JavaScript来进行绘制，可以用来制作各种特效

那么如何利用canvas来制作一个动态的网页背景呢，就像这样子：

首先，我们就需要在我们的html页面中创建一个canvas

<div id="background">
	<canvas id="canvas"></canvas>
</div>

对，你没有看错，创建一个canvas就这么简单，甚至可以更简单，你只需要除去外面的div，只写一个canvas就行了…

当然了，我这里的div添加了是用来设置背景的

然后就是简单的css设置了，只需要设置一下div的背景图片就行了

#background {
    background: url("background.jpg");
    background-size: cover;
    opacity: 0.8;
}

简单介绍一下background-size的属性吧

那么简单的html+css之后，就到了我们的核心，JavaScript代码了，至于每句代码的作用，我都写到注释中了，大家自己看吧，我就不再重复的介绍了一遍了

<script>
	// 设置div背景的宽高
	background = document.getElementById("background")
	background.style.width = innerWidth + 'px'
	background.style.height = innerHeight + 'px'
	
	// 获取canvas对象
	var canvas = document.getElementById("canvas")
	// 获取画笔
	var ctx = canvas.getContext("2d")
	
	// 设置canvas宽高
	canvas.height = innerHeight
	canvas.width = innerWidth
	
	// 定义一个粒子数组
	var particlesArray = []
	// 定义页面内粒子的数量
	var count = parseInt(canvas.width / 80 * canvas.height / 80)
	
	
	// 定义粒子类
	class Particle {
	    constructor(x, y) {
	        this.x = x
	        this.y = y
	        // x，y轴的移动速度  -0.5 -- 0.5
	        this.directionX = Math.random() - 0.5
	        this.directionY = Math.random() - 0.5
	    }
	
	    // 更新点的坐标
	    update() {
	        this.x += this.directionX
	        this.y += this.directionY
	    }
	
	    // 绘制粒子
	    draw() {
	        ctx.beginPath()
	        ctx.arc(this.x, this.y, 2, 0, Math.PI * 2)
	        ctx.closePath()
	        ctx.fillStyle = "white"
	        ctx.fill()
	    }
	}
	
	// 创建粒子
	function createParticle() {
	    // 生成一个点的随机坐标
	    var x = Math.random() * innerWidth
	    var y = Math.random() * innerHeight
	
	    particlesArray.push(new Particle(x, y))
	}
	
	// 处理粒子
	// 先更新坐标，再绘制出来
	function handleParticle() {
	    for(var i = 0; i < particlesArray.length; i++) {
	        var particle = particlesArray[i]
	        particle.update()
	        particle.draw()
	        // 超出范围就将这个粒子删除
	        if(particle.x < 0 || particle.x > canvas.width || particle.y < 0 || particle.y > canvas.height) {
	            particlesArray.splice(i, 1)
	        }
	
	        // 绘制两个点之间的连线
	        for(var j = i + 1; j < particlesArray.length; j++) {
	            dx = particlesArray[j].x - particlesArray[i].x
	            dy = particlesArray[j].y - particlesArray[i].y
	            dist = Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2))
	            if(dist < 100) {
	                ctx.beginPath()
	                ctx.strokeStyle = "rgba(255, 255, 255, " + (1 - dist / 100)
	                ctx.moveTo(particlesArray[i].x, particlesArray[i].y)
	                ctx.lineTo(particlesArray[j].x, particlesArray[j].y)
	                ctx.closePath()
	                ctx.lineWidth = 1
	                ctx.stroke()
	            }
	        }
	    }
	}
	
	function draw() {
	    // 首先清空画布
	    ctx.clearRect(0, 0, canvas.width, canvas.height)
	    // 如果粒子数量小于规定数量，就生成新的粒子
	    if(particlesArray.length < count) {
	        createParticle()
	    }
	
	    // 处理粒子
	    handleParticle()
	}
	
	// 设置定时器
	setInterval(draw, 10)
	
</script>

在页面中加入这部分js代码后，我们就可以看到动态的背景效果了。