手机APP主界面的一种通用布局

手机APP主界面的一种通用布局

此种方法，适用于手机、平板、电脑。。等各种设备。

1）在IDE设计画面

2）自动适配设备分辨率的算法

procedure TMainmForm.autoFit(btnHeight: Integer = 88; colNum: Integer = 3;
  fontSize: Integer = 12);
begin
  var
    btnWidth: Integer := UnimPanel1.Width div colNum;
  for var i: Integer := 0 to UnimPanel1.ControlCount - 1 do
  begin
    var
      btn: TUnimBitBtn := TUnimBitBtn(UnimPanel1.Controls[i]);
    btn.Font.Size := fontSize;
    btn.Width := btnWidth;
    btn.Height := btnHeight;
    // 第几行
    if i < colNum then
      btn.Top := 0
    else
    begin
      var
        lineNum: Integer := i div colNum;
      btn.Top := btnHeight * lineNum;
    end;
    // 第几列
    var
      iCol: Integer := -1;
    iCol := i mod colNum;
    btn.Left := btnWidth * iCol;
  end;
  for var i: Integer := 0 to pnlBottom.ControlCount - 1 do
  begin
    var
      btn: TUnimBitBtn := TUnimBitBtn(pnlBottom.Controls[i]);
    btn.Width := pnlBottom.Width div 5;
    btn.Font.Size := fontSize;
  end;
end;

3）手机运行效果

4）电脑运行效果