【Android基础学习之简单UI组件】

Android 学习之简单UI组件学习笔记

---

概要

本文主要分为两个模块
1.基础UI组件的学习与应用
2.高级UI组件的学习与应用

---

简单UI组件学习

1.1文本类组件

文本框组件部分属性

单行文本框属性
android:singleLine="true/false"
设置最大宽度（自动换行）
android:maxWidth="180dp"
知识点：dp设置布局宽度，sp设置字体大小

编辑框组件部分属性

编辑框中的提示语
android:hint="提示语"
*编辑框中的密码框（属性值多样）
*android:inputType="textPassword"//输入的内容为密码符
android:inputType="number"//只能输入数字
编辑框（左侧/下侧/右侧/上侧）的图标
android:drawableLeft="@mipmap/mc"//在编辑框的左侧绘制图像其属性值为图片资源
android:drawableStart="@mipmap/mc"//左侧4.2版本以上支持
android:drawableBottom="@mipmap/mc"//下侧
android:drawableRight="@mipmap/mc"//右侧
android:drawableEnd="@mipmap/mc"//右侧4.2版本以上
android:drawableTop="@mipmap/mc"//上侧

注意：
android:drawablePadding = "XXdp"//其中图像与输入内容之间的间距使用属性

设置编辑框所占的行数
android:lines = "5"//编辑框占五行，大于5行自动向下滚动保持可见范围为五行

获取编辑框所输入的内容方法

小拓展：图片类组件图片显示没有占满屏幕可以在(<imageView 中)加入这个属性进行横纵向拉伸
android:scaleType = "fitXY"

1.2按钮类组件

普通按钮监听器（Button）

普通按钮除了按钮的基础属性之外，常见的按钮需要添加监听器进行登录或跳转。

添加监听器的方式：
1.java代码中使用匿名内部类为单击事件监听器
2.通过onClick属性实现

1.java代码中使用匿名内部类为单击事件监听器方法

2.通过onClick属性实现
（1）首先在activity中编写一个包含View类型参数的方法（myclick(View view)）。

（2）将android:onClick属性指定为步骤（1）中的方法名。

图片按钮（ImageButton）

ImageButton和Button的区别
相同点：点击时都可以触发onClick事件
不同点：ImageButton没有android：text属性，想要在图片上添加文字需提前制作好。

使用方式：通过src指定图片，通过background="#0000"设置背景为透明

实例：

单选按钮（RadioButton）

常使用RadioGroup为一个单选框组将其囊括住

获取单选按钮组中选中项的值方法：
找到相应的按钮组设置id并添加选中状态改变监听器
通过r.getText();获取相应的值。

实例：实现在屏幕上添加逻辑推理题，要求通过单选按钮组显示备选答案。

//案例xml布局
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingLeft="16dp"
    android:paddingTop="16dp"
    android:paddingRight="16dp"
    android:paddingBottom="16dp"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/question"
        android:textSize="16sp" />

    <RadioGroup
        android:id="@+id/rg"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp">

        <RadioButton
            android:id="@+id/bj"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#0000"
            android:text="@string/Beijing" />

        <RadioButton
            android:id="@+id/sh"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#0000"
            android:text="@string/Shanghai" />

        <RadioButton
            android:id="@+id/sz"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#0000"
            android:text="@string/Shenzhen" />

        <RadioButton
            android:id="@+id/xa"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#0000"
            android:text="@string/Xian" />
    </RadioGroup>

    <Button
        android:id="@+id/submit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/submit"
        android:layout_marginStart="16dp"/>

</LinearLayout>

//案例其java逻辑代码
package com.example.demo1;

import androidx.appcompat.app.AlertDialog;
import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.Toast;


