第二章 基本UI组件

1 文本框组件

1.1 TextView

示例：实现QQ聊天框

<?xml version="1.0" encoding="utf-8"?>
<GridLayout 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"
    android:columnCount="6"
    android:rowCount="4"
    android:background="@drawable/bg"
    tools:context=".MainActivity">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end"
        android:paddingRight="10dp"
        android:src="@drawable/ico2"
        android:layout_column="5"
        android:layout_row="0"/>

    <TextView
        android:layout_marginTop="10dp"
        android:paddingTop="10dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:maxWidth="@dimen/max_width"
        android:layout_gravity="end"
        android:background="@drawable/bg_textview"
        android:text="你好呀，好久不见了！最近忙什么呢？"
        android:textColor="#16476b"
        android:textSize="14sp"
        android:layout_column="1"
        android:layout_row="0"
        android:layout_columnSpan="4"/>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="start"
        android:paddingLeft="10dp"
        android:src="@drawable/ico1"
        android:layout_column="0"
        android:layout_row="1"/>

    <TextView
        android:paddingTop="10dp"
        android:layout_marginTop="10dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:maxWidth="@dimen/max_width"
        android:layout_gravity="start"
        android:background="@drawable/bg_textview2"
        android:text="最近在做一个手机游戏，所以很少上QQ"
        android:textColor="#FFFFFF"
        android:textSize="14sp"
        android:layout_column="1"
        android:layout_row="1"
        android:layout_columnSpan="4"/>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end"
        android:paddingRight="10dp"
        android:src="@drawable/ico2"
        android:layout_column="5"
        android:layout_row="2"/>

    <TextView
        android:paddingTop="10dp"
        android:layout_marginTop="10dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:maxWidth="@dimen/max_width"
        android:layout_gravity="end"
        android:background="@drawable/bg_textview"
        android:text="最近进展如何？需要我帮忙吗？"
        android:textColor="#16476b"
        android:textSize="14sp"
        android:layout_column="1"
        android:layout_row="2"
        android:layout_columnSpan="4"/>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="start"
        android:paddingLeft="10dp"
        android:src="@drawable/ico1"
        android:layout_column="0"
        android:layout_row="3"/>

    <TextView
        android:paddingTop="10dp"
        android:layout_marginTop="10dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:maxWidth="@dimen/max_width"
        android:layout_gravity="start"
        android:background="@drawable/bg_textview2"
        android:text="总算大功告成了，有时间发给你玩哦"
        android:textColor="#FFFFFF"
        android:textSize="14sp"
        android:layout_column="1"
        android:layout_row="3"
        android:layout_columnSpan="4"/>
</GridLayout>

1.2 编辑框 EditText

 几个重要属性：

• hint：当用户没有输入的时候对用户的输入进行提示
• inputType：限定用户输入的内容
• drawStart、drawEnd、drawBottom、drawTop：可以在左侧、右侧、上面、下面绘制一个小图标
• lines：控制行数，超过行数将向上滚动

示例：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:background="#EAEAEA"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:lines="6"
        android:hint="说点什么吧。。。"
        android:background="#FFFFFF"
        android:padding="5dp"
        android:gravity="left|top"
        android:layout_marginBottom="10dp"
        android:inputType="textMultiLine"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:drawableLeft="@mipmap/addpicture"
        android:drawablePadding="5dp"
        android:text="添加照片"
        android:gravity="center_vertical"
        android:background="#FFFFFF"
        android:padding="8dp"
        android:layout_marginBottom="10dp"/>

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@mipmap/bottom"
        android:scaleType="fitXY"/>

</LinearLayout>

1.3 普通按钮

 按钮通常与监听器组合使用。

什么是监听器？

 有两种方式添加事件监听器：

• 匿名内部类方式

Button button = findViewById(R.id.button1);
button.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Toast.makeText(MainActivity.this, "你点击了按钮", Toast.LENGTH_SHORT).show();
    }
});

• 通过onClick属性实现

