UI基础入门——UI基础控件2

Posted 2021-11-22 一只不会爬的虫子

一、基础控件(View)

1、CheckBox 复选控件

2、RadioButton 单选控件

3、ToggleButton 开关触发器

4、SeekBar 进度条

二、CheckBox 复选控件

系统封装的复选控件，继承于Button

1、常用方法

• setChecked() 设置状态 选中、未选中
• isChecked() 获取状态
• setOnCheckedChangeListener 监听状态

2、案例

package com.example.testapplication;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.util.Log;
import android.widget.CheckBox;
import android.widget.CompoundButton;

public class MainActivity extends AppCompatActivity {

    private static final String TAG = "TestMain";

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

        CheckBox checkBox = findViewById(R.id.checkbox);

        checkBox.setChecked(false);

        boolean isCheckBox = checkBox.isChecked();

        Log.i(TAG, "onCreate: checked is " + isCheckBox);

        checkBox.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
                Log.i(TAG, "onCheckedChanged: " + b);
            }
        });

    }
}

<?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">

    <CheckBox
        android:id="@+id/checkbox"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="阅读"
        android:checked="true"/>

</LinearLayout>

 

三、RadioButton 单选控件

单选控件，可以和RadioGroup一起使用，只能选择一个

1、RadioButton 和 CheckBox区别

• 通过点击无法变为未选中
• 一组RadioButton, 只能同时选中一个
• 在大部分UI框架中默认都以圆形表示

2、案例

<RadioGroup
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    
    <RadioButton
        android:id="@+id/radio_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="视频"/>

    <RadioButton
        android:id="@+id/radio_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="文本"/>

</RadioGroup>

 

四、ToggleButton 开关

切换程序中的状态， 继承于Button

1、常用属性

• android:textOn 开文字
• android:textOff 关文字
• setChecked(boolean) 设置状态
• setOnCheckedChangeListener

2、案例

<?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">

    <ToggleButton
        android:id="@+id/toggle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textOn="开"
        android:textOff="关"
        android:checked="false"
        />


</LinearLayout>

package com.example.testapplication;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.util.Log;
import android.widget.CheckBox;
import android.widget.CompoundButton;
import android.widget.ToggleButton;

public class MainActivity extends AppCompatActivity {

    private static final String TAG = "TestMain";

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

        ToggleButton toggleButton = findViewById(R.id.toggle);

        toggleButton.setChecked(true);

        boolean isCheckBox = toggleButton.isChecked();

        Log.i(TAG, "onCreate: checked is " + isCheckBox);

        toggleButton.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
                Log.i(TAG, "onCheckedChanged: " + b);
            }
        });

    }
}

 

 

五、SeekBar 进度条

常用语播放器， 进度条

1、常用属性

• setProgress
• setOnSeekBarChangeListener

2、注意事项

• 耗时的任务容易把UI卡死

3、案例

package com.example.testapplication;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.util.Log;
import android.widget.CheckBox;
import android.widget.CompoundButton;
import android.widget.SeekBar;
import android.widget.ToggleButton;

public class MainActivity extends AppCompatActivity {

    private static final String TAG = "TestMain";

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

        SeekBar seekBar = findViewById(R.id.seekbar);

        seekBar.setProgress(30);
        seekBar.setMax(100);

        seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int i, boolean b) {
                Log.i(TAG, "onProgressChanged: " + i);
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {
                Log.i(TAG, "onStartTrackingTouch: " + seekBar.getProgress());
            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {
                Log.i(TAG, "onStopTrackingTouch: " + seekBar.getProgress());
            }
        });

    }
}

<?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="30sp"
        android:padding="15dp"/>

    <SeekBar
        android:id="@+id/seekbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="100"
        android:progress="30"/>

</LinearLayout>