TextView是Android中最常用、最基础的组件,通过他派生出了一系列的组件。

SuperTextView

SuperTextView是一个非常强大的View,通过自由的属性设置,可以配置出各式各样的布局效果
。SuperButton拥有shape文件的大部分属性,无需配置XML文件就可以轻松实现shape的效果

  • 演示效果

TextView - 图1TextView - 图2TextView - 图3TextView - 图4

  • 使用案例
  1. <com.xuexiang.xui.widget.textview.supertextview.SuperTextView
  2. android:id="@+id/super_tv"
  3. android:layout_width="match_parent"
  4. android:layout_height="80dp"
  5. android:layout_gravity="center"
  6. android:background="@color/colorAccent"
  7. app:sCenterBottomTextString="中下"
  8. app:sCenterTextString="中"
  9. app:sCenterTopTextString="中上"
  10. app:sDividerLineType="both"
  11. app:sLeftBottomTextString="左下"
  12. app:sLeftTextString="左中文字"
  13. app:sLeftTopTextString="左上"
  14. app:sRightBottomTextString="右下"
  15. app:sRightTextString="右中"
  16. app:sRightTopTextString="右上" />
  17. <com.xuexiang.xui.widget.textview.supertextview.SuperTextView
  18. android:layout_width="match_parent"
  19. android:layout_height="50dp"
  20. android:layout_marginTop="50dp"
  21. app:sDividerLineType="both"
  22. app:sLeftTextString="意见反馈"
  23. app:sRightIconRes="@drawable/icon_arrow_right_red" />
  24. <com.xuexiang.xui.widget.textview.supertextview.SuperButton
  25. android:id="@+id/btn_dialog"
  26. style="@style/SuperButton.Blue"
  27. android:layout_margin="20dp"
  28. android:text="弹窗" />
  • 属性表: (SuperTextView)