public class MainActivity extends AppCompatActivity {
    RadioGroup radioGroup;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //获取提交按钮并添加监听器
        Button button = findViewById(R.id.submit);
        radioGroup = findViewById(R.id.rg);
        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()) {
                        if (radioButton.getText().equals("北京")) {
                            Toast.makeText(MainActivity.this, "回答正确", Toast.LENGTH_SHORT).show();
                        } else {
                            AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);
                            builder.setMessage(R.string.answer);
                            builder.setPositiveButton("确定", null).show();
                        }
                        break;
                    }
                }
            }
        });

    }
}

复选框组件（CheckBox）

常用于为每个复选框添加状态改变事件监听器
xml定义->Java文件中定义并在OnClick方法中引入->set OnCheckedChangeListener()方法添加匿名内部类->进行if判断

属性值：
android:checked = "true" //选中某个复选框
checkBox1.setChecked(false); //取消某个复选框

//相应的xml文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:layout_marginBottom="20dp"
        android:gravity="center_horizontal"
        android:text="@string/request_privilege" />

    <CheckBox
        android:id="@+id/cb1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="获取您的公开信息" />

    <CheckBox
        android:id="@+id/cb2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="获取您的地理位置" />

    <CheckBox
        android:id="@+id/cb3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="获取您的手机拍照与视频权限" />

    <Button
        android:id="@+id/bt1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="确认授权" />

    <Button
        android:id="@+id/bt2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="取消" />


</LinearLayout>

//实例相应的java逻辑代码
package com.example.checkbox;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.CheckBox;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
    Button bt1, bt2;
    CheckBox checkBox1, checkBox2, checkBox3;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //1.获取相应的button和checkbox
        bt1 = (Button) this.<View>findViewById(R.id.bt1);
        bt2 = (Button) this.<View>findViewById(R.id.bt2);
        checkBox1 = this.<CheckBox>findViewById(R.id.cb1);
        checkBox2 = this.<CheckBox>findViewById(R.id.cb2);
        checkBox3 = this.<CheckBox>findViewById(R.id.cb3);
        //2.给两个按钮添加时间监听器
        bt1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //1.定义一个字符串用于接受checkbox中的内容
                String checked = "";
                if (checkBox1.isChecked()) {
                    show1(checked);
                }
                if (checkBox2.isChecked()) {
                    show2(checked);
                }
                if (checkBox3.isChecked()) {
                    show3(checked);
                }

            }
        });
        //3.给取消按钮添加时间监听器
        bt2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (checkBox1.isChecked()) {
                    checkBox1.setChecked(false);
                }
                if (checkBox2.isChecked()) {
                    checkBox2.setChecked(false);
                }
                if (checkBox3.isChecked()) {
                    checkBox3.setChecked(false);
                }
                Toast.makeText(MainActivity.this, "请重新选择", Toast.LENGTH_SHORT).show();
            }
        });
    }

    private void show1(String checked) {
        //获取checkbox1中的值转为字符串并赋予str1
        checked += checkBox1.getText().toString();
        //选中哪个输出哪个的框中内容
        Toast.makeText(MainActivity.this, "您确定授予:" + checked + "权限", Toast.LENGTH_SHORT).show();
    }

    private void show2(String checked) {
        //获取checkbox1中的值转为字符串并赋予str1
        checked += checkBox2.getText().toString();
        //选中哪个输出哪个的框中内容
        Toast.makeText(MainActivity.this, "您确定授予:" + checked + "权限", Toast.LENGTH_SHORT).show();
    }

    private void show3(String checked) {
        //获取checkbox1中的值转为字符串并赋予str1
        checked += checkBox3.getText().toString();
        //选中哪个输出哪个的框中内容
        Toast.makeText(MainActivity.this, "您确定授予:" + checked + "权限", Toast.LENGTH_SHORT).show();
    }
}

日期选择器（DatePicker）

实例：

//xml文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#0000"
        android:text="请选择时间"
        android:textSize="18sp"
        android:textColor="@color/black"
        android:layout_marginBottom="20dp"
        android:gravity="center_horizontal"/>

    <DatePicker
        android:id="@+id/date_picker_actions"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal" />
    <Button
        android:id="@+id/button1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="获取时间"
        android:layout_marginTop="20dp"/>



