ios-05_2-uikit

19
iOS Internship 2014 UIKit (part II)

Upload: noveo

Post on 06-Dec-2014

215 views

Category:

Software


0 download

DESCRIPTION

Noveo iOS school. Lecture 5.

TRANSCRIPT

Page 1: iOS-05_2-UIKit

iOS Internship 2014UIKit (part II)

Page 2: iOS-05_2-UIKit

UIKitframework

UIView subclassingCALayer, transformations

UIScrollViewUITableView + UITableViewCell

UICollectionView + UICollectionViewCell

лекция 5(продолжение)

Page 3: iOS-05_2-UIKit

UIKit Framework

- (id)initWithFrame:(CGRect)frame — designated initializer

- (id)initWithCoder:(NSCoder *)aCoder — при создании объекта view из XIB/Storyboard

- (void)layoutSubviews — определяет расположение вложенных view

- (void)updateConstraints — определяет расположение вложенных view

- (void)drawRect:(CGRect)rect — выполняет отрисовку полностью кастомной view

- (CGSize)sizeThatFits:(CGSize)size — предпочтительный размер

UIView subclassing

Page 4: iOS-05_2-UIKit

UIKit Framework

Свойства, которые можно анимировать:

● frame● bounds● center● transform● alpha● backgroundColor● contentStretch

UIView animation

Page 5: iOS-05_2-UIKit

UIKit Framework

[UIView animateWithDuration:2 animations:^{self.aView.transform =

CGAffineTransformRotate(self.view.transform, M_PI / 3.0);self.textLabel.center = destinationPoint;

}];

UIView animation

Page 6: iOS-05_2-UIKit

UIKit Framework

Содержится в каждой UIView, отвечает за отрисовку.

● @property CGPoint anchorPoint● @property CGColorRef borderColor● @property CGFloat borderWidth● @property CGFloat cornerRadius● @property BOOL masksToBounds● @property CGColorRef shadowColor● @property CGSize shadowOffset● @property float shadowOpacity● @property CATransform3D transform

В реальности для фонов, рамок, скруглений и прочего используются картинки, т.к. это даёт больше гибкости и работает ощутимо быстрее.

CALayer

Page 7: iOS-05_2-UIKit

UIKit Framework

CALayerself.textLabel = [[UILabel alloc] initWithFrame:self.view.bounds];self.textLabel.layer.shadowColor = [UIColor whiteColor].CGColor;self.textLabel.layer.shadowRadius = 12;self.textLabel.layer.shadowOpacity = 1;self.textLabel.layer.masksToBounds = NO;

self.button = [[UIButton alloc] initWithFrame:(CGRect){20, 20, 100, 40}];self.button.backgroundColor = [UIColor brownColor];self.button.layer.masksToBounds = YES;self.button.layer.cornerRadius = 8;self.button.layer.borderWidth = 2;self.button.layer.borderColor = [UIColor blackColor].CGColor;

Page 8: iOS-05_2-UIKit

UIKit Framework

● Скроллинг по контенту, который не влезает на экран полностью● Зум контента с помощью стандартных жестов● Анимированная навигация по отдельным экранам (паджинация)

UIScrollView

Page 9: iOS-05_2-UIKit

UIKit Framework

@interface ViewController ()//...@property (strong, nonatomic) IBOutlet UIImageView *imageView;@property (strong, nonatomic) IBOutlet UIScrollView *contentScroller;@end @implementation ViewController- (void)viewDidLoad{

[super viewDidLoad];

self.contentScroller = [[UIScrollView alloc] initWithFrame:self.view.bounds];[self.view addSubview:self.contentScroller];

self.imageView = [[UIImageView alloc] initWithImage:self.image];[self.contentScroller addSubview:self.imageView];self.contentScroller.contentSize = self.imageView.frame.size;

}@end

UIScrollView

Page 10: iOS-05_2-UIKit

UIKit Framework

Показ большого (но конечного) количества элементов с навигацией свайпами.

UIScrollView

34 3635

cur nextprev content view

scroll view (visible area)

Page 11: iOS-05_2-UIKit

UIKit Framework

Показ большого (но конечного) количества элементов с навигацией свайпами.

UIScrollView

34 3635

cur nextprev content view

scroll view (visible area)

373635

cur next content viewprev

obj_1 obj_2 obj_3

obj_2 obj_3 obj_1

34obj_1

Page 12: iOS-05_2-UIKit

UIKit Framework