属性名类型默认值备注
sLeftTextStringstring/左边文字字符串
sLeftTopTextStringstring/左上文字字符串
sLeftBottomTextStringstring/左下文字字符串
sCenterTextStringstring/中间文字字符串
sCenterTopTextStringstring/中上文字字符串
sCenterBottomTextStringstring/中下文字字符串
sRightTextStringstring/右边文字字符串
sRightTopTextStringstring/右上文字字符串
sRightBottomTextStringstring/右下文字字符串
sLeftTextColorcolor#FF373737左边文字颜色
sLeftTopTextColorcolor#FF373737左上文字颜色
sLeftBottomTextColorcolor#FF373737左下文字颜色
sCenterTextColorcolor#FF373737中间文字颜色
sRightTextColorcolor#FF373737右边文字颜色
sLeftTextSizedimension15sp左边字体大小
sCenterTextSizedimension15sp中间字体大小
sRightTextSizedimension15sp右边字体大小
sLeftTextIsBoldbooleanfalse左边文字是否加粗
sCenterTextIsBoldbooleanfalse中间文字是否加粗
sRightTextIsBoldbooleanfalse右边文字是否加粗
sLeftLinesinteger/左边文字显示行数
sCenterLinesinteger/中间文字显示行数
sRightLinesinteger/右边文字显示行数
sLeftMaxEmsinteger/左边文字显示个数
sCenterMaxEmsinteger/中间文字显示个数
sRightMaxEmsinteger/右边文字显示个数
sLeftViewGravityenumCenter(left_center、right_center)左边文字对齐方式
sCenterViewGravityenumCenter(left_center、right_center)中间文字对齐方式
sRightViewGravityenumCenter(left_center、right_center)右边文字对齐方式
sLeftTextGravityenumleft(center、right)左边TextView内文字对齐方式
sCenterTextGravityenumleft(center、right)中间TextView内文字对齐方式
sRightTextGravityenumleft(center、right)右边TextView内文字对齐方式
sLeftTvDrawableLeftreference/左边TextView左侧的drawable
sLeftTvDrawableRightreference/左边TextView右侧的drawable
sCenterTvDrawableLeftreference/中间TextView左侧的drawable
sRightTvDrawableLeftreference/右边TextView左侧的drawable
sLeftTvDrawableWidthdimension/左边TextView的drawable的宽度
sLeftTvDrawableHeightdimension/左边TextView的drawable的高度
sCenterTvDrawableWidthdimension/中间TextView的drawable的宽度
sRightTvDrawableWidthdimension/右边TextView的drawable的宽度
sTextViewDrawablePaddingdimension10dpTextView的drawable对应的Padding
sLeftViewWidthdimension/左边textView的宽度 为了中间文字左对齐的时候使用
sTopDividerLineMarginLRdimension0dp上边分割线的MarginLeft和MarginRight
sTopDividerLineMarginLeftdimension0dp上边分割线的MarginLeft
sTopDividerLineMarginRightdimension0dp上边分割线的MarginRight
sBottomDividerLineMarginLRdimension0dp下边分割线的MarginLeft和MarginRigh
sDividerLineColorcolor#FFE8E8E8分割线的颜色
sDividerLineHeightdimension0.5dp分割线的高度
sDividerLineTypeenumbottom(none、top、both)分割线显示方式
sLeftViewMarginLeftdimension10dp左边view的MarginLeft
sLeftViewMarginRightdimension10dp左边view的MarginRight
sCenterViewMarginLeftdimension10dp中间view的MarginLeft
sRightViewMarginLeftdimension10dp右边view的MarginLeft
sLeftIconResreference/左边图片资源 可以用来显示网络图片或者本地
sRightIconResreference/右边图片资源 可以用来显示网络图片或者本地
sLeftIconWidthdimension/左边图片资源的宽度 用于固定图片大小的时候使用
sLeftIconHeightdimension/左边图片资源的高度 用于固定图片大小的时候使用
sLeftIconMarginLeftdimension10dp左边图片资源的MarginLeft
sRightIconMarginRightdimension10dp右边图片资源的MarginRight
sCenterSpaceHeightdimension5dp上中下三行文字的间距
sUseRippleboolean true是否开启点击出现水波效果
sBackgroundDrawableResreference/SuperTextView的背景资源
sUseShapebooleanfalse是否使用shape设置圆角及触摸反馈。设为true之后才能使用以下属性
sShapeSolidColorcolor#ffffffff填充色
sShapeSelectorPressedColorcolor#ffffffff按下时候的颜色
sShapeSelectorNormalColorcolor#ffffffff正常显示的颜色
sShapeCornersRadiusdimension0dp四个角的圆角半径
sShapeCornersTopLeftRadiusdimension0dp左上角的圆角半径
sShapeCornersTopRightRadiusdimension0dp右上角的圆角半径
sShapeCornersBottomLeftRadiusdimension0dp左下角的圆角半径
sShapeCornersBottomRightRadiusdimension0dp右下角的圆角半径
sShapeStrokeWidthdimension0dp边框宽度
sShapeStrokeDashWidthdimension0dp虚线宽度
sShapeStrokeDashGapdimension0dp虚线间隙宽度
sShapeStrokeColorcolor#ffffffff边框颜色
sLeftTextBackgroundreference/左边textView的背景
sCenterTextBackgroundreference/中间textView的背景
sRightTextBackgroundreference/右边textView的背景
sEnableEditbooleanfalse中间是否可编辑
sEditBackGroundreference/中间输入框的背景
sEditTextWidthdimension(-1)MATCH_PARENT中间输入框的宽度
sEditTextStringstring""中间输入框默认的内容
sEditTextHintstring""中间输入框的提示信息
sEditTextButtonTypeenumclear中间输入框的按钮类型
sEditTextIsAsteriskStylebooleanfalse密码输入框文字的样式是否是“*”
android:inputType//中间输入框输入的类型

MarqueeView

