Delphi XE7 手机开发学习笔记之二-listbox模仿ios wifi设置

在智能手机里用的最多的界面形式就是列表显示了,通称tableview。在delphi中,实现tableview有listbox和listview两种方式。先从listbox开始学习。listbox或者说tableview的试用细节非常多,也的确很有用,智能手机虽然分辨率很高,但是屏幕小,所以在呈现信息方面要方便显示方便切换。

我们来复刻一下ios设备中的wifi设置,我觉得这是一个比较好的学习开发的方法,直接开始做真正应用肯定不行,做一些不痛不痒的例子也浪费时间,所以学习现成的应用样式比较好。如同产品最难的是需求,复刻功能的话,需求已经基本ok了,业务逻辑不用多考虑了,只要考虑怎么实现就行。

就基本逻辑是如下图显示一个简单的设置tableview,其中“无线局域网”这里可以点击,到wifi具体设置界面,标题是“无线局域网”。

ios_wifi_1  ios_wifi_2

 

打开“无线局域网”的开关switch之后,会显示一个模拟的wifi列表,每次出现的名字和个数稍微随机一下,可以选中一个wifi,那么列表上面就会显示选中的wifi名称。

ios_wifi_3  ios_wifi_4

 

如果关闭无线局域网的开关,那么列表会都消失,恢复到之前状态。

看看同样的程序在android真机上的效果:

android_wifi_2  android_wifi_1

在实现tableview的功能上,delphi 的listbox在ios和android上几乎没有什么需要个性化的,两个系统完全用统一的界面。

从一个tableview点击item后显示另外一个tableview,用的是delphi内置的标准action,并且默认就支持智能手机的滑动切换效果,这些都不用我们费心。

procedure TTabbedForm.ListBoxItemWifiSettingClick(Sender: TObject);
begin
  ChangeTabActionWifi.ExecuteTarget(self);

  codesite.send('listboxwifi component count', ListBoxWifi.ComponentCount);
end;

我这里用了delphi xe7默认自带的codesite express的监测功能,对于程序调试方便很多。

主要核心代码在switch开关后面,如果打开开关,那么显示wifi信息,如果关闭开关,那么清除所有信息。显示wifi信息的话,用的是动态创建listitem,以及一个groupheader,清除的时候则释放所有这些对象。

procedure TTabbedForm.SwitchWifiSwitch(Sender: TObject);
var
  ListBoxGroupHeader: TListBoxGroupHeader;
  ListBoxItem: TListBoxItem;
  i: integer;
begin
  // true
  if SwitchWifi.IsChecked then
  begin

    ListBoxGroupHeader := TListBoxGroupHeader.Create(ListBoxWifi);
    ListBoxGroupHeader.Text := '选取网络';
    ListBoxGroupHeader.Name := 'listboxgroupheader_wifi';
    ListBoxWifi.AddObject(ListBoxGroupHeader);

    WifiCount := System.Math.RandomRange(1, 10);
    // add random wifi info listitem
    for i := 1 to WifiCount do
    begin
      ListBoxItem := TListBoxItem.Create(ListBoxWifi);
      ListBoxItem.Text := 'wifi_' +
        IntToStr(System.Math.RandomRange(100, 1000));
      ListBoxItem.ItemData.Accessory := TListBoxItemData.TAccessory(2);
      ListBoxItem.Height := 44;
      ListBoxItem.StyleLookup := 'listboxitemrightdetail';
      ListBoxItem.Name := 'listboxitem_wifi_' + IntToStr(i);

      // 挂钩listitem点击事件
      ListBoxItem.OnClick := WifiListItemClick;

      ListBoxWifi.AddObject(ListBoxItem);
    end;
  end
  else
  // false
  // 删除所有wifi相关的listitem
  begin
    (ListBoxWifi.FindComponent('listboxgroupheader_wifi')
      as TListBoxGroupHeader).Free;

    for i := 1 to WifiCount do
    begin
      (ListBoxWifi.FindComponent('listboxitem_wifi_' + IntToStr(i))
        as TListBoxItem).Free;
    end;

    (ListBoxWifi.FindComponent('listboxitem_wifi_select') as TListBoxItem).Free;

    codesite.send('listboxwifi component count', ListBoxWifi.ComponentCount);

  end;
end;

创建wifi信息后,挂钩一个预先写好的事件,用来显示用户选中的是哪个wifi

procedure TTabbedForm.WifiListItemClick(Sender: TObject);
var
  ListBoxItem: TListBoxItem;
  lbMark: Boolean;
begin
  WifiName := (Sender as TListBoxItem).Text;

  // 是否已经存在选中的wifi item , 存在则直接修改wifi item text
  if (ListBoxWifi.FindComponent('listboxitem_wifi_select')) <> nil then
    (ListBoxWifi.FindComponent('listboxitem_wifi_select') as TListBoxItem).Text
      := WifiName
    // 没有使用过,生成wifi item for select
  else
  begin
    ListBoxItem := TListBoxItem.Create(ListBoxWifi);
    ListBoxItem.Text := WifiName;
    ListBoxItem.ItemData.Accessory := TListBoxItemData.TAccessory(2);
    ListBoxItem.Height := 44;
    ListBoxItem.StyleLookup := 'listboxitemrightdetail';
    ListBoxItem.Name := 'listboxitem_wifi_select';

    ListBoxWifi.InsertObject(1, ListBoxItem);
  end;
end;

就这些代码,因为delphi良好的面向对象能力,所以这些动态创建、动态释放等,以及对象的属性控制都很容易。

通过一个标准的返回按钮回到设置界面还是通过一个标准的action即可,直接指定回到哪个tabitem。

有一些tabitem和listbox开发中的要点小结如下,或许帮助你少走一些弯路。

  1. tabcontrol中设置TabPosition属性为none,可以隐藏tab, 程序中这样写: tabcontrolSetting.TabPosition:=fmx.TabControl.TTabPosition.None;
  2. tabitem上放一个toobar,然年后放一个button,设置StyleLookup 设置  backtoolbutton,表示这是往前的意思。然后前面说了button挂接标准action:change tab,在action中通过属性custom text显示需要的内容;
  3. listbox中的listitem中可以放置各类控件,然后algin属性设置为mostright,保证放置的控件在屏幕最右边;
  4. listitem的stylelookup属性在上面都设置为listboxitemrightdetail;
  5. listitem的高度需要统一设置一下,默认的太矮了;
  6. switch开关控件中的主要属性是 isChecked, 用户操作激活的事件是 OnSwitch,不是OnClick。

以上基本完成模拟ios中的wifi设置效果,涉及到一些listbox简单用法。目前还没有完全实现ios中wifi设置的所有功能,有时间再继续,接下来继续通过模仿其他一些设置功能来学习listbox的更多用法。

 

 

Leave a Reply