移动软件开发-仿微信发现页
一、实验目标
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:代码实现:首先我们需要在主函数里面加上我们需要执行的文件路径。
接着我们构建第一个列表组,显示朋友圈,我们先构建一个大的父布局,指定它的高和宽,并且指定对应的背景颜色,且父布局里面的子组件呈垂直方向排列。
<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/icon_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"/>
这样第一个列表组就实现了,大致效果如下:
因为这里忘记截图了,所以只能用两个列表组的图来表示,其实都一样。
接下来,我们讲一下第二个列表组如何创建,第二个列表需要与第一个列表组保持一定的上下高度距离,致力设置为20dp,而且第二个列表组里面有两个线性层呈垂直排列。
<LinearLayoutandroid:background="#fff"android:orientation="vertical"android:layout_width="match_parent"android:layout_marginTop="20dp"//保持间距android:layout_height="120dp">
<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/two"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/three"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>
接下来几个线性布局都是这样执行的,只需要修改对应图片和文字即可。
效果图:
三、程序运行结果
四、问题总结与体会
1.这个实验首先需要安装好对应的软件以及配置好环境,然后还需要你自己在android studio上下载对应的虚拟机来实现运行。
2.我了解了Textview,imageview组件,以及线性布局LinearLayout的用法,以及如何在里面设置相关的样式。
移动软件开发-仿微信发现页相关推荐
- 样式集(七)仿微信发现页样式
效果图: <!--pages/find/find.wxml--><include src="/components/common/common" /> &l ...
- 移动软件开发五——仿微信发现界面
2022年夏季<移动软件开发>实验报告 一.实验目标 模仿微信"发现"页创建列表布局,学习使用Textview imageview.LinearLayout 二.实验步 ...
- 微信隐藏功能系列:微信发现页管理,强迫症人士必看
不知不觉小编已经给大家分享了许多微信隐藏功能了,大家每次看到一个新的微信隐藏功能时,是否都会和小编一样,眼前一亮呢?这次给大家带来的微信隐藏功能是微信发现页管理. 微信的发现页我们都知道在哪里吧,简单 ...
- android仿微信点击好友,安卓开发仿微信联系人列表-机器人列表视图仿微通道聊天多久最底部滑动...
楼主你好!根据你的描述,让我给你答案! :新内容加进来,列表视图重新为setSelection后,定位结束后,拉起一个页面放. . 希望你能有所帮助,如果满意,请记得采纳像下拉条为微信好友如何实现 简 ...
- 安卓开发— —仿微信界面(一)
目录 一.项目内容 二.代码实现 1.项目结构 2.头部代码 3.底部代码 4.四个内容界面 5.窗体总布局 6.MainActivity实现点击图标与页面的互动 三.运行效果 四.总结 一.项目内容 ...
- android录音声波动画,Android开发:仿微信 录音声波
最近在仿微信开发聊天界面:开发到一个有意思的小东西,简单写一写.就是录音声波这块. 首先先添加几个图片 添加如上三个声波图表 之后建立一个数组 private int[] images = {R.mi ...
- 安卓开发仿微信图片拖拽_仿微信朋友圈发表图片拖拽和删除功能
原标题:仿微信朋友圈发表图片拖拽和删除功能 中国联通在香港公布了上市公司2017年中期业绩.2017年上半年,公司主要业绩指标持续向好,收入稳步回升,服务收入达到人民币1,241.1亿元,同比增长3. ...
- 七、Uniapp+vue+腾讯IM+腾讯音视频开发仿微信的IM聊天APP,支持各类消息收发,音视频通话,附vue实现源码(已开源)-聊天消息项的实现
会话好友列表的实现 1.项目引言 2.腾讯云后台配置TXIM 3.配置项目并实现IM登录 4.会话好友列表的实现 5.聊天输入框的实现 6.聊天界面容器的实现 7.聊天消息项的实现 8.聊天输入框扩展 ...
- php仿微信朋友圈源码,Android开发仿微信发朋友圈浏览图片效果实例代码
这篇文章主要介绍了Android仿微信发朋友圈浏览图片效果的相关资料,需要的朋友可以参考下 先看一下效果吧: 下面就来说一下具体怎么实现的: 实现思路1.首先我们要获取数据源,数据源就是我们的每条说说 ...
最新文章
- php常用的技术有哪些,php常用技术
- VS项目属性中的C/C++运行库:MT、MTd、MD、MDd
- oracle 意外事件,Oracle数据库REDO损坏ora-00333修复手札
- 全国计算机等级考试题库二级C操作题100套(第52套)
- QT+vs2010下改变可执行程序的图标
- 发一则自己创作的Lae程序员小漫画,仅供一乐
- 2017.9.18 HH的项链 思考记录
- imp命令导入指定表_【imp】使用imp工具迁移数据时迂回地排除特定表的导入
- Matlab-Simulink文件类型总结
- 炉石传说android手机版本,炉石传说安卓手机版官方apk
- FastReport Mono 2023.1 Crack
- Golang观察者设计模式(十九)
- win10(家庭版)打开本地组策略失败的处理方法
- 使用云开发数据库构建更生动的小程序
- 云渲染哪个平台好?哪个网渲平台比较便宜?
- php实现易班登录,简单的易班申请授权以及使用方式
- [异常检测] Regularity Learning via Explicit Distribution Modeling for Skeletal Video Anomaly Detection
- Ps简单几步把人物图片转素描画
- 数据库 和 数据仓库
- canvas画任意角度的扇形,弧形,及扇形弧形填纯色渐变色