请选择 进入手机版 | 继续访问电脑版
设为首页收藏本站

吾爱极客

 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

查看: 3290|回复: 0

使用ListBox 控件来显示表格视图 (iOS和Android)

[复制链接]

271

主题

271

帖子

1139

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1139
发表于 2015-10-14 00:29:38 | 显示全部楼层 |阅读模式
在移动平台中使用ListBox 控件来显示表格视图

在移动平台上, FireMonkey 使用 FMX.ListBox.TListBox 控件来展现移动风格的表格视图。如下面的ListBoxes.

: FMX.ListBox.TListBox 在移动设备上可能表现很慢。 如果你想要开发更复杂的应用,特别是带有大数据库的应用,请使用 TListView。


平面列表
1.PNG
分组列表
2.PNG



搜索框

你可以添加搜索框到一个 ListBox。 利用搜索框,用户可以很容易在一个很长的列表中缩小选择范围,如下图所示:
3.PNG


这个教程描述移动平台跨设备应用中构建表格视图列表项的基本步骤。

创建ListBox 控件的列表项

1.   选择:

§  Delphi: File > New > Multi-DeviceApplication - Delphi >Blank Application

§  C++Builder: File > New > Multi-DeviceApplication - C++Builder >Blank Application

2.    在ToolPalette中选择 TListBox 控件将它拉到 Form Designer。要查找TListBox, 在Tool Palette 的搜索框输入前面几个字符 (例如 "TList"):
4.png
3.   在窗体设计器选择TListBox 控件, 进入 Object Inspector 选择 Client 作为 Align 属性的值。

4.    在窗体设计器,右击 TListBox 控件,选择 Items Editor
5.png
5.    在 Items Designer, 点击 Add Item 几次来添加几个项到列表框:
6.png
6.    关闭Items Designer。现在可以看到TListBox 上的ListBox项。例如:
7.png


添加头部

可以通过以下步骤给TListBox 控件添加一个头部:
8.png
TListBox头部

1.    在Form Designer, 右击 TListBox 控件,选择 Add Item > TListBoxHeader
9.png
2.    在 Tool Palette, 选择 TLabel 控件,将其拖放到你刚添加的TListBoxHeader 元件的顶部:
10.png
3.   在 Object Inspector, 修改 TLabel 控件的属性如下:
  
属性
  
  
  
  
Align
  
  
Client
  
  
StyleLookup
  
  
Toollabel
  
  
TextSettings.HorzAlign  
  
  
Center
  
  
Text
  
  
(Text value as you want)
  


添加组头部/尾部到列表

你可以像下面这样给TListBox项目定义一个组头部和组尾部:
14.png
1.   在 Form Designer, 右击TListBox 控件, 选择 Items Editor.

2.    在Item Designer, 从下拉列表中选择TListBoxGroupHeader ,然后选择 Add Item:
12.png
3.   从下拉列表中选择 TListBoxGroupFooter ,然后选择 Add Item.

4.    从列表项中选择ListBoxGroupHeader1,点击 Up(向上) 按钮几次 直到这个项成为列表最顶端的项:
13.png
5.   关闭对话框。现在TListBox 控件已经有了一个组头部和组尾部。


显示列表项为分组项目

ListBox 上的项目可以显示为平面列表或分组列表。这个选择通过 GroupingKind 属性和 StyleLookup 属性控制, 如下图所示:
14__.png
当在Form Designer 选中ListBox后,可以在Object Inspector里面选择设置 GroupingKind 属性和 StyleLookup 属性。


添加一个检查框或其它附件到列表项

TListBox 中的每一个项都可以通过ItemData.Accessory属性使用例如检查标签等的附件。下图是可以赋给ItemData.Accessory 的值与相关联的附件:
15.PNG
可以在Object Inspector里选择Accessory属性,如果ListBox 项在Form Designer中被选中。
16.png
添加图标到列表项
ListBox 控件的每个项目可以包含位图数据作为Icon(图标), 通过 ItemData.Bitmap 属性:
17.png
当ListBoxItem 在Form Designer中被选中后, 可以在Object Inspector中选择设置Bitmap 属性。

要能看到图标, 必须选择支持Bitmap  属性的StyleLookup 。修改StyleLookup 属性为listboxitemleftdetail。


