基本UI组件

UI组件都是作为View的子类，因此天然继承了View的属性。同时，在不同布局（布局其实就是一个ViewGroup）下，可以对View设置其特有属性。

文章目录

基本UI组件

1. 文本框 TextView

TextView，显示文本。

用法举例：

<LinearLayout
      xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="match_parent"
      android:layout_height="match_parent">
     <TextView
         android:id="@+id/text_view_id"
         android:layout_height="wrap_content"
         android:layout_width="wrap_content"
         android:text="@string/hello" />
  </LinearLayout>

View在Java中获取通过ID：(TextView) findViewById(R.id.text_view_id)

常用属性：

属性	说明
android:text	文字内容
android:textSize	文字大小
android:textStyle	文字格式（normal, bold, italic, bold\|italic）
android:textColor	文字颜色

2. 输入框 EidtText

EidtText，输入框，是TextView的子类。

用法举例：

<EditText
      android:id="@+id/plain_text_input"
      android:layout_height="wrap_content"
      android:layout_width="match_parent"
      android:inputType="text"/>

常用属性：使用的其实还是TextView的属性，但是这些属性基本上都是用在EidtText组件上的

属性	说明
android:hint	提示文字
android:inputType	输入类型，值为：text, number, textPassword…，多类型用`\|`分割。
android:drawableLeft	输入框左侧（其他边也有相应的属性）绘制对象，值通常为一个可绘制资源文件，如`@mipmap/xx`
android:drawablePadding	可绘制对象的内边距
android:lines	输入框高多少行，值为整数。

3. 按钮 Button

Button，按钮，也是TextView的子类。

使用举例：

<Button
      android:id="@+id/button_id"
      android:layout_height="wrap_content"
      android:layout_width="wrap_content"
      android:text="@string/self_destruct" />

按钮可以设置其点击事件，有两种方式：

XML中定义android:onClick属性，属性值为Activity中的一个public void functionName(View view)的一个自定义函数，如android:onClick="functionName"。

设置点击监听事件：

public class MyActivity extends Activity {
      
      
      protected void onCreate(Bundle savedInstanceState) {
      
      
          super.onCreate(savedInstanceState);
 
          setContentView(R.layout.content_layout_id);
 
          final Button button = findViewById(R.id.button_id);
          button.setOnClickListener(new View.OnClickListener() {
      
      
              public void onClick(View v) {
      
      
                  // Code here executes on main thread after user presses button
              }
          });
      }
  }

4. 图片按钮 ImageButton

ImageButton，图片样式的按钮，ImageView的子类。

使用举例：

<LinearLayout
      xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="match_parent"
      android:layout_height="match_parent">
      <ImageButton
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:src="@drawable/my_image"
          />
  </LinearLayout>

用andorid:src设置图片。
去除默认按钮背景：

设置andorid:background为自己的图片或设为透明android:background:#0000

5. 单选框 RadioButton

RadioButton，单选框，通常都置于RadioGroup中，形成一组单选框，一组中有且仅有一个单选框处于被选中状态，选中后无法取消（除非选中了一组中的其他单选框）。

使用举例：（这里由于RadioGroup做了根标签，所以要有xmls:android...。非根时，可有可没有）

<?xml version="1.0" encoding="utf-8"?>
<RadioGroup xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">
    <RadioButton android:id="@+id/radio_pirates"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/pirates"
        android:onClick="onRadioButtonClicked"/>
    <RadioButton android:id="@+id/radio_ninjas"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/ninjas"
        android:onClick="onRadioButtonClicked"/>
</RadioGroup>

ViewGroup是LinearLayout的子类，所以ViewGroup默认是垂直的线性布局，可以用android:orientation属性来改变线性方向。

可以使用andorid:onClick属性来设置单选框的点击事件，代码可以如下：

public void onRadioButtonClicked(View view) {
      
      
    // Is the button now checked?
    boolean checked = ((RadioButton) view).isChecked();

    // Check which radio button was clicked
    switch(view.getId()) {
      
      
        case R.id.radio_pirates:
            if (checked)
                // Pirates are the best
            break;
        case R.id.radio_ninjas:
            if (checked)
                // Ninjas rule
            break;
    }
}

上面例子中，可以看到Java中通过radioButton.isChecked()方法来判断某个单选框是否被选中，通过View.getID()来判断用户点击的是哪个单选框。
radioGroup.getCheckedRadioButtonId()：获取选择单选框的ID
radioGroup.getChildCount()获取单选框数量（该方法继承自ViewGroup），radioGroup.childAt(<childIndex>)获得具体的RadioButton。

6. 多选框 CheckBox

CheckBox，多选框。和单选不同的是，每个多选框是独立的，可以选择或取消。

使用举例：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <CheckBox android:id="@+id/checkbox_meat"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/meat"
        android:onClick="onCheckboxClicked"/>
    <CheckBox android:id="@+id/checkbox_cheese"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/cheese"
        android:onClick="onCheckboxClicked"/>
</LinearLayout>

可以使用andorid:onClick属性来设置多选框的点击事件，代码可以如下：

public void onCheckboxClicked(View view) {
      
      
    // Is the view now checked?
    boolean checked = ((CheckBox) view).isChecked();

    // Check which checkbox was clicked
    switch(view.getId()) {
      
      
        case R.id.checkbox_meat:
            if (checked)
                // Put some meat on the sandwich
            else
                // Remove the meat
            break;
        case R.id.checkbox_cheese:
            if (checked)
                // Cheese me
            else
                // I'm lactose intolerant
            break;
        // TODO: Veggie sandwich
    }
}

上面例子中，可以看到Java中通过radioButton.isChecked()方法来判断多选框是否被选中，通过View.getID()来判断用户点击的是哪个单选框。

7. 计时器 Chronometer

Chronometer，简易计时器。

使用举例：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:background="#efefef">

    <Chronometer
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:format="%s"
        android:id="@+id/chronometer"/>

</RelativeLayout>

在Java代码中，Chronometer类有以下方法控制这个计时器

getBase(), setBase(<long base>)：获取或设置参考时间，参数为表示时间的长整数，当前时间用SystemClock.elapsedRealtime获取。
start()：开始计时，未手动设置参考时间时，则以start运行的时间为参考时间
stop()：结束计时。
setOnChronometerTickListener（<Chronometer.OnChronometerTickListener listener>）：设置计时监听器。

8. Toast

消息框 Toast

弹出提示消息，其实并不是UI组件，但是在学习UI组件时学习到了这个组件，就一并放在这里。

基本用法：（写法比较固定）

Context context = getApplicationContext();
CharSequence text = "Hello toast!";
int duration = Toast.LENGTH_SHORT;

Toast.makeText(context, text, duration).show();

context：上下文对象。固定写法。
text：提示文字。
duration：显示时间，值为Toast.LENGTH_SHORT或Toast.LENGTH_LONG。

学习的时候好奇了下这个组件名字的由来，stackoverflow中看到了这么一段故事，还挺有趣的：

An ex-Microsoft employee of Google is credited with coining the term during the development of MSN Messenger, since Messenger’s small notification windows slide upward into view, like toast popping out of a toaster

Android 基本UI组件

基本UI组件

文章目录

1. 文本框 TextView

2. 输入框 EidtText

3. 按钮 Button

4. 图片按钮 ImageButton

5. 单选框 RadioButton

6. 多选框 CheckBox

7. 计时器 Chronometer

8. Toast

猜你喜欢