第一个安卓应用小程序--浅浅仿照微信发现界面

发布于:2023-01-06 ⋅ 阅读:(255) ⋅ 点赞:(0)

一、实验目标

模仿微信“发现”页创建列表布局,学习使用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.列表组之间的间隔样式搭建

 

  1. 创建父布局;对父布局进行设置背景色;设置父布局的垂直方向

<?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>        
  1. 构建第一个列表组;设置宽高;设置背景色;设置垂直方向

    <LinearLayout
            android:layout_marginTop="10dp"
            android:background="#fff"
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="60dp"></LinearLayout>
              
    1. 创建列表组里的第一个图标;设置宽高;设置背景色;设置与左边的距离;设置居中

<ImageView
    android:layout_marginLeft="15dp"
    android:layout_gravity="center_vertical"
    android:background="@mipmap/icon_pengyou"
    android:layout_width="40dp"
    android:layout_height="40dp"/>
  1. 创建列表组中的汉字;设置汉字;设置宽高;设置字体颜色;设置字体样式;设置字体大小;设置与左侧的距离;设置字体居中

    <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"/>
  2. 创建列表组右边的箭头;设置宽和高;设置背景;设置水平居中;设置与右边的距离

<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网上查阅资料重新下载包体,重启解决。


网站公告

今日签到

点亮在社区的每一天
去签到