fb_license

技術標籤

@selector (1) 初使化區塊 (1) 物件 (1) 物件導向 (2) 型別 (4) 封裝 (1) 流程控制 (1) 陣列 (3) 推論型別 (2) 實機測試 (1) 蓋索林(gasolin) (1) 模組 (1) 憑證 (1) 轉型 (1) 羅康鴻 (121) 類別 (1) 變數 (5) Accelerometer (1) ActiveRecord (1) Activity (1) AFNetworking (1) alloc (1) Android (3) Animation (1) App (1) App ID (1) APP上傳 (1) ASP.NET (1) AVAudioPlayer (1) block (1) C# (2) class (1) CLLocationManager (1) CLLocationManagerDelegate (1) CMMotionManager (4) Controller (1) delegate (1) DELETE語法 (1) Device Motion資料 (1) Dialog (1) DropDownList (1) dynamic language (2) Facebook SDK (9) FBRequest (5) FBRequestConnection (2) FMDB (1) Gesture Recognizers (6) GROUP BY (2) Gyro (1) HAVING (1) IBAction (1) IBOutlet (1) id (3) inheritance (1) init (1) Insert (1) instance variable (1) Interface Builder (1) iOS (70) iOS idea (7) iOS Introduction (1) Layout (1) Magnetometer (1) Menu (2) Method (2) MKMapView (1) MKPointAnnotation (1) MS SQL (5) Nil (1) NSArray (1) NSDictionary (1) NSError (1) NSFileManager & .plist (1) NSMutableArray (1) NSMutableDictionary (1) NSNotificationCenter (1) NULL (1) object (2) Objective-C (16) Objective-C idea (1) ORDER BY (1) Parameter (1) property (1) protocol (2) Provisioning (1) Proximate Sensor (1) Q and A (2) R類別 (1) Rails (9) RESTful SOA (9) Ruby (8) Scene (1) SEELECT (1) Segue (2) SEL (1) SELECT語法 (1) Shake (1) Simulator (1) SOA (8) SQL (6) SQL Server (5) SQL函數 (1) SQL彙總函數 SQL (1) SQLite (1) Storyboard (1) Style (1) Swift (1) Table (1) target & action (1) Theme (1) Toast (1) TRUNCATE TABLE語法 (1) UIActionSheet (1) UIActionSheetDelegate (1) UIActivityIndicatorView (1) UIAlertView (1) UIBarButtonItem (1) UIButton (1) UICollectionView (1) UICollectionViewDataSource (1) UIControl (9) UIDatePicker (1) UIImage (1) UIImagePickerController (2) UIImagePickerControllerDelegate (2) UIImageView (1) UILabel (1) UILongPressGestureRecognizer (1) UINavigationController (2) UIPanGestureRecognizer (1) UIPinchGestureRecognizer (1) UIProgressView (1) UIResponder (1) UIRotationGestureRecognizer (1) UISegmentedControl (1) UISlider (1) UIStepper (1) UISwipeGestureRecognizer (1) UISwitch (1) UITabBarController (1) UITableView (1) UITableViewDataSource (1) UITapGestureRecognizer (1) UITextField (1) UITextFieldDelegate (1) UITextView (2) UITextViewDelegate (1) UIToolBar (1) UIView (8) UIWebView (1) UPDATE語法 (1) var (2) VB.NET (7) View (4) WHERE子句 (1) XML (1)

2014/03/30

[iOS] UICollectionView & UICollectionViewDataSource


我是UICollectionView,我負責以一個一個格子的方式呈現資料


我是UICollectionViewDataSource,我負責接受UICollectionView的資料委派工作,提供UICollectionView顯示用的資料



UICollectionView說:那我們合作吧,你提供資料,我在以格子式的集合方式顯示。








第1步:建立一個名為"UICollectionView_UICollectionViewDataSource"的"Single View Application"專案。


第2步:加入CollectionView



第3步:建立UICollectionView的IBOutlet
  • 加入UICollectionView的IBOutlet並取名為"collectionView"


第4步:調整樣板Cell,並加上UILabel
  • 為UICollectionViewCell加上Identifier識別碼,以便後續取出時識別使用

  • 加上UILabel以便顯示連絡人資訊,特別的是將Tag設為100,用以在後續依照此Tag將UILabel找出來,以將連絡人的資訊設定在其中




