Android 登录界面用户协议解决方案

先附上实现的效果图，上半部分为未同意状态，下半部分为同意状态；蓝色字体协议部分点击可跳转协议链接。

    一般来说每个app都有这个用户协议阅读相关的功能,之前做的都是一个协议,也都是单行的,完全没有复杂度,可以一个checkBox加上一个textview来搞定,那么像图上这种复杂的该怎们实现呢。这里我们通过SpannableStringBuilder来实现。

一、实现一个基于SpannableStringBuilder的工具类

为了方便日常使用，这里直接实现了一个TextUtils工具类

public class TextUtils {

    public static Builder getBuilder() {
        return new Builder();
    }

    public static class Builder {

        private SpannableStringBuilder strBuilder;

        private Builder() {
            strBuilder = new SpannableStringBuilder();
        }

        public Builder append(CharSequence text) {
            strBuilder.append(text);
            return this;
        }

        public Builder append(CharSequence text, int color) {

            int start = strBuilder.length();
            strBuilder.append(text);
            int end = strBuilder.length();
            strBuilder.setSpan(new ForegroundColorSpan(color), start, end, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
            return this;
        }

        public Builder replace(CharSequence text, int color, String... replaces) {

            strBuilder.append(text);
            for (int i = 0; i < replaces.length; i++) {
                String replace = replaces[i];
                int start = text.toString().indexOf(replace);
                if (start >= 0) {
                    int end = start + replace.length();
                    strBuilder.setSpan(new ForegroundColorSpan(color), start, end, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
                }
            }

            return this;
        }

        public Builder click(CharSequence text, final int color, final OnClickListener onClickListener,String... clickTexts) {

            strBuilder.append(text);

            for (int i = 0; i < clickTexts.length; i++) {

                String clickText = clickTexts[i];
                final int postion=i;
                int start = text.toString().indexOf(clickText);
                if (start >= 0) {
                    int end = start + clickText.length();
                    strBuilder.setSpan(new ClickableSpan() {
                        @Override
                        public void onClick(View view) {
                            if (onClickListener != null) {
                                onClickListener.onClick(postion);
                            }
                        }

                        @Override
                        public void updateDrawState(TextPaint ds) {
                            super.updateDrawState(ds);
                            ds.setColor(color);
                            ds.setUnderlineText(false);
                        }
                    }, start, end, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
                }
            }
            return this;
        }

        private boolean isChecked = false;
        //设置复选框 因为该方法没有调strBuilder.append()，故请务必在调用该方法前保证strBuilder不为空，即调用了前面的方法
        public Builder checkBox(Context context, TextView tv, OnImageClickListener listener){
            setImageSpan(context, strBuilder, R.drawable.xzhhr_icon_circle2x);
            strBuilder.setSpan(new ClickableSpan() {
                @Override
                public void onClick(@NonNull View view) {
                    isChecked = !isChecked;
                    if (isChecked){
                        setImageSpan(context, strBuilder, R.drawable.xzhhr_icon_tick2x);
                        tv.setText(strBuilder);//刷新显示
                        listener.onChecked();
                    } else {
                        setImageSpan(context, strBuilder, R.drawable.xzhhr_icon_circle2x);
                        tv.setText(strBuilder);
                        listener.onUnChecked();
                    }
                }

                @Override
                public void updateDrawState(TextPaint ds) {
                    super.updateDrawState(ds);
                    ds.setColor(Color.WHITE);
                    ds.setUnderlineText(false);
                }
            }, 0, 1, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
            return this;
        }

        public Builder clickInto(TextView tv) {
            tv.setMovementMethod(LinkMovementMethod.getInstance());//设置可点击状态
            tv.setHighlightColor(Color.TRANSPARENT); //设置点击后的颜色为透明
            tv.setText(strBuilder);
            return this;
        }

        public Builder into(TextView tv) {
            tv.setText(strBuilder);
            return this;
        }
    }

    public interface OnClickListener {
        void onClick(int position);
    }

    public interface OnImageClickListener{
        void onChecked();
        void onUnChecked();
    }

    private static void setImageSpan(Context context, SpannableStringBuilder builder, int resourceId){
        MyImageSpan imageSpan = new MyImageSpan(context, resourceId, 2);//居中对齐
        builder.setSpan(imageSpan, 0, 1, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
    }

    public static class MyImageSpan extends ImageSpan{
        //因为这里文字存在换行,系统的ImageSpan图标无法进行居中，所以我们自定义一个ImageSpan,重写draw方法,解决了该问题
        public MyImageSpan(@NonNull Context context, int resourceId, int verticalAlignment) {
            super(context, resourceId, verticalAlignment);
        }

        @Override
        public void draw(@NonNull Canvas canvas, CharSequence text, int start, int end, float x, int top, int y, int bottom, @NonNull Paint paint) {
            Drawable drawable = getDrawable();
            canvas.save();
            //获取画笔的文字绘制时的具体测量数据
            Paint.FontMetricsInt fm = paint.getFontMetricsInt();
            int transY = bottom - drawable.getBounds().bottom;
            if (mVerticalAlignment == ALIGN_BASELINE) {
                transY -= fm.descent;
            } else if (mVerticalAlignment == ALIGN_CENTER) {//自定义居中对齐
                //与文字的中间线对齐（这种方式不论是否设置行间距都能保障文字的中间线和图片的中间线是对齐的）
                // y+ascent得到文字内容的顶部坐标，y+descent得到文字的底部坐标，（顶部坐标+底部坐标）/2=文字内容中间线坐标
                transY = ((y + fm.descent) + (y + fm.ascent)) / 2 - drawable.getBounds().bottom / 2;
            }
            canvas.translate(x, transY);
            drawable.draw(canvas);
            canvas.restore();
        }
    }
}

二、实现具体效果

借助上面的工具类，实现开始的效果图

//\u3000实现占位缩进
<string name="company_partner_protocol">\u3000\u3000我已认真阅读《委托付款协议》的全部内容，同意并接受《隐私政策》全部条款。嘉联账户和合作账户余额提现时，将扣除x%%的服务费；</string>

TextUtils.getBuilder().click(getResources().getString(R.string.company_partner_protocol), getResources().getColor(R.color.blue), new TextUtils.OnClickListener() {
                    @Override
                    public void onClick(int position) {
                        switch (position){
                            case 0:
                                //跳转链接
                                WebviewActivity.newInstance(CompanyPartner2Activity.this, Config.WITHDRAW_AGREEMENT, "");
                                break;
                            case 1:
                                WebviewActivity.newInstance(CompanyPartner2Activity.this, Config.PRIVACY, "隐私政策");
                                break;
                        }
                    }
                }, "《委托付款协议》", "《隐私政策》").checkBox(this,  tv_protocol, new TextUtils.OnImageClickListener() {
            @Override
            public void onChecked() {
                btn_commit.setEnabled(true);
//                ToastUtils.showToast(CompanyPartner2Activity.this, "checked");
            }

            @Override
            public void onUnChecked() {
                btn_commit.setEnabled(false);
//                ToastUtils.showToast(CompanyPartner2Activity.this, "unChecked");
            }
        }).clickInto(tv_protocol);

再分享几个不错的参考文档：

Android登陆界面用户协议解决方案

Android深入浅出系列之实例应用—同意协议CheckBox的使用