Android UI 之 TextView系列

一、TextView及其子類
TextView及其子類間的繼承關係圖如下：

其中橙色框的控件是平時比較常用，所以也就具體總結一下幾個常用的控件的使用方式

二、TextView
常用屬性：
android:text 指定文本
android:textSize 文本大小，單位推薦用 sp
android:textColor 文本顏色
android:textSyte 設置文本框內文本的字體風格：如粗體、斜體等
android:hint 當該文本內容爲空時，文本框內默認顯示的提示文本
android:textAllCaps 設置是否將文本框的所有字母都顯示爲大寫
android:singleLine 設置該文本是否爲單行模式。如果設爲true，文本框不會換行
java代碼綁定TextView：
TextView textView=(TextView)findViewById(R.id.tvID);
當然也可以完全使用java代碼生成TextView

        RelativeLayout root= (RelativeLayout) findViewById(R.id.root);
        TextView textView=new TextView(this);
        textView.setLayoutParams(new ViewGroup.LayoutParams(
                ViewGroup.LayoutParams.MATCH_PARENT,
                ViewGroup.LayoutParams.WRAP_CONTENT
        ));
        root.addView(textView);

EditText基本用法和TextView類似，有個特別常用的屬性
android:inputType，指輸入到EditText中的數據種類，如時間、密碼、電話號碼之類的
實例：

<?xml version="1.0" encoding="utf-8"?>
<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:id="@+id/root"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.yougel.textviewdemo.TextViewActivity">

    <TextView
        android:id="@+id/textId"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="30sp"
        android:textColor="@color/colorPrimary"
        android:text="請輸入密碼" />
    <EditText
        android:layout_below="@id/textId"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:textColor="@color/colorAccent"
        android:textColorHint="@color/colorAccent"
        android:inputType="textPassword"
        android:hint="密碼"/>
</RelativeLayout>

結果：

三、Button
前面總結相對佈局時，模仿了開發者頭條的兩個界面用到Button，Button的常用屬性基本與TextView一樣，主要了解一下自定義Button的背景以及Button的點擊事件。
1、自定義Button的背景
官方提供的Button的樣式往往不是我們想要的，這時，我們可以通過在drawable目錄下新建一個drawable資源文件來自定義我們Button背景

自定義一個drawable資源文件button_bg_style.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false">
        <shape android:shape="rectangle">
            <solid android:color="@color/btn_bg_f"/>
            <corners android:radius="6dp"/>
            <stroke android:color="@color/colorPrimary" android:width="1dp"/>
        </shape>
    </item>
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="@color/btn_bg_t"/>
            <corners android:radius="6dp"/>
            <stroke android:color="@color/colorPrimaryDark" android:width="1dp"/>
        </shape>
    </item>
</selector>

佈局文件在上面TextView的基礎上加一個Button：

<Button
        android:id="@+id/btn_set"
        android:layout_below="@id/passedit"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/button_bg_style"
        android:text="確定"
        android:textColor="@color/text"
        />

Activity中的代碼：

package com.example.yougel.textviewdemo;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;

public class TextViewActivity extends AppCompatActivity {

    TextView textView;
    EditText editText;
    Button button;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_text_view);
        initTextView();
    }
    public void initTextView(){
        textView= (TextView) findViewById(R.id.textId);
        editText= (EditText) findViewById(R.id.passedit);
        button= (Button) findViewById(R.id.btn_set);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                textView.setText("您輸入的密碼是："+editText.getText());
            }
        });
    }
}

最後的界面效果：

當然Button還有其他一些屬性就不一一介紹，例如文字陰影效果之類的。

四、RadioButton、CheckBox和Switch
RadioButton的使用通常需要一個RadioGroup
佈局文件中：

<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/tv_Gender" />
    <RadioGroup
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:id="@+id/rg_gender">
        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/male"/>
        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/female"/>
    </RadioGroup>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/result_gender"/>

Activity中的代碼：

