Skip to content

TextView

Jump to bottom
xuexiangjys edited this page Nov 6, 2022 · 11 revisions

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 控件是否自动显示与隐藏（根据显示数量）
mtv_entries reference / 控件默认需要显示的内容

常用方法

  • 开始滚动

    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 调整的精度，精度值越小，越精准，耗时越长

简介

组件使用

资源样式

工具类使用

拓展

Clone this wiki locally