可调颜色大小可加粗可设置段落自动滚到最后一行的TextView

一只爬爬虫

已于 2022-10-05 13:47:08 修改

阅读量749

点赞数 1

文章标签： android tv java 微信 android studio

于 2022-09-06 21:25:10 首次发布

本文链接：https://blog.csdn.net/m0_72963799/article/details/126731883

版权

现在常用的主流聊天工具，聊天内容的显示都是利用的listview搭配adapter来实现的。这种方式显示的内容根据listview中装载的控件来定，所以可以显示文字、图片、视频等丰富的内容。但这种方式在layout设计和java程序实现上都比较复杂。那么对功能要求不那么高，仅需要显示文字、表情，并且能够显示不同颜色、大小、粗细，可有简单段落格式的富文本格式的聊天工具来说，就可以考虑使用TextView来实现。

先来看两幅图：

这是今天要介绍的一个小例程，利用按钮“发送1”和“发送2”模拟两个人聊天。聊天内容是司马光和邵雍的一段对话。“发送1”发送者是司马光，“发送2”的发送者是邵雍。下边就介绍一下实现的步骤：

4、drawable/bg_stoke_1.xml

一、界面设计

最上边的TextView是显示对话对方昵称的。ScrollView是控制聊天输入内容的TextView滚动的，当聊天内容满屏了之后，会自动滚动，完整显示最后一行。EditText是输入内容的，两个Button分别模拟聊天的两个人。

1、前台布局

2、layout.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"

    android:background="@color/wechat_bottombar"

    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginLeft="0dp"
        android:layout_marginTop="0dp"
        android:layout_marginRight="0dp"
        android:background="@drawable/bg_stoke_4"

        android:layout_marginBottom="0dp"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="0dp"
            android:layout_marginTop="0dp"
            android:layout_marginRight="0dp"
            android:background="@drawable/bg_stoke_4"
            android:layout_marginBottom="0dp"
            android:layout_weight="0"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/tv_title"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:scrollbars="vertical"
                android:background="@drawable/bg_stoke_4"
                android:layout_weight="1"
                android:textSize="16dp"
                android:typeface="sans"
                android:textColor="@color/black"
                android:textStyle="normal"
                android:padding="10dp"
                android:gravity="center"

                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

        </LinearLayout>


        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginLeft="0dp"
            android:layout_marginTop="5dp"
            android:layout_marginRight="0dp"
            android:background="@drawable/bg_stoke_1"
            android:layout_marginBottom="0dp"
            android:layout_weight="1"
            android:orientation="horizontal">

            <ScrollView
                android:id="@+id/sv_chat"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:background="@drawable/bg_stoke_4"
                >
                <TextView
                    android:id="@+id/tv_content"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:scrollbars="vertical"
                    android:background="@drawable/bg_stoke_4"
                    android:focusable="true"
                    android:layout_marginTop="5dp"
                    android:layout_marginLeft="10dp"
                    android:layout_marginRight="10dp"


                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintLeft_toLeftOf="parent"
                    app:layout_constraintRight_toRightOf="parent"
                    app:layout_constraintTop_toTopOf="parent" />
            </ScrollView>
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="0dp"
            android:layout_marginTop="0dp"
            android:layout_marginRight="0dp"
            android:background="@drawable/bg_stoke_3"
            android:layout_marginBottom="0dp"
            android:layout_weight="0"
            android:gravity="center"
            android:orientation="horizontal">

            <EditText
                android:id="@+id/et_send_content"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@color/white"
                android:layout_marginLeft="10dp"
                android:layout_marginTop="0dp"
                android:layout_marginRight="10dp"
                android:layout_marginBottom="0dp"
                android:textSize="16dp"
                android:typeface="sans"
                android:textColor="@color/black"
                android:textStyle="normal"
                android:padding="8dp"
                android:layout_weight="1"

                />

            <Button
                android:id="@+id/btn_send"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:layout_marginBottom="0dp"
                android:layout_weight="0"
                app:layout_constraintBottom_toBottomOf="parent"

                app:layout_constraintRight_toRightOf="parent"

                android:background="@drawable/button0"
                android:text="@string/chat_send"
                android:textColor="@color/black"
                android:textSize="16dp"
                />
            <Button
                android:id="@+id/btn_send2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:layout_marginBottom="0dp"
                android:layout_weight="0"
                app:layout_constraintBottom_toBottomOf="parent"

                app:layout_constraintRight_toRightOf="parent"

                android:background="@drawable/button0"
                android:text="@string/chat_send2"
                android:textColor="@color/black"
                android:textSize="16dp"
                />

        </LinearLayout>

    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

