一、实验目标
二、实验步骤
1. 准备工作:环境搭建
1.1.安装 JDK
创建一个路径不含中文的文件夹,将下载好的 JDK 保存在该目录下。
进入安装页面,记住安装的路径
下载完成后开始 JRE 的下载。点击下一步即可
安装完成
1.2.配置 Java 环境
在 此电脑的 [高级系统设置] 处选择 [环境变量]
新建系统变量
变量名:Java_Home
变量值:C:\Program Files\Java\jdk1.8.0_331
进行 Path 配置。选择 Path ,点击编辑。新建两个变量。
变量 1 :%Java_Home%\bin
变量 2 :%Java_Home%\jre\bin
之后选中这两个变量,点击右侧的 [上移] 将两个变量置顶。
检测配置是否成功:
打开 命令提示符( cmd ),输入 Java 和 Java -version。可查看 Java 是否安装和 JDK 版本。
1.3.安装 AndroidStudio (含 SDK)
Android 工具下载地址:Download Android Studio & App Tools - Android Developers
自处下载 zip 版。在 bin 文件中找到 studio64.exe 文件,点击开始使用。
此处不用导入自己的设置,以后也可以改设置。
一个关于 SDK 的协议,选择 Accept,然后选择 Finish 。
2. 创建项目
点击加号。
选择 Empty Activity 。
创建项目。注意将 Language 改为 Java。
首次运行需要下载一些库,等待即可。注意保持网络连接通畅。
项目创建后开发工具会自行下载一个运行所需的 jar 包,等待即可。
3. 视图
-
页面上主要包含5组列表,每组列表包含1-2个列表项。
-
列表组1:“朋友圈”单行列表项;
-
列表组2:“扫一扫”和“摇一摇”两行列表项;
-
列表组3:“看一看”和“搜一搜”两行列表项;
-
列表组4:“购物”和“游戏”两行列表项;
-
列表组5:“小程序”单行列表项。
-
4. 代码实现
在 app/res/layout/activity_main.xml 文件中编写页面。
打开文件后点击右上角 Split 即可看到代码和视图两个界面。
4.1.创建父布局
-
首先设计一个外部总垂直布局,包含所有的列表组;
-
对父布局进行设置背景色;
-
设置父布局的垂直方向。
<?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:background="#e5e5e5"
android:orientation="vertical">
</LinearLayout>
-
LinearLayout :线性布局;
-
layout_width :宽;
-
layout_height :高;
-
match_parent :自适应满屏;
-
background :背景;
-
orientation :垂直方向;vertical :纵向、horizontal :横向。
4.2.构建第一个列表组
4.2.1.列表组基本设置
设置宽高、背景色、垂直方向:
<?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:background="#e5e5e5"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="#fff"
android:orientation="horizontal">
</LinerLayout>
</LinearLayout>
4.2.2.列表组内设置
-
图标
将图片素材拖入 mipmap 文件夹。注意文件命名须为英文小写开头。
设置宽高、背景色、与左边的距离、居中。
-
layout_margiLeft :与左边的距离。
<?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:background="#e5e5e5" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="60dp" android:background="#fff" android:orientation="horizontal"> <ImageView android:layout_width="40dp" android:layout_height="40dp" android:layout_marginLeft="15dp" android:layout_gravity="center_vertical" android:background="@mipmap/icon_pengyou"/> </LinerLayout> </LinearLayout>
-
-
设置汉字、宽高、字体颜色、字体样式、字体大小、与左侧的距离、字体居中。
-
layout_weight :权重;
-
text :所展现的字;
-
textSize :字体大小;
-
textColor :字体颜色;
-
textStyle :字体样式 ;italic :倾斜、bold :加粗;
-
gravity :在控件内部的位置(通用);
-
wrap_content :自适应大小。
<?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:background="#e5e5e5" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="60dp" android:background="#fff" android:orientation="horizontal"> <ImageView android:layout_width="40dp" android:layout_height="40dp" android:layout_marginLeft="15dp" android:layout_gravity="center_vertical" android:background="@mipmap/icon_pengyou"/> <TextView android:layout_width="0dp" android:layout_height="match_parent" android:layout_marginLeft="10dp" android:layout_weight="1" android:gravity="center_vertical" android:text="朋友圈" android:textStyle="bold" android:textColor="#333" android:textSize="18dp"/> </LinerLayout> </LinearLayout>
-
-
右方箭头
设置宽和高、背景、水平居中、与右边的距离。
-
layout_margiRight :与左边的距离。
<?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:background="#e5e5e5" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="60dp" android:background="#fff" android:orientation="horizontal"> <ImageView android:layout_width="40dp" android:layout_height="40dp" android:layout_marginLeft="15dp" android:layout_gravity="center_vertical" android:background="@mipmap/icon_pengyou"/> <TextView android:layout_width="0dp" android:layout_height="match_parent" android:layout_marginLeft="10dp" android:layout_weight="1" android:gravity="center_vertical" android:text="朋友圈" android:textStyle="bold" android:textColor="#333" android:textSize="18dp"/> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginRight="15dp" android:layout_gravity="center_vertical" android:background="@mipmap/right"/> </LinerLayout> </LinearLayout>
-
4.3.补完代码
-
layout_marginTop :与上方的距离。
<?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:background="#e5e5e5" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="60dp" android:background="#fff" android:orientation="horizontal"> <ImageView android:layout_width="40dp" android:layout_height="40dp" android:layout_marginLeft="15dp" android:layout_gravity="center_vertical" android:background="@mipmap/icon_pengyou"/> <TextView android:layout_width="0dp" android:layout_height="match_parent" android:layout_marginLeft="10dp" android:layout_weight="1" android:gravity="center_vertical" android:text="朋友圈" android:textStyle="bold" android:textColor="#333" android:textSize="18dp"/> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginRight="15dp" android:layout_gravity="center_vertical" android:background="@mipmap/right"/> </LinearLayout> <LinearLayout android:background="#fff" android:orientation="horizontal" android:layout_marginTop="30dp" android:layout_width="match_parent" android:layout_height="60dp"> <ImageView android:layout_width="40dp" android:layout_height="40dp" android:layout_marginLeft="15dp" android:layout_gravity="center_vertical" android:background="@mipmap/scan"/> <TextView android:layout_width="0dp" android:layout_height="match_parent" android:layout_marginLeft="10dp" android:layout_weight="1" android:gravity="center_vertical" android:text="扫一扫" android:textStyle="bold" android:textColor="#333" android:textSize="18dp"/> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginRight="15dp" android:layout_gravity="center_vertical" android:background="@mipmap/right"/> </LinearLayout> <LinearLayout android:background="#fff" android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="60dp"> <ImageView android:layout_width="40dp" android:layout_height="40dp" android:layout_marginLeft="15dp" android:layout_gravity="center_vertical" android:background="@mipmap/shack"/> <TextView android:layout_width="0dp" android:layout_height="match_parent" android:layout_marginLeft="10dp" android:layout_weight="1" android:gravity="center_vertical" android:text="摇一摇" android:textStyle="bold" android:textColor="#333" android:textSize="18dp"/> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginRight="15dp" android:layout_gravity="center_vertical" android:background="@mipmap/right"/> </LinearLayout> <LinearLayout android:background="#fff" android:orientation="horizontal" android:layout_marginTop="30dp" android:layout_width="match_parent" android:layout_height="60dp"> <ImageView android:layout_width="40dp" android:layout_height="40dp" android:layout_marginLeft="15dp" android:layout_gravity="center_vertical" android:background="@mipmap/look"/> <TextView android:layout_width="0dp" android:layout_height="match_parent" android:layout_marginLeft="10dp" android:layout_weight="1" android:gravity="center_vertical" android:text="看一看" android:textStyle="bold" android:textColor="#333" android:textSize="18dp"/> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginRight="15dp" android:layout_gravity="center_vertical" android:background="@mipmap/right"/> </LinearLayout> <LinearLayout android:background="#fff" android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="60dp"> <ImageView android:layout_width="40dp" android:layout_height="40dp" android:layout_marginLeft="15dp" android:layout_gravity="center_vertical" android:background="@mipmap/search"/> <TextView android:layout_width="0dp" android:layout_height="match_parent" android:layout_marginLeft="10dp" android:layout_weight="1" android:gravity="center_vertical" android:text="搜一搜" android:textStyle="bold" android:textColor="#333" android:textSize="18dp"/> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginRight="15dp" android:layout_gravity="center_vertical" android:background="@mipmap/right"/> </LinearLayout> <LinearLayout android:background="#fff" android:orientation="horizontal" android:layout_marginTop="30dp" android:layout_width="match_parent" android:layout_height="60dp"> <ImageView android:layout_width="40dp" android:layout_height="40dp" android:layout_marginLeft="15dp" android:layout_gravity="center_vertical" android:background="@mipmap/buy"/> <TextView android:layout_width="0dp" android:layout_height="match_parent" android:layout_marginLeft="10dp" android:layout_weight="1" android:gravity="center_vertical" android:text="购物" android:textStyle="bold" android:textColor="#333" android:textSize="18dp"/> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginRight="15dp" android:layout_gravity="center_vertical" android:background="@mipmap/right"/> </LinearLayout> <LinearLayout android:background="#fff" android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="60dp"> <ImageView android:layout_width="40dp" android:layout_height="40dp" android:layout_marginLeft="15dp" android:layout_gravity="center_vertical" android:background="@mipmap/game"/> <TextView android:layout_width="0dp" android:layout_height="match_parent" android:layout_marginLeft="10dp" android:layout_weight="1" android:gravity="center_vertical" android:text="游戏" android:textStyle="bold" android:textColor="#333" android:textSize="18dp"/> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginRight="15dp" android:layout_gravity="center_vertical" android:background="@mipmap/right"/> </LinearLayout> <LinearLayout android:background="#fff" android:orientation="horizontal" android:layout_marginTop="30dp" android:layout_width="match_parent" android:layout_height="60dp"> <ImageView android:layout_width="40dp" android:layout_height="40dp" android:layout_marginLeft="15dp" android:layout_gravity="center_vertical" android:background="@mipmap/program"/> <TextView android:layout_width="0dp" android:layout_height="match_parent" android:layout_marginLeft="10dp" android:layout_weight="1" android:gravity="center_vertical" android:text="小程序" android:textStyle="bold" android:textColor="#333" android:textSize="18dp"/> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginRight="15dp" android:layout_gravity="center_vertical" android:background="@mipmap/right"/> </LinearLayout> </LinearLayout>
三、问题总结与体会
1. 遇到的问题及解决方法
设置父布局属性时须定义垂直方向,否则报错。
android:orientation="vertical"
2. 总结与体会
-
线性布局须理解列表之间互相嵌套的关系,否则最终呈现效果出错。
-
学习 LinearLayout 组件、TextView 组件和 ImageView 组件的使用。
-
学习子组件的使用。
原文地址:https://www.jb51.cc/wenti/3281649.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。