TextView是Android中最常用、最基础的组件,通过他派生出了一系列的组件。
SuperTextView
SuperTextView是一个非常强大的View,通过自由的属性设置,可以配置出各式各样的布局效果
。SuperButton拥有shape文件的大部分属性,无需配置XML文件就可以轻松实现shape的效果
。
- 演示效果
- 使用案例
<com.xuexiang.xui.widget.textview.supertextview.SuperTextView
android:id="@+id/super_tv"
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_gravity="center"
android:background="@color/colorAccent"
app:sCenterBottomTextString="中下"
app:sCenterTextString="中"
app:sCenterTopTextString="中上"
app:sDividerLineType="both"
app:sLeftBottomTextString="左下"
app:sLeftTextString="左中文字"
app:sLeftTopTextString="左上"
app:sRightBottomTextString="右下"
app:sRightTextString="右中"
app:sRightTopTextString="右上" />
<com.xuexiang.xui.widget.textview.supertextview.SuperTextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginTop="50dp"
app:sDividerLineType="both"
app:sLeftTextString="意见反馈"
app:sRightIconRes="@drawable/icon_arrow_right_red" />
<com.xuexiang.xui.widget.textview.supertextview.SuperButton
android:id="@+id/btn_dialog"
style="@style/SuperButton.Blue"
android:layout_margin="20dp"
android:text="弹窗" />
- 属性表: (SuperTextView)
属性名 | 类型 | 默认值 | 备注 |
---|---|---|---|
sLeftTextString | string | / | 左边文字字符串 |
sLeftTopTextString | string | / | 左上文字字符串 |
sLeftBottomTextString | string | / | 左下文字字符串 |
sCenterTextString | string | / | 中间文字字符串 |
sCenterTopTextString | string | / | 中上文字字符串 |
sCenterBottomTextString | string | / | 中下文字字符串 |
sRightTextString | string | / | 右边文字字符串 |
sRightTopTextString | string | / | 右上文字字符串 |
sRightBottomTextString | string | / | 右下文字字符串 |
sLeftTextColor | color | #FF373737 | 左边文字颜色 |
sLeftTopTextColor | color | #FF373737 | 左上文字颜色 |
sLeftBottomTextColor | color | #FF373737 | 左下文字颜色 |
sCenterTextColor | color | #FF373737 | 中间文字颜色 |
sRightTextColor | color | #FF373737 | 右边文字颜色 |
sLeftTextSize | dimension | 15sp | 左边字体大小 |
sCenterTextSize | dimension | 15sp | 中间字体大小 |
sRightTextSize | dimension | 15sp | 右边字体大小 |
sLeftTextIsBold | boolean | false | 左边文字是否加粗 |
sCenterTextIsBold | boolean | false | 中间文字是否加粗 |
sRightTextIsBold | boolean | false | 右边文字是否加粗 |
sLeftLines | integer | / | 左边文字显示行数 |
sCenterLines | integer | / | 中间文字显示行数 |
sRightLines | integer | / | 右边文字显示行数 |
sLeftMaxEms | integer | / | 左边文字显示个数 |
sCenterMaxEms | integer | / | 中间文字显示个数 |
sRightMaxEms | integer | / | 右边文字显示个数 |
sLeftViewGravity | enum | Center(left_center、right_center) | 左边文字对齐方式 |
sCenterViewGravity | enum | Center(left_center、right_center) | 中间文字对齐方式 |
sRightViewGravity | enum | Center(left_center、right_center) | 右边文字对齐方式 |
sLeftTextGravity | enum | left(center、right) | 左边TextView内文字对齐方式 |
sCenterTextGravity | enum | left(center、right) | 中间TextView内文字对齐方式 |
sRightTextGravity | enum | left(center、right) | 右边TextView内文字对齐方式 |
sLeftTvDrawableLeft | reference | / | 左边TextView左侧的drawable |
sLeftTvDrawableRight | reference | / | 左边TextView右侧的drawable |
sCenterTvDrawableLeft | reference | / | 中间TextView左侧的drawable |
sRightTvDrawableLeft | reference | / | 右边TextView左侧的drawable |
sLeftTvDrawableWidth | dimension | / | 左边TextView的drawable的宽度 |
sLeftTvDrawableHeight | dimension | / | 左边TextView的drawable的高度 |
sCenterTvDrawableWidth | dimension | / | 中间TextView的drawable的宽度 |
sRightTvDrawableWidth | dimension | / | 右边TextView的drawable的宽度 |
sTextViewDrawablePadding | dimension | 10dp | TextView的drawable对应的Padding |
sLeftViewWidth | dimension | / | 左边textView的宽度 为了中间文字左对齐的时候使用 |
sTopDividerLineMarginLR | dimension | 0dp | 上边分割线的MarginLeft和MarginRight |
sTopDividerLineMarginLeft | dimension | 0dp | 上边分割线的MarginLeft |
sTopDividerLineMarginRight | dimension | 0dp | 上边分割线的MarginRight |
sBottomDividerLineMarginLR | dimension | 0dp | 下边分割线的MarginLeft和MarginRigh |
sDividerLineColor | color | #FFE8E8E8 | 分割线的颜色 |
sDividerLineHeight | dimension | 0.5dp | 分割线的高度 |
sDividerLineType | enum | bottom(none、top、both) | 分割线显示方式 |
sLeftViewMarginLeft | dimension | 10dp | 左边view的MarginLeft |
sLeftViewMarginRight | dimension | 10dp | 左边view的MarginRight |
sCenterViewMarginLeft | dimension | 10dp | 中间view的MarginLeft |
sRightViewMarginLeft | dimension | 10dp | 右边view的MarginLeft |
sLeftIconRes | reference | / | 左边图片资源 可以用来显示网络图片或者本地 |
sRightIconRes | reference | / | 右边图片资源 可以用来显示网络图片或者本地 |
sLeftIconWidth | dimension | / | 左边图片资源的宽度 用于固定图片大小的时候使用 |
sLeftIconHeight | dimension | / | 左边图片资源的高度 用于固定图片大小的时候使用 |
sLeftIconMarginLeft | dimension | 10dp | 左边图片资源的MarginLeft |
sRightIconMarginRight | dimension | 10dp | 右边图片资源的MarginRight |
sCenterSpaceHeight | dimension | 5dp | 上中下三行文字的间距 |
sUseRipple | boolean | true | 是否开启点击出现水波效果 |
sBackgroundDrawableRes | reference | / | SuperTextView的背景资源 |
sUseShape | boolean | false | 是否使用shape设置圆角及触摸反馈。设为true之后才能使用以下属性 |
sShapeSolidColor | color | #ffffffff | 填充色 |
sShapeSelectorPressedColor | color | #ffffffff | 按下时候的颜色 |
sShapeSelectorNormalColor | color | #ffffffff | 正常显示的颜色 |
sShapeCornersRadius | dimension | 0dp | 四个角的圆角半径 |
sShapeCornersTopLeftRadius | dimension | 0dp | 左上角的圆角半径 |
sShapeCornersTopRightRadius | dimension | 0dp | 右上角的圆角半径 |
sShapeCornersBottomLeftRadius | dimension | 0dp | 左下角的圆角半径 |
sShapeCornersBottomRightRadius | dimension | 0dp | 右下角的圆角半径 |
sShapeStrokeWidth | dimension | 0dp | 边框宽度 |
sShapeStrokeDashWidth | dimension | 0dp | 虚线宽度 |
sShapeStrokeDashGap | dimension | 0dp | 虚线间隙宽度 |
sShapeStrokeColor | color | #ffffffff | 边框颜色 |
sLeftTextBackground | reference | / | 左边textView的背景 |
sCenterTextBackground | reference | / | 中间textView的背景 |
sRightTextBackground | reference | / | 右边textView的背景 |
sEnableEdit | boolean | false | 中间是否可编辑 |
sEditBackGround | reference | / | 中间输入框的背景 |
sEditTextWidth | dimension | (-1)MATCH_PARENT | 中间输入框的宽度 |
sEditTextString | string | "" | 中间输入框默认的内容 |
sEditTextHint | string | "" | 中间输入框的提示信息 |
sEditTextButtonType | enum | clear | 中间输入框的按钮类型 |
sEditTextIsAsteriskStyle | boolean | false | 密码输入框文字的样式是否是“*” |
android:inputType | / | / | 中间输入框输入的类型 |
MarqueeView
文字轮播控件,类似字幕或者头条。常见于APP的首页显眼的位置,与图片轮播组件功能类似。(滚动带有阻尼效果
)
- 属性表: (MarqueeView)
属性名 | 类型 | 默认值 | 备注 |
---|---|---|---|
mq_interval | integer | 2500ms | 翻页的间隔 |
mq_animDuration | integer | 500ms | 动画的间隔 |
mq_animIn | reference | R.anim.marquee_bottom_in | 进入动画的样式资源 |
mq_animOut | reference | R.anim.marquee_top_out | 退出动画的样式资源 |
常用方法
- 设置滚动数据的工厂:setMarqueeFactory(MarqueeFactory factory)
- 设置动画执行时间:setAnimDuration(int animDuration)
- 设置翻页时间间隔:setInterval(int interval)
- 开始滚动:startFlipping()
- 停止滚动:stopFlipping()
MarqueeTextView
滚动字幕,支持滚动数据的动态添加、更新、修改和销毁,匀速滚动。
- 演示效果
- 使用案例
<com.xuexiang.xui.widget.textview.MarqueeTextView
android:id="@+id/tv_marquee"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_marginTop="20dp"
android:background="#88dddddd"
app:mtv_isAutoFit="true"
app:mtv_isAutoDisplay="true"/>
mTvMarquee.setOnMarqueeListener(new MarqueeTextView.OnMarqueeListener() {
@Override
public DisplayEntity onStartMarquee(DisplayEntity displayMsg, int index) {
if (displayMsg.toString().equals("离离原上草,一岁一枯荣。")) {
return null;
} else {
ToastUtils.toast("开始滚动:" + displayMsg.toString());
return displayMsg;
}
}
@Override
public List<DisplayEntity> onMarqueeFinished(List<DisplayEntity> displayDatas) {
ToastUtils.toast("一轮滚动完毕!");
return displayDatas;
}
});
mTvMarquee.startSimpleRoll(datas);
- 属性表: (MarqueeTextView)
属性名 | 类型 | 默认值 | 备注 |
---|---|---|---|
mtv_isAutoFit | boolean | false | 尺寸是否自适应 |
mtv_isAutoDisplay | boolean | false | 控件是否自动显示与隐藏(根据显示数量) |
常用方法
- 开始滚动
startRoll(List<DisplayEntity> list);
startSimpleRoll(List<String> list);
startRoll();
- 滚动数据添加设置
setDisplaySimpleList(List<String> list);
setDisplayList(List<DisplayEntity> list);
addDisplayString(String displayString);
addDisplayEntity(DisplayEntity displayEntity)
- 滚动数据的销毁
removeDisplayString(String displayString)
removeDisplayEntity(DisplayEntity displayEntity)
设置滚动的速度:setSpeed(int speed)
判断是否在滚动:isRolling()
获取显示消息的数量:getDisplaySize()
根据index获取滚动的消息实体:getDisplayItem(int index)
设置滚动监听:setOnMarqueeListener(OnMarqueeListener listener)
ExpandableTextView
可伸展收缩的TextView,可自定义文本的样式。
- 演示效果
- 使用案例
<com.xuexiang.xui.widget.textview.ExpandableTextView
android:id="@+id/expand_text_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp"
app:etv_maxCollapsedLines="5">
<TextView
android:id="@id/expandable_text"
style="@style/TextStyle.Content"
android:layout_width="match_parent"
android:gravity="center_vertical"
android:singleLine ="false"/>
<ImageButton
android:id="@id/expand_collapse"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="?attr/xui_config_content_spacing_vertical"
android:layout_gravity="right|bottom"
android:background="@android:color/transparent"/>
</com.xuexiang.xui.widget.textview.ExpandableTextView>
mExpandableTextView.setText(getString(R.string.etv_content_demo1));
mExpandableTextView.setOnExpandStateChangeListener(new ExpandableTextView.OnExpandStateChangeListener() {
@Override
public void onExpandStateChanged(TextView textView, boolean isExpanded) {
ToastUtils.toast(isExpanded ? "Expanded" : "Collapsed");
}
});
- 属性表: (ExpandableTextView)
属性名 | 类型 | 默认值 | 备注 |
---|---|---|---|
etv_maxCollapsedLines | integer | 8 | 最大收缩展示的行数 |
etv_animDuration | integer | 300ms | 动画持续的间隔 |
etv_animAlphaStart | float | 0.7f | 动画开始时的透明度 |
etv_expandDrawable | reference | / | 伸展箭头的资源 |
etv_collapseDrawable | reference | / | 收缩箭头的资源 |
常用方法
- 设置伸展状态监听:setOnExpandStateChangeListener(OnExpandStateChangeListener listener)
LabView
可在控件的四个角上打长条状的标签,常用于促销、状态标记的控件。
- 演示效果
- 使用案例
<com.xuexiang.xui.widget.textview.label.LabelButtonView
android:id="@+id/btn_label"
style="@style/Button.Blue"
android:layout_width="200dp"
android:layout_height="50dp"
android:text="按钮"
app:label_backgroundColor="#C2185B"
app:label_distance="15dp"
app:label_height="18dp"
app:label_orientation="RIGHT_TOP"
app:label_text="HD"
app:label_textSize="10sp"/>
<com.xuexiang.xui.widget.textview.label.LabelImageView
android:id="@+id/iv_label"
android:layout_marginTop="?attr/xui_config_content_spacing_horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
android:src="@drawable/img_beautiful_scenery"
app:label_backgroundColor="#C2185B"
app:label_orientation="LEFT_TOP"
app:label_text="风景"
app:label_textStyle="ITALIC" />
<com.xuexiang.xui.widget.textview.label.LabelTextView
android:id="@+id/tv_label"
android:layout_width="100dp"
android:layout_height="48dp"
android:layout_marginTop="8dp"
android:background="#212121"
android:gravity="center"
android:padding="16dp"
android:text="文字"
android:textColor="#ffffff"
app:label_backgroundColor="#03A9F4"
app:label_distance="15dp"
app:label_orientation="LEFT_TOP"
app:label_text="POP"
app:label_textSize="10sp"
app:label_textStyle="BOLD_ITALIC" />
- 属性表: (LabelView)
属性名 | 类型 | 默认值 | 备注 |
---|---|---|---|
label_distance | dimension | 40dp | 距离对角的距离 |
label_height | dimension | 300ms | 标签的宽度 |
label_backgroundColor | color | #9F27CDC0 | 标签的背景颜色 |
label_strokeWidth | dimension | 1dp | 标签的边框宽度 |
label_strokeColor | color | #00000000 | 标签的边框颜色 |
label_text | string | / | 标签的文字 |
label_textSize | dimension | 14sp | 标签的文字大小 |
label_textStyle | enum | NORMAL | 标签的文字样式 |
label_textFont | string | / | 标签的字体样式 |
label_textColor | color | #FFFFFFFF | 标签的文字颜色 |
label_visual | boolean | true | 标签是否可见 |
label_orientation | enum | LEFT_TOP | 标签的对齐方式 |
BadgeView
可在控件的任意处打上圆形标记,并能显示数量和文字信息,常用于消息数量记录的控件。
- 演示效果
- 使用案例
new BadgeView(getContext()).bindTarget(textView).setBadgeNumber(5)
new BadgeView(getContext()).bindTarget(imageView)
.setBadgeText("PNG")
.setBadgeTextColor(0x00000000)
.setBadgeGravity(Gravity.BOTTOM | Gravity.END)
.setBadgeBackgroundColor(0xff9370DB)
.setBadgeBackground(getResources().getDrawable(R.drawable.shape_round_rect_purple));
常用方法
设置标记的数目:setBadgeNumber(int badgeNum)
设置标记文字:setBadgeText(String badgeText)
设置是否是精准模式[非精准模式为99+]:setExactMode(boolean isExact)
设置是否有阴影:setShowShadow(boolean showShadow)
设置标记背景颜色:setBadgeBackgroundColor(int color)
设置边框的样式:stroke(int color, float width, boolean isDpValue)
设置标记背景:setBadgeBackground(Drawable drawable)
设置标记文字颜色:setBadgeTextColor(int color)
设置标记文字:setBadgeTextSize(float size, boolean isSpValue)
设置标记的内间距:setBadgePadding(float padding, boolean isDpValue)
设置对齐方式:setBadgeGravity(int gravity)
设置拖拽监听,不设置的话,无法拖拽:setOnDragStateChangedListener(OnDragStateChangedListener l)
绑定控件:bindTarget(View view)
隐藏标记:hide(boolean animate)
AutoFitTextView
可根据TextView控件的尺寸大小,自适应字体大小。
- 使用案例
<com.xuexiang.xui.widget.textview.autofit.AutoFitTextView
android:id="@+id/aftv"
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_marginTop="10dp"
android:gravity="center_vertical"
android:maxLines="2"
android:text="This is the test content:"
android:textSize="30sp" />
- 属性表: (AutoFitTextView)
属性名 | 类型 | 默认值 | 备注 |
---|---|---|---|
aftv_enable | boolean | true | 自动字体大小适应功能是否开启 |
aftv_minTextSize | dimension | 8sp | 调整的最小的字体大小 |
aftv_precision | float | 0.5 | 调整的精度,精度值越小,越精准,耗时越长 |