这里写自定义目录标题

一、导入新课
二、新课学习
- （一）界面与布局
- - 1、界面
  - 2、布局
  - - （1）视图层次结构图
    - （2）UI容器 (Container)
    - （3）UI控件 (Control)
    - （4）两种方式声明布局
- （二）线性布局
- - 1、继承关系图
  - 2、常用属性
- （三）案例演示：线性布局属性
- - 1、创建安卓应用
  - 2、主布局资源文件
  - 3、字符串资源文件
  - 4、启动应用，查看效果
  - 5、设置布局属性，查看效果
  - - （1）设置线性布局方向
    - （2）设置线性布局内边距
    - （3）设置线性布局对齐方式
    - （4）设置线性布局背景
- （四）案例演示：线性布局嵌套
- - 1、创建安卓应用
  - 2、准备图片素材
  - 3、主布局资源文件
  - 4、字符串资源文件
  - 5、启动应用，查看效果
  - 6、修改布局，查看效果
三、上机操作
- 任务一、选择水果
- - 1、编写主布局资源文件
  - 2、编写主窗口文件并给图片添加吐司
  - 3、运行程序查看效果

一、导入新课

安卓应用包含界面与功能两个方面，一个好的安卓应用，应该给用户提供良好的体验，其中界面设计至关重要，要设计界面，那就要求开发者熟练使用布局来摆放窗口里的不同组件。

二、新课学习

（一）界面与布局

1、界面

应用界面包含用户可查看并与之交互的所有内容。安卓提供丰富多样的预置 UI 组件，例如结构化布局对象和 UI 控件，您可以利用这些组件为您的应用构建图形界面。安卓还提供其他界面模块，用于构建特殊界面，例如对话框、通知和菜单。

2、布局

布局可定义应用中的界面结构（例如 Activity 的界面结构）。布局中的所有元素均使用 View 和 ViewGroup 对象的层次结构进行构建。View 通常绘制用户可查看并进行交互的内容。然而，ViewGroup 是不可见容器，用于定义 View 和其他 ViewGroup 对象的布局结构。

（1）视图层次结构图

（2）UI容器 (Container)

UI容器指ViewGroup，也是View的子类，而ViewGroup有几个布局子类：LinearLayout、RelativeLayout、AbsoluteLayout、TableLayout、GridLayout，ConstraintLayout。

（3）UI控件 (Control)

UI控件指Widget（微件），不能再包含其它元素的控件，例如标签（TextView）、文本框（EditText）、按钮（Button）、活动栏（Action Bar）、对话框（Dialogs）、状态栏（Status）、通知（Notifications）。

（4）两种方式声明布局

在 XML 中声明界面元素：Android 提供对应 View 类及其子类的简明 XML 词汇，如用于微件和布局的词汇。也可使用 Android Studio 的 Layout Editor，并采用拖放界面来构建 XML 布局。
在运行时实例化布局元素：应用可通过编程创建 View 对象和 ViewGroup 对象（并操纵其属性）。

package net.xqf.directui;import androidx.appcompat.app.AppCompatActivity;import android.app.ActionBar;
import android.os.Bundle;
import android.view.Gravity;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.Toast;public class MainActivity extends AppCompatActivity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);// 创建线性布局LinearLayout layout = new LinearLayout(this);// 设置布局参数（布局宽度和高度）layout.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT,LinearLayout.LayoutParams.MATCH_PARENT));// 设置布局对齐方式 - 居中对齐layout.setGravity(Gravity.CENTER);// 设置布局背景图片layout.setBackground(getResources().getDrawable(R.drawable.background));// 创建按钮对象Button btnWelcome = new Button(this);// 设置按钮文本btnWelcome.setText("欢迎");// 添加按钮到布局里layout.addView(btnWelcome);// 设置内容视图，将布局作为用户界面setContentView(layout);// 给【欢迎】按钮注册单击监听器，实现监听器接口，编写事件处理方法btnWelcome.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View view) {Toast.makeText(MainActivity.this, "欢迎访问泸州职业技术学院", Toast.LENGTH_LONG).show();}});}
}

借助 Android 框架，您可以灵活选择使用两种或其中一种方法来构建应用界面。例如，您可以在 XML 中声明应用的默认布局，然后在运行时修改布局。

（二）线性布局

线性布局(LinearLayout)是一种比较常用且简单的布局方式。在这种布局中，所有的子元素都是按照垂直或水平的顺序排列在界面上。如果是垂直排列，每个子元素占一行，如果是水平排列，则每个子元素占一列。线性布局可以支持布局样式嵌套实现复杂的布局样式。

1、继承关系图

LinearLayout是ViewGroup的子类，注意：后面我们要学习的单选按钮组（RadioGroup）是线性布局的子类

2、常用属性

属性	含义
layout_height	高度，单位：dp (wrap_content, match_parent)
layout_weight	宽度，单位：dp (wrap_content, match_parent)
orietation	方向（vertical，horizontal）
gravity	对齐方式（left, right, center, top, bottom…)
background	背景（颜色[color]、图片[drawable]、选择器[selector]）
weight	比重（用于瓜分手机屏幕）
padding	内边距 (paddingLeft, paddingRight, paddingTop, paddingBottom)
margin	外边距 (marginLeft, marginRight, marginTop, marginBottom)

（三）案例演示：线性布局属性

1、创建安卓应用

基于Empty Activity模板创建安卓应用 - LinearLayoutDemo
单击【Finish】按钮

2、主布局资源文件

主布局资源文件 activity_main.xml
将约束布局改为线性布局，删掉默认的标签
添加两个按钮

3、字符串资源文件

字符串资源文件 - strings.xml

4、启动应用，查看效果

发现两个按钮水平摆放，在窗口左上角

5、设置布局属性，查看效果

（1）设置线性布局方向

orientation属性

（2）设置线性布局内边距

padding (paddingTop, paddingBottom, paddingLeft, paddingRight)

（3）设置线性布局对齐方式

gravity (left、center、right、top、bottom可以搭配形成很多种对齐方式)
设置右上对齐 - right|top
删掉【按钮1】的右外边距
设置居中对齐 - center
设置左下对齐 - left|bottom
设置右下对齐 - right|bottom
设置上中对齐 - center|top
其余几种情况：左中对齐、右中对齐和下中对齐

（4）设置线性布局背景

设置背景颜色（采用颜色变量）
设置背景颜色（采用颜色常量）
问题：想设置自己喜欢的颜色，怎么定义颜色常量？
https://m.wang1314.com/doc/webapp/topic/21084865.html
设置背景图片
设置背景选择器
添加一个线性布局，设置自定义边框
实现边框渐变色效果

（四）案例演示：线性布局嵌套

1、创建安卓应用

基于Empty Activity创建安卓应用 -NestedLinearLayout
单击【Finish】按钮

2、准备图片素材

将三张小图片拷贝到res/drawable目录

3、主布局资源文件

主布局资源文件 - activity_main.xml
将约束布局改为线性布局
添加三个线性布局，按照1:2:3比例垂直瓜分手机屏幕

4、字符串资源文件

字符串资源文件 - strings.xml

5、启动应用，查看效果

三个布局按照1:2:3比例垂直瓜分手机屏幕

6、修改布局，查看效果

在第一个布局添加三个水平摆放的图像视图
在第二个布局里添加一个横向线性布局，里面添加四个按钮
在第二个布局里添加一个编辑框
第三个布局里添加三个布局，按照1:2:3比例水平瓜分手机屏幕

三、上机操作

任务一、选择水果

单击某个水果图标，弹出土司提示用户选择了什么水果

1、编写主布局资源文件

代码：

<?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:gravity="center"tools:context=".MainActivity"><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:gravity="center"><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:gravity="center"android:orientation="vertical"><ImageViewandroid:id="@+id/BXG"android:layout_width="50dp"android:layout_height="50dp"android:src="@drawable/bxg"/><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:gravity="center"android:textSize="15dp"android:text="百香果"/></LinearLayout><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:gravity="center"android:orientation="vertical"android:paddingLeft="20dp"><ImageViewandroid:id="@+id/LM"android:layout_width="50dp"android:layout_height="50dp"android:src="@drawable/lm"/><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:gravity="center"android:textSize="15dp"android:text="蓝莓"/></LinearLayout><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:gravity="center"android:orientation="vertical"android:paddingLeft="20dp"><ImageViewandroid:id="@+id/MG"android:layout_width="50dp"android:layout_height="50dp"android:src="@drawable/mg"/><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:gravity="center"android:textSize="15dp"android:text="芒果"/></LinearLayout><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:gravity="center"android:orientation="vertical"android:paddingLeft="20dp"><ImageViewandroid:id="@+id/PG"android:layout_width="50dp"android:layout_height="50dp"android:src="@drawable/pg"/><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:gravity="center"android:textSize="15dp"android:text="苹果"/></LinearLayout></LinearLayout><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:gravity="center"><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:gravity="center"android:orientation="vertical"><ImageViewandroid:id="@+id/PT"android:layout_width="50dp"android:layout_height="50dp"android:src="@drawable/pt"/><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:gravity="center"android:textSize="15dp"android:text="葡萄"/></LinearLayout><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:gravity="center"android:orientation="vertical"android:paddingLeft="20dp"><ImageViewandroid:id="@+id/CM"android:layout_width="50dp"android:layout_height="50dp"android:src="@drawable/cm"/><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:gravity="center"android:textSize="15dp"android:text="草莓"/></LinearLayout><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:gravity="center"android:orientation="vertical"android:paddingLeft="20dp"><ImageViewandroid:id="@+id/CZ"android:layout_width="50dp"android:layout_height="50dp"android:src="@drawable/cz"/><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:gravity="center"android:textSize="15dp"android:text="橙子"/></LinearLayout><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:gravity="center"android:orientation="vertical"android:paddingLeft="20dp"><ImageViewandroid:id="@+id/TZ"android:layout_width="50dp"android:layout_height="50dp"android:src="@drawable/tz"/><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:gravity="center"android:textSize="15dp"android:text="桃子"/></LinearLayout></LinearLayout></LinearLayout>

2、编写主窗口文件并给图片添加吐司

代码：

package net.xqf.choose_fruit;import androidx.appcompat.app.AppCompatActivity;import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.Toast;public class MainActivity extends AppCompatActivity {private ImageView BXG;private ImageView LM;private ImageView MG;private ImageView PG;private ImageView PT;private ImageView CM;private ImageView CZ;private ImageView TZ;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);BXG = findViewById(R.id.BXG);LM = findViewById(R.id.LM);MG = findViewById(R.id.MG);PG = findViewById(R.id.PG);PT = findViewById(R.id.PT);CM = findViewById(R.id.CM);CZ = findViewById(R.id.CZ);TZ = findViewById(R.id.TZ);BXG.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {Toast.makeText(MainActivity.this, "百香果", Toast.LENGTH_SHORT).show();}});LM.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {Toast.makeText(MainActivity.this, "蓝莓", Toast.LENGTH_SHORT).show();}});MG.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {Toast.makeText(MainActivity.this, "芒果", Toast.LENGTH_SHORT).show();}});PG.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {Toast.makeText(MainActivity.this, "苹果", Toast.LENGTH_SHORT).show();}});PT.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {Toast.makeText(MainActivity.this, "葡萄", Toast.LENGTH_SHORT).show();}});CM.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {Toast.makeText(MainActivity.this, "草莓", Toast.LENGTH_SHORT).show();}});CZ.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {Toast.makeText(MainActivity.this, "橙子", Toast.LENGTH_SHORT).show();}});TZ.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {Toast.makeText(MainActivity.this, "桃子", Toast.LENGTH_SHORT).show();}});}
}

3、运行程序查看效果

安卓学习笔记3.1 线性布局相关推荐

安卓学习笔记08：常用布局 - 线性布局
文章目录零.学习目标一.界面与布局概述 (一)界面 (二)布局 1.视图层次结构图 2.UI容器 (Container) 3.UI控件 (Control) 4.两种方式声明布局二.线性布局概述 ...
安卓学习笔记11：常用布局 - 网格布局
文章目录零.学习目标一.网格布局概述 1.布局特点 2.继承关系图 3.常用属性 (1)针对布局的属性 (2)针对子控件的属性二.案例演示--计算器界面 (一)运行效果 (二)涉及知识点 (三) ...
安卓学习笔记10：常用布局 - 相对布局
文章目录零.学习目标一.相对布局概述 1.布局特点 2.继承关系图 3.常用属性 (1)相对于父容器居中 (2)相对于其它控件的位置 (3)相对于其它控件对齐 (4)相对于父容器对齐 (5)标识符 ...
安卓学习笔记09：常用布局 - 帧式布局
文章目录零.学习目标一.帧式布局概述 1.布局特点 2.继承关系图 3.常用属性二.案例演示 -- 切换颜色 1.创建安卓应用[SwitchColor] 2.主布局资源文件activity_ma ...
2020年安卓学习笔记目录
文章目录一.讲课笔记二.安卓案例三.安卓实训项目四.学生安卓学习博客五.安卓课后作业 (一)界面设计练习 1.制作登录界面 2.制作部队管理界面 3.制作灭火救援界面 4.制作交付界面 5. ...
安卓学习笔记07：事件处理、窗口跳转与传递数据
文章目录零.学习目标一.三个基本控件 1.标签控件(TextView) 2.编辑框控件(EditText) 3.按钮控件(Button) 二.安卓事件处理机制 (一)安卓事件处理概述 (二)安卓事 ...
安卓学习笔记3——登录界面UI
安卓学习笔记3--登录界面UI 一.登录界面UI 1.根据需求写UI 2.主活动 3.主活动调用的读写文件的工具类 4.效果展示二.总结与改进不足: 1.密码分割采用字符串:当密码和用户名包含该字 ...
很low的安卓学习笔记（一、实用技巧）
很low的安卓学习笔记(一.实用技巧) 一.学习了几天的实用技巧小总结: 1.规范的定义内容的格式: 2.一些快捷键 3.将xxx.xml布局改为Activity中可以调用的View视图 4.当左下角 ...
Android学习笔记 56. TabLayout 选项卡布局
Android学习笔记 Android基础开发--布局文章目录 Android学习笔记 Android基础开发--布局 56. TabLayout 选项卡布局 56.1 简介 56.2 TabIte ...

安卓学习笔记3.1 线性布局

这里写自定义目录标题

一、导入新课

二、新课学习

（一）界面与布局

1、界面

2、布局

（1）视图层次结构图

（2）UI容器 (Container)

（3）UI控件 (Control)

（4）两种方式声明布局

（二）线性布局

1、继承关系图

2、常用属性

（三）案例演示：线性布局属性

1、创建安卓应用

2、主布局资源文件

3、字符串资源文件

4、启动应用，查看效果

5、设置布局属性，查看效果

（1）设置线性布局方向

（2）设置线性布局内边距

（3）设置线性布局对齐方式

（4）设置线性布局背景

（四）案例演示：线性布局嵌套

1、创建安卓应用

2、准备图片素材

3、主布局资源文件

4、字符串资源文件

5、启动应用，查看效果

6、修改布局，查看效果

三、上机操作

任务一、选择水果

1、编写主布局资源文件

2、编写主窗口文件并给图片添加吐司

3、运行程序查看效果

安卓学习笔记3.1 线性布局相关推荐

最新文章

热门文章