移动软件开发-仿微信发现页

最新推荐文章于 2023-04-07 17:50:18 发布

跟zhe学

最新推荐文章于 2023-04-07 17:50:18 发布

阅读量872

点赞数

文章标签： android android studio java

本文链接：https://blog.csdn.net/m0_61400264/article/details/126484572

版权

一、实验目标

1、了解安卓开发的一些基础知识；2、学习如何仿微信发现页创建布局，了解安卓开发的线性布局和一些对应的组件。

二、实验步骤

1.实验准备：

下载android studio,并配置好相应的Java环境，详细的步骤可以参考老师发的文档。

最后安装好的页面：

java环境配置好了之后，在windows运行台，查看对应的java版本号，

最后我们要实现的效果图如下：

2.android开发基础知识准备：

了解Textview,imageview组件，以及线性布局LinearLayout的用法

创建任何一个组件，我们首先需要赋予它宽和高，

图像也要赋予它宽和高：

其次，线性布局LinearLayout为每一个子组件提供了水平或者垂直排列的模型。

3.功能实现：

3.1：逻辑实现：

页面上主要包含5组列表，每组列表包含1-2个列表项。具体内容解释如下:

·列表组1:“朋友圈”单行列表项;

·列表组2:“扫一扫”和“摇一摇”两行列表项;

·列表组3:“看一看”和“搜一搜”两行列表项;

·列表组4:“购物”和“游戏”两行列表项;

·列表组5:“小程序”单行列表项。

具体页面如：

在这里我们需要用一个父布局里面并行镶嵌五个线性布局来实现这五个列表组，同时每一个每一个列表组要与上一个列表组相隔一段距离，且像购物和游戏这样的两行，我们需要在这个列表组里面再镶嵌两个线性布局。

3.2:代码实现：首先我们需要在主函数里面加上我们需要执行的文件路径。

接着我们构建第一个列表组，显示朋友圈，我们先构建一个大的父布局，指定它的高和宽，并且指定对应的背景颜色，且父布局里面的子组件呈垂直方向排列。

<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/icon_pengyou"
    android:layout_width="40dp"
    android:layout_height="40dp"/>

且线性组里面呈水平分布，因为接着我们需要在右边加一个右箭头和朋友圈这三个字。

相关格式如下:

<TextView
    android: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"/>
<ImageView
    android:layout_marginRight="15dp"
    android:layout_gravity="center_vertical"
    android:background="@mipmap/right"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>

这样第一个列表组就实现了，大致效果如下：

因为这里忘记截图了，所以只能用两个列表组的图来表示，其实都一样。

接下来，我们讲一下第二个列表组如何创建，第二个列表需要与第一个列表组保持一定的上下高度距离，致力设置为20dp，而且第二个列表组里面有两个线性层呈垂直排列。

<LinearLayout
    android:background="#fff"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_marginTop="20dp"//保持间距
    android:layout_height="120dp">
<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/two"
    android:layout_width="40dp"
    android:layout_height="40dp"/>
<TextView
    android: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"/>
<ImageView
    android:layout_marginRight="15dp"
    android:layout_gravity="center_vertical"
    android:background="@mipmap/right"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>
</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: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"/>
<ImageView
    android:layout_marginRight="15dp"
    android:layout_gravity="center_vertical"
    android:background="@mipmap/right"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>
</LinearLayout>

接下来几个线性布局都是这样执行的，只需要修改对应图片和文字即可。

效果图：