二、java主程序

package com.example.mycooltextview;

import androidx.appcompat.app.AppCompatActivity;

import android.annotation.SuppressLint;
import android.os.Bundle;
import android.text.Html;
import android.text.Spanned;
import android.view.View;
import android.view.ViewTreeObserver;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ScrollView;
import android.widget.TextView;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.Locale;



public class MainActivity extends AppCompatActivity {

    //昵称
    String NickName="司马光";

    //对方昵称
    String NickName2="邵雍";

    //ui相关变量
    TextView tv_content,tv_title;
    EditText et_send_content;
    Button btn_send,btn_send2;
    ScrollView scrollView;



    @SuppressLint("WrongViewCast")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        scrollView=this.findViewById(R.id.sv_chat);
        tv_content= this.findViewById(R.id.tv_content);
        tv_title= this.findViewById(R.id.tv_title);
        et_send_content=this.findViewById(R.id.et_send_content);
        btn_send= findViewById(R.id.btn_send);
        btn_send2= findViewById(R.id.btn_send2);

        tv_content.setSelected(true);
        tv_content.setTextSize(16);

        tv_title.setText(NickName2);

        /**
         * 点"上传"按钮后，将数学、语文分数发送到阿里云物联网平台
         */
        btn_send.setOnClickListener((view)-> {

            String send_content=et_send_content.getText().toString();
            Date curDate = new Date(System.currentTimeMillis());
            SimpleDateFormat format= new SimpleDateFormat("M月d日 HH:mm", Locale.getDefault());
            String str_curDate = format.format(curDate);
            tv_content.append( Html.fromHtml("<font color='#696969' size='20px'>"+NickName+"("+str_curDate+"):"+"</font>"+"<br>",Html.FROM_HTML_MODE_LEGACY));
            tv_content.append( Html.fromHtml("<p><big><font color='#3CB371' size='10px'>"+send_content+"</font><big><p>"+"<br>",Html.FROM_HTML_MODE_LEGACY));
            et_send_content.setText("");

        });


        btn_send2.setOnClickListener((view)-> {

            String send_content=et_send_content.getText().toString();
            Date curDate = new Date(System.currentTimeMillis());
            SimpleDateFormat format= new SimpleDateFormat("M月d日 HH:mm", Locale.getDefault());
            String str_curDate = format.format(curDate);

            tv_content.append( Html.fromHtml("<font color='#696969' size='10px'>"+NickName2+"("+str_curDate+"):"+"</font>"+"<br>"));
            tv_content.append( Html.fromHtml("<p><big><font color='#FFA500' size='10px'>"+send_content+"</font><big><p>"+"<br>"));

            et_send_content.setText("");

        });

        scrollView.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            @Override

            public void onGlobalLayout() {
                scrollView.post(new Runnable() {
                    public void run() {
                        scrollView.fullScroll(View.FOCUS_DOWN);

                    }

                });

            }

        });
    }//oncreat结束标志

}

三、资源文件

1、values/strings.xml

<resources>
    <string name="app_name">MyAliyunchat</string>
    <string name="chat_send2">发送2</string>
    <string name="btn_set">设置</string>

</resources>

2、values/styles.xml

<resources>

    <style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/wechat_text</item>
        <item name="colorPrimaryDark">@color/wechat_text</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="titleTextColor">@color/wechat_text</item>
    </style>

</resources>

