一、实验目标

1、仿微信“发现”页创建列表布局；

2、学习Textview imageview和LinearLayout的使用

二、实验步骤

1、基础知识

1.1 了解TextView

创建任何一个控件,首先就是给他赋予宽和高。

首先认识以下参数功能：

  1. match_parent: 自适应满屏 wrap_content: 自适应大小

  2. layout_width:宽

  3. layout_height:高

  4. text: 所展现的字

  5. textSize: 字体大小

  6. textColor:字体颜色 textStyle:字体样式 (italic:倾斜,bold:加粗,)

  7. gravity:在控件内部的位置(通用)

  8. layout_margin:与其他控件的距离 (通用)

  9. padding:内部间隔距离

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

1.2 了解imageview

图像view和文字一样,都要先赋予宽高。

首先认识以下参数功能：

  1. layout_width:宽

  2. layout_height:高

  3. background:背景

  4. src:加载图片,不会拉伸

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

1.3 父布局与LinearLayout

首先了解以下布局有以下几种常用的方式：

  1. LinearLayout(线性布局)

  2. RelativeLayout(相对布局)

  3. AbsoluteLayout(绝对布局)

  4. TableLayout(表格布局)

  5. FrameLayout(框架布局)

LinearLayout布局特点：放主要提供控件水平或者垂直排列的模型，每个子组件

首先认识以下参数功能：

  1. layout_width:宽

  2. layout_height:高

  3. orientation:垂直方向

  4. (vertical:纵向,horizontal横向)

2、逻辑梳理

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

具体内容解释如下：

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

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

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

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

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

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

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

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

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

3、代码实现

3.1 首先我们创建他们的父布局，对父布局进行设置背景色，设置父布局的垂直方向

3.2 构建第一个列表组，设置宽高，设置背景色，设置垂直方向

3.3 将相关图片复制粘贴至layout下的mipmap文件夹里，创建列表组里的第一个图标，设置宽高，设置背景色，设置与左边的距离，设置居中

3.4 创建列表组中的汉字，设置汉字，设置宽高，设置字体颜色，设置字体样式，设置字体大小，设置与左侧的距离，设置字体居中

3.5 创建列表组右边的箭头，设置宽和高，设置背景，设置水平居中，设置与右边的距离

此时的效果图：

此时的代码如下：

<?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">
​<LinearLayoutandroid:background="#fff"android:orientation="horizontal"android:layout_width="match_parent"android:layout_height="60dp">
​<ImageViewandroid:layout_marginLeft="15dp"android:layout_gravity="center_vertical"android:background="@mipmap/pengyou"android:layout_width="40dp"android:layout_height="40dp"/><TextViewandroid:layout_marginLeft="10dp"android:textStyle="bold"android:textColor="#333"android:textSize="18dp"android:gravity="center_vertical"android:layout_weight="1"android:text="朋友圈"android:layout_width="0dp"android:layout_height="match_parent"/><ImageViewandroid:layout_marginRight="15dp"android:layout_gravity="center_vertical"android:background="@mipmap/right"android:layout_width="wrap_content"android:layout_height="wrap_content"/></LinearLayout></LinearLayout>

3.6 采用多个LinearLayout线性布局，重复上面操作，最终得到结果

完整代码如下：

