九宮格視圖的佈局及展示(相冊選擇)

        上週一個朋友帶的項目出了點問題,招的ios開發人員在實現選取相冊圖片後用九宮格的樣式展示時遇到了瓶頸,花了將近2周都沒有解決。後來在跟我交流的過程中他把項目的圖片發給我看了下,看完我就笑了,這就只是個算法的問題,花點時間思考下基本就能解決的。廢話不多說,把之前完成的效果展示出來。

wKiom1dnfvGhFrMIAAB0YqGwaP0966.png

wKiom1dnfvGBYKCAAAGCQRzE_C4477.jpg

wKioL1dnfvLB_YVpAANOcdQrt4M556.jpg

wKiom1dnfvTgZgSvAAO5iv56_c8456.png

wKioL1dnfvXAh7pBAAK5CB_SdIw188.png

wKioL1dnfvahiYNrAADiN61rlAc955.png

        以上是直接用手機截的圖,傳上來沒想到會這麼大。其中圖片添加的功能是引入了一個第三方的庫,非常好用,跟qq上的圖片添加功能幾乎沒兩樣,庫的名字是ZLPhotoActionSheet。當然這都不是重點,重點是怎樣去實現九宮格的展示,上面的圖片中每行是4個,這個是我自定義的宏,可以任意修改,每行的展示數目以及展示的總數目,是比較靈活的。

        這裏要說的是算法的核心,如果想不到這些也就沒法做到自動換行展示了。

        首先,你得自定義展示的總數目MAXPhotosNO(這裏默認是9),每行展示的個數AvgImgsNo(默認爲4),在自定義用來展示九宮格的視圖類裏寫一個對象方法-(void)updateTheViewWithImgsArr:(NSArray *)imgsArr;,也就是將獲取到的圖片數組對象傳入這個方法,然後再進行處理。

        然後,就到了最關鍵的一步了,對圖圖片數組進行處理。先判斷數組裏元素個數是否等於MAXPhotosNO,這裏用於判斷是否需要隱藏添加按鈕。然後進行for循環處理,創建用於承載圖片的UIImageView,個數爲圖片數組元素的個數。每次創建之前要知道它是第幾行的第幾個,以此來計算它應該處的位置。

        設置2個int類型參數:(i代表循環的變量)

        int s = i/AvgImgsNo;(確定是第幾行,0代表第一行,以此類推)

        int r = i%AvgImgsNo;(確定是第幾個,0代表第一個,以此類推)

        接下來就可以計算它的位置了:(帶space的參數爲間距)

        imgV.frame = CGRectMake(ImgSpace*(r+1)+AvgWidth*r,RowSpace*                (s+1)+AvgWidth*s,AvgWidth,AvgWidth);

        當然,千萬別忘了添加按鈕的位置也發生了改變:

        同樣的2個參數: (因爲它始終是最後一個,所以直接在後面加1計算就可以了)

        int k = (i+1)/AvgImgsNo;

        int j = (i+1)%AvgImgsNo;

        這裏要注意:如果數組元素的個數已經達到了設置的MAXPhotosNO的最大值,要這樣做處理

        if((int)imgsArr.count==MaxPhotosNo){


            k = MaxPhotosNo/AvgImgsNo;    //始終讓它處在最後一行的最後一個,因爲我需要它的方位來佈局,如果不要的同學,可以不用這樣寫

    

        }

         最後,其實已經完成了,其中的細節可能還有些,但是大體的思路基本就是這個樣子,非常的簡單。我真的有點不明白爲啥這樣的一個功能2周都寫不出來......,好吧我們都是站在巨人肩膀上說風涼話的人哈哈~



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章