先上一張圖來看要實現(xiàn)的東西

用戶協(xié)議.png

一般來說每個app都有這個用戶協(xié)議閱讀相關(guān)的功能,之前做的都是一個協(xié)議,也都是單行的,完全沒有復(fù)雜度,可以一個checkbox加上一個textview來搞定,那么像圖上這種復(fù)雜的該怎們實現(xiàn)呢.
來看他有神們不同,有那些難點

1,選中框被文字包裹,單純的checkbox和textview無法實現(xiàn),因為選中框會在文字左方
2,協(xié)議文件有很多,不定項,文件是服務(wù)器返回的,而且每個文件中間都會有一個顏色不一樣的點隔開
3,為每個文件都有點擊事件,點擊文件會產(chǎn)看對應(yīng)的詳情
.....

其實這樣一看很多人都知道可以用textview的span來搞定,算盤的想過內(nèi)容就不復(fù)習(xí)了,直接上代碼

首先模擬一個協(xié)議數(shù)據(jù),創(chuàng)建一個是否閱讀的變量

    String[] protocols = {
            "《創(chuàng)客中心產(chǎn)品認(rèn)購合同》",
            "《創(chuàng)客中心注冊申請合同》",
            "《創(chuàng)客中心系統(tǒng)服務(wù)合同》",
            "《創(chuàng)客中心服務(wù)合同》",
            "《代理協(xié)議》"
    };
  private boolean isChecked;

然后我們?yōu)楦阋粋€字符串,第一位來個空格作為圖片的替換
接著我們創(chuàng)建一個該字符串的SpannableStringBuilder,然后調(diào)用setIconSapn方法為該字符串的第一個字符替換成圖標(biāo)(默認(rèn)為位選中狀態(tài)),setIconSapn方法在下面
然后我們?yōu)榈谝粋€字符位置設(shè)置一個點擊事件imagClick ,根據(jù)對應(yīng)的選中狀態(tài)做圖標(biāo)的變化

final String string = "  已閱讀并同意";
        //圖標(biāo)(默認(rèn)位選中)
        spannableStringBuilder = new SpannableStringBuilder(string);
        setIconSapn(spannableStringBuilder, R.mipmap.app_login_unchecked);
        //選擇按鈕的點擊事件
        ClickableSpan imagClick = new ClickableSpan() {
            @Override
            public void onClick(View widget) {
                //顯示協(xié)議內(nèi)容
                if (isChecked) {
                    setIconSapn(spannableStringBuilder, R.mipmap.app_login_unchecked);
                } else {
                    setIconSapn(spannableStringBuilder, R.mipmap.app_login_checked);
                }
                isChecked = !isChecked;
                mView.setProtocl(spannableStringBuilder);
            }

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

setIconSapn方法

  /**
     * 設(shè)置徐澤狀態(tài)圖標(biāo)
     *
     * @param spannableStringBuilder
     * @param resId
     */
    private void setIconSapn(SpannableStringBuilder spannableStringBuilder, int resId) {
        MyImageSpan imageSpan = new MyImageSpan(mContext, BitmapFactory.decodeResource(mView.getResources(), resId), 2);
        spannableStringBuilder.setSpan(imageSpan, 0, 1, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
    }

這里可以看到我沒有用系統(tǒng)的ImageSpan,因為該文字存在換行,系統(tǒng)的ImageSpan圖標(biāo)無法進(jìn)行居中,所以我們自定義一個ImageSpan,重寫draw方法,解決了該問題,代碼如下

    @Override
    public void draw(Canvas canvas, CharSequence text, int start, int end, float x, int top, int y, int bottom,
                     Paint paint) {

        //draw 方法是重寫的ImageSpan父類 DynamicDrawableSpan中的方法，在DynamicDrawableSpan類中，雖有g(shù)etCachedDrawable()，
        // 但是私有的，不能被調(diào)用，所以調(diào)用ImageSpan中的getrawable()方法，該方法中 會根據(jù)傳入的drawable ID ，獲取該id對應(yīng)的
        // drawable的流對象，并最終獲取drawable對象
        Drawable drawable = getDrawable(); //調(diào)用imageSpan中的方法獲取drawable對象
        canvas.save();

        //獲取畫筆的文字繪制時的具體測量數(shù)據(jù)
        Paint.FontMetricsInt fm = paint.getFontMetricsInt();

        //系統(tǒng)原有方法，默認(rèn)是Bottom模式)
        int transY = bottom - drawable.getBounds().bottom;
        if (mVerticalAlignment == ALIGN_BASELINE) {
            transY -= fm.descent;
        } else if (mVerticalAlignment == ALIGN_FONTCENTER) {    //此處加入判斷， 如果是自定義的居中對齊
            //與文字的中間線對齊（這種方式不論是否設(shè)置行間距都能保障文字的中間線和圖片的中間線是對齊的）
            // y+ascent得到文字內(nèi)容的頂部坐標(biāo)，y+descent得到文字的底部坐標(biāo)，（頂部坐標(biāo)+底部坐標(biāo)）/2=文字內(nèi)容中間線坐標(biāo)
            transY = ((y + fm.descent) + (y + fm.ascent)) / 2 - drawable.getBounds().bottom / 2;
        }

        canvas.translate(x, transY);
        drawable.draw(canvas);
        canvas.restore();
    }

緊接著我們遍歷拿到的協(xié)議組,挨個添加到之前的string中,為每個協(xié)議設(shè)置為藍(lán)色,并設(shè)置點擊事件,最后返回最終的SpannableStringBuilder (先添加點擊事件,否則前景色會被點擊事件的顏色淡化)

 for (int i = 0; i < protocols.length; i++) {
            final String protocol = protocols[i];
            SpannableStringBuilder protocolStringBuild = new SpannableStringBuilder(protocol);
            //協(xié)議
            //點擊span
            final int finalI = i;
            ClickableSpan clickableSpan = new ClickableSpan() {
                @Override
                public void onClick(View widget) {
                    //顯示協(xié)議內(nèi)容
                    mView.showProtocol(protocol, finalI, protocols.length);
                }

                @Override
                public void updateDrawState(TextPaint ds) {
                    super.updateDrawState(ds);
                    ds.setUnderlineText(false);
                    ds.setColor(Color.WHITE);
                }
            };
            protocolStringBuild.setSpan(clickableSpan, 0, protocol.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
            //前景
            ForegroundColorSpan foregroundColorSpan = new ForegroundColorSpan(mView.getResources().getColor(R.color.colorPrimary));
            protocolStringBuild.setSpan(foregroundColorSpan, 0, protocol.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
            spannableStringBuilder.append(protocolStringBuild);
            //點
            if (i != protocols.length - 1) {
                SpannableStringBuilder dotStringBuild = new SpannableStringBuilder("、");
                ForegroundColorSpan dotSpan = new ForegroundColorSpan(mView.getResources().getColor(R.color.color_66));
                dotStringBuild.setSpan(dotSpan, 0, 1, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
                spannableStringBuilder.append(dotStringBuild);
            }
        }
        return spannableStringBuilder;

最后上一張效果圖,不知為何錄屏相當(dāng)不清晰

協(xié)議.gif