功能要求

1.页面具有标题

2.具有四个页面，页面具有底部选择框，同时具有选择事件，当点击选择事件的时候进行页面切换

3.页面内容不超出边界且清晰

思路分析

该微信界面由三部分组成

页面顶部标题栏（top.xml）
中间内容页面
底部导航栏（bottom.xml）

所以我们需要编写上述几个xml布局页面，分别分析每部分的布局内容及要求：
顶部标题栏：此栏需有app的标题，标题大小颜色自定义且居中显示，背景色自选
中间内容页面：由于本app是仿微信界面，所以设置了四个页面，分别显示不同的内容
底部导航栏：四个图标，单击可以切换中间内容页面，故该布局文件中包含四个ImageButton，界面切换部分需要用Fragment实现

设计过程

1.资源文件导入

把图片等资源文件导入到/app/res/drawble 目录下

2.布局设计

此仿微信界面分为三部分，标题栏，中间内容页面，底部栏，故分部分进行设计。

标题栏

添加一个TextView，填入文字，定义大小和颜色，设置背景颜色，有关于文字居中，我们要修改和添加一些配置信息。
在linearlayout中，我们修改gravity所对应的配置信息为center
在TextView中，我们修改layout_gravity所对应的配置信息为center_horizontal

背景颜色等颜色设置，都可以直接点击左边的小方块进行设置

App名称是通过调用values中的strings.xml里的值设置的

中间页面

主页面设置为四个界面，即四个xml布局文件，每一个里面都设置一个TextView，居中显示即可

底部栏

设置一个水平放置的LinearLayout，在其下放入四个垂直的LinearLayout，每个垂直的LinearLayout下放置一个imagebutton后，再放一个TextView，慢慢拖动设置到满意的程度
修改layout_width，layout_weight，orientation直到达到预期效果

activity_main主布局文件

在activity_main里，首先在最外面设置垂直，配置orientation就行，配置以v开头就行。然后是将标题栏和底部栏放入，用include导入top和bottom，然后中间放入一个FrameLayout就可以了。

3.java文件编写

由于布局文件以及设置编写好了，我们需要编写控制代码逻辑的Java文件
这里最重要的是Fragment，这里我们需要对每一个Fragment（对应一个xml布局文件）新建一个Fragment类

ChatFragment.java
FriendsFragment.java
CommFragment.java
SettingFragment.java

按上图配置，每一个类相当于对应一个布局，这样我们就将四个布局所对应的xml文件就变成了四个类对象，从而可以正常的调用它。

在MainActivity.java中控制操作逻辑
首先要new出各个界面（Fragment）的对象，还有有一个FragmentManager管理所有的Fragment

 private Fragment chatFragment = new ChatFragment();private Fragment friendsFragment = new FriendsFragment();private Fragment commFragment = new CommFragment();private Fragment settingFragment = new SettingFragment();

并且创建一个Fragment管理变量

private FragmentManager fragmentManager;

新建一个initFragment函数用以给Fragment页面初始化，在此函数中，将此前定义个4个Fragment变量使用fragmentManager添加到activity_mainw文件的Framelayout布局中

private void initFragment(){fragmentManager = getSupportFragmentManager();FragmentTransaction transaction = fragmentManager.beginTransaction();transaction.add(R.id.content,chatFragment);transaction.add(R.id.content,friendsFragment);transaction.add(R.id.content,commFragment);transaction.add(R.id.content,settingFragment);transaction.commit();}

对bottom.xml下的4个imagebutton控件和4个linearlayout控件建立8个变量

 private LinearLayout chatLayout;private LinearLayout friendsLayout;private LinearLayout commLayout;private LinearLayout settingLayout;private ImageButton chatImageButton;private ImageButton friendsImageButton;private ImageButton commImageButton;private ImageButton settingImageButton;

编写initview函数，将此8个变量和bottom中的8个控件联系起来，先使用findviewbyid函数找到对应的控件，再把它强制转换成对应的变量类型即可

private void initView(){chatLayout = findViewById(R.id.chatLayout);friendsLayout = findViewById(R.id.friendsLayout);commLayout = findViewById(R.id.commLayout);settingLayout = findViewById(R.id.settingLayout);chatImageButton = findViewById(R.id.chatImageButton);friendsImageButton = findViewById(R.id.friendsImageButton);commImageButton = findViewById(R.id.commImageButton);settingImageButton = findViewById(R.id.settingImageButton);chatText = findViewById(R.id.chatText);friendsText = findViewById(R.id.friendsText);commText = findViewById(R.id.commText);settingText = findViewById(R.id.settingText);}

