Android开发基础：四大组件视图事件监听控件与布局

视图层采用视图树（View Tree）模型：用户界面中的界面元素以树型结构组织在一起，整个视图界面为一个视图树模型。视图树：由View控件或ViewGroup构成。View控件是界面的最基本的可视单元，是Android视图界面的基类。ViewGroup是由其它View或ViewGroup组成的显示单元，继承自View类，ViewGroup提供了布局方法。

IH_LZH

3474人浏览 · 2024-03-24 15:55:33

IH_LZH · 2024-03-24 15:55:33 发布

一，安卓四大组件

1.Activity（活动）

2.BroadcastReceiver（广播消息接收器）

3.Service（服务）

4.ContentProvider（内容提供者）

1.XML布局中，视图控件常用的公有布局属性

2.文本内容控件 TextView EditText

3.按钮控件 Button RadioButton CheckButton

2.相对布局 RelativeLayout

3.标签布局 TabLayout

一，安卓四大组件

1.Activity（活动）

Activity是最基本的Android应用程序组件，应用程序中，一个Activity通常就是一个单独的屏幕。每个Activity都被实现为一个独立的类，并且从Activity基类继承而来，Activity类会提供视图控制组件的用户接口，并对事件作出响应，大多数应用程序都是由多个Activity组成的。

2.BroadcastReceiver（广播消息接收器）

BroadcastReceiver是Android系统中常用的一种机制，用户让应用对一个外部的事件作出响应。例如：当电话呼入时，数据网络可用时等。

3.Service（服务）

一个服务是具有一个较长生命周期且没有用户界面的程序。例如：一个正在从播放列表中播放歌曲的媒体播放器。

4.ContentProvider（内容提供者）

应用程序能够将它们的数据保存到文件、SQLite数据库中，甚至是任何有效的设备中。当需要将当前应用数据与其它应用共享时，ContentProvider类实现了一组标准方法，从而能够让其它的应用保存或读取此ContentProvider处理的各种数据类型。

二，Android中UI工作机制

Android用户界面采用MVC（Model-View-Controller）框架来接收用户动作，显示UI界面及处理数据等工作。MVC分为：模型层，视图层和控制器层。

1.模型层

模型层负责对数据的操作、对网络服务等的操作。在Android中，数据库/文件操作，Content-Provider、网络访问等等充当模型层。

2.视图层

主要负责用户界面（UI）的设计（页面布局XML文件等）。在Android中使用XML布局文件实现视图层和模型层的分离。

3.控制器层

控制器负责接收用户动作请求（如按键动作或触摸屏动作等），调用指定模型处理用户请求（如读取数据库、发送网络请求等），响应用户结果（如返回视图界面等）。

在Android系统中，控制器的责任由Activity承担，意味着Activity负责接收用户请求、调用模型方法、响应用户界面等操作（Activity不应承担过多业务逻辑（应交给模型层））。

三，安卓视图层简介

视图层采用视图树（View Tree）模型：用户界面中的界面元素以树型结构组织在一起，整个视图界面为一个视图树模型。

视图树：由View控件或ViewGroup构成。

View控件是界面的最基本的可视单元，是Android视图界面的基类。

ViewGroup是由其它View或ViewGroup组成的显示单元，继承自View类，ViewGroup提供了布局方法。

四，安卓中常用的View

1.XML布局中，视图控件常用的公有布局属性

属性名	属性值	说明
android：layout_width	match_parent(铺满父容器) wrap_content(根据内容变化)	控件宽度
android：layout_height	match_parent(铺满父容器) wrap_content(根据内容变化)	控件高度
android：id	@+id/“字符串”	控件的id，在程序中可以通过id来引用该控件
android：background	图片资源或颜色	控件背景
android：layout_gravity	关键字	控件相对位置
android：layout_margin	数值	控件与界面四周的页边距
android：padding	数值	控件四周的填充（内边距）

2.文本内容控件 TextView EditText

TextView：显示一段文本内容

EditText：显示接收用户输入的输入框

属性名	说明
text	TextView内文本显示内容
hint	EditView内默认显示内容
inputType	EditText内文本格式
gravity	TextView内文本对齐方式
ellipsize	TextView文本用省略号代替
autoLink	给文本中的emali或Phone电话添加链接

3.按钮控件 Button RadioButton CheckButton

Button：普通按钮
RadioButton：单选按钮，一组按钮中只能选择一个，需与RadioGroup一起使用
CheckBox：多选按钮（多选框）
ImageButton：图片按钮
ToggleButton：切换按钮

属性名	描述
orientation	设置RadioButton的排列方式（水平或垂直）
checked	RadioButton或者CheckBox的属性，设置此项是否为选中状态
src	ImageButton，设置图片资源
checked	ToggleButton，是否为选中状态
textOn	ToggleButton，当处于选中状态时显示的文本
textOff	ToggleButton，当处于未被选中状态时显示的文本

五，事件监听器

1.findViewById

使用findViewByld可以获取UI控件对应的对象

private Button btn_login = findViewById(R.id.btn_login);

findViewById获取UI控件对应的对象后，不但可以设置相应属性，而且可以设置相应的事件监听，例如：Button点击事件，View的长按事件等。

2.事件监听器的实现

为视图控件绑定事件监听器的步骤

findViewByld获取视图控件对象
设置事件监听类型
绑定事件监听器

3.实现事件监听的三种方式

1.匿名内部类

private Button btn_login = findViewById(R.id.btn_login);
btn_login.setOnClickListener( v ->{
                //获取输入内容，用对话框提示出来
                String name = edt_name.getText().toString(); //获取用户名
                String passWard = edt_passward.getText().toString(); //获取密码
                //对话框提示
                Toast.makeText(LoginActivity.this,
                        "登陆成功：" + name,
                        Toast.LENGTH_LONG).show();
                //在哪显示 + 显示内容 + 显示时长

        });

2.成员内部类

使用匿名内部类需要一个控件实现一个匿名内部类，使用成员内部类，可实现代码复用

protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_practice);

        Button btn_login = findViewById(R.id.btn_login);

        //2.内部类 便于代码复用 建议使用
        Listener listener = new Listener();
        btn_login.setOnClickListener(listener);  //注册监听器
        btn_enroll.setOnClickListener(listener);


    }
class Listener implements View.OnClickListener{
        @Override
        public void onClick(View v) {
            //因为同一对象被多个方法调用，所以需要用id来区分
            int id = v.getId();
            if(id == R.id.btn_login){
                String userName = edt_name.getText().toString();
                String passward = edt_passward.getText().toString();
                Toast.makeText(PracticeActivity.this, "欢迎登录！" + userName, Toast.LENGTH_SHORT).show();
            }
            else{
                String userName = edt_name.getText().toString();
                Toast.makeText(PracticeActivity.this, "注册成功！" + userName, Toast.LENGTH_SHORT).show();
                //日志打印
                Log.i("LoginActivity", "用户注册");
            }
        }
    }

3.android:onClick

在控件XML代码中直接添加onClik属性，不常用

六，安卓用户界面布局

安卓中常见的五大布局有：

线性布局 LinearLayout：让所有子视图按照单一方向排列，水平或垂直
相对布局 RelativeLayout：让子视图位置与其他视图位置相关
网格布局 GridLayout：将子视图放在网格中，例如：手机计算器布局
帧布局 FrameLayout：为每个子视图创建一个空白区域（称为一帧），每个子视图占据一帧
标签布局 TabLayout：表格形式布局子视图，例如：微信底部导航

其中线性布局，相对布局和标签布局比较常用。

1.线性布局 LinearLayout

在线性布局中，所有的子元素都按照垂直或水平的顺序在界面上排列

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    android:background="@mipmap/background1"
    android:id="@+id/layout"
    >


</LinearLayout>

LinearLayout元素的XML属性：

