最近專案中用到篩選功能 具體效果圖如下

做這個之前 我先考慮到的是 每個Item 之間的演算法和自定義的每個Item樣式的UI,其次我們要考慮產品的業務邏輯以及點選展開後的Height和Top

自定義的View 也就是Item 就不多說了,很簡單.

1.我們整個白色的View 背景要滿足點選展開後的效果,也就是我們要隨著每個展開的高度做適應,首先我選擇用的是滾動檢視

2.篩選功能一般是一個按鈕點選觸發的,動畫特效在這也不多說,因為點選篩選後 下拉出來的介面每個第一個選項預設選中,所以我們要點選的時候就要知道對應的值

3.關於請求資料:我這裡選擇胖model的結構方式, 把使用到的結構體都丟到整體model  例子:   

                weakSelf.filterCondition = [[MYFilterConditionModel alloc] initWithJson:dict];

這樣就比較方便了一行就可以滿足我們接受所有伺服器返回的結構體或者陣列字典等等 4.建立每一個View 拿品牌來說,整個品牌(Title) + 下面排序的Item + 展開按鈕 都是一個整體View  每次都要去建立一個物件View 丟到陣列中 在從中抽取 5.改變 每個檢視之間的Height 和Top   and  scrollview 的 contentSize     改變height 和top 的核心程式碼如下:

- (void

)updateLayout

{

    CGFloat top = 0;

for (MYSearchFilterConditionView *filter inself.searchArray) {

        filter.top = top;

        filter.height = [filter getHeight];

        top += [filter getHeight];

    }

self.contentView.contentSize = CGSizeMake(self.contentView.width, top+18);

}

6,我們點選展開的時候觸發的也是上面所寫程式碼,因為一個方法就足以滿足我們的需求

7.因為我這裡的需求是 分品牌,價格 屬性 所以我採用列舉如下

typedefenum {

    MYSearch_Brand  = 0,    //品牌

    MYSearch_Price  = 1,    //價格區間(元)

    MYSearch_property         = 2,    //類別屬性

}MYSearchType;

一個類別可能有多個屬性,增加了功能的難度.

8.接下來來說一下 九宮格演算法,其實也不難,我們知道,每個Item 的的控制元件都要適應他其中的Title,適應寬度,並且我們要確定如果一個Item 超過了一個螢幕的寬度我們就要對其擷取,或者折行. 演算法如下: Item.width > self.width 如果我們的item 大於螢幕自身的寬度 我們就要進行處理

    leftPosition  = 16;

            item.left = leftPosition;

            colIndex = 1;

            rowIndex++;

            if (rowIndex >= 1) {

                topPosition += verticalGap + 28;

            }

            item.top = self.searchLaebl.bottom + topPosition;

            leftPosition +=item.width + horizationGap;

            if (self.isOpen == NO) {

                if (rowIndex >= 2) {

                    //此處對應 展開功能 

                    break;

                }else{

                    self.openView.hidden = YES;

                }

            }

        }else{

            colIndex++;

            item.left = leftPosition;

            leftPosition += item.width;

            if (colIndex >= 1) {

                leftPosition +=horizationGap;

            }

            item.top = self.searchLaebl.bottom + topPosition;

        }

        itemTag++;

        [item searchFilterItemAddTarget:selfaction:@selector(infoConditionClicked:) forControlEvents:UIControlEventTouchUpInside];

        [self.searchItemArrayaddObject:item];

        [self addSubview:item];

if (self.isOpen) {

        //此處是點選展開後的回收

    }

9.我們如何儲存 我們點選後的狀態值呢? 這裡我使用下標,因為我把所有的資料都存在一個數組中 裡面對應的很多結構體,我們可以使用這種方式判斷isKindOfClass這樣就很輕鬆的拿到我們要的 Item其中的資料,和對應的下標,然後我們再把所有選擇的 item 的ID 點選確定的時候一起傳遞過去就可以了.

有不太懂的的就給我留言吧,我有時間就會回覆噠.謝謝幫助我的人們 感謝你們!~~~~~