首页 > 其他分享 >Android Studio 制作微信界面

Android Studio 制作微信界面

时间:2022-09-30 19:01:02浏览次数:80  
标签:xml 文件 微信 linerlayout Studio Android textview 页面

最近学习了安卓开发的相关知识,下面通过实践练习来巩固学到的知识。
设计的目标是完成微信的门户页面框架设计。最终要实现的效果如下:

在页面的顶端,是微信的名字“Wechat”;
在页面的底端,则分别对应着微信的四个界面“微信”,“朋友“,”通讯录“,”设置“;
页面的中间部分则是很简易的文字说明。“这是微信的xx界面”。

使用的工具是Android Studio,需要用到的控件有fragment,activity等

设计思路如下:
分别设计三个部分,顶端,中间部分以及底部按钮部分,再将三部分连接。然后通过代码实现点击按钮,切换页面的功能等。

第一步,顶端部分设计
创建新的xml文件,右键layout->new->Layout Xml File,命名为‘top’。
拖动textview控件加入linerlayout中,设置textview的各种属性,如文字居中,文字颜色等,如下:

第二步,底端部分设计
创建新的xml文件,拖动linerlayout(vertical)控件加入其中,然后拖动textview和image button到;linerlayout(vertical)中,然后设置textview和imagebutton的各种属性如下:

tips:这里我使用的imagebutton的图片来自于系统所提供的图片,如果想要使用自己的本地图片,可以将图片插入项目中然后使用。
这里我们就设置好一个按钮的选项了,可以直接复制这个linerlayout(vertical)然后点击linerlayout(horizontal),右键粘贴,重复三次即可,然后更改相应的text和id属性即可。

第三步,中间文字部分设计
这一步不同于上一步,需要创建四个不同的xml文件。首先创建一个xml文件,命名‘tab01’,然后拖入textview=控件,设置其属性如下:

同理,设置好一个tab.xml=文件后,直接复制这个文件,然后粘贴在layout中,更改相应的id和text即可。

第四步,将这些页面加入到activity_main.xml文件中,点击include,右键->Add to design,将刚刚创建的xml文件全部加入其中。

第五步,编写java程序,实现按钮的点击功能和页面跳转等功能。
如图,除了main文件之外,还需要创建四个java文件,对应于四个按钮。

只需要改变文件名和修改填入对应的xml文件名。
接下来是对main.java文件。如图
首先声明变量

方法如下:


完整代码在仓库中,仓库链接如下:
https://gitee.com/assena/android-studio.git

标签:xml,文件,微信,linerlayout,Studio,Android,textview,页面
From: https://www.cnblogs.com/zhangweisen/p/16733656.html

相关文章