（02）uniGUI for C++ builder下手机主界面的布局与设计

                                                                        (中行雷威2019.2.17)

 

（同一个世界，同一个梦想，交流学习C++Builder XE10，传承c++builder的魅力！欢迎各地朋友加入我的QQ群484979943,进群密码“BCB”，同时也请将该群号广为宣传，希望能够广集各方高手，共同进步。如需下载开发工具及源代码请加入我的QQ群。）

【阅读倡议】

1、有问题请留言;

2、没问题请点赞;

3、看连载请加群;

4、下源码请加群;

【开发工具】

1、C++Builder10.2.3 tokyo

2、FMSoft_uniGUI_Complete_Professional_1.70.0.1486（正版）

3、本案例资源下载https://download.csdn.net/download/dlboy2018/10949772

4、也可访问我的QQ文件共享：A02-源代码  下载

本人主笔的国内第一本uniGUI教学案例代码已诞生，分为cbuilder和delphi两个版本，买代码送手册，需要的朋友可以加入我的QQ技术交流群484979943、860634510、299497712给我（群主）留言。资料简介：https://blog.csdn.net/dlboy2018/article/details/88923832

 

一、设计目标

创建一个项目，实现华人APP主界面的大众脸风格，微信、京东、大众点评、新浪微博都这样子，即底部一行按钮，可以分别切换到不同的主题页面。本例子将讲解如何创建一个基本的主界面框架。

 

二、功能设计

1、在项目的主窗口MainmForm上摆放一个UnimSegmentedButton1控件,选中控件，将其align属性设为alBottom，在其Items属性中添加四个子按钮,分别设置四个子按钮的属性：

item0:Caption=首页,IconCls=home

item1:Caption=运维,IconCls=bookmarks

item2:Caption=协同,IconCls=team

item3:Caption=我的,IconCls=user

2、在项目的主窗口MainmForm上摆放一个UnimContainerPanel1控件,选中控件，将其align属性设为alClient

3、创建四个子窗口,分别命名为UnimFormMain01~UnimFormMain04，保存为UniMain01.cpp~UniMain04.cpp.

(实际使用时建议将四个子窗口的ShowTitle属性设为false，不显示标题栏）。

 

三、主要代码

1、File->Use Unit，分别让MainmForm窗口包含四个子窗口

2、在Mainm.cpp文件开头，引用四个子窗口后面定义四个子窗口指针

//---------------------------------------------------------------------------
#include <vcl.h>
#include <uniGUIVars.hpp>
#pragma hdrstop

#include "Mainm.h"
#include "MainModule.h"
#include "UnitMain01.h"
#include "UnitMain02.h"
#include "UnitMain03.h"
#include "UnitMain04.h"
/*自定义（在头文件引用后）*/
TUnimFormMain01 *mainForm01;
TUnimFormMain02 *mainForm02;
TUnimFormMain03 *mainForm03;
TUnimFormMain04 *mainForm04;
3、在主窗口Mainmform的创建事件里倒序创建四个子窗口

void __fastcall TMainmForm::UnimFormCreate(TObject *Sender)
{

mainForm04=new TUnimFormMain04(UniApplication);
mainForm04->Parent=UnimContainerPanel1;
mainForm03=new TUnimFormMain03(UniApplication);
mainForm03->Parent=UnimContainerPanel1;
mainForm02=new TUnimFormMain02(UniApplication);
mainForm02->Parent=UnimContainerPanel1;
mainForm01=new TUnimFormMain01(UniApplication);
mainForm01->Parent=UnimContainerPanel1;

}

4、在主窗口显示前事件里添加子窗口显示和隐藏代码

void __fastcall TMainmForm::UnimFormBeforeShow(TObject *Sender)
{
mainForm01->Show();
mainForm02->Hide();
mainForm03->Hide();
mainForm04->Hide();
}

5、在底部按钮事件里添加页面切换代码

通过控制四个窗口的隐藏与显示来切换当前窗口。
void __fastcall TMainmForm::UnimSegmentedButton1Click(TUnimButtonItem *Sender)
{
if(Sender->ButtonId==0)
    {
    mainForm01->Show();
    mainForm02->Hide();
    mainForm03->Hide();
    mainForm04->Hide();
    }
if(Sender->ButtonId==1)
    {
    mainForm02->Show();
    mainForm01->Hide();
    mainForm03->Hide();
    mainForm04->Hide();
    }
if(Sender->ButtonId==2)
    {
    mainForm03->Show();
    mainForm02->Hide();
    mainForm01->Hide();
    mainForm04->Hide();
    }
if(Sender->ButtonId==3)
    {
    mainForm04->Show();
    mainForm02->Hide();
    mainForm03->Hide();
    mainForm01->Hide();
    }

}
//---------------------------------------------------------------------------
6、在主窗口里添加子窗口释放代码

void __fastcall TMainmForm::UnimFormClose(TObject *Sender, TCloseAction &Action)
{
mainForm01->Free();
mainForm02->Free();
mainForm03->Free();
mainForm04->Free();
}

四、实际效果

打开手机浏览器，输入http://22.36.26.xxx:8077/m访问你的系统，测试一下窗口切换吧。