Android超简单实现文字展开收起效果

目录

image

前言

公司项目需要一个类似微信朋友圈文字展开收起的效果,为了方便一开始我在网上找类似的效果实现,结果发现代码量都很多计算量很大,而我头脑这么简单所以看起来比较费劲因此我就用非常简单的方法写了一个自定义的展开收起控件。

效果展示

image

实现原理

原理很简单,需要用3个TextView,其中一个是展示文字的,一个是用来计算文字的行数,一个是用来展开和收起的:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
<!--    展示文字-->
    <TextView
        android:id="@+id/view_seemore_tvcontent"
        android:textColor="#000"
        android:maxLines="2"
        android:ellipsize="end"
        android:textSize="15sp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
<!--    占位置的隐藏,并且高度设置的很小,用来获取行数-->
    <TextView
        android:id="@+id/view_seemore_tvlinecount"
        android:textColor="#000"
        android:visibility="invisible"
        android:textSize="15sp"
        android:layout_width="match_parent"
        android:layout_height="1dp"/>
<!--    显示更多和收起-->
    <TextView
        android:id="@+id/view_seemore_tv_seemore"
        android:layout_marginTop="5dp"
        android:text="查看更多"
        android:textColor="#00f"
        android:visibility="gone"
        android:maxLines="2"
        android:ellipsize="end"
        android:textSize="15sp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
</LinearLayout>

然后需要在自定义控件的类中做相应的处理:

class SeeMoreView:FrameLayout {
    //是否展开和收起的标记
    private var mIsShowAll:Boolean = false
    constructor(context: Context) : this(context,null)
    constructor(context: Context, attrs: AttributeSet?) : this(context, attrs,0)
    constructor(context: Context, attrs: AttributeSet?, defStyleAttr: Int) : super(
        context,
        attrs,
        defStyleAttr
    ){
        View.inflate(context, R.layout.view_seemore,this)
        initListener()
    }
    private fun initListener() {
        //查看更多的点击事件
        view_seemore_tv_seemore.setOnClickListener {
            if(mIsShowAll){
                //这是收起的关键代码,将最大行数设置为你想展示的最小行数即可
                view_seemore_tvcontent.maxLines = 2
                view_seemore_tv_seemore.text = "查看更多"
            }else{
                //这是查看更多的关键代码,将最大行数设置一个大数即可
                view_seemore_tvcontent.maxLines = 20
                view_seemore_tv_seemore.text = "收起"
            }
            mIsShowAll = !mIsShowAll
        }
        //attachedToWindow之后执行操作
        post {
            //这里必须这样写,这是在attachedToWindow之后执行操作,否则获取行数会出问题
            Log.e("测试","OnLayout${view_seemore_tvlinecount.lineCount}")
            if(view_seemore_tvlinecount.lineCount>2){
                view_seemore_tv_seemore.visibility = View.VISIBLE
            }else{
                view_seemore_tv_seemore.visibility = View.GONE
            }
        }

    }
    /**
     * 设置文字
     */
    fun setText(text:String){
        //每次设置文字后都要进行重置
        view_seemore_tvcontent.text = text
        view_seemore_tvlinecount.text = text
        view_seemore_tv_seemore.text = "查看更多"
        view_seemore_tvcontent.maxLines = 2
        mIsShowAll = false
        if(view_seemore_tvlinecount.lineCount>2){
            view_seemore_tv_seemore.visibility = View.VISIBLE
        }else{
            view_seemore_tv_seemore.visibility = View.GONE
        }
    }
}

项目源码

https://github.com/dahui888/SeeMore

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 目录 前言 公司项目需要一个类似微信朋友圈文字展开收起的效果,为了方便一开始我在网上找类似的效果实现,结果发现代码...
    itfitness阅读 4,210评论 0 20
  • 1.计算目标 2.编写程序 3.编译程序 4.运行程序 5.显示结果
    一路向后阅读 1,867评论 0 0
  • 说起跑步,现在的我可谓是别人眼中的强者。虽然跑步时间不算太久,从2015年5月17号到今天算下来好像刚刚好100天...
    灵犀一点阅读 955评论 1 50
  • 清明朔雨风悲泣。却到我、犹如喜。锦帽龙披街畔里。子规春送,瓦灰墙圮,一路行人密。 夜天伫楼明灯细。玉宇十年️可难忆...
    东武居士阅读 540评论 0 4