Android 登录按钮上方显示View

252 阅读1分钟

本文已参与「新人创作礼」活动,一起开启掘金创作之路。

我们有时候可以看到一些app 的登录按钮上会有一些特殊文字,比如满减啊,活动之类的小标签悬浮在登录按钮上。那这种如何实现呢?

设计效果

image.png

实现方式

  1. 使用动态XML布局的方式设计整体布局
/**
     * 动态添加控件
     *
     * @param authRegisterXmlConfig 自定义布局,可以设置控件的位置和相关处理逻辑
     */
public void addAuthRegisterXmlConfig(UMAuthRegisterXmlConfig authRegisterXmlConfig)

初始化UMAuthRegisterXmlConfig类时需要先调静态内部类Builder()里面的setLayout()方法,传入layoutUMAbstractPnsViewDelegate类回调,接着调用Builder获得UMAuthRegisterXmlConfig对象.

  1. UMAbstractPnsViewDelegate类的onViewCreated(View view){...}的回调中添加如下代码:
view.postDelayed({
    loginView = (view.parent as ViewGroup).findViewById(com.mobile.auth.R.id.authsdk_login_view)
    val vp = loginView?.parent
    if (vp is RelativeLayout) {
        val loginWelfare =
            view.findViewById<TextView>(R.id.tv_login_welfare_tips)
        if (view is ViewGroup) view.removeView(loginWelfare)
        vp.addView(loginWelfare)
        val lp = loginWelfare.layoutParams
        if (lp is RelativeLayout.LayoutParams) {
            lp.width = ViewGroup.LayoutParams.WRAP_CONTENT
            lp.height = ViewGroup.LayoutParams.WRAP_CONTENT
            lp.addRule(
                RelativeLayout.ALIGN_END,
                loginView?.id!!
            )
            lp.addRule(
                RelativeLayout.ALIGN_BOTTOM,
                loginView?.id!!
            )
            lp.rightMargin = 0
            lp.bottomMargin = 42.idp()
            lp.topMargin = 0
            loginWelfare.layoutParams = lp
        }
    }
}, 500)

其中
R.id.authsdk_login_view 是“一键登录按钮”的ID
R.id.tv_login_welfare_tips 是自定义View中需要显示在“一键登录按钮”上面的View ID

实现过程大致是先移除再添加----先从自定义layout中移除(因为自定义View在一键登录按钮的底部,需要移除, 也可以LayoutInflater.from(view.context).inflate()获取这个View)然后添加到“一键登录按钮”同一个ViewGroup中(会在顶部),这样就实现了在“一键登录按钮”上方显示View的目的。

总结

没有一个人是靠运气成功的,他的背后都有很多辛酸故事!