用開源項目ExpandableTextView打造可以下拉擴展的TextView

 

這次還是用開源項目來實現效果，我個人覺得上面的這個效果還是很贊的。於是就記錄下如何實現這個效果，其實相當簡單。這就是開源項目寫的好的例子，整個開源項目的代碼十分清晰，邏輯和代碼結構都很棒，接入自己的工程也十分方便，10分鍾之內搞定。

 

一、下載開源項目，導入lib

項目地址：https://github.com/Manabu-GT/ExpandableTextView

這個項目是用Android Studio編寫的，如果你是用eclipse來構建，就需要做一些修改。如果懶得修改，就用我在本文末尾分享的源碼吧。

 

二、在xml中放入控件

這個在點擊后可以展開的控件叫做：ExpandableTextView，同樣是一個自定義控件，使用方式自然是放在xml中啦。只要記得寫寫命名空間：xmlns:expandableTextView="http://schemas.android.com/apk/res-auto"

<com.ms.square.android.expandabletextview.ExpandableTextView
        android:id="@+id/expand_text_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        expandableTextView:maxCollapsedLines="8"
        expandableTextView:animAlphaStart="1">

        <TextView
            android:id="@id/expandable_text"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:fontFamily="sans-serif-light"
            android:textSize="16sp"
            android:textColor="#666666" />

        <ImageButton
            android:id="@id/expand_collapse"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="16dp"
            android:layout_gravity="right|bottom"
            android:background="@android:color/transparent"/>
    </com.ms.square.android.expandabletextview.ExpandableTextView>

 

Note：如果你沒有特殊需求，請不要隨便刪除這里面的textView和ImageView。而且請務必保證這兩個控件的id是：expandable_text，expand_collapse。

 

我們現在可以看出，這個控件其實就是一個容器，包含了這兩個view，編輯器中的預覽圖如下：

如果你的eclipse提示預覽圖出現錯誤，無法加載drawable什么的，重啟一下就好了。因為這里用到了lib中默認的箭頭（右下角的圖片）

 

三、在xml中設置控件

我們先來看看這個自定義控件可以設置的屬性

 

3.1 ExpandableTextView

Also, you can optionally set the following attributes in your layout xml file to customize the behavior of the ExpandableTextView.

• maxCollapsedLines (defaults to 8) The maximum number of text lines allowed to be shown when the TextView gets collapsed

• animDuration (defaults to 300ms) Duration of the Animation for the expansion/collapse

• animAlphaStart (defaults to 0.7f) Alpha value of the TextView when the animation starts (NOTE) Set this value to 1 if you want to disable the alpha animation.

• expandDrawable Customize a drawable set to ImageButton to expand the TextView

• collapseDrawable Customize a drawable set to ImageButton to collapse the TextView

 

maxCollapsedLines：textView在收起后還能展示的行數，默認值是8，這里的8是8行的意思

animDuration：動畫持續時間，設置點擊后textView展開的動畫時間，默認是300，單位ms。這個不建議修改

animAlphaStart：動畫開始的透明度，點擊后textview會從這個透明度開始慢慢變到不透明，默認是0.7f。我建議修改為1（不透明），保證不會出現閃爍

expandDrawable：右下角的imageview在textView展開時顯示的圖片，是drawable類型

collapseDrawable：右下角imageview在textView收起時展示的圖片，是drawable類型

 

題外話：雖然這里面可以通過xml屬性進行設置，但它沒有提供完善的java代碼設置方案，所以如果真的需要可以自定在源碼中進行添加。

 

3.2 TextView

這個開源項目做的好的一點就是最大限度的引用了現有的控件，這里顯示文字的仍舊是textview，我們可以很方便的進行操作。而外層的ExpandableTextView就是一個容器，對textview進行修改。

 　　　　 <TextView
            android:id="@id/expandable_text"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:fontFamily="sans-serif-light"
            android:textSize="16sp"
            android:textColor="#666666" />

 

這里可以設置文字的顏色等，至於fontFamily我多說一句，它是設置字體的屬性，如果沒有用這個屬性，那么就會采用系統默認的，如果像上述一樣用了無襯線細字體，那么就會如下面右圖所示

  

android:fontFamily="sans-serif" // roboto regular android:fontFamily="sans-serif-light" // roboto light android:fontFamily="sans-serif-condensed" // roboto condensed android:fontFamily="sans-serif-thin" // roboto thin (android 4.2) android:fontFamily="sans-serif-medium" // roboto medium (android 5.0)

in combination with

android:textStyle="normal|bold|italic"

this 14 variants are possible:

• Roboto regular
• Roboto italic
• Roboto bold
• Roboto bold italic
• Roboto-Light
• Roboto-Light italic
• Roboto-Thin
• Roboto-Thin italic
• Roboto-Condensed
• Roboto-Condensed italic
• Roboto-Condensed bold
• Roboto-Condensed bold italic
• Roboto-Medium
• Roboto-Medium italic

from:http://stackoverflow.com/questions/12128331/how-to-change-fontfamily-of-textview-in-android/12128448

 

四、在Java代碼中使用

使用方式和textview一樣，沒社么可以多說的。如果是在listView中使用，就把它當一個view放進去就好了，具體可以參考項目提供的demo

package com.example.test;

import com.ms.square.android.expandabletextview.ExpandableTextView;

import android.app.Activity;
import android.os.Bundle;

public class MainActivity extends Activity {

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

        ExpandableTextView expTv = (ExpandableTextView) findViewById(R.id.expand_text_view);
        //expTv.setText("hello world");
        expTv.setText(getString(R.string.android5_0_text));
    }

}

 

 

strings.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">Test</string>
    <string name="hello_world">Hello world!</string>
    <string name="android5.0_text">谷歌對各版本的系統安裝量進行了追蹤，去年12月，Android 4.4 KitKat系統的份額從33.9（百分之）升至39.1（百分之），而Android 5.0甚至沒有出現在榜單上。
        需要注意的是，谷歌在報告中並沒有對份額低於0.1（百分之）的系統進行統計。兩 年前發布的Android 4.3 Jelly Bean系統依然占據主導地位，份額為 46（百分之），Android 4.0 Ice Cream Sandwich的
        份額為6.7（百分之），Android 2.3 Gingerbread的份額為 7.8（百分之），Android 2.2 Froyo的份額為0.4（百分之）。盡管很多用戶尚未用上Android 5.0系統，但這並不妨礙 谷歌的更新不發。消息稱，谷歌可能
        會在今年2月發布Android 5.1，更新包括：Android 5.0中缺失的靜音模式被重新加入；系統穩定性提 升；改進內存管理性能；修復應用突然關閉問題；修復使用Wi-Fi時網絡設備過度消耗問題；修復
        無線網絡連接問題。</string>

</resources>

 

五、多說一句

最后想分享下這個效果實現的思路，view在繪制過程中會有自己的大小，而我們可以通過給view添加動畫的方式來讓其變化大小，在其變化大小的時候與他相鄰的view也會被擠壓，這就是listview中出現點擊textview展開后，下方view被壓的原因。歸根結底，我們的實現思路是方式view到屏幕中，點擊后view會出現動畫，讓自己的大小真正發生改變，在改變的時候要對textview進行繪制，這樣才能出現現在的效果。所以，很多看起來高大上的東西，我們如果細細分析，會發現原理其實很簡單。我們也是可以實現的，只不過別人已經做好了，我們就不要重復造輪子了。

 

源碼下載：http://download.csdn.net/detail/shark0017/8346821