一、实验目标
模仿微信“发现”页创建列表布局,学习使用Textview imageview、LinearLayout
二、实验步骤
列出实验的关键步骤、代码解析、截图。
1.安装jdk
创建一个英文名称的文件夹(尽量别用中文),将下载好的 jdk 保存至该目录下
进入java SE的安装页面
点击下一步之后,默认会安装到的 C:\Program Files\Java\jdk \ (这个路径一定要记住,后续要用),
你也可以选择想要安装的文件夹(此处选择默认路径),之后再点击下一步
开始下载 …
直接下一步,安装完成.
然后,就可以在你选择的文件下看到下载好的 jdk 和 jre ,
此处使用的是默认安装地址,所以在 C:\Program Files\Java\jdk \ 能够看到这两个文件
2、JAVA环境配置——环境变量配置
鼠标右键 我的电脑(此电脑) - 属性 - 高级系统设置 再选择 环境变量
点击 环境变量 后,如图所示,
点击 新建
添加配置:
变量名:Java_Home
变量值:jdk 的安装目录 ,可以点击浏览目录选择(这个就是刚才的安装路径)
新建好了,点击 确定 保存
同时还需要添加 Path 的 配置,选择 Path ,点击 编辑
新建 两个环境变量
变量1:%Java_Home%\bin
变量2:%Java_Home%\jre\bin
我们会将它上移到顶部,再 确定 保存
检测是否配置成功
使用 dos 命名 :win + R 再输入 cmd 回车
打开命令窗口 输入java 回车
如果想要查看当前系统的全局 jdk 版本
可输入 java -version 命令查看
3、Android studio安装(含SDK)
首次运行时,因为我们没有SDK 所以系统会去检测环境,这里选择
Cancel 即可
设置自定义的地方
先使用默认的即可 直接Next下一步
这里是一些关于SDK的协议 选择Accept接受协议 然后点击Finish
导入自己的设置地方 可以先进行跳过 后期可以自己进行设置
开发工具的主题 目前以黑色为主 看个人爱好 选择好之后Next下一步
开发工具的主要设置 主要涵盖了一些SDK等 直接Next下一步
如果安装完成了
页面就会变成这个样子 点击加号或New Project创建项目
选择Empty Activity 创建空的页面app
我们这里把项目语言那里 改成JAVA
首次运行
需要下载一些运行项目的库
到了这个页面
我们就算是完成安装了
只需要让开发工具自行
下载一个运行所需的
jar包就可以了
*LinearLayout 线性布局 在安卓开发中,用的相对频繁的是线性布局和相对布局,在大多数的情况下使用这两种布局都能完成。线性布局相对简单,就是所有控件都依次排序,谁也不会覆盖谁。线性布局需要定义一个方向(横向或纵向),下面简单介绍一下 weight(权重属性): weight 属性用来等比例地划分区域的,但需要注意是对当前布局中剩余空间进行分配,因此可能会出现比例倒置的情况,因此谷歌建议水平线性布局的宽度设置成0dp后再设置对应控件的权重,垂直的高度设置成0再设置权重.
4.项目逻辑梳理
页面上主要包含5组列表,每组列表包含1-2个列表项。
具体内容解释如下:
• 列表组1:“朋友圈”单行列表项;
• 列表组2:“扫一扫”和“摇一摇”两行列表项;
• 列表组3:“看一看”和“搜一搜”两行列表项;
• 列表组4:“购物”和“游戏”两行列表项;
• 列表组5:“小程序”单行列表项。
1.首先设计一个外部总垂直布局,包含所有的列表组
2.写五个LinearLayout来构建这五个列表组
3.每个列表组的单独构建
4.列表组之间的间隔样式搭建
创建父布局;对父布局进行设置背景色;设置父布局的垂直方向
<?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" android:background="#f0f0f0" android:orientation="vertical" tools:context=".MainActivity"> </LinearLayout>
构建第一个列表组;设置宽高;设置背景色;设置垂直方向
<LinearLayout android:layout_marginTop="10dp" android:background="#fff" android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="60dp"></LinearLayout>
创建列表组里的第一个图标;设置宽高;设置背景色;设置与左边的距离;设置居中
<ImageView android:layout_marginLeft="15dp" android:layout_gravity="center_vertical" android:background="@mipmap/icon_pengyou" android:layout_width="40dp" android:layout_height="40dp"/>
创建列表组中的汉字;设置汉字;设置宽高;设置字体颜色;设置字体样式;设置字体大小;设置与左侧的距离;设置字体居中
<TextView android:textColor="#333" android:textStyle="bold" android:textSize="18dp" android:layout_marginLeft="15dp" android:layout_gravity="center_vertical" android:layout_weight="1" android:text="朋友圈" android:layout_width="0dp" android:layout_height="wrap_content"/>
创建列表组右边的箭头;设置宽和高;设置背景;设置水平居中;设置与右边的距离
<ImageView android:layout_marginRight="15dp" android:layout_gravity="center_vertical" android:background="@mipmap/right" android:layout_width="7dp" android:layout_height="13dp"/>
可以设计一个外部总垂直布局 ,包含5组列表,用五个 LinearLayout 来构建这5组列表,每组列表组单独构建,列表组之间存在间隔。
代码如下:
<?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"
android:background="#f0f0f0"
android:orientation="vertical"
tools:context=".MainActivity">
<LinearLayout
android:layout_marginTop="10dp"
android:background="#fff"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="60dp">
<ImageView
android:layout_marginLeft="15dp"
android:layout_gravity="center_vertical"
android:background="@mipmap/icon_pengyou"
android:layout_width="40dp"
android:layout_height="40dp"/>
<TextView
android:textColor="#333"
android:textStyle="bold"
android:textSize="18dp"
android:layout_marginLeft="15dp"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:text="朋友圈"
android:layout_width="0dp"
android:layout_height="wrap_content"/>
<ImageView
android:layout_marginRight="15dp"
android:layout_gravity="center_vertical"
android:background="@mipmap/right"
android:layout_width="7dp"
android:layout_height="13dp"/>
</LinearLayout>
<TextView
android:background="#f0f0f0"
android:layout_width="wrap_content"
android:layout_height="15dp"/>
<LinearLayout
android:background="#fff"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="60dp">
<ImageView
android:layout_marginLeft="15dp"
android:layout_gravity="center_vertical"
android:background="@mipmap/one"
android:layout_width="40dp"
android:layout_height="40dp"/>
<TextView
android:textColor="#333"
android:textStyle="bold"
android:textSize="18dp"
android:layout_marginLeft="15dp"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:text="扫一扫"
android:layout_width="0dp"
android:layout_height="wrap_content"/>
<ImageView
android:layout_marginRight="15dp"
android:layout_gravity="center_vertical"
android:background="@mipmap/right"
android:layout_width="7dp"
android:layout_height="13dp"/>
</LinearLayout>
<LinearLayout
android:background="#fff"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="60dp">
<ImageView
android:layout_marginLeft="15dp"
android:layout_gravity="center_vertical"
android:background="@mipmap/three"
android:layout_width="40dp"
android:layout_height="40dp"/>
<TextView
android:textColor="#333"
android:textStyle="bold"
android:textSize="18dp"
android:layout_marginLeft="15dp"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:text="摇一摇"
android:layout_width="0dp"
android:layout_height="wrap_content"/>
<ImageView
android:layout_marginRight="15dp"
android:layout_gravity="center_vertical"
android:background="@mipmap/right"
android:layout_width="7dp"
android:layout_height="13dp"/>
</LinearLayout>
<LinearLayout
android:layout_marginTop="15dp"
android:background="#fff"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="60dp">
<ImageView
android:layout_marginLeft="15dp"
android:layout_gravity="center_vertical"
android:background="@mipmap/four"
android:layout_width="40dp"
android:layout_height="40dp"/>
<TextView
android:textColor="#333"
android:textStyle="bold"
android:textSize="18dp"
android:layout_marginLeft="15dp"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:text="看一看"
android:layout_width="0dp"
android:layout_height="wrap_content"/>
<ImageView
android:layout_marginRight="15dp"
android:layout_gravity="center_vertical"
android:background="@mipmap/right"
android:layout_width="7dp"
android:layout_height="13dp"/>
</LinearLayout>
<LinearLayout
android:background="#fff"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="60dp">
<ImageView
android:layout_marginLeft="15dp"
android:layout_gravity="center_vertical"
android:background="@mipmap/five"
android:layout_width="40dp"
android:layout_height="40dp"/>
<TextView
android:textColor="#333"
android:textStyle="bold"
android:textSize="18dp"
android:layout_marginLeft="15dp"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:text="搜一搜"
android:layout_width="0dp"
android:layout_height="wrap_content"/>
<ImageView
android:layout_marginRight="15dp"
android:layout_gravity="center_vertical"
android:background="@mipmap/right"
android:layout_width="7dp"
android:layout_height="13dp"/>
</LinearLayout>
<LinearLayout
android:layout_marginTop="15dp"
android:background="#fff"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="60dp">
<ImageView
android:layout_marginLeft="15dp"
android:layout_gravity="center_vertical"
android:background="@mipmap/six"
android:layout_width="40dp"
android:layout_height="40dp"/>
<TextView
android:textColor="#333"
android:textStyle="bold"
android:textSize="18dp"
android:layout_marginLeft="15dp"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:text="购物"
android:layout_width="0dp"
android:layout_height="wrap_content"/>
<ImageView
android:layout_marginRight="15dp"
android:layout_gravity="center_vertical"
android:background="@mipmap/right"
android:layout_width="7dp"
android:layout_height="13dp"/>
</LinearLayout>
<LinearLayout
android:background="#fff"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="60dp">
<ImageView
android:layout_marginLeft="15dp"
android:layout_gravity="center_vertical"
android:background="@mipmap/seven"
android:layout_width="40dp"
android:layout_height="40dp"/>
<TextView
android:textColor="#333"
android:textStyle="bold"
android:textSize="18dp"
android:layout_marginLeft="15dp"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:text="游戏"
android:layout_width="0dp"
android:layout_height="wrap_content"/>
<ImageView
android:layout_marginRight="15dp"
android:layout_gravity="center_vertical"
android:background="@mipmap/right"
android:layout_width="7dp"
android:layout_height="13dp"/>
</LinearLayout>
<LinearLayout
android:layout_marginTop="15dp"
android:background="#fff"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="60dp">
<ImageView
android:layout_marginLeft="15dp"
android:layout_gravity="center_vertical"
android:background="@mipmap/eight"
android:layout_width="40dp"
android:layout_height="40dp"/>
<TextView
android:textColor="#333"
android:textStyle="bold"
android:textSize="18dp"
android:layout_marginLeft="15dp"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:text="小程序"
android:layout_width="0dp"
android:layout_height="wrap_content"/>
<ImageView
android:layout_marginRight="15dp"
android:layout_gravity="center_vertical"
android:background="@mipmap/right"
android:layout_width="7dp"
android:layout_height="13dp"/>
</LinearLayout>
</LinearLayout>
三、程序运行结果
列出程序的最终运行结果及截图。
四、问题总结与体会
1.实验环境搭建时一定注意每一步操作是否正确,否则很容易重来。
2.安装过程网络经常波动,只能try again。
3.如果Android-studio无法安装虚拟机HAXM,可能是电脑部分变量问题,解决办法:
物理连接手机,跟着网上教程即可轻松连接;或是下载第三方模拟器,根据教程连接到studio
4.代码报错,很可能是部分包没安装,请阅读error网上查阅资料重新下载包体,重启解决。