</LinearLayout>

java中的逻辑代码（注意实例化日历对象）

//java代码
package com.example.datepicker;

import androidx.appcompat.app.AppCompatActivity;

import android.app.Activity;
import android.icu.util.Calendar;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.DatePicker;
import android.widget.Toast;

public class MainActivity extends Activity {
    int year, month, day;
    DatePicker datePicker;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //0.找到对应的button和实例化datePicker
        Button button = (Button) findViewById(R.id.button1);
        datePicker = findViewById(R.id.date_picker_actions);
        //0.5定义一个日期对象
        Calendar calendar = Calendar.getInstance();
        //1.获取日期选择器组件并初始化(年，月，日，匿名内部类)
        datePicker.init(year, month, day, new DatePicker.OnDateChangedListener() {
            @Override
            public void onDateChanged(DatePicker view, int year, int monthOfYear, int dayOfMonth) {
                MainActivity.this.year = year;//获取年份
                MainActivity.this.month = monthOfYear;//获取月份
                MainActivity.this.day = dayOfMonth;//获取日期
                showtime(year, monthOfYear, dayOfMonth);
            }
        });
        //2.对按钮设置监听事件
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, year + "年" + (month + 1) + "月" + day + "日", Toast.LENGTH_SHORT).show();
            }
        });

    }

    private void showtime(int year, int month, int day) {
        String str = year + "年" + (month + 1) + "月" + day + "日";//获取选择器设置日期
        Toast.makeText(this, str, Toast.LENGTH_SHORT).show();
    }
}

时间选择器(TimePicker)

默认是12小时的，可以将其设置为24小时

实例：

//xml文件
<?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"
    tools:context=".MainActivity">

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

java逻辑（注意创建时间对象）

package com.example.timepicker;

import androidx.appcompat.app.AppCompatActivity;

import android.icu.util.Calendar;
import android.os.Bundle;
import android.view.View;
import android.widget.TimePicker;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
    TimePicker timePicker;
    int hour, minute;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //1.获取时间选择组件并设置为24小时
        timePicker = (TimePicker) this.<View>findViewById(R.id.timepicker);
        timePicker.is24HourView();
        //2.创建时间对象
        Calendar calendar = Calendar.getInstance();
        hour=calendar.get(Calendar.HOUR_OF_DAY);//获取当前小时
        minute=calendar.getMinimum(Calendar.MINUTE);//获取当前分钟
        //3.初始化并设置时间监听器
        timePicker.setOnTimeChangedListener(new TimePicker.OnTimeChangedListener() {
            @Override
            public void onTimeChanged(TimePicker view, int hourOfDay, int minute) {
                MainActivity.this.hour = hourOfDay;
                MainActivity.this.minute=minute;
                show(hourOfDay,minute);
            }
        });
    }
    private void show(int hourOfDay,int minute){
        String string = hourOfDay+"时"+minute+"分";
        Toast.makeText(this, string, Toast.LENGTH_SHORT).show();
    }
}

计时器（Chronometer）

默认显示就是（时分秒形式显示）
android:format = " ";//设置其属性用于显示时间格式
计时器常用的五种方法
setBase() //设置计时器的起始时间
setFormat() //设置显示时间的格式
start() //指定开始计时
stop() //指定停止计时

实例：

//xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">

    <Chronometer
        android:id="@+id/chronometer"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="@color/black"
        android:gravity="center_horizontal"/>

</RelativeLayout>

java逻辑代码

//java代码
package com.example.chronometer;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.os.SystemClock;
import android.view.WindowManager;
import android.widget.Chronometer;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
    Chronometer chronometer;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        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()>=30000){
                    Toast.makeText(MainActivity.this, "已耗时30s", Toast.LENGTH_SHORT).show();
                    chronometer.stop();
                }

            }
        });



    }
}

总结

本文主要阐述了笔者学习简单UI组件所整理的笔记，供大家参考和指导，有需要补充的地方还请诸位不吝赐教，十分感谢！