属性名	属性值	备注
layout_width	match_parent（铺满父元素界面） wrap_content（根据内容变化）数值	布局宽度
layout_height	match_parent（铺满父元素界面） wrap_content（根据内容变化）数值	布局高度
orientation	vertical（垂直） horizontal（水平）	布局方向，水平或垂直
layout_weight	数值	使用在View控件中，表示当前LinearLayout 剩余空间在View控件中的分配情况

2.相对布局 RelativeLayout

相对布局（RelativeLayout）是一种非常灵活的布局方式，能够通过指定界面元素与其它元素的相对位置关系，确定界面中所有元素的布局位置

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/tv_center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="屏幕正中央"
        android:textSize="20sp">
    </TextView>

    <TextView
        android:id="@+id/tv_left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_toLeftOf="@+id/tv_center"
        android:text="中间的左边"
        android:textSize="20sp"
        >
    </TextView>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tv_center"
        android:layout_alignLeft="@id/tv_center"
        android:text="与中间控件左对齐"
        android:textSize="20sp"
        >

    </TextView>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:text="右上角"
        android:textSize="20sp"></TextView>

</RelativeLayout>

RelativeLayout元素的XML属性：

属性名	属性值	备注
layout_toLeftOf	ID值	当前控件位于给定ID元素控件的左边
layout_toRightOf	ID值	当前控件位于给定ID元素控件的右边
layout_below	ID值	当前控件位于给定ID元素控件的下边
layout_above	ID值	当前控件位于给定ID元素控件的上边
layout_alignLeft	ID值	当前控件位于给定ID元素控件的左边对齐
layout_alignRight	ID值	当前控件位于给定ID元素控件的右边对齐
layout_alignTop	ID值	当前控件位于给定ID元素控件的上边对齐
layout_alignBottom	ID值	当前控件位于给定ID元素控件的底部对齐
layout_alignEnd	ID值	当前控件位于给定ID元素控件的末尾对齐
layout_alignStart	ID值	当前控件位于给定ID元素控件的开始对齐
layout_alignParentLeft	true/false	当前控件是否与父元素左侧对齐
layout_centerInParent	true/false	当前控件是否位于父元素中心

3.标签布局 TabLayout

提供了显示选项卡的水平布局。
使用TabLayout.Tab表示选项卡，通过newTab()创建选项卡实例。
通过的Tab类的setText(int)和setIcon(int)方法分别改变标签或图标。
需要通过addTab(tab)方法将选项卡添加到布局中。

<com.google.android.material.tabs.TabLayout
        android:id="@+id/Tab_nav"
        android:layout_alignParentBottom="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

    </com.google.android.material.tabs.TabLayout>

protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tab_practice);
        //获取tabLayout控件
        TabLayout tabLayout = findViewById(R.id.tab_mode);
        //创建选项卡实例
        TabLayout.Tab pyro = tabLayout.newTab();
        pyro.setIcon(R.mipmap.pyro); //设置图标
        //将选项卡添加到标签布局中
        tabLayout.addTab(pyro);

        //设置底部栏图标点击事件
        tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                //选中图标时
                int position = tab.getPosition();
                switch(position){
                    case 0:
                        pyro.setIcon(R.mipmap.pyro_copy);
                        hydro.setIcon(R.mipmap.hydro);
                        anemo.setIcon(R.mipmap.anemo);
                        electro.setIcon(R.mipmap.electro);
                        cryo.setIcon(R.mipmap.cryo);
                        dendro.setIcon(R.mipmap.dendro);
                        geo.setIcon(R.mipmap.geo);
                        break;
                }
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                //未选中
            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {
                //重置时
            }
        });
    }

TabLayout布局中常用的XML属性：

XML属性	含义
tabBackground	标签的背景
tabIndicatorColor	下划线的颜色
tabIndicatorHeight	下划线的高度
tabTextColor	标签文字的颜色
tabTextAppearance	标签文字的风格
tabSelectedTextColor	选中文字的颜色