CCSystemBar控件详解 - Android系统栏适配方案
自Android 4.4版本起,谷歌引入了沉浸式全屏模式,该模式下状态栏和虚拟导航键会自动隐藏,应用得以充分利用整个屏幕空间,为用户带来沉浸式的视觉体验。到了Android 5.0时期,谷歌进一步推出了ColorPalette功能,允许开发者自定义系统区域的颜色,从而实现应用配色与系统风格的协调统一。
在CCSystemBar出现之前,使用Delphi实现上述功能需要编写大量复杂的原生代码,开发者需要处理各种系统版本兼容性问题。如今借助CCSystemBar控件,这些工作变得轻而易举。
首先了解CCSystemBar提供的核心方法:
procedure TranslucentStatusBar;
function checkDeviceHasNavigationBar: Boolean;
function checkNavigationBarShow: Boolean;
function getStatusBarPixelHeight(): Integer;
function getStatusBarPointHeight(): Single;
function getNavigationBarPixelHeight(): Integer;
function getNavigationBarPointHeight(): Single;
上述方法分别用于检测导航栏是否存在、判断导航栏是否可见、获取状态栏和导航栏的像素高度及Point高度。接下来详细介绍具体应用步骤:
1.将CCSystemBar控件拖放到主窗体上,同时需要在uses中添加CC.VirtualKeyboard单元引用,以确保虚拟键盘相关功能正常工作。
2.在窗体顶部放置一个ToolBar控件用于占据状态栏区域,也可以使用TRectangle等其他可视化组件。然后通过CCSystemBar获取的状态栏高度来设置该控件的上边距:
AToolBar.Padding.Top := Self.CCSystemBar1.getStatusBarPointHeight;
开发者也可以根据实际需求选择其他布局实现方式。
3.底部导航栏的处理方式与顶部类似,需要放置一个ToolBar并将其Align属性设置为alMostBottom:
procedure TMainForm.<strong>AdjustToolBarHeight</strong>(AToolBar: TToolBar);
begin
if Self.CCSystemBar1.checkNavigationBarShow then
begin
AToolBar.Height := Self.CCSystemBar1.getNavigationBarPointHeight;
end
else
begin
AToolBar.Height := 0;
end;
end;
这段逻辑的核心思想是:当系统导航栏可见时,将ToolBar高度设置为系统导航栏的高度;否则将高度设为零。
4.为了正确响应系统虚拟键盘的显示与隐藏,需要分别处理Form的OnVirtualKeyboardHidden和OnVirtualKeyboardShown事件:
procedure TMainForm.FormVirtualKeyboardHidden(Sender: TObject;
KeyboardVisible: Boolean; const Bounds: TRect);
begin
AdjustToolBarHeight(Self.BottomToolBar);
end;
procedure TMainForm.FormVirtualKeyboardShown(Sender: TObject;
KeyboardVisible: Boolean; const Bounds: TRect);
begin
AdjustToolBarHeight(Self.BottomToolBar);
end;
5.在窗体的OnCreate事件中进行初始化操作,设置状态栏和导航栏的初始高度:
procedure TMainForm.FormCreate(Sender: TObject);
begin
Self.CCSystemBar1.TranslucentStatusBar;
AdjustStatusBarPadding(Self.TopToolBar);
AdjustToolBarHeight(Self.BottomToolBar);
end;
6.发布配置是关键步骤:
打开Deployment窗口,按照图中所示操作:移除项目默认的styles.xml和styles-v21.xml文件,替换为ChinaCock提供的对应版本文件。
将启动图片更换为loading.png,并删除系统默认的splash_image_def.xml文件。
完成上述配置后,运行应用程序即可看到效果:
补充说明:
2020年4月1日补充:需要特别留意项目设置中的Include splash image选项必须勾选,如下图所示:
作者曾因忘记勾选此选项,导致应用显示异常,调试许久才找出原因。