- 1、功能描述
- 2、效果图
- 3、如何使用
- 3.1、 Android Studio导入方法
- 3.2、 项目中如何使用
- 3.2.1、布局中使用
- 3.2.2、在代码中使用
- 3.2.3、属性介绍
- 4、 实现原理
- 4.1、需求分析
- 4.2、代码封装
- 4.3、总结
- 5、更新日志
SuperTextView是一个功能强大的View，可以满足日常大部分布局样式，开发者可已自行组合属性配置出属于自己风格的样式!可能描述起来没有概念，还是直接看效果图吧！
简化版 CommonTextView只是逻辑简化，其实功能并不差少哦，有兴趣的可以看看
如果觉得对你有用的话，点一下右上的星星赞一下吧!
先在项目根目录的 build.gradle 的 repositories 添加:
allprojects {
repositories {
...
maven { url "https://jitpack.io" }
}
}
然后在dependencies添加:
dependencies {
...
compile 'com.github.lygttpod:SuperTextView:1.1.2'
}
<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 开启水波效果
/**
* 可以通过链式设置大部分常用的属性值
*/
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("")
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.with(this)
.load(url)
.placeholder(R.drawable.head_default)
.into((ImageView) superTextView.getView(SuperTextView.leftImageViewId));
| 属性名 | 字段 | 描述 |
|---|---|---|
| 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 | 背景资源 |
黑格尔曾说过：存在即合理。SuperTextView的出现应该就是某种需求下的产物。
在开发项目的过程中你会发现有很多页面的布局都是类似的，就比如说常见的设置页面，基本上都是图标+文字+图标的格式，而且出现的频率都很高，如果不做处理势必会写很多无用的代码降低开发效率，正因为如此我们为什么不把这一类view统一封装起来呐（其实就是程序猿的懒惰，哈哈），有了这个想法就开始调研市场上主流应用的显示样式，经过调研总结出一套显示方案涵盖了市面上90%以上的布局样式，目的是在以后的使用中快速高效的开发。
在介绍封装之前先说一句题外话，其实任何功能的封装并不难，还是看你愿不愿意花时间去做，及时是简单的功能真正实现起来的时候还是会或多或少的遇到一些问题，发现问题解决问题的过程其实就是进步的过程。好了，废话不多说，下边看代码。
首先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();
}
}
});
}
以上只是源码中的部分方法拿出来供分析使用，看了之后是不是感觉实现其实很简单，赶紧自己着手实现一个吧！
想必看到这里的小伙伴已经对这个库的源码实现方式了解了，这里只是把实现的流程给大家介绍了一下，我又对这个库做了一个简化版的处理，有兴趣的小伙伴可以去读读源码哦，发现哪里写的不妥的地方还请指正。
- 上下分割线添加单独设置左右边距的参数
1、SuperTextVIew配置方法如下:下列两种方式都是单独使用
//方法一
stv:sTopLineMarginLeft="10dp"
stv:sTopLineMarginRight="0dp"
stv:sBottomLineMarginLeft="10dp"
stv:sBottomLineMarginRight="0dp"
//方法二
stv:sBothLineMarginLeft="10dp"
stv:sBothLineMarginRight="0dp"
2、CommonTextView配置方法如下：下列两种方式都是单独使用
//方法一
ctv:cTopDividerLineMarginLeft="10dp"
ctv:cTopDividerLineMarginRight="0dp"
ctv:cBottomDividerLineMarginLeft="10dp"
ctv:cBottomDividerLineMarginRight="0dp"
//方法二
ctv:cBothDividerLineMarginLeft="10dp"
ctv:cBothDividerLineMarginRight="0dp"
- 1、SuperTextview和CommonTextview新增点击时候自定义选中和默认背景效果
sBackgroundDrawableRes="@drawable/selector_red"
cBackgroundDrawableRes="@drawable/selector_red"
- 2、CommonTextview新增中间布局左对齐属性
两个属性配合使用
ctv:cIsCenterAlignLeft="true"
ctv:cCenterViewMarginLeft="200dp"
- 修复SuperTextView和CommonTextView点击事件被子View消耗掉的bug（具体使用请参考文档）
- SuperTextView新增左右图标可自定义大小的功能
stv:sRightIconWidth="30dp"
stv:sRightIconHeight="30dp"
stv:sLeftIconWidth="30dp"
stv:slefticonHeight="30dp"
- 修复CommonTextView点击事件无效的bug
- CommonTextView新增支持加载网络图片
- 新增设置分割线颜色和宽度的方法
- 新增简化版CommonTextView
- 新增左右两边图片支持常用三方库加载网络图片
- 修复文字内容过多，超过1行的处理，导致两边的文字会引起重叠的bug
- 修复编译版本不同导致无法正常使用的bug
- 功能强大的TextView
如果遇到问题或者好的建议，请反馈到我的邮箱：[email protected] 或者[email protected]
如果觉得对你有用的话，点一下右上的星星赞一下吧!
Copyright 2016 Allen
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent