Android Studio学习01：第一个安卓应用

简介：jdk安装；Android Studio安装；Android Studio创建第一个项目；安卓开发入门；学习使用Textview、Imageview、LinearLayout。
源码
说明：Android-lab01.7z 第一个安卓应用

一、实验目标

1、模仿微信“发现”页创建列表布局，学习使用Textview、Imageview、LinearLayout

二、实验步骤

准备工作

0.搭建开发环境：

0.1安装jdk

https://www.oracle.com/java/technologies/downloads/

1）创建一个英文名称的文件夹（不要用中文），将下载好的 jdk 保存至该目录下

2）进入java SE的安装页面

3）点击下一步之后，默认会安装到的 C:\Program Files\Java\jdk ****\ (这个路径一定要记住，后续要用)，

你也可以选择想要安装的文件夹（此处选择默认路径），之后再点击下一步

4）jre 的下载，可以直接下一步

5）安装完成。然后，就可以在你选择的文件下看到下载好的 jdk 和 jre ，我们使用的是默认安装地址，所以在 C:\Program Files\Java\jdk ****\ 能够看到这两个文件

0.2配置环境变量

1）鼠标右键 我的电脑（此电脑） - 属性 - 高级系统设置 再选择 环境变量

2）点击 环境变量 后，如图所示，点击 新建

3）添加配置：

变量名：Java_Home

变量值：jdk 的安装目录 ，可以点击浏览目录选择(这个就是刚才的安装路径)

新建好了，点击 确定 保存

4）同时还需要添加 Path 的 配置，选择 Path ，点击 编辑 ，可能会看到两种情况

情况一：

新建 两个环境变量

变量1：%Java_Home%\bin

变量2：%Java_Home%\jre\bin

情况二：

将以下配置复制粘贴放在最前面，再 确定 保存

配置：

%Java_Home%\bin;%Java_Home%\jre\bin;

添加配置：

变量名：CLASSPATH

变量值：

.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;

点击确定，保存，java 在 windows 环境下的环境配置就完成了，想要确认是否安装成功，键盘”win+R“，输入cmd回车，在命令行窗口输入

java --version

若出现版本号信息则安装成功

0.3安装开发工具Android Studio

0.3.1安装开发工具

https://developer.android.google.cn/studio#downloads

下载后打开，会提示，Cancel无视即可，设置自定义的地方先使用默认的即可 直接Next下一步

这里是一些关于SDK的协议，选择Accept接受协议，然后点击Finish

导入自己的设置地方，可以先进行跳过，后期可以自己进行设置

后面选择主题、开发工具确认一直next即可，等待安装完成

0.3.2创建项目

安装完成后可以直接创建项目

选择Empty Activity，点击下一步

配置项目属性，配置完成后，点击Finish，首次运行会导入一些包，等待下载即可。

0.3.3配置app入口页面

切换Android视图，找到如图所示文件，MainActivity为程序入口

查看MainActivity

package com.example.test;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

其中

setContentView(R.layout.activity_main);

中的R.layout.activity_main即为初始页面文件

activity_main文件在如图所示目录

删除该文件activity_main.xml，右键点击layout，新建 => XML =>Layout XML File

设置文件名mine

点击完成/Finish

最后修改MainActivity的R.layout.activity_main为R.layout.mine即可

1、页面布局

1.1 页面内容

页面上主要包含5组列表，每组列表包含1-2个列表项。

具体内容解释如下：

• 列表组1：“朋友圈”单行列表项；

• 列表组2：“扫一扫”和“摇一摇”两行列表项；

• 列表组3：“看一看”和“搜一搜”两行列表项；

• 列表组4：“购物”和“游戏”两行列表项；

• 列表组5：“小程序”单行列表项。

1.2建立页面模型

1.首先设计一个外部总垂直布局,包含所有的列表组

2.写五个LinearLayout来构建这五个列表组

3.每个列表组的单独构建

4.列表组之间的间隔样式搭建

1.3实现模型

1.3.1父布局

创建父布局，使用LinearLayout线性布局，设置父布局的宽高、背景色和父布局的垂直方向，因为子组件为竖直排列，所以垂直方向为竖直"vertical"

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:background="#e5e5e5"
    android:layout_height="match_parent"
    android:orientation="vertical"
    >
    

</LinearLayout>

1.3.2构建朋友圈子组件

准备工作：子组件需要使用图标，将图标拖入mipmap-xxhdpi

打开项目，选择项目

找到路径app/src/main/res下的mipmap-xxhdpi，将图片素材拖入该文件夹

然后选择项目，进入Android，即可在/res/mipmap目录下看到我们拖入的图片

使用图片""@mipmap/tupian"即可

1.创建子组件，设置子组件的宽高、背景色和垂直方向，因为子组件内部为横向排列，所以垂直方向为横向"horizontal"

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:background="#fff"
        android:orientation="horizontal"
        android:layout_marginBottom="20dp">
    </LinearLayout>

2.子组件内部设置

1）组件创建列表组里的第一个图标：设置宽高，设置背景色，设置与左边的距离（layout_marginLeft），设置居中（layout_gravity）

<ImageView
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_marginLeft="15dp"
            android:layout_gravity="center_vertical"
            android:background="@mipmap/pengyou">
        </ImageView>        

2）组件创建列表组中的汉字:设置汉字、设置宽高、设置字体颜色、设置字体样式、设置字体大小、设置与左侧的距离、设置字体居中

<TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:text="朋友圈"
            android:layout_weight="1"
            android:gravity="center_vertical"
            android:textSize="18dp"
            android:textColor="#333"
            android:textStyle="bold"
            android:layout_marginLeft="10dp"/>        

3）组件创建列表组右边的箭头：设置宽和高、设置背景、设置水平居中、设置与右边的距离

<ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@mipmap/right"
            android:layout_gravity="center_vertical"
            android:layout_marginRight="15dp"/>

”朋友圈“子组件完整代码

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:background="#fff"
        android:orientation="horizontal"
        android:layout_marginBottom="20dp">

        <ImageView
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_marginLeft="15dp"
            android:layout_gravity="center_vertical"
            android:background="@mipmap/pengyou">
        </ImageView>

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:text="朋友圈"
            android:layout_weight="1"
            android:gravity="center_vertical"
            android:textSize="18dp"
            android:textColor="#333"
            android:textStyle="bold"
            android:layout_marginLeft="10dp"/>
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@mipmap/right"
            android:layout_gravity="center_vertical"
            android:layout_marginRight="15dp"/>
    </LinearLayout>

1.3.3构建剩余组件

剩余组件有两种构造方式

第一种：每个功能单独一个构造一个组件

第二种：相邻功能放到一个父组件中

采用第一种方式：剩余组件与”朋友圈“组件结构基本一致，修改汉字，图标即可

不相邻组件间的空隙可以用

 android:layout_marginBottom="20dp"//20dp距离

实现，注意，相邻组件间有一道白线显示相邻组件，同样可以使用这个属性来实现，只是参数可以设置小一些如”3dp“。实现图示布局，其他布局仿照实现即可。

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:background="#fff"
        android:orientation="horizontal"
        android:layout_marginBottom="20dp">
		//朋友圈内部组件
    </LinearLayout>

    <LinearLayout
        android:layout_marginBottom="3dp"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:background="#fff"
        android:orientation="horizontal">
		//扫一扫内部组件
    </LinearLayout>
    <LinearLayout
        android:layout_marginBottom="20dp"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:background="#fff"
        android:orientation="horizontal">
		//摇一摇内部组件
    </LinearLayout>

代码结构

三、程序运行结果

1、程序运行结果