Android TextView 文本摺疊效果

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