<?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:orientation="vertical"android:layout_height="match_parent">
​<LinearLayoutandroid:background="#fff"android:orientation="horizontal"android:layout_width="match_parent"android:layout_height="60dp">
​<ImageViewandroid:layout_marginLeft="15dp"android:layout_gravity="center_vertical"android:background="@mipmap/pengyou"android:layout_width="40dp"android:layout_height="40dp"/><TextViewandroid:layout_marginLeft="10dp"android:textStyle="bold"android:textColor="#333"android:textSize="18dp"android:gravity="center_vertical"android:layout_weight="1"android:text="朋友圈"android:layout_width="0dp"android:layout_height="match_parent"/><ImageViewandroid:layout_marginRight="15dp"android:layout_gravity="center_vertical"android:background="@mipmap/right"android:layout_width="wrap_content"android:layout_height="wrap_content"/></LinearLayout>
​<LinearLayoutandroid:background="#fff"android:orientation="horizontal"android:layout_width="match_parent"android:layout_marginTop="20dp"android:layout_height="60dp">
​<ImageViewandroid:layout_marginLeft="15dp"android:layout_gravity="center_vertical"android:background="@mipmap/sao"android:layout_width="40dp"android:layout_height="40dp"/><TextViewandroid:layout_marginLeft="10dp"android:textStyle="bold"android:textColor="#333"android:textSize="18dp"android:gravity="center_vertical"android:layout_weight="1"android:text="扫一扫"android:layout_width="0dp"android:layout_height="match_parent"/><ImageViewandroid:layout_marginRight="15dp"android:layout_gravity="center_vertical"android:background="@mipmap/right"android:layout_width="wrap_content"android:layout_height="wrap_content"/></LinearLayout>
​<LinearLayoutandroid:background="#fff"android:orientation="horizontal"android:layout_width="match_parent"android:layout_height="60dp">
​<ImageViewandroid:layout_marginLeft="15dp"android:layout_gravity="center_vertical"android:background="@mipmap/yao"android:layout_width="40dp"android:layout_height="40dp"/><TextViewandroid:layout_marginLeft="10dp"android:textStyle="bold"android:textColor="#333"android:textSize="18dp"android:gravity="center_vertical"android:layout_weight="1"android:text="摇一摇"android:layout_width="0dp"android:layout_height="match_parent"/><ImageViewandroid:layout_marginRight="15dp"android:layout_gravity="center_vertical"android:background="@mipmap/right"android:layout_width="wrap_content"android:layout_height="wrap_content"/></LinearLayout>
​<LinearLayoutandroid:background="#fff"android:orientation="horizontal"android:layout_width="match_parent"android:layout_marginTop="20dp"android:layout_height="60dp">
​<ImageViewandroid:layout_marginLeft="15dp"android:layout_gravity="center_vertical"android:background="@mipmap/kan"android:layout_width="40dp"android:layout_height="40dp"/><TextViewandroid:layout_marginLeft="10dp"android:textStyle="bold"android:textColor="#333"android:textSize="18dp"android:gravity="center_vertical"android:layout_weight="1"android:text="看一看"android:layout_width="0dp"android:layout_height="match_parent"/><ImageViewandroid:layout_marginRight="15dp"android:layout_gravity="center_vertical"android:background="@mipmap/right"android:layout_width="wrap_content"android:layout_height="wrap_content"/></LinearLayout>
​<LinearLayoutandroid:background="#fff"android:orientation="horizontal"android:layout_width="match_parent"android:layout_height="60dp">
​<ImageViewandroid:layout_marginLeft="15dp"android:layout_gravity="center_vertical"android:background="@mipmap/sou"android:layout_width="40dp"android:layout_height="40dp"/><TextViewandroid:layout_marginLeft="10dp"android:textStyle="bold"android:textColor="#333"android:textSize="18dp"android:gravity="center_vertical"android:layout_weight="1"android:text="搜一搜"android:layout_width="0dp"android:layout_height="match_parent"/><ImageViewandroid:layout_marginRight="15dp"android:layout_gravity="center_vertical"android:background="@mipmap/right"android:layout_width="wrap_content"android:layout_height="wrap_content"/></LinearLayout>
​<LinearLayoutandroid:background="#fff"android:orientation="horizontal"android:layout_width="match_parent"android:layout_marginTop="20dp"android:layout_height="60dp">
​<ImageViewandroid:layout_marginLeft="15dp"android:layout_gravity="center_vertical"android:background="@mipmap/gou"android:layout_width="40dp"android:layout_height="40dp"/><TextViewandroid:layout_marginLeft="10dp"android:textStyle="bold"android:textColor="#333"android:textSize="18dp"android:gravity="center_vertical"android:layout_weight="1"android:text="购物"android:layout_width="0dp"android:layout_height="match_parent"/><ImageViewandroid:layout_marginRight="15dp"android:layout_gravity="center_vertical"android:background="@mipmap/right"android:layout_width="wrap_content"android:layout_height="wrap_content"/></LinearLayout>
​<LinearLayoutandroid:background="#fff"android:orientation="horizontal"android:layout_width="match_parent"android:layout_height="60dp">
​<ImageViewandroid:layout_marginLeft="15dp"android:layout_gravity="center_vertical"android:background="@mipmap/you"android:layout_width="40dp"android:layout_height="40dp"/><TextViewandroid:layout_marginLeft="10dp"android:textStyle="bold"android:textColor="#333"android:textSize="18dp"android:gravity="center_vertical"android:layout_weight="1"android:text="游戏"android:layout_width="0dp"android:layout_height="match_parent"/><ImageViewandroid:layout_marginRight="15dp"android:layout_gravity="center_vertical"android:background="@mipmap/right"android:layout_width="wrap_content"android:layout_height="wrap_content"/></LinearLayout>
​<LinearLayoutandroid:background="#fff"android:orientation="horizontal"android:layout_width="match_parent"android:layout_marginTop="20dp"android:layout_height="60dp">
​<ImageViewandroid:layout_marginLeft="15dp"android:layout_gravity="center_vertical"android:background="@mipmap/xaio"android:layout_width="40dp"android:layout_height="40dp"/><TextViewandroid:layout_marginLeft="10dp"android:textStyle="bold"android:textColor="#333"android:textSize="18dp"android:gravity="center_vertical"android:layout_weight="1"android:text="小程序"android:layout_width="0dp"android:layout_height="match_parent"/><ImageViewandroid:layout_marginRight="15dp"android:layout_gravity="center_vertical"android:background="@mipmap/right"android:layout_width="wrap_content"android:layout_height="wrap_content"/></LinearLayout>
</LinearLayout>

三、程序运行结果

列出程序的最终运行结果及截图。

四、问题总结与体会

1、主要的问题是最开始对Android studio编译环境不熟悉，不熟悉应该在哪个文件夹下面编写代码，后面随着老师的讲解和与同学的探讨中逐渐了解了，而且所用的编程语句比较容易理解，难度不大

2、通过此次实验，学习了如何使用LinearLayout创建了列表布局，了解了了Textview、imageview的用法，对AndroidStudio开发的有了一定了解

3、源码已经放在GitHub：yidongruanjian/exercise5&6 at main · adu324/yidongruanjian (github.com)

实验5：第一个Android应用小程序相关推荐

  1. ouc 2022 移动软件开发 实验五：第一个 Android 应用小程序

    一.实验目标 1.安卓移动端开发环境搭建 2.编写第一个 Android 应用小程序 二.实验步骤 1.安卓移动端开发环境搭建 1.1 电脑安装 jdk 创建一个英文名称的文件夹(尽量别用中文),将下 ...

  2. 第一个Android应用小程序

    一.实验目标 1.学会安装并使用安卓应用开发工具 2.初步学会LinearLayout 使用 3.初步学会Textview imageview 使用 4.尝试建立自己的第一个简单的安卓应用 二.实验步 ...

  3. Android | 教你如何开发一个拍照翻译小程序

    华为机器学习服务(ML Kit) 提供机器学习套件,为开发者应用机器学习能力开发各类应用提供优质体验.得益于华为长期技术积累,ML Kit 为开发者提供简单易用.服务多样.技术领先的机器学习能力,助力 ...

  4. java计算机毕业设计基于安卓Android/微信小程序的大学生签到管理系统APP

    项目介绍 随着Internet的发展,人们的日常生活已经离不开网络.未来人们的生活与工作将变得越来越数字化,网络化和电子化.网上管理,它将是直接管理签到系统app的最新形式.本论文是以构建签到系统ap ...

  5. java计算机毕业设计基于安卓Android/微信小程序的校园闲置二手交易平台APP

    项目介绍 网络技术的快速发展给各行各业带来了很大的突破,也给各行各业提供了一种新的管理模式,校园二手交易平台小程序将是又一个从传统管理到智能化信息管理的典型案例,对于传统的校园二手交易,所包括的信息内 ...

  6. 实战：从零开始制作一个跑步微信小程序

    感谢作者王小树的授权,如需转载,请与作者联系. 作者:王小树,现于悦跑圈任职iOS工程师,常用ID:alanwangmodify.欢迎技术交流,除了移动端技术,也期待Python.JS.深度学习相关的 ...

  7. 微信小程序-从零开始制作一个跑步微信小程序

    首发地址 一.准备工作 1.注册一个小程序账号,得用一个没注册过公众号的邮箱注册. 2.注册过程中需要很多认证,有很多认证,比较繁琐,如果暂时只是开发测试,不进行提审.发布的话,只要完成营业执照号填写 ...

  8. 基于Vue实现一个简易的小程序框架，浅谈kafka | 每日掘金第 194 期

    Hello,又到了每天一次的下午茶时间.酱酱们的下午茶新增优质作者介绍和码上掘金板块,专注于发掘站内优质创作者和优质内容,欢迎大家多提宝贵意见! 酱酱们的下午茶全新改版,欢迎大家多提宝贵意见! 本文字 ...

  9. 微信小程序-从零开始制作一个跑步微信小程序 1

    小编推荐:Fundebug专注于JavaScript.微信小程序.微信小游戏,Node.js和Java实时BUG监控.真的是一个很好用的bug监控费服务,众多大佬公司都在使用. 前言 我已经把全部代码 ...

