文章目錄
1、功能描述
2、效果圖
3、如何使用
3.2.1、佈局中使用
3.2.2、在代碼中使用
3.2.3、屬性介紹
3.1、 Android Studio導入方法
3.2、 項目中如何使用
4、 實現原理
4.1、需求分析
4.2、代碼封裝
4.3、總結
1、功能描述
你還在爲類似設置頁面的樣式(圖+文字+圖)每次寫一大堆佈局文件而煩惱嗎？快來看看SuperTextView吧，這裏有你想要實現的任何樣式，而你要做的僅僅是引入幾行代碼。SuperTextView是一個功能強大的佈局View，可以滿足日常大部分佈局樣式，開發者可以自行組合屬性配置出屬於自己風格的樣式!可能描述起來沒有概念，還是直接看效果圖吧！
2、 效果圖
Paste_Image.png
3、如何使用
Android Studio導入方法，添加Gradle依賴
先在項目根目錄的 build.gradle 的 repositories 添加:
allprojects {
repositories {
...
maven { url "https://jitpack.io" }
}
}然後在dependencies添加:
dependencies {
...
compile 'com.github.lygttpod:SuperTextView:2.0.1'
}3.2、項目中如何使用
3.2.1、佈局中如何使用（示例中只列出部分屬性，開發者可根據具體需求使用其他屬性）
<com.allen.supertextviewlibrary.SuperTextView android:id="@+id/super_tv" android:layout_width="match_parent" android:layout_height="80dp" stv:sLeftBottomTextColor2="@color/colorAccent" stv:sLeftBottomTextString="招商銀行（8888）" stv:sLeftBottomTextString2="限額說明>>" stv:sLeftIconRes="@drawable/bank_zhao_shang" stv:sLeftTopTextString="銀行卡支付" stv:sRightCheckBoxRes="@drawable/circular_check_bg" stv:sRightCheckBoxShow="true" stv:sLineShow="bottom" /> 注意：1、上下的線可以通過 sLineShow 設置:有四種顯示方式 none，top，bottom，both 2、通過設置 sUseRipple=true 開啓水波效果
3.2.2、代碼中如何使用
/**
* 可以通過鏈式設置大部分常用的屬性值
*/
superTextView.setLeftIcon(drawable) .setLeftString("") .setLeftTVColor(0) .setLeftTopString("") .setLeftTopTVColor(0) .setLeftBottomString("") .setLeftBottomTVColor(0) .setLeftBottomString2("") .setLeftBottomTVColor2(0) .setRightString("") .setRightTVColor(0) .setCbChecked(true) .setCbBackground(drawable) .setRightIcon(drawable) .setRightString("") .setRightTVColor(0) .setLeftString("");
點擊事件（可根據需求選擇實現單個或者多個點擊事件，需要配合xml添加是否允許點擊的屬性，詳情見屬性參數的意義）
superTextView.setOnSuperTextViewClickListener(new SuperTextView.OnSuperTextViewClickListener() { @Override public void onSuperTextViewClick () { super.onSuperTextViewClick(); //do something } @Override public void onLeftTopClick () { super.onLeftTopClick(); //do something } @Override public void onLeftBottomClick () { super.onLeftBottomClick(); //do something } @Override public void onLeftBottomClick2 () { super.onLeftBottomClick2(); //do something } });注意：點擊事件需要配合屬性值使用 sLeftTopViewIsClickable= true sLeftBottomViewIsClickable= true sLeftBottomView2IsClickable= true
使用第三方庫(Picasso或者Glide)加載網絡圖片
Picasso.with(this).load(url) .placeholder(R.drawable.head_default) .into((ImageView) superTextView.getView(SuperTextView.leftImageViewId));
3.2.3、屬性說明(以下屬性全部可以通過xml文件配置和代碼進行設置)
| 屬性名 | 字段 | 描述 |
|---|---|---|
| sLeftIconRes | reference | 左邊圖標資源 |
| sRightIconRes | reference | 右邊圖標資源 |
| sLeftIconWidth | dimension | 左邊圖標的寬度 |
| sLeftIconHeight | dimension | 左邊圖標的高度 |
| sRightIconWidth | dimension | 右邊圖標的高度 |
| sRightIconHeight | dimension | 右邊圖標的高度 |
| sRightCheckBoxRes | reference | 右邊CheckBox圖標資源 |
| sLeftTextString | string | 左邊文字字符串 |
| sLeftTopTextString | string | 左上文字字符串 |
| sLeftBottomTextString | string | 左下文字字符串 |
| sLeftBottomTextString2 | string | 左下第二個文字字符串 |
| sCenterTextString | string | 中間文字字符串 |
| sRightTextString | string | 右邊文字字符串 |
| sTopLineMargin | dimension | 頂部橫線的Margin |
| sTopLineMarginLeft | dimension | 頂部橫線的MarginLeft |
| sTopLineMarginRight | dimension | 頂部橫線的MarginRight |
| sBottomLineMargin | dimension | 底部橫線的Margin |
| sBottomLineMarginLeft | dimension | 底部橫線的MarginLeft |
| sBottomLineMarginRight | dimension | 底部橫線的MarginRight |
| sBothLineMargin | dimension | 上下兩條橫線的Margin |
| sBothLineMarginLeft | dimension | 上下兩條橫線的MarginLeft |
| sBothLineMarginRight | dimension | 上下兩條橫線的MarginRight |
| sCenterSpaceHeight | dimension | top和bottom文字間的高度 |
| sLeftIconMarginLeft | dimension | 左邊圖標MarginLeft |
| sLeftTextMarginLeft | dimension | 左邊文字MarginLeft |
| sLeftTopTextMarginLeft | dimension | 左上文字MarginLeft |
| sLeftBottomTextMarginLeft | dimension | 左下文字MarginLeft |
| sLeftBottomTextMarginLeft2 | dimension | 左下第二個文字MarginLeft |
| sRightTextStringRightIconRes | reference | 右邊文字的右邊圖標資源 |
| sRightTextStringRightIconResPadding | dimension | 右邊文字的右邊圖標的Padding |
| sRightIconMarginRight | dimension | 右邊icon的MarginRight |
| sRightTextMarginRight | dimension | 右邊文字的MarginRight |
| sRightCheckBoxMarginRight | dimension | 右邊CheckBox的MarginRight |
| sRightCheckBoxShow | boolean | 右邊的CheckBox是否顯示 |
| sIsChecked | boolean | 是否選中 |
| sUseRipple | boolean | 是否使用點擊出現波紋效果 |
| sLeftTextSize | dimension | 左邊文字的字體大小 |
| sLeftTopTextSize | dimension | 左上文字的字體大小 |
| sLeftBottomTextSize | dimension | 左下文字的字體大小 |
| sLeftBottomTextSize2 | dimension | 左下第二個文字的字體大小 |
| sRightTextSize | dimension | 右邊文字的字體大小 |
| sCenterTextSize | dimension | 中間文字的字體大小 |
| sBackgroundColor | color | 背景顏色 |
| sLeftTextColor | color | 左邊文字顏色 |
| sLeftTopTextColor | color | 左上文字顏色 |
| sLeftBottomTextColor | color | 左下文字顏色 |
| sLeftBottomTextColor2 | color | 左下第二個文字顏色 |
| sRightTextColor | color | 右邊文字顏色 |
| sCenterTextColor | color | 中間文字顏色 |
| sIsSingLines | boolean | 是否單行顯示 |
| sMaxLines | integer | 允許的最大行數 |
| sMaxEms | integer | 允許的最多字數 |
| sLineShow | enum | 分割線的顯示方式none、top、bottom、both |
| sBothLineWidth | dimension | 兩條分割線的寬度 |
| sTopLineWidth | dimension | 上邊分割線的寬度 |
| sBottomLineWidth | dimension | 下邊分割線的寬度 |
| sLineColor | color | 分割線的顏色 |
| sLeftTopViewIsClickable | boolean | 左上view是否可點擊 |
| sLeftBottomViewIsClickable | boolean | 左下view是否可點擊 |
| sLeftBottomView2IsClickable | boolean | 左下第二個view是否可點擊 |
| sBackgroundDrawableRes | reference | 背景資源 |
4、實現原理
4.1、需求分析
黑格爾曾說過：存在即合理。SuperTextView的出現應該就是某種需求下的產物。
在開發項目的過程中你會發現有很多頁面的佈局都是類似的，就比如說常見的設置頁面，基本上都是圖標+文字+圖標的格式，而且出現的頻率都很高，如果不做處理勢必會寫很多無用的代碼降低開發效率，正因爲如此我們爲什麼不把這一類view統一封裝起來吶（其實就是程序猿的懶惰，哈哈），有了這個想法就開始調研市場上主流應用的顯示樣式，經過調研總結出一套顯示方案涵蓋了市面上90%以上的佈局樣式，目的是在以後的使用中快速高效的開發。
4.2、代碼封裝
在介紹封裝之前先說一句題外話，其實任何功能的封裝並不難，還是看你願不願意花時間去做，即使是簡單的功能真正實現起來的時候還是會或多或少的遇到一些問題，發現問題解決問題的過程其實就是進步的過程。好了，廢話不多說，下邊看代碼。
首先SuperTextView 是繼承自 RelativeLayout實現，裏邊所有佈局的添加都是通過Java代碼實現的，事先定義好需要的參數名及類型
下邊只列出部分參數
private int backgroundColor;//背景顏色 private int leftTVColor;//左邊文字顏色 private int leftTopTVColor;//左上文字顏色 private int leftBottomTVColor;//左下文字顏色 private int leftBottomTVColor2;//左下第二個文字顏色 private int rightTVColor;//右邊文字顏色 private int centerTVColor;//中間文字顏色 private boolean isSingLines = true;//是否單行顯示 默認單行 private int maxLines = 1;//最多幾行 默認顯示一行 private int maxEms = 10;//最多幾個字 默認顯示10個漢子 private static final int NONE = 0;
private static final int TOP = 1;
private static final int BOTTOM = 2;
private static final int BOTH = 3;
private static final int DEFAULT = BOTTOM;
然後就是在構造方法裏邊去實現各個方法
public SuperTextView(Context context, AttributeSet attrs) { super(context, attrs); mContext = context; getAttr(attrs); initLayout(); }
我們知道系統控件可以從XML中拿到定義好的屬性值，那麼我們其實也是可以的，首先在attr中定義好相關屬性名及字段類型然後通過AttributeSet去拿到相關屬性值在進行設置
private void getAttr(AttributeSet attrs) { //獲取我們在attr中定義的SuperTextView相關屬性
TypedArray typedArray = mContext.obtainStyledAttributes(attrs, R.styleable.SuperTextView); //下邊展示的各個類型參數的獲取方法，drawable、string、boolean、int、px
leftIconRes = typedArray.getDrawable(R.styleable.SuperTextView_sLeftIconRes);
leftTextString = typedArray.getString(R.styleable.SuperTextView_sLeftTextString);
showCheckBox = typedArray.getBoolean(R.styleable.SuperTextView_sRightCheckBoxShow, false);
lineType = typedArray.getInt(R.styleable.SuperTextView_sLineShow, DEFAULT);
topLineMargin = typedArray.getDimensionPixelSize(R.styleable.SuperTextView_sTopLineMargin, defaultLinePadding); //獲取完之後記得recycle()釋放掉資源
typedArray.recycle();
}接下來就拿一個view爲例進行說明如何動態添加view及設置相關屬性
/**
* 初始化左邊文字
*/
private void initLeftText() {
leftTV = new TextView(mContext);
leftTextParams = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
leftTextParams.addRule(RelativeLayout.CENTER_VERTICAL, TRUE);
leftTextParams.addRule(RelativeLayout.RIGHT_OF, R.id.sLeftIconId);
setMargin(leftTextParams, leftTVMarginLeft, 0, dip2px(mContext, 10), 0);
leftTV.setId(R.id.sLeftTextId);
leftTV.setLayoutParams(leftTextParams);
leftTV.setText(leftTextString); //設置Params的方法抽離出來便於以後統一調用
setTextViewParams(leftTV, isSingLines, maxLines, maxEms); //設置字體顏色的方法抽離出來便於以後統一調用
setTextColor(leftTV, leftTVColor); //設置字體大小的方法抽離出來便於以後統一調用
setTextSize(leftTV, leftTVSize); //調用addView方法把我們動態創建的view添加到佈局中
addView(leftTV);
}初始化完view之後就是要暴露一些方法供外部人員使用了（部分代碼示例）
在這裏我們返回SuperTextView對象是爲了實現鏈式調用
/** * 獲取checkbox狀態 * @return 返回選擇框當前選中狀態 */
public boolean getCbisChecked() { boolean isChecked = false; if (rightCheckBox != null) { isChecked = rightCheckBox.isChecked(); } return isChecked; }
/**
* 設置左邊文字的顏色 * @param textColor 文字顏色值 * @return 返回對象 */
public SuperTextView setLeftTVColor(int textColor) { leftTVColor = textColor; if (leftTV == null) { initLeftText(); } else { leftTV.setTextColor(textColor); } return this; }
最後就是一些回調方法的使用，以點擊事件爲例
/** * 點擊事件接口 * 這裏沒有使用interface是因爲有些方法我們不是一定要實現的 * 用到哪個方法再去重寫方法就可以了 */
public static class OnSuperTextViewClickListener { public void onSuperTextViewClick() { } public void onLeftTopClick() { } public void onLeftBottomClick() { } public void onLeftBottomClick2() { } }
相關的set方法拿到OnSuperTextViewClickListener對象
public SuperTextView setOnSuperTextViewClickListener(OnSuperTextViewClickListener listener) { onSuperTextViewClickListener = listener; return this; }
初始化view的時候在各個view的點擊事件中添加相應的回調方法就行了
if(mLeftTopViewIsClickable) { leftTopTV.setOnClickListener(new OnClickListener() { @Override public void onClick(View view) { if (onSuperTextViewClickListener != null) { onSuperTextViewClickListener.onLeftTopClick(); } } }); }
以上只是源碼中的部分方法拿出來供分析使用，看了之後是不是感覺實現其實很簡單，趕緊自己着手實現一個吧！
4.3、總結
想必看到這裏的小夥伴已經對這個庫的源碼實現方式瞭解了，這裏只是把實現的流程給大家介紹了一下，我又對這個庫做了一個簡化版的處理，有興趣的小夥伴可以去讀讀源碼哦，發現哪裏寫的不妥的地方還請指正。