您当前的位置： 首页 > 学无止境 > 心得笔记 网站首页心得笔记

78_常用的ui

发布时间：2021-03-19 21:33:00编辑：雪饮阅读（）

 今天主要介绍下安卓上常用的6大ui：

单选按钮、单选按钮组、复选按钮、下拉列表、可拖动的进度条、自动输入/自动完成
既然主要是ui，所以这里主要还是布局为主，这里为了代码结构以及项目结构和逻辑看起来不那么乱，所以一个控制器activity的java程序通过不同的按钮来切换到不同的ui上来实现。
由于对权限之类没有特殊要求，所以清单文件用Android studio建立项目时默认的即可。
布局
那么首先将主界面（包含每个ui对应的入口的按钮的界面）实现activity_main.xml：
<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <Button
            android:id="@+id/button1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="单选按钮"
            android:onClick="tabPage"
            />
        <Button
            android:id="@+id/button2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="单选按钮组"
            android:onClick="tabPage"
            />
        <Button
            android:id="@+id/button3"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="复选按钮"
            android:onClick="tabPage"
            />
        <Button
            android:id="@+id/button4"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="下拉列表"
            android:onClick="tabPage"
            />
        <Button
            android:id="@+id/button5"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="可拖动的进度条"
            android:onClick="tabPage"
            />
        <Button
            android:id="@+id/button6"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="自动输入/自动完成"
            android:onClick="tabPage"
            />
    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
接下来是这6大常用布局的ui各自的界面实现如下：
activity_main1.xml：
<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        >
        <Button
            android:id="@+id/home"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="返回主页"
            android:onClick="tabPage"
            />
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:gravity="center_horizontal"
            >
            <RadioButton
                android:id="@+id/radioButton1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="单选按钮第一个选项"/>
            <RadioButton
                android:id="@+id/radioButton2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="单选按钮第二个选项"/>
            <RadioButton
                android:id="@+id/radioButton3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="单选按钮第三个选项"/>
        </LinearLayout>
    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
activity_main2.xml：
<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <Button
            android:id="@+id/home"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="返回主页"
            android:onClick="tabPage"
            />
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            >
            <RadioGroup
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center_horizontal"
                >
                <RadioButton
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="单选按钮组-第一个选项"/>
                <RadioButton
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="单选按钮组-第二个选项" />
                <RadioButton
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="单选按钮组-第三个选项" />
            </RadioGroup>
        </LinearLayout>
    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
activity_main3.xml：
<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <Button
            android:id="@+id/home"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="返回主页"
            android:onClick="tabPage"
            />
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            >
            <CheckBox
                android:id="@+id/checkBox1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="是否保存密码" />
        </LinearLayout>
    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
activity_main4.xml：
<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <Button
            android:id="@+id/home"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="返回主页"
            android:onClick="tabPage"
            />
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            >
            <Spinner android:id="@+id/spinner"
                android:layout_height="wrap_content"
                android:layout_width="fill_parent"/>
        </LinearLayout>
    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
activity_main5.xml：
<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <Button
            android:id="@+id/home"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="返回主页"
            android:onClick="tabPage"
            />
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            >
            <SeekBar
                android:id="@+id/seekBar1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />
        </LinearLayout>
    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
activity_main6.xml：
<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <Button
            android:id="@+id/home"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="返回主页"
            android:onClick="tabPage"
            />
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            >
            <!--
            completionThreshold表示阈值，这里为1，则表示出现一个字符就触发自动完成，去匹配自动完成适配器中所配置的以自动完成给予提示的list
            -->
            <AutoCompleteTextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:completionThreshold="1"
                android:id="@+id/m6" />
        </LinearLayout>
    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
实现逻辑
布局文件都准备好了，接下来就是主要的逻辑，这里的activity了，实现如MainActivity.java：
package com.example.commonui;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.AutoCompleteTextView;
import android.widget.CheckBox;
import android.widget.CompoundButton;
import android.widget.RadioButton;
import android.widget.SeekBar;
import android.widget.Spinner;
public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
    public void tabPage(View v) {
        switch (v.getId()) {
            //主页
            case R.id.home:
                setContentView(R.layout.activity_main);
                break;
            //单选按钮
            case R.id.button1:
                //由于是3个单选按钮，而不是单选按钮组，所以每个只能被勾选一次，再次勾选还是选中状态
                setContentView(R.layout.activity_main1);
                //监听第一个单选按钮的勾选情况
                RadioButton rb = (RadioButton) this.findViewById(R.id.radioButton1);
                rb.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
                    public void onCheckedChanged(CompoundButton buttonView,boolean isChecked) {
                        System.out.println("是否选择" + isChecked);
                    }
                });
                break;
            //单选按钮组
            case R.id.button2:
                setContentView(R.layout.activity_main2);
                break;
            //复选框ui
            case R.id.button3:
                setContentView(R.layout.activity_main3);
                CheckBox checkBox1 = this.findViewById(R.id.checkBox1);
                checkBox1.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
                    public void onCheckedChanged(CompoundButton buttonView,boolean isChecked) {
                        System.out.println("checkbox 是否选择" + isChecked);
                    }
                });
                break;
            //下拉列表
            case R.id.button4:
                setContentView(R.layout.activity_main4);
                //用适配器生成下拉列表的下拉选项
                ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,android.R.layout.simple_spinner_item);
                adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
                adapter.add("java");
                adapter.add("dotNet");
                adapter.add("php");
                //获取下拉列表元素，并将下拉选项应用到该下拉列表元素
                Spinner spinner = (Spinner) findViewById(R.id.spinner);
                spinner.setAdapter(adapter);
                //下拉列表元素的下拉项被选择的监听
                spinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
                    //选择了某个下拉项目的回调
                    public void onItemSelected(AdapterView<?> parent, View view,int position, long id) {
                        System.out.println(position + "被选择");
                    }
                    //一个下拉项目都码云被选中时候的回调
                    //当adapter为空时候触发，但是测试过默认为空不触发
                    //通过后天将adapter为空时候触发（码云测试过，但看到csdn中有网友测试过）
                    public void onNothingSelected(AdapterView<?> parent) {
                        System.out.println("没有内容被选择");
                    }
                });
                break;
            //可拖动的进度条
            case R.id.button5:
                setContentView(R.layout.activity_main5);
                SeekBar seekBar1 = this.findViewById(R.id.seekBar1);
                //设置最大进度值
                seekBar1.setMax(100);
                seekBar1.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
                    public void onStopTrackingTouch(SeekBar seekBar){}
                    public void onStartTrackingTouch(SeekBar seekBar){}
                    //进度改变时候触发
                    public void onProgressChanged(SeekBar seekBar, int progress,boolean fromUser) {
                        System.out.println("当前的进度为 "+ progress);
                    }
                });
                break;
            //可拖动的进度条
            case R.id.button6:
                setContentView(R.layout.activity_main6);
                //定义自动完成hints
                String[] names = {"kasumi", "kappa", "kill", "ayane" , "append", "array", "hayabusa", "hot"};
                AutoCompleteTextView nameText = this.findViewById(R.id.m6);
                //将定义好的自动完成hints/适配器加载到自动完成元素中，然后本例中输入如'k'，‘a’，‘h’时就有提示了都是单字符，即completionThreshold值为1
                //但每次只填充这个hints中的某一个，比如这里若填充了kasumi，则后面继续输入无论是单个字符，还是空格、逗号（假设用这两个符号做为分隔符，其它的码云测试）等，
                //都不会继续触发自动完成
                ArrayAdapter<String> adapter6 = new ArrayAdapter<String>(this, android.R.layout.simple_dropdown_item_1line, names);
                nameText.setAdapter(adapter6);
                break;
        }
    }
}
那么最后将整个项目部署到设备后如

以最后的一个ui为例，实现出来的效果像是这样

提取代码片段为方法
最后这里介绍一下Android studio中一个比较实用的功能。有时候你会遇到这样的情况，你要将一大堆啰嗦的代码想要单独提出来做成一个方法，那么传统的做法就是先手写一个空的方法，然后将这些代码选取后剪贴到这个空的方法中，然后在原来的被剪贴走的地方再手写代码调用这个新方法。做起来还有有点麻烦的。那么接下来看看Android studio中如何优雅的实现。
首先我们选择我们要提取的代码片段后鼠标右键可以看到如下这个show context actions选项

进入这个选项后，又可以看到extract method

再次进入这个子选项后就进入下面界面

填写好方法名，然后refactor后，可以看到上面我们手工要做的事情，全部自动完成了

好了，今天就先到这里了。