Android控件與佈局——基礎控件TextView

        最近在用原生的控件和佈局繪製一些界面並使用，雖然這些都是Android基本知識，但是有的時候真的感覺力不從心，感覺有必要對Android常用的控件和佈局做一個系統的瞭解。後續一個月甚至更多的時間都會圍繞這個主題展開，畢竟這裏面還是有不少高級控件的，我也會盡量結合應用深入的進行了解。

上一篇：Space      下一篇：EditText

今天我們的主題是TextView，在日常開發中最常見的一個控件之一了，我們打開TextView的源碼可以發現，將近12000行，所以了我們主要結合日常使用的功能來展開，主線還是基於TextView的源碼文檔來，下面我們先看一個整體介紹：

* A user interface element that displays text to the user.
* To provide user-editable text, see {@link EditText}.

向用戶展示文本的用戶接口元素，其子類EditText提供用戶可編輯文本的功能

今天，我們主要介紹TextView，下一篇才介紹EditText，所以後半句暫時不管，那總結來說，TextView就是給用戶展示文本信息的，那究竟如何實現了，我們接着往下看：

* <p>
* The following code sample shows a typical use, with an XML layout
* and code to modify the contents of the text view:
* </p>

* <pre>
* &lt;LinearLayout
      xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="match_parent"
      android:layout_height="match_parent"&gt;
*    &lt;TextView
*        android:id="@+id/text_view_id"
*        android:layout_height="wrap_content"
*        android:layout_width="wrap_content"
*        android:text="@string/hello" /&gt;
* &lt;/LinearLayout&gt;
* </pre>
* <p>

下面的代碼就演示了在XML佈局文件中以及邏輯代碼中修改文本內容的最典型應用

上面的代碼再簡單不過了，就是在佈局文件中添加一個TextView並通過android：text屬性來添加顯示的文本，我們接着往下看：

* This code sample demonstrates how to modify the contents of the text view
* defined in the previous XML layout:
* </p>
* <pre>
* public class MainActivity extends Activity {
*
*    protected void onCreate(Bundle savedInstanceState) {
*         super.onCreate(savedInstanceState);
*         setContentView(R.layout.activity_main);
*         final TextView helloTextView = (TextView) findViewById(R.id.text_view_id);
*         helloTextView.setText(R.string.user_greeting);
*     }
* }
* </pre>

下面的代碼演示瞭如何通過邏輯代碼修改之前在XML中定義的TextView控件的中文本內容

 上面的代碼就是通過TextView的setText()接口對TextView中的文本內容進行修改的邏輯，也很簡單，那我們再接着往下看：

* <p>
* To customize the appearance of TextView, see <a href="https://developer.android.com/guide/topics/ui/themes.html">Styles and Themes</a>.
* </p>

如果想自定義TextView的顯示樣式，可以參考上面的網址（建議搞個VPN）

上面給了我們自定義TextView樣式的參考網址，不急，我們再接着往下看：