文字轮播控件,类似字幕或者头条。常见于APP的首页显眼的位置,与图片轮播组件功能类似。(滚动带有阻尼效果

  • 属性表: (MarqueeView)
属性名类型默认值备注
mq_intervalinteger2500ms翻页的间隔
mq_animDurationinteger500ms动画的间隔
mq_animInreferenceR.anim.marquee_bottom_in进入动画的样式资源
mq_animOutreferenceR.anim.marquee_top_out退出动画的样式资源

常用方法

  • 设置滚动数据的工厂:setMarqueeFactory(MarqueeFactory factory)
  • 设置动画执行时间:setAnimDuration(int animDuration)
  • 设置翻页时间间隔:setInterval(int interval)
  • 开始滚动:startFlipping()
  • 停止滚动:stopFlipping()

MarqueeTextView

滚动字幕,支持滚动数据的动态添加、更新、修改和销毁,匀速滚动。

  • 演示效果

TextView - 图5

  • 使用案例
  1. <com.xuexiang.xui.widget.textview.MarqueeTextView
  2. android:id="@+id/tv_marquee"
  3. android:layout_width="match_parent"
  4. android:layout_height="40dp"
  5. android:layout_marginTop="20dp"
  6. android:background="#88dddddd"
  7. app:mtv_isAutoFit="true"
  8. app:mtv_isAutoDisplay="true"/>
  9. mTvMarquee.setOnMarqueeListener(new MarqueeTextView.OnMarqueeListener() {
  10. @Override
  11. public DisplayEntity onStartMarquee(DisplayEntity displayMsg, int index) {
  12. if (displayMsg.toString().equals("离离原上草,一岁一枯荣。")) {
  13. return null;
  14. } else {
  15. ToastUtils.toast("开始滚动:" + displayMsg.toString());
  16. return displayMsg;
  17. }
  18. }
  19. @Override
  20. public List<DisplayEntity> onMarqueeFinished(List<DisplayEntity> displayDatas) {
  21. ToastUtils.toast("一轮滚动完毕!");
  22. return displayDatas;
  23. }
  24. });
  25. mTvMarquee.startSimpleRoll(datas);
  • 属性表: (MarqueeTextView)
属性名类型默认值备注
mtv_isAutoFitbooleanfalse尺寸是否自适应
mtv_isAutoDisplaybooleanfalse控件是否自动显示与隐藏(根据显示数量)

常用方法

  • 开始滚动
  1. startRoll(List<DisplayEntity> list);
  2. startSimpleRoll(List<String> list);
  3. startRoll();
  • 滚动数据添加设置
  1. setDisplaySimpleList(List<String> list);
  2. setDisplayList(List<DisplayEntity> list);
  3. addDisplayString(String displayString);
  4. addDisplayEntity(DisplayEntity displayEntity)
  • 滚动数据的销毁
  1. removeDisplayString(String displayString)
  2. removeDisplayEntity(DisplayEntity displayEntity)
  • 设置滚动的速度:setSpeed(int speed)

  • 判断是否在滚动:isRolling()

  • 获取显示消息的数量:getDisplaySize()

  • 根据index获取滚动的消息实体:getDisplayItem(int index)

  • 设置滚动监听:setOnMarqueeListener(OnMarqueeListener listener)

ExpandableTextView

可伸展收缩的TextView,可自定义文本的样式。

  • 演示效果

TextView - 图6

  • 使用案例
  1. <com.xuexiang.xui.widget.textview.ExpandableTextView
  2. android:id="@+id/expand_text_view"
  3. android:layout_width="match_parent"
  4. android:layout_height="wrap_content"
  5. android:padding="10dp"
  6. app:etv_maxCollapsedLines="5">
  7. <TextView
  8. android:id="@id/expandable_text"
  9. style="@style/TextStyle.Content"
  10. android:layout_width="match_parent"
  11. android:gravity="center_vertical"
  12. android:singleLine ="false"/>
  13. <ImageButton
  14. android:id="@id/expand_collapse"
  15. android:layout_width="wrap_content"
  16. android:layout_height="wrap_content"
  17. android:padding="?attr/xui_config_content_spacing_vertical"
  18. android:layout_gravity="right|bottom"
  19. android:background="@android:color/transparent"/>
  20. </com.xuexiang.xui.widget.textview.ExpandableTextView>
  21. mExpandableTextView.setText(getString(R.string.etv_content_demo1));
  22. mExpandableTextView.setOnExpandStateChangeListener(new ExpandableTextView.OnExpandStateChangeListener() {
  23. @Override
  24. public void onExpandStateChanged(TextView textView, boolean isExpanded) {
  25. ToastUtils.toast(isExpanded ? "Expanded" : "Collapsed");
  26. }
  27. });
  • 属性表: (ExpandableTextView)
属性名类型默认值备注
etv_maxCollapsedLinesinteger8最大收缩展示的行数
etv_animDurationinteger300ms动画持续的间隔
etv_animAlphaStartfloat0.7f动画开始时的透明度
etv_expandDrawablereference/伸展箭头的资源
etv_collapseDrawablereference/收缩箭头的资源

常用方法

  • 设置伸展状态监听:setOnExpandStateChangeListener(OnExpandStateChangeListener listener)

LabView

可在控件的四个角上打长条状的标签,常用于促销、状态标记的控件。

  • 演示效果

TextView - 图7

  • 使用案例
  1. <com.xuexiang.xui.widget.textview.label.LabelButtonView
  2. android:id="@+id/btn_label"
  3. style="@style/Button.Blue"
  4. android:layout_width="200dp"
  5. android:layout_height="50dp"
  6. android:text="按钮"
  7. app:label_backgroundColor="#C2185B"
  8. app:label_distance="15dp"
  9. app:label_height="18dp"
  10. app:label_orientation="RIGHT_TOP"
  11. app:label_text="HD"
  12. app:label_textSize="10sp"/>
  13. <com.xuexiang.xui.widget.textview.label.LabelImageView
  14. android:id="@+id/iv_label"
  15. android:layout_marginTop="?attr/xui_config_content_spacing_horizontal"
  16. android:layout_width="wrap_content"
  17. android:layout_height="wrap_content"
  18. android:scaleType="centerCrop"
  19. android:src="@drawable/img_beautiful_scenery"
  20. app:label_backgroundColor="#C2185B"
  21. app:label_orientation="LEFT_TOP"
  22. app:label_text="风景"
  23. app:label_textStyle="ITALIC" />
  24. <com.xuexiang.xui.widget.textview.label.LabelTextView
  25. android:id="@+id/tv_label"
  26. android:layout_width="100dp"
  27. android:layout_height="48dp"
  28. android:layout_marginTop="8dp"
  29. android:background="#212121"
  30. android:gravity="center"
  31. android:padding="16dp"
  32. android:text="文字"
  33. android:textColor="#ffffff"
  34. app:label_backgroundColor="#03A9F4"
  35. app:label_distance="15dp"
  36. app:label_orientation="LEFT_TOP"
  37. app:label_text="POP"
  38. app:label_textSize="10sp"
  39. app:label_textStyle="BOLD_ITALIC" />
  • 属性表: (LabelView)
属性名类型默认值备注
label_distancedimension40dp距离对角的距离
label_heightdimension300ms标签的宽度
label_backgroundColorcolor#9F27CDC0标签的背景颜色
label_strokeWidthdimension1dp标签的边框宽度
label_strokeColorcolor#00000000标签的边框颜色
label_textstring/标签的文字
label_textSizedimension14sp标签的文字大小
label_textStyleenumNORMAL标签的文字样式
label_textFontstring/标签的字体样式
label_textColorcolor#FFFFFFFF标签的文字颜色
label_visualbooleantrue标签是否可见
label_orientationenumLEFT_TOP标签的对齐方式

BadgeView

可在控件的任意处打上圆形标记,并能显示数量和文字信息,常用于消息数量记录的控件。

  • 演示效果

TextView - 图8

  • 使用案例
  1. new BadgeView(getContext()).bindTarget(textView).setBadgeNumber(5)
  2. new BadgeView(getContext()).bindTarget(imageView)
  3. .setBadgeText("PNG")
  4. .setBadgeTextColor(0x00000000)
  5. .setBadgeGravity(Gravity.BOTTOM | Gravity.END)
  6. .setBadgeBackgroundColor(0xff9370DB)
  7. .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控件的尺寸大小,自适应字体大小。

  • 使用案例
  1. <com.xuexiang.xui.widget.textview.autofit.AutoFitTextView
  2. android:id="@+id/aftv"
  3. android:layout_width="match_parent"
  4. android:layout_height="80dp"
  5. android:layout_marginTop="10dp"
  6. android:gravity="center_vertical"
  7. android:maxLines="2"
  8. android:text="This is the test content:"
  9. android:textSize="30sp" />
  • 属性表: (AutoFitTextView)
属性名类型默认值备注
aftv_enablebooleantrue自动字体大小适应功能是否开启
aftv_minTextSizedimension8sp调整的最小的字体大小
aftv_precisionfloat0.5调整的精度,精度值越小,越精准,耗时越长