给列表项目添加细节信息

你可以给 ListBox 控件的每个项目添加附加的文本信息。

在 ItemData.Detail 属性里面指定细节文本, 并通过StyleLookup 属性来选择细节文本的位置,如下表所示:
24、.PNG


运行应用

选择Run > Run 或按 F9来运行应用。

创建ListBox应用

1.   选择:

§  Delphi: File > New > Multi-DeviceApplication - Delphi >Blank Application

§  C++Builder: File > New > Multi-DeviceApplication - C++Builder >Blank Application

2.   在ToolPalette里面选择 TListBox 控件,将其放到窗体。

3.   在Form Designer 选择TListBox 控件,进入 Object Inspector 选择 Client 作为 Align 属性值。


通过代码添加项目到ListBox

要添加普通的项目到ListBox, 只需要调用 Items.Add 方法,如下面代码所示:

§  Delphi:
ListBox1.Items.Add('Text to add');

§  C++:
ListBox1->Items->Add("Text toadd");

如果你想要创建单独项目之外的多个项目,或者控制其他属性,可以先创建项目实例,然后将其添加到列表框。

下面例子代码添加多个项目到ListBox, 如下图所示:
19.PNG


Delphi:

procedure TForm1.FormCreate(Sender: TObject);
var
  c: Char;  i: Integer;
  Buffer: String;
  ListBoxItem : TListBoxItem;
  ListBoxGroupHeader : TListBoxGroupHeader;
begin

  ListBox1.BeginUpdate;
  for c := 'a' to 'z' do  begin
    // Add header ('A' to 'Z') to the List
   ListBoxGroupHeader := TListBoxGroupHeader.Create(ListBox1);
    ListBoxGroupHeader.Text := UpperCase(c);
    ListBox1.AddObject(ListBoxGroupHeader);

     // Add items ('a', 'aa', 'aaa', 'b', 'bb', 'bbb', 'c', ...) to the list
   for i := 1 to 3 do
    begin
      // StringOfChar returns a string with a specified number of repeating characters.
     Buffer := StringOfChar(c, i);
      // Simply add item
      // ListBox1.Items.Add(Buffer);
       // or, you can add items by creating an instance of TListBoxItem by yourself
      ListBoxItem := TListBoxItem.Create(ListBox1);
      ListBoxItem.Text := Buffer;

      // (aNone=0, aMore=1, aDetail=2, aCheckmark=3)
      ListBoxItem.ItemData.Accessory := TListBoxItemData.TAccessory(i);
      ListBox1.AddObject(ListBoxItem);
    end;
  end;
  ListBox1.EndUpdate;
end;

C++:

void __fastcall TForm1::FormCreate(TObject *Sender){
   char c;
  int i;
  String Buffer ;
  TListBoxItem *ListBoxItem  ;
  TListBoxGroupHeader *ListBoxGroupHeader  ;

   ListBox1->BeginUpdate();
  for (c = 'a'; c <= 'z'; c++)  {
        // Add header ('A' to 'Z') to the List
        ListBoxGroupHeader = new TListBoxGroupHeader(ListBox1);
        ListBoxGroupHeader->Text = UpperCase(c);
        ListBox1->AddObject(ListBoxGroupHeader);

         // Add items ('a', 'aa', 'aaa', 'b', 'bb', 'bbb', 'c', ->->->) to the list
        for (i = 1; i < 4; i++)
        {
          // StringOfChar returns a string with a specified number of repeating characters->
          Buffer = StringOfChar(c, i);
          // Simply add item
          // ListBox1->Items->Add(Buffer);

           // or, you can add items by creating an instance of TListBoxItem by yourself
          ListBoxItem = new TListBoxItem(ListBox1);
         ListBoxItem->Text = Buffer;
          // (aNone=0, aMore=1, aDetail=2, aCheckmark=3)
          ListBoxItem->ItemData->Accessory = static_cast<TListBoxItemData::TAccessory>(i);
          ListBox1->AddObject(ListBoxItem);
        };
  };
  ListBox1->EndUpdate();
}

创建溢出菜单

溢出菜单是通过Action Bar访问的,提供用来访问附加项目或比较少用到的项目。