* <p>
* <b>XML attributes</b>
* <p>
* See {@link android.R.styleable#TextView TextView Attributes},
* {@link android.R.styleable#View View Attributes}
*
* @attr ref android.R.styleable#TextView_text
* @attr ref android.R.styleable#TextView_bufferType
* @attr ref android.R.styleable#TextView_hint
* @attr ref android.R.styleable#TextView_textColor
* @attr ref android.R.styleable#TextView_textColorHighlight
* @attr ref android.R.styleable#TextView_textColorHint
* @attr ref android.R.styleable#TextView_textAppearance
* @attr ref android.R.styleable#TextView_textColorLink
* @attr ref android.R.styleable#TextView_textSize
* @attr ref android.R.styleable#TextView_textScaleX
* @attr ref android.R.styleable#TextView_fontFamily
* @attr ref android.R.styleable#TextView_typeface
* @attr ref android.R.styleable#TextView_textStyle
* @attr ref android.R.styleable#TextView_cursorVisible
* @attr ref android.R.styleable#TextView_maxLines
* @attr ref android.R.styleable#TextView_maxHeight
* @attr ref android.R.styleable#TextView_lines
* @attr ref android.R.styleable#TextView_height
* @attr ref android.R.styleable#TextView_minLines
* @attr ref android.R.styleable#TextView_minHeight
* @attr ref android.R.styleable#TextView_maxEms
* @attr ref android.R.styleable#TextView_maxWidth
* @attr ref android.R.styleable#TextView_ems
* @attr ref android.R.styleable#TextView_width
* @attr ref android.R.styleable#TextView_minEms
* @attr ref android.R.styleable#TextView_minWidth
* @attr ref android.R.styleable#TextView_gravity
* @attr ref android.R.styleable#TextView_scrollHorizontally
* @attr ref android.R.styleable#TextView_password
* @attr ref android.R.styleable#TextView_singleLine
* @attr ref android.R.styleable#TextView_selectAllOnFocus
* @attr ref android.R.styleable#TextView_includeFontPadding
* @attr ref android.R.styleable#TextView_maxLength
* @attr ref android.R.styleable#TextView_shadowColor
* @attr ref android.R.styleable#TextView_shadowDx
* @attr ref android.R.styleable#TextView_shadowDy
* @attr ref android.R.styleable#TextView_shadowRadius
* @attr ref android.R.styleable#TextView_autoLink
* @attr ref android.R.styleable#TextView_linksClickable
* @attr ref android.R.styleable#TextView_numeric
* @attr ref android.R.styleable#TextView_digits
* @attr ref android.R.styleable#TextView_phoneNumber
* @attr ref android.R.styleable#TextView_inputMethod
* @attr ref android.R.styleable#TextView_capitalize
* @attr ref android.R.styleable#TextView_autoText
* @attr ref android.R.styleable#TextView_editable
* @attr ref android.R.styleable#TextView_freezesText
* @attr ref android.R.styleable#TextView_ellipsize
* @attr ref android.R.styleable#TextView_drawableTop
* @attr ref android.R.styleable#TextView_drawableBottom
* @attr ref android.R.styleable#TextView_drawableRight
* @attr ref android.R.styleable#TextView_drawableLeft
* @attr ref android.R.styleable#TextView_drawableStart
* @attr ref android.R.styleable#TextView_drawableEnd
* @attr ref android.R.styleable#TextView_drawablePadding
* @attr ref android.R.styleable#TextView_drawableTint
* @attr ref android.R.styleable#TextView_drawableTintMode
* @attr ref android.R.styleable#TextView_lineSpacingExtra
* @attr ref android.R.styleable#TextView_lineSpacingMultiplier
* @attr ref android.R.styleable#TextView_marqueeRepeatLimit
* @attr ref android.R.styleable#TextView_inputType
* @attr ref android.R.styleable#TextView_imeOptions
* @attr ref android.R.styleable#TextView_privateImeOptions
* @attr ref android.R.styleable#TextView_imeActionLabel
* @attr ref android.R.styleable#TextView_imeActionId
* @attr ref android.R.styleable#TextView_editorExtras
* @attr ref android.R.styleable#TextView_elegantTextHeight
* @attr ref android.R.styleable#TextView_letterSpacing
* @attr ref android.R.styleable#TextView_fontFeatureSettings
* @attr ref android.R.styleable#TextView_breakStrategy
* @attr ref android.R.styleable#TextView_hyphenationFrequency
* @attr ref android.R.styleable#TextView_autoSizeTextType
* @attr ref android.R.styleable#TextView_autoSizeMinTextSize
* @attr ref android.R.styleable#TextView_autoSizeMaxTextSize
* @attr ref android.R.styleable#TextView_autoSizeStepGranularity
* @attr ref android.R.styleable#TextView_autoSizePresetSizes
*/

以下是TextView的屬性

上面列舉了TextView的全部屬性，這裏全說不現實也沒有必要，在後面的介紹中我們會把經常使用的屬性引入進來，好了上面就是TextView的全部介紹了，好了，下面我們先來看看TextView是什麼樣：

默認TextView是不可交互的，只是應用文本展示，下面我們就來開始學習的它的屬性了，先看下面幾個：

• android:text：文本內容
• android:textSize：文本大小
• android:textColor：文本顏色
• android:textStyle：文本風格

示例： 

        android:textStyle="bold"
        android:textSize="25sp"
        android:textColor="@color/colorPrimary"
        android:text="我是TextView"

 

上面介紹了關於text相關的幾個基本屬性，下面在介紹一下幾個和hint（提示語，通常用於其子類EditText中使用）:

• android:hint：提示語文本
• android:textColorHint：提示語顏色
• android:autofillHints（API26及以上）：默認提示文本
• hint的size和style可以複用text的

示例：

        android:textStyle="italic"
        android:textSize="25sp"
        android:hint="我是提示文本"
        android:textColorHint="@color/colorPrimary"

好了，關於android:autofillHints屬性在使用的時候參考一下文檔：

* Sets the hints that help an {@link android.service.autofill.AutofillService} determine how
* to autofill the view with the user's data.
*
* <p>Typically, there is only one way to autofill a view, but there could be more than one.
* For example, if the application accepts either an username or email address to identify
* an user.
*
* <p>These hints are not validated by the Android System, but passed "as is" to the service.
* Hence, they can have any value, but it's recommended to use the {@code AUTOFILL_HINT_}
* constants such as:
* {@link #AUTOFILL_HINT_USERNAME}, {@link #AUTOFILL_HINT_PASSWORD},
* {@link #AUTOFILL_HINT_EMAIL_ADDRESS},
* {@link #AUTOFILL_HINT_NAME},
* {@link #AUTOFILL_HINT_PHONE},
* {@link #AUTOFILL_HINT_POSTAL_ADDRESS}, {@link #AUTOFILL_HINT_POSTAL_CODE},
* {@link #AUTOFILL_HINT_CREDIT_CARD_NUMBER}, {@link #AUTOFILL_HINT_CREDIT_CARD_SECURITY_CODE},
* {@link #AUTOFILL_HINT_CREDIT_CARD_EXPIRATION_DATE},
* {@link #AUTOFILL_HINT_CREDIT_CARD_EXPIRATION_DAY},
* {@link #AUTOFILL_HINT_CREDIT_CARD_EXPIRATION_MONTH} or
* {@link #AUTOFILL_HINT_CREDIT_CARD_EXPIRATION_YEAR}.

大概意思就是使用系統默認的自動填充的hint文本，它們都是View類中的字符串常量，比如：

public static final String AUTOFILL_HINT_CREDIT_CARD_EXPIRATION_DATE =
        "creditCardExpirationDate";

好了，我們接着往下看，關於TextView，我們還可以對其行數相關屬性進行設置：

• android:lines：文本行數
• android:minLines：文本所佔最少行數
• android:maxLines：文本所佔最大行數

下面爲了演示效果，我在TextView背景加了一個矩形邊框背景，寫兩個TextView，然後直接在XML界面和Design界面切換演示，初始XML代碼如下：

   <TextView
        android:id="@+id/textView_test1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/rectangle"
        android:text="測試文本行數"
        android:textColorHint="@color/colorPrimary"
        android:textSize="25sp" />

    <TextView
        android:id="@+id/textView_test2"
        android:background="@drawable/rectangle"
        android:text="測試文本行數"
        android:textColorHint="@color/colorPrimary"
        android:textSize="25sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

可見這幾個屬性之間優先級較高的minLines，其實line相關的屬性主要用於TextView的高度測量，我們在源碼中也可以得到驗證：

/**
 * Sets the height of the TextView to be exactly {@code lines} tall.
 * <p>
 * This value is used for height calculation if LayoutParams does not force TextView to have an
 * exact height. Setting this value overrides previous minimum/maximum height configurations
 * such as {@link #setMinLines(int)} or {@link #setMaxLines(int)}. {@link #setSingleLine()} will
 * set this value to 1.
 */

這個值主要用於TextView的佈局高度測量

好了，我們接着往下看，上面只是介紹了和Line數量相關的幾個屬性，下面來看看和Line相關的其他幾個屬性：

• android:lineSpacingExtra：文本行間距
• android:lineSpacingMultiplier：文本顯示比例（默認顯示最後一行，這個值表示當有多行的時候前面行佔一行總高度的比例）

    <TextView
        android:id="@+id/textView_test1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/rectangle"
        android:text="測試文本行屬性測試文本行屬性測試文本行屬性測試文本行屬性測試文本行屬性文本行屬性測試文本行屬性測試文本行屬性測試文本行屬性"
        android:textColorHint="@color/colorPrimary"
        android:textSize="25sp" />
    <TextView
        android:id="@+id/textView_test2"
        android:text="測試文本行數"
        android:textColorHint="@color/colorPrimary"
        android:background="@drawable/rectangle"
        android:textSize="25sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

下面就結合上面的屬性來實現一個文本逐漸下拉顯示的效果（我們這裏只用了一個lineSpacingMultiplier一個屬性）：

 public void showText(View view) {
        if (!isOver) {
            final Timer timer = new Timer();
            timer.schedule(new TimerTask() {
                @Override
                public void run() {
                    percent += 0.05f;
                    if (percent <= 1) {
                        runOnUiThread(new Runnable() {
                            @Override
                            public void run() {
                                textView.setLineSpacing(0, percent);
                            }
                        });
                    } else {
                        isOver=true;
                        percent=0;
                        timer.cancel();
                    }
                }
            }, 100, 50);
        }
        else {
            isOver=false;
            textView.setLineSpacing(0,0);
        }
    }

好了，下面我們再來看一個屬性，這個屬性在以前的開發中可用於實現跑馬燈的效果：

• android:ellipSize：主要用於當文本內容長於TextView控件寬度時候，採用省略的方式而非截斷的方式
• android:singleLine：是否是單行
• android:marqueeRepeatLimit：跑馬燈重複的次數

後面兩個配合第一個使用，我們還是先看一下效果：

可見，當TextView顯示不全內容時，默認會採取截斷的方式，而android：ellipSize屬性就提供這樣一種通過不同的省略方案給用戶一個更好的體驗，下面，我們就結合上面的屬性來實現一個簡單跑馬燈的效果：

 <TextView
        android:layout_marginTop="40dp"
        android:textColor="@color/colorPrimary"
        android:marqueeRepeatLimit="3"
        android:text="Welcome to Android world,here you can enjoy the happiness of Mobile 
        terminal programming"
        android:textSize="25sp"
        android:textAllCaps="false"
        android:singleLine="true"
        android:ellipsize="marquee"
        android:focusable="true"
        android:focusableInTouchMode="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

注意，這裏的文本需要比TextView寬度要寬，不然跑不起來。還有就是上面TextView還必須添加以下兩個屬性：

        android:focusable="true"
        android:focusableInTouchMode="true"

好了，下面我們接着往下看以下關於TextView中關於Drawable的相關屬性：

• android:drawableLeft：在文本左側放置的一個drawable
• android:drawableTop：在文本的上方放置一個drawable
• android:drawableBottom：在文本的下方放置一個drawable
• android:drawableRight：在文本的右側放置一個drawable
• android:drawableStart：在文本的左側放置一個drawable
• android:drawableEnd：在文本的右側放置一個drawable
• android:drawablePadding：控制四周drawable的邊距

比如：

       <TextView
        android:gravity="center"
        android:text="操縱桿"
        android:textSize="10sp"
        android:drawableStart="@drawable/left_drawable"
        android:drawableEnd="@drawable/right_drawable"
        android:drawableTop="@drawable/top_drawable"
        android:drawableBottom="@drawable/bottom_drawable"
        android:layout_width="100dp"
        android:layout_height="100dp" />

上面的效果可以通過邊距屬性和控件的寬高屬性來進行調整。

說到邊距，關於padding的屬性也是很多的，下面來簡單看一些，這個部分都是比較容易理解屬性：

• android:padding：控制文本到四周的邊距
• android:paddingTop：文本到控件上邊邊距
• android:paddingBottom：文本到控件下邊邊距
• android:paddingLeft：文本到控件左邊邊距
• android:paddingRight：文本到控件右邊邊距
• android:paddingVertical：文本到控件上下邊邊距
• android:paddingHorizontal：文本到控件左右邊邊距
• android:paddingEnd：文本到控件右邊邊距
• android:paddingStart：文本到控件左邊邊距

演示上下左右邊距：

演示水平和垂直邊距：

對於四周邊距和start以及end我這裏就不在演示了。好了，其實TextView的主要作用是用於展示文本，目前系統可用屬性有基本的顏色，大小，內容以及三種textStyle（粗體bold，斜體italic以及正常normal）;其實TextView也提供了自定義樣式的屬性配置：

• android:textAppearance：文本的表現樣式

關於自定義的方式這裏就不展開了，就是自定義一個style，繼承一個文本style，然後對文本的屬性進行編輯，比如：

  <style name="MySwitchTextStyle" parent="TextAppearance.AppCompat">
        <item name="textSize">20sp</item>
        <item name="textColor">#CD950C</item>
        <item name="android:textAllCaps">false</item>
    </style>

控件的style我們也可以自定義，也可以使用系統現有的，這個平時使用的較少。到這裏，關於TextView的介紹就結束了，下一篇我們介紹EditText，是TextView的一個直接子類，我們到時候重點介紹其繼承至TextView的inputType這個屬性。這裏可以結合上面的paddingDrawable等相關屬性配合View的事件監聽自己實現一個操縱桿動畫圖標的效果功能。

注：歡迎掃碼關注