Android 实现视图文本TextView的展开与收缩功能

简介: Android 实现视图文本TextView的展开与收缩功能

先看效果图:

步骤一:

创建ExpandTabTextView类拓展TextView 和 text_expand.xml

具体详解已经在代码中详细的注释了出来

public class ExpandTabTextView extends LinearLayout implements View.OnClickListener {
    //声明上下文对象
    private Context context;
    //声明文本视图对象
    private TextView text_view;
    //声明按钮对象
    private Button btn;
    //正常显示的行数
    private int line_number = 3;
    //是否被选中
    private boolean isSelect = false;
    public ExpandTabTextView(Context context) {
        super(context);
    }
    public ExpandTabTextView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        this.context = context;
        //从布局文件中获取展示内容
        LayoutInflater.from(context).inflate(R.layout.text_expand, this, true);
    }
    //在布局展示完毕后调用,因为getLineHeight方法(获取TextView的行高)要等渲染完成后才能得知具体高度
    //行高是指一行文字上方距离下一行文字上方的距离。
    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        //从布局文件中获取名叫ll_content的线性布局
        LinearLayout ll_content = findViewById(R.id.ll_content);
        //设置布局的点击事件
        btn=findViewById(R.id.btn);
        btn.setText("查看更多");
        btn.setOnClickListener(this);
        //从布局文件中获取text_view的文本视图
        text_view = findViewById(R.id.text_view);
        //设置文本的高度为n行文字这么高
        /*TextView的首行和最后一行有一个额外的padding间距,
          这导致实际行高要大于getLineHeight()方法得到的行高
          所以在设置文本高度时:(普通行高+6)*行数
        */
        text_view.setHeight((text_view.getLineHeight() + 6) * line_number);
    }
    //设置文本内容
    public void setText(String content) {
        text_view.setText(content);
    }
    //设置文本的资源编号
    public void setText(int id) {
        setText(context.getResources().getString(id));
    }
    @Override
    public void onClick(View v) {
        if (v.getId() == R.id.btn) {
            isSelect = !isSelect;
            //清除文本视图的动画
            text_view.clearAnimation();
            final int deltaValue;
            //获得文本视图的实际高度
            final int startValue = text_view.getHeight();
            if (isSelect) {//如果选中则展开后面的所有文字  getLineCount():获取TextView文字行数
                //结果为新增的文本视图的高度
                deltaValue = (text_view.getLineHeight() + 6) * text_view.getLineCount() - startValue;
                btn.setText("隐藏更多");
            } else {
                //结果为0
                deltaValue = (text_view.getLineHeight() + 6) * line_number - startValue;
                btn.setText("查看更多");
            }
            //创建一个文字展开 收缩动画
            Animation animation = new Animation() {
                //该方法就是动画的具体实现
                /*
                    第一个参数:interpolatedTime代表动画的时间进行比。
                    不管动画实际的持续时间如何,当动画播放时,该参数总是自动从0变化到1
                    第二个参数:Transformation t代表了补间动画在不同时刻对图形或组件的变形程度。
                 */
                @Override
                protected void applyTransformation(float interpolatedTime, Transformation t) {
                    //随着时间的流逝重新设置文本的行高
                    text_view.setHeight((int) (startValue + deltaValue * interpolatedTime));
                }
            };
            //设置动画的持续时间为500毫秒
            animation.setDuration(500);
            //开始文本视图的动画展示
            text_view.startAnimation(animation);
        }
    }
}

text_expand.xml 布局代码如下:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:id="@+id/ll_content"
    >
    <TextView
        android:id="@+id/text_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="@color/black"
        android:textSize="20sp" />
    <Button
        android:id="@+id/btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="查看更多"
        />
</LinearLayout>

到这一步基本上已经大功告成了,把这个拓展的ExpandTabTextView在布局中使用即可。

步骤二:创建main.xml 使用ExpandTabTextView

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    tools:context=".MainActivity">
    <com.example.expand.view.ExpandTabTextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/expand"
        />
</LinearLayout>

创建MainActivity获取拓展TextView的实例,并且通过代码传入文本内容:

public class MainActivity extends AppCompatActivity {
    private ExpandTabTextView expand;
    //文本内容写在了values目录下的strings.xml中
    private int[] newsArray = {R.string.news1, R.string.news2, R.string.news3, R.string.news4};
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        expand = findViewById(R.id.expand);
        int seq = (int) (Math.random() * 100 % 4);
        //设置展开布局的文本内容
        expand.setText(newsArray[seq]);
    }
}

以上就是实现展开与收缩文本功能的基本步骤,内容很简单,自己做下总结,也希望能帮助正好有此需求的人~ 有不当之处在评论区指正就行!