在FireMonkey中, 使用TListBox可以很容易实现溢出菜单:

1.   在窗体上面添加一个TToolBar 控件,以及设置 alignment 属性为Top.

2.    放置三个 TSpeedButton 控件到 TToolBar 控件上面:
20.png

    §  对第一个TSpeedButton:

    §  设置 Align 属性为Left.
    §  修改 Name 属性为 OrganizeButton.
    §  设置 StyleLookup 为 organizetoolbutton.


    §  对第二个 TSpeedButton:

    §  设置 Align 属性为 Right.
    §  修改 Name 属性为 OverflowButton.
    §  选择 detailstoolbutton 给 StyleLookup 属性。


   §  最后一个 TSpeedButton:

   §  设置 Align 属性为 Right.
   §  在 Object Inspector 展开 Margins 节点和设置 Right margin(右边距) 为 5
   §  修改 Name 属性为 SearchButton.
   §  设置 StyleLookup 为 searchtoolbutton.


3.   放一个TListBox 到窗体。

    §  在Items Editor 添加5个TListBoxItem 。

    §  选中TListBox 控件的Anchors 属性的 akTopakRight
    §  设置 Height 为 220.
    §  修改 Name 为 OverflowMenu.
    §  设置 Visible 属性为 False.

4.   进入 Object Inspector, 展开 ItemData,针对前面4个TListBox 中的 TListBoxItem 控件:

    §  定义 Bitmap 属性。
    §  修改 Text 属性到你想要的文本。
    §  给 StyleLookup 属性选择listboxitemleftdetail

5.   在 Object Inspector, 展开 ItemData,对最后一个 TListBoxItem:

    §  设置 Accessory 为 aMore 以及 Text 为 More

6.   添加一个 TShadowEffect 控件到溢出菜单。

21.PNG



创建溢出按钮的事件函数

在Form Designer, 双击 OverflowButton 控件。添加以下代码到这个事件函数:

§  Delphi:

procedure TForm1.OverflowButtonClick(Sender: TObject);
begin
OverflowMenu.Visible := not OverflowMenu.Visible;//修改可见状态
if OverflowMenu.Visible then// 溢出菜单已经显示
begin
    OverflowMenu.BringToFront;
    OverflowMenu.ItemIndex := -1; // ItemIndex 属性指定当前选中项目(默认值-1表示没有项目被选中)
   OverflowMenu.ApplyStyleLookup;
    OverflowMenu.RealignContent; //重新调整溢出菜单列表框的子控件
  end;
end;

§  C++:

void __fastcall TForm1::OverflowButtonClick(TObject *Sender)
{
        OverflowMenu->Visible = !(OverflowMenu->Visible); //修改可见状态
                if (OverflowMenu->Visible) {   // 溢出菜单已经显示
                OverflowMenu->BringToFront();
                OverflowMenu->ItemIndex = -1; // ItemIndex 属性指定当前选中项目(默认值-1表示没有项目被选中)
                OverflowMenu->ApplyStyleLookup();
                OverflowMenu->RealignContent(); //重新调整溢出菜单列表框的子控件
        }
}

添加搜索框

§  要添加搜索框到ListBox 控件,右击 TListBox 控件,只需要从弹出菜单中选择Add Item > TSearchBox
22.png
§  要将其添加到Action Bar:

§  设置 Visible 属性为 False.

§  双击SearchButton创建事件函数,添加以下代码:


Delphi:
procedure TForm1.SearchButtonClick(Sender: TObject);
begin
  SearchBox1.Visible := not SearchBox1.Visible; //change the visibility status
end;

C++:

void __fastcall TForm1::SearchButtonClick(TObject *Sender)
{
        SearchBox1->Visible = !(SearchBox1->Visible); //change the visibility status
}


运行应用


1.   选择下面两者之一:

§  Run > Run

§  Run > Run Without Debugging


2.   要调出溢出菜单,点击Action bar上的竖立的省略号。


3.   要查看搜索框, 点击SearchButton.

23.PNG



www.52jike.com 吾爱极客  ruanzhuo翻译整理,转载请注明出处


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|吾爱极客 ( 粤ICP备15067754号-1  

GMT+8, 2020-4-5 11:56 , Processed in 0.234749 second(s), 29 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表