3、values/colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="splitLine">#e9e9e9</color>
    <color name="navigationBarColor">#aaaaaa</color>
    <color name="navigationPressed">#dddddd</color>
    <color name="colorPrimary">#008577</color>
    <color name="devicename">#A9A9A9</color> <!--暗灰色 -->
    <color name="colorPrimaryDark">#00574B</color>
    <color name="colorAccent">#D81B60</color>
    <color name="white">#FFFFFF</color> <!--白色 -->
    <color name="ivory">#FFFFF0</color> <!--象牙色 -->
    <color name="lightyellow">#FFFFE0</color> <!--亮黄色 -->
    <color name="yellow">#FFFF00</color> <!--黄色 -->
    <color name="snow">#FFFAFA</color> <!--雪白色 -->
    <color name="floralwhite">#FFFAF0</color> <!--花白色 -->
    <color name="lemonchiffon">#FFFACD</color> <!--柠檬绸色 -->
    <color name="cornsilk">#FFF8DC</color> <!--米绸色 -->
    <color name="seashell">#FFF5EE</color> <!--海贝色 -->
    <color name="lavenderblush">#FFF0F5</color> <!--淡紫红 -->
    <color name="papayawhip">#FFEFD5</color> <!--番木色 -->
    <color name="blanchedalmond">#FFEBCD</color> <!--白杏色 -->
    <color name="mistyrose">#FFE4E1</color> <!--浅玫瑰色 -->
    <color name="bisque">#FFE4C4</color> <!--桔黄色 -->
    <color name="moccasin">#FFE4B5</color> <!--鹿皮色 -->
    <color name="navajowhite">#FFDEAD</color> <!--纳瓦白 -->
    <color name="peachpuff">#FFDAB9</color> <!--桃色 -->
    <color name="gold">#FFD700</color> <!--金色 -->
    <color name="pink">#FFC0CB</color> <!--粉红色 -->
    <color name="lightpink">#FFB6C1</color> <!--亮粉红色 -->
    <color name="orange">#FFA500</color> <!--橙色 -->
    <color name="lightsalmon">#FFA07A</color> <!--亮肉色 -->
    <color name="darkorange">#FF8C00</color> <!--暗桔黄色 -->
    <color name="coral">#FF7F50</color> <!--珊瑚色 -->
    <color name="hotpink">#FF69B4</color> <!--热粉红色 -->
    <color name="tomato">#FF6347</color> <!--西红柿色 -->
    <color name="orangered">#FF4500</color> <!--红橙色 -->
    <color name="deeppink">#FF1493</color> <!--深粉红色 -->
    <color name="fuchsia">#FF00FF</color> <!--紫红色 -->
    <color name="magenta">#FF00FF</color> <!--红紫色 -->
    <color name="red">#FF0000</color> <!--红色 -->
    <color name="oldlace">#FDF5E6</color> <!--老花色 -->
    <color name="lightgoldenrodyellow">#FAFAD2</color> <!--亮金黄色 -->
    <color name="linen">#FAF0E6</color> <!--亚麻色 -->
    <color name="antiquewhite">#FAEBD7</color> <!--古董白 -->
    <color name="salmon">#FA8072</color> <!--鲜肉色 -->
    <color name="ghostwhite">#F8F8FF</color> <!--幽灵白 -->
    <color name="mintcream">#F5FFFA</color> <!--薄荷色 -->
    <color name="whitesmoke">#F5F5F5</color> <!--烟白色 -->
    <color name="beige">#F5F5DC</color> <!--米色 -->
    <color name="wheat">#F5DEB3</color> <!--浅黄色 -->
    <color name="sandybrown">#F4A460</color> <!--沙褐色 -->
    <color name="azure">#F0FFFF</color> <!--天蓝色 -->
    <color name="honeydew">#F0FFF0</color> <!--蜜色 -->
    <color name="aliceblue">#F0F8FF</color> <!--艾利斯兰 -->
    <color name="khaki">#F0E68C</color> <!--黄褐色 -->
    <color name="lightcoral">#F08080</color> <!--亮珊瑚色 -->
    <color name="palegoldenrod">#EEE8AA</color> <!--苍麒麟色 -->
    <color name="violet">#EE82EE</color> <!--紫罗兰色 -->
    <color name="darksalmon">#E9967A</color> <!--暗肉色 -->
    <color name="lavender">#E6E6FA</color> <!--淡紫色 -->
    <color name="lightcyan">#E0FFFF</color> <!--亮青色 -->
    <color name="burlywood">#DEB887</color> <!--实木色 -->
    <color name="plum">#DDA0DD</color> <!--洋李色 -->
    <color name="gainsboro">#DCDCDC</color> <!--淡灰色 -->
    <color name="crimson">#DC143C</color> <!--暗深红色 -->
    <color name="palevioletred">#DB7093</color> <!--苍紫罗兰色 -->
    <color name="goldenrod">#DAA520</color> <!--金麒麟色 -->
    <color name="orchid">#DA70D6</color> <!--淡紫色 -->
    <color name="thistle">#D8BFD8</color> <!--蓟色 -->
    <color name="lightgray">#D3D3D3</color> <!--亮灰色 -->
    <color name="lightgrey">#D3D3D3</color> <!--亮灰色 -->
    <color name="tan">#D2B48C</color> <!--茶色 -->
    <color name="chocolate">#D2691E</color> <!--巧可力色 -->
    <color name="peru">#CD853F</color> <!--秘鲁色 -->
    <color name="indianred">#CD5C5C</color> <!--印第安红 -->
    <color name="mediumvioletred">#C71585</color> <!--中紫罗兰色 -->
    <color name="silver">#C0C0C0</color> <!--银色 -->
    <color name="darkkhaki">#BDB76B</color> <!--暗黄褐色-->
    <color name="rosybrown">#BC8F8F</color> <!--褐玫瑰红 -->
    <color name="mediumorchid">#BA55D3</color> <!--中粉紫色 -->
    <color name="darkgoldenrod">#B8860B</color> <!--暗金黄色 -->
    <color name="firebrick">#B22222</color> <!--火砖色 -->
    <color name="powderblue">#B0E0E6</color> <!--粉蓝色 -->
    <color name="lightsteelblue">#B0C4DE</color> <!--亮钢兰色-->
    <color name="paleturquoise">#AFEEEE</color> <!--苍宝石绿 -->
    <color name="greenyellow">#ADFF2F</color> <!--黄绿色 -->
    <color name="lightblue">#ADD8E6</color> <!--亮蓝色 -->
    <color name="darkgray">#A9A9A9</color> <!--暗灰色 -->
    <color name="darkgrey">#A9A9A9</color> <!--暗灰色 -->
    <color name="brown">#A52A2A</color> <!--褐色 -->
    <color name="sienna">#A0522D</color> <!--赭色 -->
    <color name="darkorchid">#9932CC</color> <!--暗紫色 -->
    <color name="palegreen">#98FB98</color> <!--苍绿色 -->
    <color name="darkviolet">#9400D3</color> <!--暗紫罗兰色 -->
    <color name="mediumpurple">#9370DB</color> <!--中紫色 -->
    <color name="lightgreen">#90EE90</color> <!--亮绿色 -->
    <color name="darkseagreen">#8FBC8F</color> <!--暗海兰色 -->
    <color name="saddlebrown">#8B4513</color> <!--重褐色 -->
    <color name="darkmagenta">#8B008B</color> <!--暗洋红 -->
    <color name="darkred">#8B0000</color> <!--暗红色 -->
    <color name="blueviolet">#8A2BE2</color> <!--紫罗兰蓝色 -->
    <color name="lightskyblue">#87CEFA</color> <!--亮天蓝色 -->
    <color name="skyblue">#87CEEB</color> <!--天蓝色 -->
    <color name="gray">#808080</color> <!--灰色 -->
    <color name="grey">#808080</color> <!--灰色 -->
    <color name="olive">#808000</color> <!--橄榄色 -->
    <color name="purple">#800080</color> <!--紫色 -->
    <color name="maroon">#800000</color> <!--粟色 -->
    <color name="aquamarine">#7FFFD4</color> <!--碧绿色 -->
    <color name="chartreuse">#7FFF00</color> <!--黄绿色 -->
    <color name="lawngreen">#7CFC00</color> <!--草绿色 -->
    <color name="mediumslateblue">#7B68EE</color> <!--中暗蓝色 -->
    <color name="lightslategray">#778899</color> <!--亮蓝灰 -->
    <color name="lightslategrey">#778899</color> <!--亮蓝灰 -->
    <color name="slategray">#708090</color> <!--灰石色 -->
    <color name="slategrey">#708090</color> <!--灰石色 -->
    <color name="olivedrab">#6B8E23</color> <!--深绿褐色 -->
    <color name="slateblue">#6A5ACD</color> <!--石蓝色 -->
    <color name="dimgray">#696969</color> <!--暗灰色 -->
    <color name="dimgrey">#696969</color> <!--暗灰色 -->
    <color name="mediumaquamarine">#66CDAA</color> <!--中绿色 -->
    <color name="cornflowerblue">#6495ED</color> <!--菊兰色 -->
    <color name="cadetblue">#5F9EA0</color> <!--军兰色 -->
    <color name="darkolivegreen">#556B2F</color> <!--暗橄榄绿-->
    <color name="indigo">#4B0082</color> <!--靛青色 -->
    <color name="mediumturquoise">#48D1CC</color> <!--中绿宝石 -->
    <color name="darkslateblue">#483D8B</color> <!--暗灰蓝色 -->
    <color name="steelblue">#4682B4</color> <!--钢兰色 -->
    <color name="royalblue">#4169E1</color> <!--皇家蓝 -->
    <color name="turquoise">#40E0D0</color> <!--青绿色 -->
    <color name="mediumseagreen">#3CB371</color> <!--中海蓝 -->
    <color name="limegreen">#32CD32</color> <!--橙绿色 -->
    <color name="darkslategray">#2F4F4F</color> <!--暗瓦灰色 -->
    <color name="darkslategrey">#2F4F4F</color> <!--暗瓦灰色 -->
    <color name="seagreen">#2E8B57</color> <!--海绿色 -->
    <color name="forestgreen">#228B22</color> <!--森林绿 -->
    <color name="lightseagreen">#20B2AA</color> <!--亮海蓝色 -->
    <color name="dodgerblue">#1E90FF</color> <!--闪兰色 -->
    <color name="midnightblue">#191970</color> <!--中灰兰色 -->
    <color name="aqua">#00FFFF</color> <!--浅绿色 -->
    <color name="cyan">#00FFFF</color> <!--青色 -->
    <color name="springgreen">#00FF7F</color> <!--春绿色 -->
    <color name="lime">#00FF00</color> <!--酸橙色 -->
    <color name="mediumspringgreen">#00FA9A</color> <!--中春绿色 -->
    <color name="darkturquoise">#00CED1</color> <!--暗宝石绿 -->
    <color name="deepskyblue">#00BFFF</color> <!--深天蓝色 -->
    <color name="darkcyan">#008B8B</color> <!--暗青色 -->
    <color name="teal">#008080</color> <!--水鸭色 -->
    <color name="green">#008000</color> <!--绿色 -->
    <color name="darkgreen">#006400</color> <!--暗绿色 -->
    <color name="blue">#0000FF</color> <!--蓝色 -->
    <color name="mediumblue">#0000CD</color> <!--中兰色 -->
    <color name="darkblue">#00008B</color> <!--暗蓝色 -->
    <color name="navy">#000080</color> <!--海军色 -->
    <color name="black">#000000</color> <!--黑色 -->
    <color name="wechat_bg">#ededed</color> <!--微信背景色 -->
    <color name="wechat_text_bg">#95eb6c</color> <!--微信背景色 -->
    <color name="wechat_bottombar">#f7f7f7</color><!--微信底部颜色 -->
    <color name="wechat_text">#1b1b1b</color><!--微信底部颜色 -->