目录
相关文章
|
2月前
|
缓存 前端开发 Android开发
安卓开发中的自定义视图:从零到英雄
【10月更文挑战第42天】 在安卓的世界里,自定义视图是一块画布,让开发者能够绘制出独一无二的界面体验。本文将带你走进自定义视图的大门,通过深入浅出的方式,让你从零基础到能够独立设计并实现复杂的自定义组件。我们将探索自定义视图的核心概念、实现步骤,以及如何优化你的视图以提高性能和兼容性。准备好了吗?让我们开始这段创造性的旅程吧!
43 1
|
3月前
|
Android开发 开发者
安卓应用开发中的自定义视图
【9月更文挑战第37天】在安卓开发的海洋中,自定义视图犹如一座座小岛,等待着勇敢的探索者去发现其独特之处。本文将带领你踏上这段旅程,从浅滩走向深海,逐步揭开自定义视图的神秘面纱。
49 3
|
2月前
|
搜索推荐 前端开发 Android开发
安卓应用开发中的自定义视图实现
【10月更文挑战第30天】在安卓开发的海洋中,自定义视图是那抹不可或缺的亮色,它为应用界面的个性化和交互体验的提升提供了无限可能。本文将深入探讨如何在安卓平台创建自定义视图,并展示如何通过代码实现这一过程。我们将从基础出发,逐步引导你理解自定义视图的核心概念,然后通过一个实际的代码示例,详细讲解如何将理论应用于实践,最终实现一个美观且具有良好用户体验的自定义控件。无论你是想提高自己的开发技能,还是仅仅出于对安卓开发的兴趣,这篇文章都将为你提供价值。
|
3月前
|
Android开发
Android开发表情emoji功能开发
本文介绍了一种在Android应用中实现emoji表情功能的方法,通过将图片与表情字符对应,实现在`TextView`中的正常显示。示例代码展示了如何使用自定义适配器加载emoji表情,并在编辑框中输入或删除表情。项目包含完整的源码结构,可作为开发参考。视频演示和源码详情见文章内链接。
90 4
Android开发表情emoji功能开发
|
3月前
|
安全 Android开发 iOS开发
Android vs iOS:探索移动操作系统的设计与功能差异###
【10月更文挑战第20天】 本文深入分析了Android和iOS两个主流移动操作系统在设计哲学、用户体验、技术架构等方面的显著差异。通过对比,揭示了这两种系统各自的独特优势与局限性,并探讨了它们如何塑造了我们的数字生活方式。无论你是开发者还是普通用户,理解这些差异都有助于更好地选择和使用你的移动设备。 ###
73 3
|
4月前
|
Android开发 开发者
安卓开发中的自定义视图:从入门到精通
【9月更文挑战第19天】在安卓开发的广阔天地中,自定义视图是一块充满魔力的土地。它不仅仅是代码的堆砌,更是艺术与科技的完美结合。通过掌握自定义视图,开发者能够打破常规,创造出独一无二的用户界面。本文将带你走进自定义视图的世界,从基础概念到实战应用,一步步展示如何用代码绘出心中的蓝图。无论你是初学者还是有经验的开发者,这篇文章都将为你打开一扇通往创意和效率的大门。让我们一起探索自定义视图的秘密,将你的应用打造成一件艺术品吧!
75 10
|
3月前
|
XML 存储 Java
浅谈Android的TextView控件
浅谈Android的TextView控件
52 0
|
4月前
|
前端开发 Android开发 开发者
安卓应用开发中的自定义视图基础
【9月更文挑战第13天】在安卓开发的广阔天地中,自定义视图是一块神奇的画布,它允许开发者将想象力转化为用户界面的创新元素。本文将带你一探究竟,了解如何从零开始构建自定义视图,包括绘图基础、触摸事件处理,以及性能优化的实用技巧。无论你是想提升应用的视觉吸引力,还是追求更流畅的交互体验,这里都有你需要的金钥匙。
|
4月前
|
XML 编解码 Android开发
安卓开发中的自定义视图控件
【9月更文挑战第14天】在安卓开发中,自定义视图控件是一种高级技巧,它可以让开发者根据项目需求创建出独特的用户界面元素。本文将通过一个简单示例,引导你了解如何在安卓项目中实现自定义视图控件,包括创建自定义控件类、处理绘制逻辑以及响应用户交互。无论你是初学者还是有经验的开发者,这篇文章都会为你提供有价值的见解和技巧。
67 3
|
4月前
|
Android开发
Android经典实战之Textview文字设置不同颜色、下划线、加粗、超链接等效果
本文介绍了 `SpannableString` 在 Android 开发中的强大功能,包括如何在单个字符串中应用多种样式,如颜色、字体大小、风格等,并提供了详细代码示例,展示如何设置文本颜色、添加点击事件等,助你实现丰富文本效果。
359 3