使用Delphi控件完成界面基本布局 (一)

【实例简介】
本案例仅使用Delphi自身控件实现，为初学APP开发者提供学习帮助(带源码及详细批注)。案例中演示了使用Delphi控件完成界面基本布局，包括TLayout、TVertScrollBox、TGridPanelLayout、TTabControl 等控件的基本使用。
【实例截图】
【核心代码】
AppLayout
├── Artwork
│   ├── 32X32.icns
│   ├── 32X32.ico
│   ├── 48X48.icns
│   ├── 48X48.ico
│   ├── 64X64.ico
│   ├── Android
│   │   ├── FM_LauncherIcon_144x144.png
│   │   ├── FM_LauncherIcon_36x36.png
│   │   ├── FM_LauncherIcon_48x48.png
│   │   ├── FM_LauncherIcon_72x72.png
│   │   ├── FM_LauncherIcon_96x96.png
│   │   ├── FM_SplashImage_426x320.png
│   │   ├── FM_SplashImage_470x320.png
│   │   ├── FM_SplashImage_640x480.png
│   │   └── FM_SplashImage_960x720.png
│   └── iOS
│   ├── iPad
│   │   ├── FM_ApplicationIcon_144x144.png
│   │   ├── FM_ApplicationIcon_152x152.png
│   │   ├── FM_ApplicationIcon_72x72.png
│   │   ├── FM_ApplicationIcon_76x76.png
│   │   ├── FM_LaunchImageLandscape_1024x748.png
│   │   ├── FM_LaunchImageLandscape_1024x768.png
│   │   ├── FM_LaunchImageLandscape_2048x1496.png
│   │   ├── FM_LaunchImageLandscape_2048x1536.png
│   │   ├── FM_LaunchImagePortrait_1536x2008.png
│   │   ├── FM_LaunchImagePortrait_1536x2048.png
│   │   ├── FM_LaunchImagePortrait_768x1004.png
│   │   ├── FM_LaunchImagePortrait_768x1024.png
│   │   ├── FM_SettingIcon_29x29.png
│   │   ├── FM_SettingIcon_58x58.png
│   │   ├── FM_SpotlightSearchIcon_100x100.png
│   │   ├── FM_SpotlightSearchIcon_40x40.png
│   │   ├── FM_SpotlightSearchIcon_50x50.png
│   │   └── FM_SpotlightSearchIcon_80x80.png
│   └── iPhone
│   ├── FM_ApplicationIcon_114x114.png
│   ├── FM_ApplicationIcon_120x120.png
│   ├── FM_ApplicationIcon_180x180.png
│   ├── FM_ApplicationIcon_57x57.png
│   ├── FM_ApplicationIcon_60x60.png
│   ├── FM_ApplicationIcon_87x87.png
│   ├── FM_LaunchImage_1242x2208.png
│   ├── FM_LaunchImage_2208x1242.png
│   ├── FM_LaunchImage_320x480.png
│   ├── FM_LaunchImage_640x1136.png
│   ├── FM_LaunchImage_640x960.png
│   ├── FM_LaunchImage_750x1334.png
│   ├── FM_SpotlightSearchIcon_29x29.png
│   ├── FM_SpotlightSearchIcon_40x40.png
│   ├── FM_SpotlightSearchIcon_58x58.png
│   └── FM_SpotlightSearchIcon_80x80.png
├── Bin
│   ├── AppLayoutSample.apk
│   └── AppLayoutSample.exe
├── Img
│   ├── 10分钟10行代码.jpg
│   ├── 1431034912971360131.png
│   ├── 1431035050315323479.png
│   ├── 1431035066120479992.png
│   ├── 1431048144000895920.png
│   ├── 1431048187045131742.png
│   ├── 1431048212470671829.png
│   ├── 1431048221850308896.png
│   ├── 1431048240270378195.png
│   ├── 1431048295659142130.png
│   ├── 1432496870471975757.png
│   ├── 20150520144624_9735.png
│   ├── 20150520144646_1898.png
│   ├── 20150520144758_1510.png
│   ├── 20150520145802_9370.png
│   ├── 20150520145855_8863.png
│   ├── 20150525141353_5452.png
│   ├── all_img.png
│   ├── jianqiu.png
│   ├── 头-2.jpg
│   └── 蓝牙打印.jpg
└── Sample
├── AndroidManifest.template.xml
├── AppLayout.identcache
├── AppLayoutSample.deployproj
├── AppLayoutSample.dpr
├── AppLayoutSample.dproj
├── AppLayoutSample.dproj.local
├── AppLayoutSample_Icns.icns
├── AppLayoutSample_Icon.ico
├── AppLayoutSample.identcache
├── AppLayoutSample.res
├── MainForm.fmx
└── MainForm.pas

8 directories, 83 files