</resources>

4、drawable/bg_stoke_1.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!--背景色-->
    <solid android:color="@color/wechat_bg" />
    <!--边框线-->
    <stroke
        android:width="1dp"
        android:color="@color/gainsboro" />
    <!--圆角-->
    <corners android:radius="2dp" />
    <padding
        android:left="0dp"
        android:top="0dp"
        android:right="0dp"
        android:bottom="0dp" />

</shape>

四、jave程序关键代码

1、TextView追加方法

在TextView最后一行下边追加一行的方法是TextView.append()，注意与TextView.setText()的区别。

2、设置单行文本属性的方法

注意实现此功能的方法是Html.fromHtml()，这个方法只对设置的那部分文字起作用，是局部的。

而tv_content.setTextSize()、tv_content.setTextColor()这一类方法是对整个TextView内所有内容设置的，是全局性的；Html.fromHtml()基本语法如下：

tv_content.append( Html.fromHtml("<font color='#696969' size='20px'>"+NickName+"("+str_curDate+"):"+"</font>"+"<br>",Html.FROM_HTML_MODE_LEGACY));
tv_content.append( Html.fromHtml("<p><big><font color='#3CB371' size='10px'>"+send_content+"</font><big><p>"+"<br>",Html.FROM_HTML_MODE_LEGACY));

更详细的 Html.fromHtml的格式标签使用请参见文章：

(4条消息) [Android/安卓] TextView以及Html.fromHtml支持的标签_米歪(MiWi)的博客-CSDN博客_android html.fromhtml textview