第5步:ViewController委派UICollectionViewDataSource的工作

  • 於"ViewController.m"檔中,準備顯示的連絡人資料,宣告一個_contacts陣列變數,並於viewDidLoad方法中建立連絡人陣列,並存於_contacts陣列中
#import "ViewController.h" @interface ViewController () { //宣告一個存放連絡人的陣列變數,_contacts NSArray * _contacts; } @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; //建立一個連絡人陣列物件,並存放於_contacts變數中 _contacts = [[NSArray alloc] initWithObjects: @"Jack" , @"Eric" , @"Jason" , @"Ray" , @"Kevin" , @"Jason" , nil]; } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Dispose of any resources that can be recreated. } @end

  • 為"ViewController"加上"UICollectionViewDataSource" protocol協定,於UIViewController後方加上"<UICollectionViewDataSource>"
//實作UICollectionViewDataSource協定 @interface ViewController : UIViewController <UICollectionViewDataSource$gt; @property (strong, nonatomic) IBOutlet UICollectionView *collectionView; @end

  • 於"ViewController.m"檔中實作"
       collectionView:
       numberOfItemsInSection:"方法,以回傳資料的格子數,在此回傳透過陣列回傳個數。
//UICollectionViewDataSource上的方法, //用以表示有多少資料, //在此回傳_contacts陣列的個數 -(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section { return [_contacts count]; }

  • 於"ViewController.m"檔中實作 "collectionView:cellForItemAtIndexPath:"方法
  • 透過dequeueReusableCellWithReuseIdentifier:訊息,向collectionView取得Identifier識別碼為"cell1"的cell樣板,此dequeueReusableCellWithReuseIdentifier:訊息可讓您重複使用同一個樣版,而不浪費重複建置樣板的資源
  • 在cell樣板上透過viewTag:訊息找出Tag為100的UILabel,並將對應的連絡人資訊自_contacts陣列中取出,而後設定在UILabel上
  • 透過setBackgroundColor:將cell的背景色設為藍色
  • 最後透過return回傳cell
//UICollectionViewDataSource上的方法, //回傳UICollectionView顯示每格資料用的UICollectionViewCell -(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath { //透過dequeueReusableCellWithReuseIdentifier:forIndexPath:訊息, //將預先設計的cell樣本拿出來使用, //其Identifier為cell1的樣本 UICollectionViewCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cell1" forIndexPath:indexPath]; //透過viewWithTag:訊息, //找出Tag為100的view, //此100的view即是在cell樣本上的Label, //並自_contacts陣列取出對應位置的連絡人姓名, //設定為label上的文字 UILabel * label = (UILabel*)[cell viewWithTag:100]; [label setText:[_contacts objectAtIndex:[indexPath row]]]; //設cell的背景色為blue [cell setBackgroundColor:[UIColor blueColor]]; //回傳cell return cell; }

第6步:設定UICollectionView的dataSource委派
  • 將實作"UICollectionViewDataSource"的ViewController(self),指派至UICollectionView的dataSource屬性中,好將UICollectionView取得資料的工作委派給ViewController(self)物件。當然,UICollectionView則會以"UICollectionViewDataSource"protocol協定向ViewController物件要資料。
- (void)viewDidLoad { [super viewDidLoad]; //建立一個連絡人陣列物件,並存放於_contacts變數中 _contacts = [[NSArray alloc] initWithObjects: @"Jack" , @"Eric" , @"Jason" , @"Ray" , @"Kevin" , @"Jason" , nil]; //將實作UICollectionViewDataSource的ViewController(self), //指派給UICollectionView的dataSource屬性中, //好將UICollectionView取得資料的工作, //委派給ViewController(self)物件。 self.collectionView.dataSource = self; }

第7步:執行
  • 這時畫面上會出現6格資料,這即是UICollectionView可以以格子列表的方式顯示資料,當然它會與UICollectionViewDataSource協定合作,透過實作UICollectionViewDataSource的物件(在此為ViewController)提供UICollectionView資料


檔案連結:UICollectionView_UICollectionViewDataSource.zip


更多的UICollectionView資訊: