XE ListBox实现伸缩效果

功能:实现年月日压缩,初始化时item是所有年,点击年展开月,点击月展开天,再点击则收缩。

思路:实际上一开始是将所有item显示,只是将月日的item.height赋值为0,

     记录每一行的item的index,包括年,月,日,

   找到年的item,点击时,显示月的item,赋month.height即可,其他同理。

    接下来就是处理边界值。

unit listbox_test;

interface

uses
  System.SysUtils, System.Types, System.UITypes, System.Classes, System.Variants,
  FMX.Types, FMX.Graphics, FMX.Controls, FMX.Forms, FMX.Dialogs, FMX.StdCtrls, StrUtils,
  FMX.Layouts, FMX.ListBox, FMX.Memo, FMX.Controls.Presentation, FMX.ScrollBox;

type
  TListBoxFortest = class(TForm)
    ListBox1: TListBox;
    Layout1: TLayout;
    Memo1: TMemo;
    procedure FormCreate(Sender: TObject);
    procedure ListBox1ItemClick(const Sender: TCustomListBox;
      const Item: TListBoxItem);
  private
    { Private declarations }

  public
    { Public declarations }
  end;

var
  ListBoxFortest: TListBoxFortest;
  Year  : Array[ 0..2 ] Of string = (‘2015‘, ‘2014‘, ‘2013‘ );
  Month : Array[ 0..3 ] Of Integer = (1, 2, 3, 4);
  Day   : Array[ 0..4 ] Of Integer = (10, 11, 12, 13, 14);
  YearIndex : Array of Integer ;
  MonthIndex : Array of Array of Integer ;    //二维
  ExpandYear   : Integer;
  ExpandMonth  : Integer;
implementation

{$R *.fmx}

procedure TListBoxFortest.FormCreate(Sender: TObject);
 var
    yItem : TListBoxItem;
    mItem : TListBoxItem;
    dItem : TListBoxItem;
    iyear : integer;
    imonth : integer;
    iday : integer;
begin
  //设置默认值
  ExpandYear  := -1;
  ExpandMonth := -1;

  //初始化长度
  setlength(YearIndex, Length(Year));
  setlength(MonthIndex, Length(Year), Length(Month));

   with ListBox1 do begin
    BeginUpdate;
    for iyear := 0 to Length(Year) - 1 do begin
      yItem := TListBoxItem.Create(nil);
      yItem.Parent := ListBox1;
      yItem.Name := ‘year‘ + Year[iyear] ;
      yItem.Text := ‘year‘ + Year[iyear] ;
      yItem.Height := 40;
      YearIndex[iyear] := listbox1.Items.Count - 1;

        for imonth := 0 to Length(Month) - 1 do begin
          mItem := TListBoxItem.Create(nil);
          mItem.Parent := ListBox1;
          mItem.Name := ‘month‘ + Month[imonth].ToString ;
          mItem.Text := ‘    month‘ + Month[imonth].ToString ;
          mItem.Height := 0;
          MonthIndex[iyear,imonth] := listbox1.Items.Count - 1;

          for iday := 0 to Length(Day) - 1 do begin
            dItem := TListBoxItem.Create(nil);
            dItem.Parent := ListBox1;
            dItem.Name := ‘day‘ + Day[iday].ToString ;
            dItem.Text := ‘        day‘ + Day[iday].ToString ;
            dItem.Height := 0;
          end;
      end;
    end;
    EndUpdate;
  end;

  for iyear := 0 to Length(Year) - 1 do begin
    self.Memo1.Lines.Add( ‘year‘ + Year[iyear] + ‘ : ‘ + YearIndex[iyear].ToString);
    for imonth := 0 to Length(Month) - 1 do begin
       self.Memo1.Lines.Add( ‘month‘ + Month[imonth].ToString + ‘ : ‘ + MonthIndex[iyear,imonth].ToString);
    end;
  end;
end;

procedure TListBoxFortest.ListBox1ItemClick(const Sender: TCustomListBox;
  const Item: TListBoxItem);
var
  SeletedItemName : string;
  SeletedItemIndex: Integer;
  EndIndex        : Integer;
  FindItemIndex   : Integer;
  SubItemIndex    : Integer;
  temp    : Integer;
  temp_1  : Integer;
begin
  SeletedItemName  := ListBox1.ListItems[listBox1.ItemIndex].Name;  //选中的item名
  SeletedItemIndex := ListBox1.ListItems[listBox1.ItemIndex].Index; //选中的item索引

  if LeftStr(SeletedItemName, 4) = ‘year‘ then
  begin
  for FindItemIndex:=0 to Length(YearIndex) - 1 do
  begin
    if YearIndex[FindItemIndex] = SeletedItemIndex then    //年的索引
      break;
  end;

  if ListBox1.ListItems[SeletedItemIndex + 1].Height = 30 then
    ExpandYear := FindItemIndex
  else
    ExpandYear := -1;

  if ExpandYear <> -1 then
    begin
      if FindItemIndex = Length(YearIndex) - 1 then
        EndIndex := ListBox1.Items.Count - 1
      else
        EndIndex := YearIndex[FindItemIndex + 1] - 1;

      with ListBox1 do begin
        BeginUpdate;
        for SubItemIndex := SeletedItemIndex + 1 to EndIndex do
        begin
          ListBox1.ListItems[SubItemIndex].Height := 0;
          ListBox1.ListItems[SubItemIndex].Visible := false;
        end;
        EndUpdate;
      end;
      ExpandYear := -1;
    end
  else
    begin
      temp := Length(MonthIndex[FindItemIndex]);     // 选中的该年 月索引的个数
      with ListBox1 do begin
        BeginUpdate;
        for SubItemIndex := 0 to temp - 1 do
        begin
          temp_1 := MonthIndex[FindItemIndex,SubItemIndex];    // 遍历选中的Item下一级(月)的每个itemindex
            ListBox1.ListItems[temp_1].Height := 30;
            ListBox1.ListItems[temp_1].Visible := true;
          end;
            ExpandYear := FindItemIndex;                  // 展开年的ItemIndex
          EndUpdate;
        end;
     end;
  end;

  for temp := 0 to Length(Year) - 1 do
      for temp_1 := 0 to Length(Month) - 1 do
        if SeletedItemIndex = MonthIndex[temp,temp_1] then  begin
          ExpandYear :=  temp;                  // 展开的年itemindex
          break;
        end;

  if (LeftStr(SeletedItemName,5) = ‘month‘) and (ExpandYear <> -1) then
  begin
    temp := Length(MonthIndex[ExpandYear]);
    for FindItemIndex := 0 to temp - 1 do
    begin
      if MonthIndex[ExpandYear, FindItemIndex] = SeletedItemIndex then     // 展开的月itemindex
        break;
    end;

    if ListBox1.ListItems[SeletedItemIndex + 1].Height = 30 then
        ExpandMonth := FindItemIndex
    else
        ExpandMonth := -1;

    if FindItemIndex <> temp -1 then         // 处理边界值
      EndIndex := MonthIndex[ExpandYear, FindItemIndex + 1] - 1            // 该月中天的最后索引
    else begin
      if ExpandYear <> Length(Year) - 1 then
        EndIndex := YearIndex[ExpandYear + 1] - 1
        else
          EndIndex := listBox1.Items.Count - 1;
    end;

    // 天的索引为月点击(SubItemIndex)MItemIndex+1 - 下一个(EndIndex)MItemIndex + 1 之间的索引
    with ListBox1 do
    begin
      BeginUpdate;
      for SubItemIndex := MonthIndex[ExpandYear, FindItemIndex] + 1 to EndIndex do  // 将该月的下一级从第一个到最后一个遍历显示
      begin
        if ExpandMonth = -1 then
          begin
            ListBox1.ListItems[SubItemIndex].Height := 30;
            ListBox1.ListItems[SubItemIndex].Visible := true;
          end
        else
          begin
            ListBox1.ListItems[SubItemIndex].Height := 0;
            ListBox1.ListItems[SubItemIndex].Visible := false;
          end;
      end;
      if ExpandMonth = -1 then
        ExpandMonth := FindItemIndex
      else
        ExpandMonth := -1;
      EndUpdate;
    end;
  end;
end;

end.
时间: 2024-10-17 15:01:04

XE ListBox实现伸缩效果的相关文章

jQuery照片伸缩效果,不是单纯的图片放大缩小,不影响其他元素的布局

之前在网上看到这种特效,无奈当时没有收藏网址,导致后来一度不知道这个特效是怎么实现的.今天特意在网上搜罗了一下,果然功夫不负有心人,被我找到了. 我也努力过自己尝试着写: 但只是单纯的图片放大,而且还影响了图片周围的元素的布局(因为图片放大占据了更大的空间). 后来发现要灵活巧妙的运用overflow和position这两个属性,就能达到目的.其实我觉得CSS(CSS3)中的overflow和position(顺带的top,bottom,left,right)简直是做网页特效无解的组合,当然还是

仿支付宝首页头部伸缩效果

原文链接:https://mp.weixin.qq.com/s/GegMt7GDBCFVoUgFQWG3Sw 每次打开支付宝首页滑动,头部的伸缩动画甚是吸引人.于是自己决定动手来实现一个. 无图言虚空,效果图: 首先看到这种效果,第一反应就是coordinatorLayout布局,android studio新建项目时,可以直接新建个Scrolling Activity来查看demo效果. 官方自带的布局示例: gradle关联 implementation 'com.android.suppo

Android 浮动按钮的伸缩效果

在做项目时想增加点动感,于是就有如下效果: 实现起来也很简单,通过属性动画和recyclerview 滑动结合就很好实现了. 通过给recycleview添加一个滑动监听:通过滚动的差值来处理动画 mRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() { @Override public void onScrollStateChanged(RecyclerView recyclerView, int newSt

导航页面水平伸缩效果

<script>window.onload=function(){ var aA=document.getElementsByTagName('a'); for(var i=0; i<aA.length; i++){ aA[i].onmouseover=function(){ var This=this; clearInterval (This.time); This.time= setInterval (function(){ This.style.width=This.offsetW

菜单栏鼠标经过伸缩效果

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } nav{ height: 30px; width: 300px; margin: 50px auto; overflow: hidden; tr

jQuery实现的表格展开伸缩效果实例

<table> <thead> <tr> <th>姓名</th> <th>性别</th> <th>暂住地</th> </tr> </thead> <tbody> <tr class="parent" id="row_01"> <td colspan="3">前台设计组</td

android 带箭头的textview文字伸缩效果

虽然是自己做的 还是不太懂 都是看网上的方法自己总结的   如果大家有质量好的demo  请分享一下 主要就是一个方法  几个变量限制  xml文件就不贴了  普通的TextView public class TextViewActivity extends Activity { private TextView tv; private String status = "up"; private String str = "Android是一种基于Linux的自由及开放源代码

简单易用的点击展开伸缩效果

<SCRIPT> function openP(_id) { var select_id = parseInt(_id.replace("box","")); for (i=1;i<=4;i++) { if (i==select_id) { document.getElementById("box"+i).style.display = "block"; } else { document.getElemen

赵雅智_AndroidUI_Android中listview可折叠伸缩仿手风琴效果(动态)

之前写了一篇静态数据listview显示手风琴效果,今天写的博客是动态实现listview的手风琴效果 静态链接:listview静态手风琴效果 数据都是存储在数据库中的,如果想要获取数据就要查询数据库 并且实现了:点击查看想要看的名片的时候,上一个打开的就能关闭 核心代码如下: package com.cards.activity; import java.util.List; import android.app.Activity; import android.app.AlertDialo