类微信页面设计

类微信页面设计

于2020/10/14日完成

Android Studio微信页面提交
需要完成以下要求:
1.页面具有标题
2.页面中间具有显示框
3.页面具有底部选择框,同时具有选择事件
4.页面底部选择框,在进行改变的时候,中间显示框的页面同步改变
5.页面布局清晰

##1.矢量图标的导入
建议选择阿里矢量图标里面的32号大小的图标
类微信页面设计
先将保存在你电脑文件夹的图片复制下来然后粘贴到如图所示的文件夹中,在粘贴的时候会选择drawable和drawable-24两个文件夹,理论上是都可以的,建议放入drawable中

布局文件

布局分为三块,顶部的名称,中间层的显示屏,底部的选择框

顶部设计

类微信页面设计
这个界面就是顶部的设计,设计这个界面首先在layout里面新建一个xml文件,这个xml文件都是layout xml file只是很简单的testview设计,进行testview的布局以及背景颜色的布置就可以达到这个效果
最开头有一个问题,就是原本app最上面有一个框,我们需要不显示他,由于版本不一样,导致我们使用老师的方法,我们并不能达到我们所需要的效果,我百度到了一个方法,其他方法要实现也可以,我的方法比较简单,在/res/values文件夹下的style.xml文件里,将style标签里的parent的配置信息改为Theme.AppCompat.Light.NoActionBar,就是最后哪一个点后面改为NoActionBar就可以了。类微信页面设计
就是如图这样
关于字体的设置背景颜色还有关于文本框的布局设置都在我的git里,地址会附在本文的最下方

底部设计

底部的设计先建立一个botton.xml文件,建立方式跟上面是一样的,botton里其实是一个4*2的表格里面有四个图标以及四个提示语,就是下图这样的类微信页面设计
图片在一开始已经录入了,首先在建立的xml文件里就有一个自带的linearlayout,在这个linearlayout里放入四个imagebutton,还有四个TextView,布局文件也会在码云里

主界面设计

主界面其实就是四个显示屏,里面有你想要展现的内容,四个显示屏其实就是四个xml文件,然后里面都放一个textview,或者别的什么控件都行,只需要做第一个文件,然后复制三个改一改名称和id就可以完成这个布局
这是一个示例
类微信页面设计
到此为止布局文件就已经弄好了

主java文件编写

在布局文件写好之后,需要按对应的按钮显示对应的界面,这是需要用到Fragment,建立四个java文件
类微信页面设计
如上图所示建立四个对应的类就好,注意自己对应的对象,后面进行别的函数的编写的时候弄错会很麻烦

然后就可以开始写主Java程序,目的是要在fragment中显示layout布局文件,所以先放入多个布局文件,然后才能显示,调用fragmenttransaction就可以放入布局文件,然后提交

这里调用函数的时候很可能会遇到一个版本问题,使用getfragmentmanager()会一直报错,三种add的输入格式都无法满足所需要的输入内容,新版本as建议使用support,然后在fm=getSupportFragmentManager();这一条会出现报错,这个是只需要按照编译器的提示来改写就行
类微信页面设计
在这个界面里,目的是通过点击botton布局里的四个不同的图标可以达到切换主页面的效果,所以需要监听四个LinearLayout,但是这里监听LinearLayout可能是版本问题,无法监听,所以建议可以选择监听imgbutton,这样下一步就是写一个监听的函数

首先需要先将linearlayout和imagebutton实例化,因为java只能在对象实例化之后才能进行使用,为了达到点击切换的时候,只显示一个界面,所以需要将四个界面在开始的时候hide掉,然后再show其中的一个

其中的切换都是依靠swich函数来实现,具体的代码也都在git里,可以自行查看

结果

类微信页面设计
类微信页面设计
类微信页面设计
类微信页面设计

代码地址

https://gitee.com/shi-bin/wechat-like-page-design.git