最新文章

  1. Java学习总结：2
  2. 虚拟机创建的50个步骤以及100个知识点（仅作为个人笔记使用）
  3. 闹乌龙！京东云辟谣：停止云服务？根本没那回事儿
  4. np.newaxis 的使用
  5. Discuz!NT 在线用户功能简介
  6. 【POJ3126 Prime Path】【POJ 3087 Shuffle'm Up】【UVA 11624 Fire!】【POJ 3984 迷宫问题】
  7. 元学习Meta learning深入理解
  8. 服务器被入侵了？反手溯源出入侵者画像【网络安全】
  9. 利用Jmeter测试CSRF令牌验证的Web API
  10. 武大计算机专业湖北录取分数线,武汉大学2020年本科一批分专业录取分数统计（湖北省）...
  11. python中getopt函数_Python中getopt()函数的使用
  12. 20145226夏艺华 《Java程序设计》实验报告一
  13. detectmultiscale函数参数含义_OpenCV人脸识别--detectMultiScale函数
  14. 1040 有几个PAT
  15. python打开浏览器并截图_使用python实现网页截图的两种方式
  16. Python 3.11 ，即将变得更快！
  17. Codeforces 1144G（dp）
  18. c语言报错（二）expected initializer before “int“
  19. iOS App 常用的分类
  20. 【阅读笔记】SiamMask

热门文章

  1. MAC 下 PHPStorm 调整内存限制
  2. 大话IT第11期：陷入***包围的索尼如何收场
  3. 食安隐患、市值缩水、线下受挫，三只松鼠能否走出增长迷雾？
  4. 生活随记 - 鼠年再见 牛年你好
  5. xp系统整个计算机非常慢,xp系统开机速度慢怎么办|xp系统如何加快开机速度
  6. FreeRTOS学习笔记——列表
  7. 输入一个数，判断这个数是不是素数或质数
  8. JZOJ(中山纪念中学) 2018.02.02【NOIP普及组】模拟赛D组
  9. 广州鞋材，温泽鞋材为你效劳
  10. 微小区v11.2.5