FLEXExplorerToolbar.m 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271
  1. //
  2. // FLEXExplorerToolbar.m
  3. // Flipboard
  4. //
  5. // Created by Ryan Olson on 4/4/14.
  6. // Copyright (c) 2020 FLEX Team. All rights reserved.
  7. //
  8. #import "FLEXColor.h"
  9. #import "FLEXExplorerToolbar.h"
  10. #import "FLEXExplorerToolbarItem.h"
  11. #import "FLEXResources.h"
  12. #import "FLEXUtility.h"
  13. @interface FLEXExplorerToolbar ()
  14. @property (nonatomic, readwrite) FLEXExplorerToolbarItem *globalsItem;
  15. @property (nonatomic, readwrite) FLEXExplorerToolbarItem *hierarchyItem;
  16. @property (nonatomic, readwrite) FLEXExplorerToolbarItem *selectItem;
  17. @property (nonatomic, readwrite) FLEXExplorerToolbarItem *recentItem;
  18. @property (nonatomic, readwrite) FLEXExplorerToolbarItem *moveItem;
  19. @property (nonatomic, readwrite) FLEXExplorerToolbarItem *closeItem;
  20. @property (nonatomic, readwrite) UIView *dragHandle;
  21. @property (nonatomic) UIImageView *dragHandleImageView;
  22. @property (nonatomic) UIView *selectedViewDescriptionContainer;
  23. @property (nonatomic) UIView *selectedViewDescriptionSafeAreaContainer;
  24. @property (nonatomic) UIView *selectedViewColorIndicator;
  25. @property (nonatomic) UILabel *selectedViewDescriptionLabel;
  26. @property (nonatomic,readwrite) UIView *backgroundView;
  27. @end
  28. @implementation FLEXExplorerToolbar
  29. - (id)initWithFrame:(CGRect)frame {
  30. self = [super initWithFrame:frame];
  31. if (self) {
  32. // Background
  33. self.backgroundView = [UIView new];
  34. self.backgroundView.backgroundColor = [FLEXColor secondaryBackgroundColorWithAlpha:0.95];
  35. [self addSubview:self.backgroundView];
  36. // Drag handle
  37. self.dragHandle = [UIView new];
  38. self.dragHandle.backgroundColor = UIColor.clearColor;
  39. #if !TARGET_OS_TV
  40. self.dragHandleImageView = [[UIImageView alloc] initWithImage:FLEXResources.dragHandle];
  41. #else
  42. self.dragHandleImageView = [[UIImageView alloc] initWithImage:nil];
  43. #endif
  44. self.dragHandleImageView.tintColor = [FLEXColor.iconColor colorWithAlphaComponent:0.666];
  45. [self.dragHandle addSubview:self.dragHandleImageView];
  46. [self addSubview:self.dragHandle];
  47. // Buttons
  48. self.globalsItem = [FLEXExplorerToolbarItem itemWithTitle:@"menu" image:FLEXResources.globalsIcon];
  49. self.hierarchyItem = [FLEXExplorerToolbarItem itemWithTitle:@"views" image:FLEXResources.hierarchyIcon];
  50. self.selectItem = [FLEXExplorerToolbarItem itemWithTitle:@"select" image:FLEXResources.selectIcon];
  51. self.recentItem = [FLEXExplorerToolbarItem itemWithTitle:@"recent" image:FLEXResources.recentIcon];
  52. self.moveItem = [FLEXExplorerToolbarItem itemWithTitle:@"move" image:FLEXResources.moveIcon sibling:self.recentItem];
  53. self.closeItem = [FLEXExplorerToolbarItem itemWithTitle:@"close" image:FLEXResources.closeIcon];
  54. // Selected view box //
  55. self.selectedViewDescriptionContainer = [UIView new];
  56. self.selectedViewDescriptionContainer.backgroundColor = [FLEXColor tertiaryBackgroundColorWithAlpha:0.95];
  57. self.selectedViewDescriptionContainer.hidden = YES;
  58. [self addSubview:self.selectedViewDescriptionContainer];
  59. self.selectedViewDescriptionSafeAreaContainer = [UIView new];
  60. self.selectedViewDescriptionSafeAreaContainer.backgroundColor = UIColor.clearColor;
  61. [self.selectedViewDescriptionContainer addSubview:self.selectedViewDescriptionSafeAreaContainer];
  62. self.selectedViewColorIndicator = [UIView new];
  63. self.selectedViewColorIndicator.backgroundColor = UIColor.redColor;
  64. [self.selectedViewDescriptionSafeAreaContainer addSubview:self.selectedViewColorIndicator];
  65. self.selectedViewDescriptionLabel = [UILabel new];
  66. self.selectedViewDescriptionLabel.backgroundColor = UIColor.clearColor;
  67. self.selectedViewDescriptionLabel.font = [[self class] descriptionLabelFont];
  68. [self.selectedViewDescriptionSafeAreaContainer addSubview:self.selectedViewDescriptionLabel];
  69. // toolbarItems
  70. self.toolbarItems = @[_globalsItem, _hierarchyItem, _selectItem, _moveItem, _closeItem];
  71. }
  72. return self;
  73. }
  74. - (void)layoutSubviews {
  75. [super layoutSubviews];
  76. CGRect safeArea = [self safeArea];
  77. // Drag Handle
  78. const CGFloat kToolbarItemHeight = [[self class] toolbarItemHeight];
  79. self.dragHandle.frame = CGRectMake(CGRectGetMinX(safeArea), CGRectGetMinY(safeArea), [[self class] dragHandleWidth], kToolbarItemHeight);
  80. CGRect dragHandleImageFrame = self.dragHandleImageView.frame;
  81. dragHandleImageFrame.origin.x = FLEXFloor((self.dragHandle.frame.size.width - dragHandleImageFrame.size.width) / 2.0);
  82. dragHandleImageFrame.origin.y = FLEXFloor((self.dragHandle.frame.size.height - dragHandleImageFrame.size.height) / 2.0);
  83. self.dragHandleImageView.frame = dragHandleImageFrame;
  84. CGFloat itemPadding = 0;
  85. #if TARGET_OS_TV
  86. itemPadding = 40;
  87. #endif
  88. // Toolbar Items
  89. CGFloat originX = CGRectGetMaxX(self.dragHandle.frame);
  90. CGFloat originY = CGRectGetMinY(safeArea);
  91. CGFloat height = kToolbarItemHeight;
  92. CGFloat width = FLEXFloor((CGRectGetWidth(safeArea) - CGRectGetWidth(self.dragHandle.frame)) / self.toolbarItems.count);
  93. width = width - itemPadding;
  94. for (FLEXExplorerToolbarItem *toolbarItem in self.toolbarItems) {
  95. toolbarItem.currentItem.frame = CGRectMake(originX, originY, width, height);
  96. originX = CGRectGetMaxX(toolbarItem.currentItem.frame) + itemPadding;
  97. }
  98. // Make sure the last toolbar item goes to the edge to account for any accumulated rounding effects.
  99. UIView *lastToolbarItem = self.toolbarItems.lastObject.currentItem;
  100. CGRect lastToolbarItemFrame = lastToolbarItem.frame;
  101. lastToolbarItemFrame.size.width = CGRectGetMaxX(safeArea) - lastToolbarItemFrame.origin.x;
  102. lastToolbarItem.frame = lastToolbarItemFrame;
  103. self.backgroundView.frame = CGRectMake(0, 0, CGRectGetWidth(self.bounds), kToolbarItemHeight);
  104. const CGFloat kSelectedViewColorDiameter = [[self class] selectedViewColorIndicatorDiameter];
  105. const CGFloat kDescriptionLabelHeight = [[self class] descriptionLabelHeight];
  106. const CGFloat kHorizontalPadding = [[self class] horizontalPadding];
  107. const CGFloat kDescriptionVerticalPadding = [[self class] descriptionVerticalPadding];
  108. const CGFloat kDescriptionContainerHeight = [[self class] descriptionContainerHeight];
  109. CGRect descriptionContainerFrame = CGRectZero;
  110. descriptionContainerFrame.size.width = CGRectGetWidth(self.bounds);
  111. descriptionContainerFrame.size.height = kDescriptionContainerHeight;
  112. descriptionContainerFrame.origin.x = CGRectGetMinX(self.bounds);
  113. descriptionContainerFrame.origin.y = CGRectGetMaxY(self.bounds) - kDescriptionContainerHeight;
  114. self.selectedViewDescriptionContainer.frame = descriptionContainerFrame;
  115. CGRect descriptionSafeAreaContainerFrame = CGRectZero;
  116. descriptionSafeAreaContainerFrame.size.width = CGRectGetWidth(safeArea);
  117. descriptionSafeAreaContainerFrame.size.height = kDescriptionContainerHeight;
  118. descriptionSafeAreaContainerFrame.origin.x = CGRectGetMinX(safeArea);
  119. descriptionSafeAreaContainerFrame.origin.y = CGRectGetMinY(safeArea);
  120. self.selectedViewDescriptionSafeAreaContainer.frame = descriptionSafeAreaContainerFrame;
  121. // Selected View Color
  122. CGRect selectedViewColorFrame = CGRectZero;
  123. selectedViewColorFrame.size.width = kSelectedViewColorDiameter;
  124. selectedViewColorFrame.size.height = kSelectedViewColorDiameter;
  125. selectedViewColorFrame.origin.x = kHorizontalPadding;
  126. selectedViewColorFrame.origin.y = FLEXFloor((kDescriptionContainerHeight - kSelectedViewColorDiameter) / 2.0);
  127. self.selectedViewColorIndicator.frame = selectedViewColorFrame;
  128. #if !TARGET_OS_TV
  129. self.selectedViewColorIndicator.layer.cornerRadius = ceil(selectedViewColorFrame.size.height / 2.0);
  130. #endif
  131. // Selected View Description
  132. CGRect descriptionLabelFrame = CGRectZero;
  133. CGFloat descriptionOriginX = CGRectGetMaxX(selectedViewColorFrame) + kHorizontalPadding;
  134. descriptionLabelFrame.size.height = kDescriptionLabelHeight;
  135. descriptionLabelFrame.origin.x = descriptionOriginX;
  136. descriptionLabelFrame.origin.y = kDescriptionVerticalPadding;
  137. descriptionLabelFrame.size.width = CGRectGetMaxX(self.selectedViewDescriptionContainer.bounds) - kHorizontalPadding - descriptionOriginX;
  138. self.selectedViewDescriptionLabel.frame = descriptionLabelFrame;
  139. }
  140. #pragma mark - Setter Overrides
  141. - (void)setToolbarItems:(NSArray<FLEXExplorerToolbarItem *> *)toolbarItems {
  142. if (_toolbarItems == toolbarItems) {
  143. return;
  144. }
  145. // Remove old toolbar items, if any
  146. for (FLEXExplorerToolbarItem *item in _toolbarItems) {
  147. [item.currentItem removeFromSuperview];
  148. }
  149. // Trim to 5 items if necessary
  150. if (toolbarItems.count > 5) {
  151. toolbarItems = [toolbarItems subarrayWithRange:NSMakeRange(0, 5)];
  152. }
  153. for (FLEXExplorerToolbarItem *item in toolbarItems) {
  154. [self addSubview:item.currentItem];
  155. }
  156. _toolbarItems = toolbarItems.copy;
  157. // Lay out new items
  158. [self setNeedsLayout];
  159. [self layoutIfNeeded];
  160. }
  161. - (void)setSelectedViewOverlayColor:(UIColor *)selectedViewOverlayColor {
  162. if (![_selectedViewOverlayColor isEqual:selectedViewOverlayColor]) {
  163. _selectedViewOverlayColor = selectedViewOverlayColor;
  164. self.selectedViewColorIndicator.backgroundColor = selectedViewOverlayColor;
  165. }
  166. }
  167. - (void)setSelectedViewDescription:(NSString *)selectedViewDescription {
  168. if (![_selectedViewDescription isEqual:selectedViewDescription]) {
  169. _selectedViewDescription = selectedViewDescription;
  170. self.selectedViewDescriptionLabel.text = selectedViewDescription;
  171. BOOL showDescription = selectedViewDescription.length > 0;
  172. self.selectedViewDescriptionContainer.hidden = !showDescription;
  173. }
  174. }
  175. #pragma mark - Sizing Convenience Methods
  176. + (UIFont *)descriptionLabelFont {
  177. return [UIFont systemFontOfSize:12.0];
  178. }
  179. + (CGFloat)toolbarItemHeight {
  180. #if TARGET_OS_TV
  181. return 68.0;
  182. #endif
  183. return 44.0;
  184. }
  185. + (CGFloat)dragHandleWidth {
  186. return FLEXResources.dragHandle.size.width;
  187. }
  188. + (CGFloat)descriptionLabelHeight {
  189. return ceil([[self descriptionLabelFont] lineHeight]);
  190. }
  191. + (CGFloat)descriptionVerticalPadding {
  192. return 2.0;
  193. }
  194. + (CGFloat)descriptionContainerHeight {
  195. return [self descriptionVerticalPadding] * 2.0 + [self descriptionLabelHeight];
  196. }
  197. + (CGFloat)selectedViewColorIndicatorDiameter {
  198. return ceil([self descriptionLabelHeight] / 2.0);
  199. }
  200. + (CGFloat)horizontalPadding {
  201. return 11.0;
  202. }
  203. - (CGSize)sizeThatFits:(CGSize)size {
  204. CGFloat height = 0.0;
  205. height += [[self class] toolbarItemHeight];
  206. height += [[self class] descriptionContainerHeight];
  207. return CGSizeMake(size.width, height);
  208. }
  209. - (CGRect)safeArea {
  210. CGRect safeArea = self.bounds;
  211. if (@available(iOS 11.0, *)) {
  212. safeArea = UIEdgeInsetsInsetRect(self.bounds, self.safeAreaInsets);
  213. }
  214. return safeArea;
  215. }
  216. @end