詳解Android登陸界面用戶協(xié)議解決方案
先上一張圖來看要實(shí)現(xiàn)的東西
用戶協(xié)議.png
一般來說每個(gè)app都有這個(gè)用戶協(xié)議閱讀相關(guān)的功能,之前做的都是一個(gè)協(xié)議,也都是單行的,完全沒有復(fù)雜度,可以一個(gè)checkbox加上一個(gè)textview來搞定,那么像圖上這種復(fù)雜的該怎們實(shí)現(xiàn)呢.
來看他有神們不同,有那些難點(diǎn)
1,選中框被文字包裹,單純的checkbox和textview無法實(shí)現(xiàn),因?yàn)檫x中框會(huì)在文字左方
2,協(xié)議文件有很多,不定項(xiàng),文件是服務(wù)器返回的,而且每個(gè)文件中間都會(huì)有一個(gè)顏色不一樣的點(diǎn)隔開
3,為每個(gè)文件都有點(diǎn)擊事件,點(diǎn)擊文件會(huì)產(chǎn)看對(duì)應(yīng)的詳情.....
其實(shí)這樣一看很多人都知道可以用textview的span來搞定,算盤的想過內(nèi)容就不復(fù)習(xí)了,直接上代碼
首先模擬一個(gè)協(xié)議數(shù)據(jù),創(chuàng)建一個(gè)是否閱讀的變量
String[] protocols = { "《創(chuàng)客中心產(chǎn)品認(rèn)購合同》", "《創(chuàng)客中心注冊(cè)申請(qǐng)合同》", "《創(chuàng)客中心系統(tǒng)服務(wù)合同》", "《創(chuàng)客中心服務(wù)合同》", "《代理協(xié)議》" }; private boolean isChecked;
然后我們?yōu)楦阋粋€(gè)字符串,第一位來個(gè)空格作為圖片的替換
接著我們創(chuàng)建一個(gè)該字符串的SpannableStringBuilder,然后調(diào)用setIconSapn方法為該字符串的第一個(gè)字符替換成圖標(biāo)(默認(rèn)為位選中狀態(tài)),setIconSapn方法在下面
然后我們?yōu)榈谝粋€(gè)字符位置設(shè)置一個(gè)點(diǎn)擊事件imagClick ,根據(jù)對(duì)應(yīng)的選中狀態(tài)做圖標(biāo)的變化
final String string = " 已閱讀并同意"; //圖標(biāo)(默認(rèn)位選中) spannableStringBuilder = new SpannableStringBuilder(string); setIconSapn(spannableStringBuilder, R.mipmap.app_login_unchecked); //選擇按鈕的點(diǎn)擊事件 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,因?yàn)樵撐淖执嬖趽Q行,系統(tǒng)的ImageSpan圖標(biāo)無法進(jìn)行居中,所以我們自定義一個(gè)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()方法,該方法中 會(huì)根據(jù)傳入的drawable ID ,獲取該id對(duì)應(yīng)的 // drawable的流對(duì)象,并最終獲取drawable對(duì)象 Drawable drawable = getDrawable(); //調(diào)用imageSpan中的方法獲取drawable對(duì)象 canvas.save(); //獲取畫筆的文字繪制時(shí)的具體測(cè)量數(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) { //此處加入判斷, 如果是自定義的居中對(duì)齊 //與文字的中間線對(duì)齊(這種方式不論是否設(shè)置行間距都能保障文字的中間線和圖片的中間線是對(duì)齊的) // 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é)議組,挨個(gè)添加到之前的string中,為每個(gè)協(xié)議設(shè)置為藍(lán)色,并設(shè)置點(diǎn)擊事件,最后返回最終的SpannableStringBuilder (先添加點(diǎn)擊事件,否則前景色會(huì)被點(diǎn)擊事件的顏色淡化)
for (int i = 0; i < protocols.length; i++) { final String protocol = protocols[i]; SpannableStringBuilder protocolStringBuild = new SpannableStringBuilder(protocol); //協(xié)議 //點(diǎn)擊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); //點(diǎn) 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
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Android 用RxBinding與RxJava2實(shí)現(xiàn)短信驗(yàn)證碼倒計(jì)時(shí)功能
這篇文章主要介紹了Android 用RxBinding與RxJava2實(shí)現(xiàn)短信倒計(jì)時(shí)功能示例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-10-10android ListView內(nèi)數(shù)據(jù)的動(dòng)態(tài)添加與刪除實(shí)例代碼
ListView內(nèi)數(shù)據(jù)的動(dòng)態(tài)添加與刪除2013-03-03android自定義view實(shí)現(xiàn)鐘表效果
這篇文章主要為大家詳細(xì)介紹了android自定義view實(shí)現(xiàn)鐘表效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-12-12使用android-apktool來逆向(反編譯)APK包方法介紹
這篇文章主要介紹了使用android-apktool來逆向(反編譯)APK包方法介紹,本文講解了版本問題、使用apktool、反編譯decode、rebuild重打包等內(nèi)容,需要的朋友可以參考下2015-04-04Android App開發(fā)中Gradle構(gòu)建過程的配置方法
這篇文章主要介紹了Android App開發(fā)中Gradle構(gòu)建過程的配置方法,包括在Gradle中配置manifest的方法,需要的朋友可以參考下2016-06-06Android獲取網(wǎng)絡(luò)圖片并顯示的方法
這篇文章主要為大家詳細(xì)介紹了Android獲取網(wǎng)絡(luò)圖片并顯示的方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-11-11