Widgets

CheckBox

复选框的样式

<CheckBox
    android:id="@+id/check_box"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="101dp"
    android:text="苹果🍎"
    android:textSize="23sp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

复选框的效果图，如下所示

复选框的事件监听代码如下

CheckBox checkBox = findViewById(R.id.check_box);
checkBox.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
    @Override
    public void onCheckedChanged(@NonNull CompoundButton buttonView, boolean isChecked) {
        if (isChecked) {
            Toast.makeText(MainActivity.this, "复选框已选择", Toast.LENGTH_SHORT).show();
        } else {
            Toast.makeText(MainActivity.this, "复选框未选择", Toast.LENGTH_SHORT).show();
        }
    }
});

Radio Button

RadioButton 由 RadioGroup 包裹在内，基本的样式

<RadioGroup
    android:id="@+id/radioGroup"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="60dp"
    android:orientation="horizontal"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/check_box">

    <RadioButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="西红柿🍅"
        android:textSize="23sp"
        tools:layout_editor_absoluteX="107dp"
        tools:layout_editor_absoluteY="209dp" />

    <RadioButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="土豆🥔"
        android:textSize="23sp"
        tools:layout_editor_absoluteX="0dp"
        tools:layout_editor_absoluteY="209dp" />
</RadioGroup>

RadioGroup 的事件监听，如下所示

RadioGroup radioGroup = findViewById(R.id.radioGroup);
radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
    @Override
    public void onCheckedChanged(@NonNull RadioGroup group, int checkedId) {
        RadioButton radioButton = findViewById(checkedId);

        Toast.makeText(MainActivity.this, "您选择了：" + radioButton.getText().toString(), Toast.LENGTH_SHORT).show();
    }
});

演示效果，如下所示

Spinner

Spinner 的基本样式

<Spinner
    android:id="@+id/spinner"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="88dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/radioGroup" />

Spinner的功能代码

Spinner spinner = findViewById(R.id.spinner);

// 数据源
String[] courses = {"C++", "Java", "Kotlin", "Python"};

// ArrayAdapter:数组与数据列表之间的桥梁
ArrayAdapter<String> arrayAdapter = new ArrayAdapter<>(
        this,
        android.R.layout.simple_spinner_item,
        courses
);
spinner.setAdapter(arrayAdapter);

效果图，如下所示

DatePicker

界面的样式，如下所示

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <DatePicker
        android:id="@+id/date_picker"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="28dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.491"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


    <Button
        android:id="@+id/btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="56dp"
        android:text="选择日期"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/date_picker" />

</androidx.constraintlayout.widget.ConstraintLayout>

处理的业务代码，如下所示

datePicker = findViewById(R.id.date_picker);
btn = findViewById(R.id.btn);

btn.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        int day = datePicker.getDayOfMonth();
        int month = datePicker.getMonth();
        int year = datePicker.getYear();

        Toast.makeText(
                MainActivity.this,
                "您选择的日期为 " + year + "-" + month + "-" + day,
                Toast.LENGTH_SHORT
        ).show();
    }
});

实现的最终效果，如下所示

ProgressBar

页面的基本样式，如下图所示

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


    <ProgressBar
        android:id="@+id/progree_bar"
        style="@style/Widget.AppCompat.ProgressBar.Horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="208dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="104dp"
        android:text="点击我"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/progree_bar" />

</androidx.constraintlayout.widget.ConstraintLayout>

页面的交互逻辑代码，如下所示

progressBar = findViewById(R.id.progree_bar);
btn = findViewById(R.id.btn);

btn.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        progress += 10;
        progressBar.setProgress(progress);
    }
});

交互效果，如下所示