Android TextView 文本折叠效果

最近项目中要实现文本展开收起的效果,即默认只显示4行文字,如果textview文字超过4行的话,点击右下角的 更多 按钮即可查看全部的内容。之前的做法是根据 TextView 中的字数来判断,效果不太好。这里在一个FrameLayout 包裹两个 TextView


布局文件 activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="10dp"
    tools:context=".MainActivity" >

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp"
        android:text="@string/textview_fold" />

    <FrameLayout
        android:id="@+id/fl_desc"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/tv_title"
        android:fadingEdge="horizontal"
        android:fadingEdgeLength="5dp" >

        <TextView
            android:id="@+id/tv_desc_short"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:maxLines="4"
            android:textColor="@color/black"
            android:textSize="16sp" />

        <TextView
            android:id="@+id/tv_desc_long"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:textColor="@color/black"
            android:textSize="16sp" />
    </FrameLayout>

    <Button
        android:id="@+id/bt_more"
        android:layout_width="50dp"
        android:layout_height="25dp"
        android:layout_alignParentRight="true"
        android:layout_below="@id/fl_desc"
        android:layout_marginRight="10dp"
        android:background="#1c000000"
        android:gravity="center"
        android:text="@string/label_more"
        android:textSize="15sp"
        android:visibility="gone" />

    <ImageView
        android:id="@+id/iv_more_line"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@id/bt_more"
        android:layout_below="@id/fl_desc"
        android:layout_toLeftOf="@id/bt_more"
        android:background="@drawable/more_line"
        android:contentDescription="@string/app_name"
        android:visibility="gone" />

</RelativeLayout>


MainActivity.java

package com.example.textviewfold;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewTreeObserver;
import android.view.ViewTreeObserver.OnPreDrawListener;
import android.widget.Button;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.TextView;

public class MainActivity extends Activity implements OnClickListener {

	private Button bt_more;
	private FrameLayout fl_desc;
	private TextView tv_desc_short;
	private TextView tv_desc_long;
	private boolean isInit = false;
	private boolean isShowShortText = true;
	private ImageView iv_more_line;

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

		findView();
		initView();
		setListener();
	}

	private void setListener() {
		bt_more.setOnClickListener(this);
	}

	private void initView() {
		String content = "新浪科技讯 北京时间7月25日凌晨消息,在今天举行的新产品发布会上,谷歌发布Android 4.3版本,代号仍为\"果冻豆(Jelly Bean)\"。今天发布的新一代Nexus 7将搭载该操作系统,Nexus系列设备今日可收到OTA推送更新。\r\nAndroid 4.3操作系统新增一系列功能。首先是多用户设置功能,包括针对保护儿童的“受限文件(restricted profiles)”特性。用户可以对应用内容进行限制,防止儿童在使用应用时看到不适宜内容,或接触不合适的应用内购买广告。这项功能与微软Windows Phone的\"儿童乐园(Microsoft's Kid's Corner)\"功能类似。\r\n第二项升级是智能蓝牙(Bluetooth Smart)功能,即\"低功耗蓝牙(Bluetooth Low Energy)\"。";
		tv_desc_short.setText(content);
		tv_desc_long.setText(content);

		ViewTreeObserver vto = fl_desc.getViewTreeObserver();
		vto.addOnPreDrawListener(new OnPreDrawListener() {
			@Override
			public boolean onPreDraw() {
				if (isInit)
					return true;
				if (mesureDescription(tv_desc_short, tv_desc_long)) {
					iv_more_line.setVisibility(View.VISIBLE);
					bt_more.setVisibility(View.VISIBLE);
				}
				isInit = true;
				return true;
			}
		});
	}

	/**
	 * 计算描述信息是否过长
	 */
	private boolean mesureDescription(TextView shortView, TextView longView) {
		final int shortHeight = shortView.getHeight();
		final int longHeight = longView.getHeight();
		if (longHeight > shortHeight) {
			shortView.setVisibility(View.VISIBLE);
			longView.setVisibility(View.GONE);
			return true;
		}
		shortView.setVisibility(View.GONE);
		longView.setVisibility(View.VISIBLE);
		return false;
	}

	private void findView() {
		fl_desc = (FrameLayout) findViewById(R.id.fl_desc);
		tv_desc_short = (TextView) findViewById(R.id.tv_desc_short);
		tv_desc_long = (TextView) findViewById(R.id.tv_desc_long);

		bt_more = (Button) findViewById(R.id.bt_more);
		iv_more_line = (ImageView) findViewById(R.id.iv_more_line);
	}

	@Override
	public void onClick(View v) {
		switch (v.getId()) {
		case R.id.bt_more:
			if (isShowShortText) {

				tv_desc_short.setVisibility(View.GONE);
				tv_desc_long.setVisibility(View.VISIBLE);
			} else {
				tv_desc_short.setVisibility(View.VISIBLE);
				tv_desc_long.setVisibility(View.GONE);
			}
			toogleMoreButton(bt_more);
			isShowShortText = !isShowShortText;
			break;

		default:
			break;
		}
	}

	/**
	 * 更改按钮【更多】的文本
	 */
	private void toogleMoreButton(Button btn) {

		String text = (String) btn.getText();
		String moreText = getString(R.string.label_more);
		String lessText = getString(R.string.label_less);
		if (moreText.equals(text)) {
			btn.setText(lessText);
		} else {
			btn.setText(moreText);
		}
	}
}



运行效果

为展开的状态



展开后的状态



OK,到这就完了,有更好的实现方法,可以一起讨论哦!



工程下载地址:http://download.csdn.net/detail/fx_sky/5812437





评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值