UI元件-TextView及其子類

前言

時間就像海綿裡的水，隻要願擠，總還是有的。

TextView元件

TextView直接繼承了View,它的作用就是在界面上顯示文本。

代碼示例

<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:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="15pt"
        android:text="halo_加油"
        android:gravity="center"
        />

    <!-- 設定字号為20pt，在文本框結尾處繪制圖檔 -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="HALO_加油"
        android:textSize="20pt"
        android:drawableEnd="@drawable/ic_launcher"
     />

    <!-- 設定結尾省略，所有字母大寫 -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:singleLine="true"
        android:text="halo_加油halo_加油halo_加油halo_加油halo_加油halo_加油halo_加油halo_加油halo_加油halo_加油halo_加油"
        android:ellipsize="end"
        android:textAllCaps="true"
    />

    <!-- 對郵箱、電話增加連結 -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:singleLine="true"
        android:text="郵箱是[email protected],電話是010666666"
        android:autoLink="email|phone"
    />

    <!-- 設定文字顔色、大小，并使用陰影  -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Halo_加油"
        android:shadowColor="#00f"
        android:shadowDx="10.0"
        android:shadowDy="8.0"
        android:shadowRadius="3.0"
        android:textColor="#f00"
        android:textSize="18pt"
    />
    <!-- 密碼框 -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="halo_加油"
        android:password="true"
    />
</LinearLayout>

           

效果

Screenshot_20171018-095040.png

提示

andriod:drawableBottom屬性,在文本框内文本的底端繪制指定圖像。

andriod:drawableTop屬性,在文本框内文本的頂端繪制指定圖像。

andriod:drawableLeft屬性,在文本框内文本的左邊繪制指定圖像。

andriod:drawableRight屬性,在文本框内文本的右邊繪制指定圖像。

andriod:drawableEnd屬性,在文本框内文本的結尾處繪制指定圖像。

andriod:drawableStart屬性,在文本框内文本的開始處繪制指定圖像。

andriod:ellipsize屬性,設定當顯示文本超過了TextView的長度時,如何處理文本内容。(none,start,middle,end,marquee)。

andriod:lines屬性,設定該文本框預設占幾行。

andriod:linksClickable屬性,控制該文本框的URL、E-mail等連結是否可點選。

andriod:maxLines屬性,設定該文本框最多占幾行。

andriod:singleLine屬性,設定該文本框是否為單行模式。

andriod:textAllCaps屬性,設定是否将文本框的所有字母顯示為大寫字母。

andriod:autoLink屬性,是否将符合指定格式的文本轉換為可單擊的超連結形式。

andriod:shadowColor屬性,設定文本框内文本的陰影顔色。

自定義TextView元件

在有的時候，系統自帶TextView滿足不了你的要求，比如說在預設情況下，TextView是不帶邊框的，如果想為TextView添加邊框，我們可以考慮為TextView設定一個背景Drawable，該Drawable隻是一個邊框，這樣就實作了帶邊框的TextView。

drawable\bg_border.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <!-- 設定背景色為透明色 -->
    <solid android:color="#0000"/>
    <!-- 設定紅色邊框 -->
    <stroke android:width="4px" android:color="#f00"/>
</shape>

           

drawable\bg_border2.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <!-- 指定圓角矩形的4個圓角的半徑 -->
    <corners
        android:topLeftRadius="20px"
        android:topRightRadius="20px"
        android:bottomLeftRadius="20px"
        android:bottomRightRadius="20px"
        />

    <!-- 指定邊框線條的寬度和顔色 -->
    <stroke android:width="4px" android:color="#f0f"/>
    <!-- 指定使用漸變背景色，使用sweep類型的漸變。顔色從紅色->綠色->藍色 -->
    <gradient
        android:startColor="#f00"
        android:centerColor="#0f0"
        android:endColor="#00f"
        android:type="sweep"
        />
</shape>
           

layout\textview.xml

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

<LinearLayout xmlns:android="

http://schemas.android.com/apk/res/android

"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical" >

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="帶邊框的文本1"
    android:textSize="22pt"
    android:background="@drawable/bg_border"
/>
<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="圓角邊框、漸變背景的文本"
    android:textSize="22pt"
    android:background="@drawable/bg_border2"
/>
           

</LinearLayout>

Screenshot_20171018-102316.png

EditText元件

EditText與TextView非常相似，它甚至與TextView共用了絕大部分XML屬性和方法。EditText與TextView的最大差別在于：EditText可以接受使用者輸入。

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:stretchColumns="1">

    <TableRow>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="使用者名:"
            android:textSize="16sp"
            />
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="請填寫登陸賬号"
            android:selectAllOnFocus="true"
            />
    </TableRow>
    <TableRow>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="密碼:"
            android:textSize="16sp"
            />
        <!-- andriod:inputType="numberPassword"表明隻能接受數字密碼 -->
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="numberPassword"
            />
    </TableRow>
    <TableRow>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="年齡:"
            android:textSize="16sp"
            />
        <!-- inputType="number"表明是數值輸入框 -->
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="number"
            />
    </TableRow>
    <TableRow>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="生日:"
            android:textSize="16sp"
            />
        <!-- inputType="date"表明是日期輸入框 -->
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="date"
            />
    </TableRow>
    <TableRow>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="電話号碼:"
            android:textSize="16sp"
            />
        <!-- inputType="phone"表明是輸入電話号碼的輸入框 -->
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="請填寫您的電話号碼"
            android:selectAllOnFocus="true"
            android:inputType="phone"
            />
    </TableRow>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="注冊"
        />
</TableLayout>
           

Screenshot_20171018-110532.png

android:hint屬性,設定當該文本框内容為空時，文本框内預設顯示的提示文本。

android:inputType屬性,指定文本框的類型。類似于HTML中<input.../>元素的type屬性。

Button元件

Button繼承了TextView,它主要是在UI界面上生成一個按鈕,該按鈕可以供使用者單擊,當使用者單擊按鈕時,按鈕會觸發一個onClick事件。

示例代碼

\layout\button.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <!-- 文字帶陰影的按鈕 -->
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="文字帶陰影的按鈕"
        android:textSize="12pt"
        android:shadowColor="#aa5"
        android:shadowRadius="1"
        android:shadowDx="5"
        android:shadowDy="5"
        />
    <!-- 普通文字按按鈕 -->
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="普通按鈕"
        android:textSize="10pt"
        android:background="@drawable/red"
        />
    <!-- 帶文字的圖檔按鈕 -->
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="11px"
        android:text="帶文字的圖檔按鈕"
        android:background="@drawable/button_selector"
        />
</LinearLayout>
           

\drawable\button_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <!-- 指定按鈕按下時的圖檔 -->
    <item android:state_pressed="true"
        android:drawable="@drawable/red"
        />
    <!-- 指定按鈕松開時的圖檔 -->
    <item android:state_pressed="false"
        android:drawable="@drawable/blue"
        />
</selector>

           

Screenshot_20171018-123121.png

這裡隻是簡單的介紹了Button元件的生成方式,Button是一個很強大的元件,使用Button生成的按鈕不僅可以是普通的文字按鈕,也可以定制成任意形狀。另外,Button的點選事件将在後面的章節介紹。

RadioButton元件和CheckBox元件

單選鈕(RadioButton)和複選框(CheckBox)繼承了Button類,是以可以直接使用Button支援的各種屬性和方法。

\layout\radio_check.xml

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    <TableRow>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="性别:"
            />
        <!-- 定義一組單選按鈕 -->
        <RadioGroup
            android:id="@+id/rg"
            android:orientation="horizontal"
            android:layout_gravity="center_horizontal"
            >
            <!-- 定義兩個單選按鈕 -->
            <RadioButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/male"
                android:text="男"
                android:checked="true"
                />
            <RadioButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/female"
                android:text="女"
                />
        </RadioGroup>
    </TableRow>

    <TableRow>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="喜歡的顔色:"/>
        <!-- 定義一個垂直的現線性布局 -->
        <LinearLayout
            android:layout_gravity="center_horizontal"
            android:orientation="vertical"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            >
            <!-- 定義三個複選框 -->
            <CheckBox
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="紅色"
                android:checked="true"
                />
            <CheckBox
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="藍色"
                />
            <CheckBox
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="綠色"
                />
        </LinearLayout>
    </TableRow>
    <TextView
        android:id="@+id/show"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />
</TableLayout>

           

MainActivity.java

public class MainActivity extends Activity {

    RadioGroup rg;
    TextView show;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.radio_check);

        //擷取rg、show兩個元件
        rg = (RadioGroup) findViewById(R.id.rg);
        show = (TextView) findViewById(R.id.show);
        //為RadioGroup元件的OnCheckedChanged事件綁定事件監聽器
        rg.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {

            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                // TODO Auto-generated method stub
                String tip = checkedId == R.id.male?"您的性别是男人":"您的性别是女人";

                show.setText(tip);
            }
        });
    }

}
           

Screenshot_20171018-131021.png

andriod:checked屬性，用于指定RadioButton、CheckBox初始時是否被選中。

RadioButton與CheckBox的不同之處在于,一組RadioButton隻能選中其中一個,是以RadioButton通常要與RadioGroup一起使用。

ToggleButton元件和Switch元件

狀态開關按鈕(ToggleButton)和開關(Switch)由Button派生出來,是以它們的本質也是按鈕,隻不過它們通常用于切換程式中的某種狀态。

/layout/togglebutton_switch.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <!-- 定義一個ToggleButton按鈕 -->
    <ToggleButton
        android:id="@+id/toggle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textOff="橫向排列"
        android:textOn="縱向排列"
        android:checked="true"
        />
    <!-- 定義一個Switch按鈕 -->
    <Switch
        android:id="@+id/switcher"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textOff="橫向排列"
        android:textOn="縱向排列"
        android:checked="true"
        />
    <!-- 定義一個可以動态改變方向的線性布局 -->
    <LinearLayout
        android:id="@+id/test"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        >
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="button1"
            />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="button2"
            />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="button3"
            />

    </LinearLayout>
</LinearLayout>
           

public class MainActivity extends Activity {

    ToggleButton toggle;
    Switch switcher;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.togglebutton_switch);

        toggle = (ToggleButton) findViewById(R.id.toggle);
        switcher = (Switch) findViewById(R.id.switcher);

        final LinearLayout test = (LinearLayout) findViewById(R.id.test);

        OnCheckedChangeListener listener = new OnCheckedChangeListener() {

            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                // TODO Auto-generated method stub
                if(isChecked)
                {
                    //設定LinearLayout垂直布局
                    test.setOrientation(1);
                    toggle.setChecked(true);
                    switcher.setChecked(true);
                }
                else
                {
                    //設定LinearLayout水準布局
                    test.setOrientation(0);
                    toggle.setChecked(false);
                    switcher.setChecked(false);
                }
            }
        };
        toggle.setOnCheckedChangeListener(listener);
        switcher.setOnCheckedChangeListener(listener);
    }

}

           

Screenshot_20171018-133244.png

Screenshot_20171018-133246.png

andriod:textOff屬性,設定目前按鈕的狀态關閉時顯示的文本。

andriod:textOn屬性,設定目前按鈕的狀态關打開時顯示的文本。

AnalogClock元件和TextClock元件

時鐘UI元件是兩個非常簡單的元件,直接上代碼。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center_horizontal" >
    <!-- 定義模拟時鐘 -->
    <AnalogClock
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        />
    <!-- 定義數字時鐘-->
    <DigitalClock
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:textSize="10pt"
        android:textColor="#f0f"
        />
</LinearLayout>
           

Screenshot_20171018-135214.png

目前TextClock已經取代了早期的DigitalClock元件,需要API17以上才能使用。TextClock元件能以24小時制或12小時制來顯示時間,而且可以由程式員來指定時間格式。

Chronometer元件

計時器(Chronometer)元件繼承自TextView,它顯示的是從某個起始時間開始,一共過去了多長時間。

Chronometer的用法也很簡單,它隻提供了一個andriod:format屬性,用于指定計時器的計時格式。除此之外,還支援如下常用方法。

• setBase(long base):設定計時器的起始時間。
• setFormat(String format):設定顯示時間的格式。
• start():開始計時。
• stop():停止計時。
• setOnChronometerTickListener(Chronometer.OnChronometerTickListener listener):為計時器綁定事件監聽器,當計時器改變時觸發該監聽器。

public class MainActivity extends Activity {
    Chronometer ch;
    Button start;

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

        ch = (Chronometer) findViewById(R.id.test);
        start = (Button) findViewById(R.id.start);

        start.setOnClickListener(new Button.OnClickListener() {

            @Override
            public void onClick(View v) {
                //設定開始計時時間
                ch.setBase(SystemClock.elapsedRealtime());
                //啟動計時器
                ch.start();
                start.setEnabled(false);
            }
        });
        //為Chronometer綁定監聽事件
        ch.setOnChronometerTickListener(new OnChronometerTickListener() {

            @Override
            public void onChronometerTick(Chronometer ch) {
                //如果從現在開始計時到現在超過了20s
                if(SystemClock.elapsedRealtime() - ch.getBase() > 20 * 1000)
                {
                    ch.stop();
                    start.setEnabled(true);
                }
            }
        });
    }
}

           

Screenshot_20171018-143258.png

程式中用到的SystemClock類僅是一個擷取系統時間、運作時間的工具類。