此份筆記紀錄如何用Storyboard實現UIScrollView，並用程式碼控制UIScrollView與Page Control之間的互動。
【專案開發步驟】
建立專案：
使用Single View Application模板建立一個名為ScrollView的專案，使用iPhone裝置。
設計使用者介面：
替View加入NavigationController，並將title設為ScrollView，如下圖所示。
加入ScrollView：
拖曳ScrollView物件至ViewController內，並水平垂直置中，如下圖。
設定ScrollView的內容：
將UIScrollView的Constraints上下左右都做設定，如下圖所示。
拖曳一個View的物件到Storyboard內，並設定水平垂直置中，如下圖所示。
點選到該頁的ViewController，設定模擬的大小為960，如下圖所示。
將方才所額外加入的View物件添加背景顏色，方便我們辨別，如下圖所示。
再新增兩個與前一個加入的View相同大小的View至頁面內，將拉長的頁面填滿，並更換頁面的背景顏色方便識別，如下圖所示。
設定左邊View的Constraints為上下左右與寬跟高，如下圖所示。
設定中間View的Constraints為上下左右與寬，如下圖所示。
設定右邊View的Constraints為上下左右與寬，如下圖所示。
設定完畢後即可將模擬的大小調回320，如下圖所示。
點選該頁面的ViewController，到屬性裡面將「Adjust Scroll View Insets」取消勾選，如下圖所示。
點選ScrollView物件，到屬性裡面將「Paging Enabled」勾選，如下圖所示。
加入Page Control：
拖曳一個Page Control物件至View裡面，一定要放在ScrollView下面，否則會被蓋住，如下圖所示。
調整ScrollView至適當的位置，如下圖所示。
撰寫UIScrollView與Page Control的互動：
建立實體變數名稱，並與Storyboard做連接，如下所示。
<Swift>
<Object-C>
設定UIScrollView的代理人是自己，如下所示。
<Swift>
<Object-C>
代理人必須採納Protocol，如下所示。
<Swift>
<Object-C>
實作Delegate的method，如下所示。
<Swift>
<Object-C>
將以下程式碼放至Delegate的method內，如下所示。
<Swift>
<Object-C>
【執行結果】
【專案範例】
設計使用者介面：
替View加入NavigationController，並將title設為ScrollView，如下圖所示。
 |
| 設計使用者介面 |
拖曳ScrollView物件至ViewController內，並水平垂直置中，如下圖。
 |
| 加入ScrollView物件 |
將UIScrollView的Constraints上下左右都做設定，如下圖所示。
 |
| 設定ScrollView的Constraints |
 |
| 拖曳View物件至Storyboard |
 |
| 設定頁面大小 |
 |
| 更改View的背景顏色 |
 |
| 新增View物件 |
 |
| 設定左邊View的Constraints |
 |
| 設定中間View的Constraints |
 |
| 設定右邊View的Constraints |
 |
| 調整模擬頁面的大小 |
 |
| 取消勾選項目 |
 |
| 勾選項目 |
拖曳一個Page Control物件至View裡面，一定要放在ScrollView下面，否則會被蓋住，如下圖所示。
 |
| 加入ScrollView |
 |
| 調整Page Control位置 |
建立實體變數名稱，並與Storyboard做連接，如下所示。
<Swift>
@IBOutlet var scrollView: UIScrollView!
@IBOutlet var pageControl: UIPageControl!
<Object-C>
@property (strong, nonatomic) IBOutlet UIScrollView *scrollView;
@property (strong, nonatomic) IBOutlet UIPageControl *pageControl;
設定UIScrollView的代理人是自己，如下所示。
<Swift>
scrollView.delegate = self
<Object-C>
self.scrollView.delegate = self;
代理人必須採納Protocol，如下所示。
<Swift>
class ModalViewController: UIViewController, UIScrollViewDelegate {
@IBOutlet var scrollView: UIScrollView!
@IBOutlet var pageControl: UIPageControl!
}
<Object-C>
@interface ViewController () <UIScrollViewDelegate>
@property (strong, nonatomic) IBOutlet UIScrollView *scrollView;
@property (strong, nonatomic) IBOutlet UIPageControl *pageControl;
@end
實作Delegate的method，如下所示。
<Swift>
func scrollViewDidEndDecelerating(scrollView: UIScrollView!) {
}
<Object-C>
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
}
將以下程式碼放至Delegate的method內，如下所示。
<Swift>
var stopPoint: CGPoint = scrollView.contentOffset
var stopIndex: NSNumber = (stopPoint.x)/320
pageControl.currentPage = stopIndex
<Object-C>
CGPoint stopPoint = scrollView.contentOffset;
int stopIndex = (int)stopPoint.x/320;
self.pageControl.currentPage = stopIndex;
利用stopPoint得到scrollView的偏移量。利用偏移量除320得知Index，stopIndex應為0,1,2。最後設定Page control現在正確的頁面是在哪一個。【執行結果】
【專案範例】
沒有留言:
張貼留言