2014年5月12日 星期一

[Xcode]比較直觀的編輯超過螢幕長度的UIView的方法

在手繪設計階段的時候,一直覺得有scroll 上下拉動在手機裡面是極其正常的事情,
實際上撰寫的時候,發現的確可以拉一個很長的View 搭配scrollview做的出來。
但是就目前所學的部分看來,要維護這個View是有點棘手的事情。
因為在storyboard的部份,超出controller的View的部分是不會顯示的。
而且上下拉的時候會變動到View的大小,放在裡面的元件也是會被影響到。 事後的維護想到就讓我頭皮發麻。 囧rz 
好吧,那就用程式碼來控制位置吧,技術性上不是問題, 但是缺點實在有點不太直觀,畢竟要run後才能確認位置是不是和想的一樣,
也有點浪費時間。 運氣不錯的是,前天正好有玩到利用xib來自定義一個UITableViewCell, 既然Cell都可以這樣設計了,沒道理View不行啊。 在經過一些研究和失敗後,摸索出這樣的方式。

1. 建立一個xib,作為要顯示的介面。

2. 將想要設計的介面和元件在xib上安排妥當。

3. 在storyboard的主畫面上放上scrollView。

4. 引導入已經設計好的View。

大功告成!

以下是實作的方式和步驟:
1. 先拉個scrollView到Controller上。

clip_image002



2. 按著ctrl將ScrollView拉到程式碼裡面建一個link
clip_image004
3 . 在.m檔裡面建立相對硬的@synthesize
clip_image006
4. New files->選一個empty的View (或者是View也可以)
clip_image008
5. 建完後,依照選剛剛新增的.xib檔案,拉一個View近來。並且在simulates Meterics裡面將Size 改成Freedom(不修改的話會造成)View 大小無法改變(灰色無法修改)
clip_image010
6. 在這個View上安排你需要的布局。
clip_image012
7. 回到原本的程式碼,利用[NSbound mainBundle] loadNibName:@”{xib的名字}” owner:nil options:nil]
把我們需要的UIView產生出來。 XD
並且把他加到scrollView上。
clip_image014
8. 搞定,之後這個View只要修改這個xib 就可以對應到了,之後的維護也可以用比較直觀的方式來去設計和維護嚕。
附上git hub link:
https://github.com/coolthor/ScrollPractice

沒有留言 :

張貼留言