- (void)viewDidLoad{

[super viewDidLoad];

self.contentScroller = [[UIScrollView alloc] initWithFrame:self.view.bounds];[self.view addSubview:self.contentScroller];self.contentScroller.delegate = self;

//...} // Вызывается постоянно во время скролла,// наш код должен работать быстро!- (void)scrollViewDidScroll:(UIScrollView *)scrollView{

// Вычисляем номер элемента, центр которого ближе всего// Если это не текущий элемент:// - делаем видимый элемент центральным// - подгружаем новый соседний элемент// - исправляем координаты соседних элементов.

}

UIScrollView

Page 13: iOS-05_2-UIKit

UIKit Framework

● Список однородных элементов (ячейки могут быть разного типа, но основной смысл всё-таки в повторении)

● Стандартная схема для переиспользования объектов● Реакция на прокрутку, нажатие, свайпы● Стандартная реализация добавления/удаления/перемещения (включая анимации)

UITableView

Page 14: iOS-05_2-UIKit

UIKit Framework

● Таблица запрашивает количество групп, количество ячеек, а так же сами ячейки у объекта, объявившего себя DataSource-ом этой таблицы.

● Таблица сообщает о выделении (тап), удалении (свайп влево) и т.д. объекту, объявившему себя Delegate-ом этой таблицы.

● Таблица запрашивает размеры ячеек, размеры и вьюхи заголовков и прочие параметры кастомизации у делегата.

● Каждая ячейка таблицы принадлежит классу UITableViewCell (или наследнику).

● В памяти находятся только видимые ячейки (+ иногда несколько "запасных"). Когда ячейка уходит из области видимости, она перемещается в буфер. Когда нужно показать новую ячейку, она не создаётся, а берётся из буфера. Это позволяет экономит память (меньшее количество элементов) и повышает скорость (поменять данные в имеющемся объекте обычно быстрее, чем создать новый).

UITableView

Page 15: iOS-05_2-UIKit

UIKit Framework

Необходимый минимум для работы с таблицей:● создать объект-таблицу и поместить его на видимую view● задать dataSource (объект должен отвечать протоколу UITableViewDataSource)● в DataSource переопределить следующие методы:

- (UITableViewCell *)tableView:(UITableView *)tv cellForRowAtIndexPath:(NSIndexPath *)ip

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section

UITableView

Page 16: iOS-05_2-UIKit

UIKit Framework

Необходимый минимум для работы с таблицей:● создать объект-таблицу и поместить его на видимую view● задать dataSource (объект должен отвечать протоколу UITableViewDataSource)● в DataSource переопределить следующие методы:

- (UITableViewCell *)tableView:(UITableView *)tv cellForRowAtIndexPath:(NSIndexPath *)ip

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section

Для обработки нажатия на элемент списка необходимо:● задать delegate (объект должен отвечать протоколу UITableViewDelegate )● в Delegate переопределить метод

- (void)tableView:(UITableView *)tv didSelectRowAtIndexPath:(NSIndexPath *)ip

UITableView

Page 17: iOS-05_2-UIKit

UIKit Framework

UITableView#import "MyCell.h" //... - (void)viewDidLoad{

[super viewDidLoad];

// При использовании отдельной XIB для вьюхи ячейки MyCell[self.tableView registerNib:[MyCell cellNib] forCellReuseIdentifier:[MyCell cellIdentifier]];

} - (UITableViewCell *)tableView:(UITableView *)tv cellForRowAtIndexPath:(NSIndexPath *)indexPath{

MyCell *myCell = [tv dequeueReusableCellWithIdentifier:[MyCell cellIdentifier]];

// Кастомизация myCell (меняем данные на актуальные для элемента по индексу indexPath)//...//...

return myCell;}

Page 18: iOS-05_2-UIKit

UIKit Framework

UICollectionView

● двумерная коллекция (однородных) элементов

● работа с коллекцией очень похожа на UITableView

● мощные средства кастомизации лейаута элементов

Page 19: iOS-05_2-UIKit

UIKit Framework

Необходимый минимум для работы с коллекцией:● создать объект-коллекцию и поместить его на видимую view● задать dataSource (объект должен отвечать протоколу UICollectionViewDataSource)● в DataSource переопределить следующие методы:

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath

Для обработки нажатия на элемент коллекции необходимо:● задать delegate (объект должен отвечать протоколу UICollectionViewDelegate )● в Delegate переопределить метод

- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath

UICollectionView