将所有的textview隐藏起来，通过点击每个图标给界面选择函数发送不同的参数，从而实现界面的选择，在界面选择函数中需要先将4个界面对应的textview控件都隐藏

private void hideFragment(FragmentTransaction transaction){transaction.hide(chatFragment);transaction.hide(friendsFragment);transaction.hide(commFragment);transaction.hide(settingFragment);}

设置监听程序

public class MainActivity extends AppCompatActivity implements View.OnClickListener

点击图标后颜色变化，此方法的方法体的开始需要一个resetBtn函数，此函数作用为把xml文件中的4个图标都初始化为浅色的图标，然后等待选则的时候，再将对应的图片改为深色

 @SuppressLint("ResourceAsColor")private void resetBtn(){chatImageButton.setImageResource(R.drawable.chat);friendsImageButton.setImageResource(R.drawable.friends);commImageButton.setImageResource(R.drawable.comm);settingImageButton.setImageResource(R.drawable.setting);chatText.setTextColor(this.getResources().getColor(R.color.nopickText));friendsText.setTextColor(this.getResources().getColor(R.color.nopickText));commText.setTextColor(this.getResources().getColor(R.color.nopickText));settingText.setTextColor(this.getResources().getColor(R.color.nopickText));}

仅仅对bottom的四个linerlayout监听

    private void initEvent(){chatLayout.setOnClickListener(this);friendsLayout.setOnClickListener(this);commLayout.setOnClickListener(this);settingLayout.setOnClickListener(this);}

结果页面

源码地址

点击查看源码

安卓开发微信页面设计相关推荐

Android开发-UI界面--类微信页面设计
Android开发-UI界面–类微信页面设计一.功能说明设计一个类似微信的主页面框架,UI布局为上中下结构,包含了四个tag页面二.开发技术本次用到了layout.xml.控件.监听.fr ...
Android studio包含四个tab微信页面设计
Android studio包含四个tab微信页面设计 1.导入图标新建一个project,然后将所需八个图标导入至app/res/drawable目录下任意的ic_launcher_xxxxx(复 ...
安卓开发——微信UI界面
一.功能说明本次作业开发的是类似微信的主页面框架,UI布局为上中下结构,用户可通过点击底部导航栏切换板块内容,其中共包含四个板块,分别是"微信"."通讯录". ...
安卓开发笔记-UI设计的概念
本文是哔哩哔哩上安卓开发教程的笔记 UI的概念: 就是用户界面的意思 ① View 下面是官方的翻译 This class represents the basic building block ...
安卓开发微信ui界面设计（Android Studio）
功能: 开发一个类似微信的主页面框架,UI布局为上中下结构,包含4个tab界面: 开发技术为: layout xml.控件.监听,fragment: 设计流程: 创建项目改下项目名,编程语言为jav ...
考研刷题小程序云开发实战-页面设计与制作（题库首页、排名页、我的）
目录前言 1.创建并配置页面 2.题库首页 3.排名页和我的总结前言为啥你的UI界面感觉乱?对于小程序开发者来说,特别是对于初阶开发者或者初学者,排版的好坏是这个阶段核心要考虑的问题,也就是细 ...
暑假小学期安卓开发笔记1——设计思路
最近小学期到了,内容是开发一个带有服务的app,如果写得好的话,还可以十月份参加华为杯. 其他组开发的东西各式各样,有弄小说阅读器的,有弄英语单词背写的,还有弄英语情景对话的.我们小组弄的是基于番茄钟 ...
Android：从简历到offer直通车，跳槽大厂必备宝典，android开发环境页面设计
拜个早年今年的春节假期过完,按照法定放假的话,开工已经是2021年2月18日了,有一些比较有人情味的公司,一般也会放到正月初十,也就是在2月22日才会开工.所以基本上跨过农历新年,就马上进入到了企业 ...
移动开发-微信页面开发
本篇需要完成的内容为: 1. 页面上方具有标题WeChat. 2. 页面底部具有消息.联系人.朋友.设置4个图标,并且可以通过点击实现页面选择. 3. 发生页面选择时,对应的底部图标颜色变化明显. 实 ...

安卓开发微信页面设计