[Android开发基础2] 七大常用界面控件（附综合案例）

文章目录

 一、文本TextView

二、按钮Button

三、编辑输入框EditText

四、图片ImageView

五、单选按钮RadioButton

六、复选框CheckBox

七、系统消息框Toast

综合案例：账号注册界面

 

---

 

 一、文本TextView

TextView控件用于显示文本信息。

 演示：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="追风赶月莫停留,平芜尽处是春山。"
        android:layout_gravity="center"
        android:textSize="25sp"
        android:textColor="@color/red"
        android:textStyle="italic">
    </TextView>
</RelativeLayout>

 

 属性：

 

---

二、按钮Button

        Button控件表示按钮，它继承自TextView控件，既可以显示文本，又可以显示图片，同时也允许用户通过点击来执行操作，当Button控件被点击时，被按下与弹起的背景会有一个动态的切换效果，这个效果就是点击效果 。

演示：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="点击试试">
    </Button>
</RelativeLayout>

 点击事件实现方式：

方法1

 

方法2

方法3

 

---

三、编辑输入框EditText

EditText表示编辑框，它是TextView的子类，用户可在此控件中输入信息。

演示：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
   <EditText
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:hint="请输入你的姓名"
       android:textColor="#767676"
       android:maxLines="2"
       android:textSize="18sp"
       ></EditText>
</RelativeLayout>

属性：

---

 

四、图片ImageView

         ImageView表示图片，它继承自View，可以加载各种图片资源，图片资源存放在资源文件夹res-->drawable文件夹下。

演示：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
   <ImageView
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:background="@drawable/tom"
       ></ImageView>
</RelativeLayout>

属性：

---

 

五、单选按钮RadioButton

        RadioButton为单选按钮，android:checked 属性指定是否选中的状态。RadioGroup是单选组合框，可容纳多个RadioButton，并把它们组合在一起，实现单选状态。

演示：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
   <RadioGroup
       android:layout_width="match_parent"
       android:layout_height="wrap_content">
       <RadioButton
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:text="男"
           android:textSize="25sp"
           ></RadioButton>
       <RadioButton
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:text="女"
           android:textSize="25sp"
           ></RadioButton>
   </RadioGroup>
</RelativeLayout>

rg是按钮组对象，调用监听器的过程：

rg.setOnCheckedChangeListener(new OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                if (checkedId==R.id.RB1){
                    msg1="男";
                }else if(checkedId==R.id.RB2){
                    msg1="女";
                }
            }
        });

---

六、复选框CheckBox

        CheckBox表示复选框，它是Button的子类，用于实现多选功能，通过android:checked属性指定CheckBox控件是否选中的状态。

演示：

<?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">
   <CheckBox
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="打篮球"
       android:textSize="20sp">
   </CheckBox>
    <CheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="听音乐"
        android:textSize="20sp">
    </CheckBox>
    <CheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="读好书"
        android:textSize="20sp">
    </CheckBox>
    <CheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="吃美食"
        android:textSize="20sp">
    </CheckBox>
</LinearLayout>

复选框选中事件处理：

CompoundButton.OnCheckedChangeListener on=new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                if(buttonView.getId()==R.id.ck1){
                    msg2=isChecked ? "打篮球":null;
                }else  if(buttonView.getId()==R.id.ck2){
                    msg3=isChecked ? "听音乐":null;
                }else  if(buttonView.getId()==R.id.ck3){
                    msg4=isChecked ? "读好书":null;
                }else  if(buttonView.getId()==R.id.ck4){
                    msg5=isChecked ? "吃美食":null;
                }
            }
        };
ck1.setOnCheckedChangeListener(on);
ck2.setOnCheckedChangeListener(on);
ck3.setOnCheckedChangeListener(on);
ck4.setOnCheckedChangeListener(on);

---

七、系统消息框Toast

        Toast是Android系统提供的轻量级信息提醒机制，用于向用户提示即时消息，它显示在应用程序界面的最上层，显示一段时间后自动消失不会打断当前操作，也不获得焦点。

用法：

Toast.makeText(this, "欢迎使用", Toast.LENGTH_SHORT).show();

 

---

综合案例：账号注册界面

<?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="账号注册"
        android:textSize="25sp"
        android:padding="10dp"
        android:textColor="@color/white"
        android:background="#2666ab"
        android:layout_gravity="center">
    </TextView>
    <ImageView
        android:layout_gravity="center"
        android:src="@drawable/qq"
        android:layout_height="100dp"
        android:layout_width="100dp">
    </ImageView>
    <LinearLayout
        android:layout_gravity="center"
        android:orientation="horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <TextView
            android:text="用户名："
            android:textSize="20sp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">
        </TextView>
        <EditText
            android:hint="请输入你的用户名"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">
        </EditText>
    </LinearLayout>
    <LinearLayout
        android:layout_gravity="center"
        android:orientation="horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <TextView
            android:text="密 码："
            android:textSize="20sp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">
        </TextView>
        <EditText
            android:inputType="numberPassword"
            android:hint="请输入你的密码"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">
        </EditText>
    </LinearLayout>
    <LinearLayout
        android:layout_gravity="center"
        android:orientation="horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <TextView
            android:text="性 别："
            android:textSize="20sp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">
        </TextView>
        <RadioGroup
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">
            <RadioButton
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="男">
            </RadioButton>
            <RadioButton
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="女">
            </RadioButton>
        </RadioGroup>
    </LinearLayout>
    <LinearLayout
        android:layout_gravity="center"
        android:orientation="horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <TextView
            android:text="爱 好："
            android:textSize="20sp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">
        </TextView>
        <CheckBox
            android:text="篮球"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">
        </CheckBox>
        <CheckBox
            android:text="音乐"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">
        </CheckBox>
        <CheckBox
            android:text="阅读"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">
        </CheckBox>
    </LinearLayout>
    <LinearLayout
        android:layout_gravity="center"
        android:orientation="horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <Button
            android:textSize="20sp"
            android:layout_width="100dp"
            android:layout_height="wrap_content"
            android:layout_marginRight="15dp"
            android:backgroundTint="#2666ab"
            android:text="注册">
        </Button>
        <Button
            android:textSize="20sp"
            android:layout_width="100dp"
            android:layout_height="wrap_content"
            android:backgroundTint="#e9003b"
            android:text="取消">
        </Button>
    </LinearLayout>
</LinearLayout>

END.