RadioGroup rgGender;
rgGender= (RadioGroup) findViewById(R.id.rg_gender);
rgGender.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup radioGroup, int i) {
                int radioId=radioGroup.getCheckedRadioButtonId();//獲取選中按鈕的ID
                RadioButton checkedRadio= (RadioButton) findViewById(radioId);
                TextView result_gender= (TextView) findViewById(R.id.result_gender);
                result_gender.setText("您的性別："+checkedRadio.getText());
            }
        });

界面：

RadioGroup也有android:orientation屬性，用於設置單選按鈕水平還是垂直排列
關於CheckBox與Switch與RadioButton類似只是不需要添加到一個組中，所以下面就直接展示所有代碼已經界面
佈局文件：

<?xml version="1.0" encoding="utf-8"?>
<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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.yougel.textviewdemo.CompounButtonActivity">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/tv_Gender" />
    <RadioGroup
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:id="@+id/rg_gender">
        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/male"/>
        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/female"/>
    </RadioGroup>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/result_gender"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/tv_Place"/>
    <RadioGroup
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:id="@+id/rg_place">
        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/gz"/>
        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/sz"/>
        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/sh"/>
    </RadioGroup>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/result_place"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/tv_ball"/>
    <CheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/football"
        android:text="@string/football"/>
    <CheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/basketball"
        android:text="@string/basketball"/>
    <CheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/pingpang"
        android:text="@string/pingpang"/>
    <Switch
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/up_or_down"
        android:id="@+id/up_or_down"/>
</LinearLayout>

Activity代碼：

package com.example.yougel.textviewdemo;

import android.content.Context;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.CheckBox;
import android.widget.CompoundButton;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.Switch;
import android.widget.TextView;
import android.widget.Toast;

public class CompounButtonActivity extends AppCompatActivity {

    RadioGroup rgGender,rgPlace;
    CheckBox ch1,ch2,ch3;
    Switch aSwitch;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_compoun_button);
        iniRadio();
        iniCheckbox();
        iniSwitch();
    }

    //初始化Radio
    public void iniRadio(){
        rgGender= (RadioGroup) findViewById(R.id.rg_gender);
        rgPlace=(RadioGroup) findViewById(R.id.rg_place);
        rgGender.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup radioGroup, int i) {
                int radioId=radioGroup.getCheckedRadioButtonId();//獲取選中按鈕的ID
                RadioButton checkedRadio= (RadioButton) findViewById(radioId);
                TextView result_gender= (TextView) findViewById(R.id.result_gender);
                result_gender.setText("您的性別："+checkedRadio.getText());
            }
        });
        rgPlace.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup radioGroup, int i) {
                int radioId=radioGroup.getCheckedRadioButtonId();
                RadioButton checkedRadio= (RadioButton) findViewById(radioId);
                TextView result_place= (TextView) findViewById(R.id.result_place);
                result_place.setText("您所在位置："+checkedRadio.getText());
            }
        });
    }
    //初始化CheckBox
    public void iniCheckbox(){
        ch1=(CheckBox) findViewById(R.id.football);
        ch2=(CheckBox)findViewById(R.id.basketball);
        ch3=(CheckBox)findViewById(R.id.pingpang);
        ch1.setOnCheckedChangeListener(new MyClick());
        ch2.setOnCheckedChangeListener(new MyClick());
        ch3.setOnCheckedChangeListener(new MyClick());
    }
    class MyClick implements CheckBox.OnCheckedChangeListener{

        @Override
        public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
            Toast.makeText(
                getContext(), 
                (b?"選中了":"取消了")+compoundButton.getText(), 
                Toast.LENGTH_SHORT
            ).show();
        }
    }
    //初始化開關
    public void iniSwitch(){
        aSwitch= (Switch) findViewById(R.id.up_or_down);
        aSwitch.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
                Toast.makeText(
                        getContext(),
                        (b?"開啓":"關閉"),
                        Toast.LENGTH_SHORT
                ).show();
            }
        });
    }
    private Context getContext(){
        return  this;
    }
}

界面：