1. 在Activity中编写一个包含View类型参数的方法。
2. 将android:onClick指定为刚刚指定的方法名

public void myClick(View view) {
    Toast.makeText(MainActivity.this, "你点击了按钮2", Toast.LENGTH_SHORT).show();
}

<Button
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="按钮2"
    android:onClick="myClick"/>

1.4 图片按钮 

 1.5 单选按钮

两种方式获得单选的内容：

public class MainActivity extends AppCompatActivity {

    RadioGroup radioGroup;

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

        //方式1
        radioGroup = findViewById(R.id.radioGroup);
        radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                RadioButton radioButton = findViewById(checkedId);
                Toast.makeText(MainActivity.this, "性别："+radioButton.getText(), Toast.LENGTH_SHORT).show();
            }
        });

        //方式2
        Button button = findViewById(R.id.button);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                for(int i = 0; i < radioGroup.getChildCount(); i++) {
                    RadioButton radioButton = (RadioButton) radioGroup.getChildAt(i);
                    if(radioButton.isChecked()) {
                        Toast.makeText(MainActivity.this, "性别："+radioButton.getText(), Toast.LENGTH_SHORT).show();
                    }
                }
            }
        });
    }
}

 1.6 复选框

 与单选框不同的是，复选框可以选中多个。

<Button
    android:id="@+id/btn_login"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="确认登录"
    android:background="#009688"/>

<Button
    android:layout_marginTop="20dp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="取消"
    android:background="#FFFFFF"/>

btn_login = findViewById(R.id.btn_login);
checkBox1 = findViewById(R.id.checkbox1);
checkBox2 = findViewById(R.id.checkbox2);
checkBox3 = findViewById(R.id.checkbox3);

btn_login.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            String str = "";
            if(checkBox1.isChecked()) {
                str += checkBox1.getText().toString() + "\n";
            }
            if(checkBox2.isChecked()) {
                str += checkBox2.getText().toString() + "\n";
            }
            if(checkBox3.isChecked()) {
                str += checkBox3.getText().toString();
            }
            Toast.makeText(MainActivity.this, str, Toast.LENGTH_SHORT).show();
        }
});

1.7 日期选择器

 

<DatePicker
    android:id="@+id/date_picker"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>

DatePicker datePicker = findViewById(R.id.date_picker);
datePicker.setOnDateChangedListener(new DatePicker.OnDateChangedListener() {
        @Override
        public void onDateChanged(DatePicker view, int year, int monthOfYear, int dayOfMonth) {
                String str = year + "年" + monthOfYear + "月" + dayOfMonth + "日";
                Toast.makeText(MainActivity.this, str, Toast.LENGTH_SHORT).show();
            }
});

1.8 时间选择器

<TimePicker
    android:id="@+id/timepicker"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>

DatePicker datePicker = findViewById(R.id.date_picker);
datePicker.setOnDateChangedListener(new DatePicker.OnDateChangedListener() {
       @Override
       public void onDateChanged(DatePicker view, int year, int monthOfYear, int dayOfMonth) {
                String str = year + "年" + monthOfYear + "月" + dayOfMonth + "日";
                Toast.makeText(MainActivity.this, str, Toast.LENGTH_SHORT).show();
            }
});

1.9 计时器

 

<Chronometer
    android:id="@+id/chronometer"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textColor="#FFFF00"
    android:layout_alignParentRight="true"
    android:layout_marginRight="20dp"
    android:layout_marginTop="40dp"
    android:textSize="20sp"/>

Chronometer chronometer = findViewById(R.id.chronometer);
chronometer.setBase(SystemClock.elapsedRealtime());
chronometer.setFormat("%s");
chronometer.start();
chronometer.setOnChronometerTickListener(new Chronometer.OnChronometerTickListener() {
       @Override
       public void onChronometerTick(Chronometer chronometer) {
             if(SystemClock.elapsedRealtime() - chronometer.getBase() >= 60000) {
                chronometer.stop();
             }
        }
});