ios – 可以将视图放在彼此之上

前端之家收集整理的这篇文章主要介绍了ios – 可以将视图放在彼此之上前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在构建一个Watch应用程序,其中我要覆盖WKInterface Image与一组WKInterfaceLabel对象.在StoryBoard编辑器中似乎无法做到这一点.

有没有人能够为Watch App设计出相互之间的观点?

PS.我知道WKInterfaceGroup setBackgroundImage方法.因为我想在WKInterfaceImage里面做一些动画,所以setBackgroundImage不会让我失望

解决方法

您无法将WKInterfaceObjects布置在彼此之上.您可以将标签渲染在图像上,然后进行设置.您将必须为动画的每个帧渲染标签.我在手表应用程序中执行此按钮.我生成一个我的UI的大块图像,然后生成动画的每一帧,并覆盖每个帧的按钮文本.然后剪切每个框架的图像,以便我可以在每个按钮上的动画.当您使用该应用程序时,它看起来像是在按钮下的动画,实际上它是4种不同的动画在4个不同的按钮.

编辑

我想我会添加一些更多的细节.这是我的应用程序的屏幕截图.我猜你想做类似的事情.

首先在我的故事板上,您需要确保您的组的间距为零.

要创建这个UI,我使用这个助手类.我已经编辑了这个课程,只关注所需的部分.

  1. typedef struct
  2. {
  3. CGRect top;
  4. CGRect left;
  5. CGRect right;
  6. CGRect bottom;
  7. } ButtonRects;
  8.  
  9. @interface GPWatchMapImage ()
  10.  
  11. @property (readwrite,nonatomic) UIImage* topImage;
  12. @property (readwrite,nonatomic) UIImage* bottomImage;
  13. @property (readwrite,nonatomic) UIImage* leftImage;
  14. @property (readwrite,nonatomic) UIImage* rightImage;
  15.  
  16. @property (readwrite,nonatomic) CGRect topRect;
  17. @property (readwrite,nonatomic) CGRect bottomRect;
  18. @property (readwrite,nonatomic) CGRect leftRect;
  19. @property (readwrite,nonatomic) CGRect rightRect;
  20.  
  21.  
  22. @property (readwrite,nonatomic) UIImage* fullImageWithoutArrows;
  23.  
  24. @property BOOL addedArrows;
  25.  
  26.  
  27. @end
  28.  
  29. @implementation GPWatchMapImage
  30.  
  31. -(instancetype)init
  32. {
  33. self = [super init];
  34. if (self)
  35. {
  36.  
  37. }
  38. return self;
  39. }
  40.  
  41.  
  42.  
  43. -(UIImage*)leftImage
  44. {
  45. if (_leftImage == nil)
  46. {
  47. [self breakUpForButtons];
  48. }
  49. return _leftImage;
  50. }
  51.  
  52. -(UIImage*)rightImage
  53. {
  54. if (_rightImage == nil)
  55. {
  56. [self breakUpForButtons];
  57. }
  58. return _rightImage;
  59. }
  60.  
  61. -(UIImage*)topImage
  62. {
  63. if (_topImage == nil)
  64. {
  65. [self breakUpForButtons];
  66. }
  67. return _topImage;
  68. }
  69.  
  70. -(UIImage*)bottomImage
  71. {
  72. if (_bottomImage == nil)
  73. {
  74. [self breakUpForButtons];
  75. }
  76. return _bottomImage;
  77. }
  78.  
  79. -(UIImage*)fullImageWithoutArrows
  80. {
  81. [self fullImage]; //make sure we have the full image
  82. if (_fullImageWithoutArrows != nil)
  83. {
  84. return _fullImageWithoutArrows;
  85. }
  86. return _fullImage;
  87. }
  88.  
  89. -(UIImage*)fullImage
  90. {
  91. if (_fullImage == nil)
  92. {
  93. //This is the rect to create the image in
  94. CGRect rect = CGRectMake(0,self.watchSize.width,self.watchSize.height);
  95.  
  96. //This is how I generate map images. You will need to do something else
  97. self.generatedMapInfo = [[GPCustomMapMaker instance] makeCustomMapFromConfig:self.mapConfig];
  98. _fullImage = self.generatedMapInfo.mapImage;
  99.  
  100. }
  101.  
  102. if (self.showMapArrows && !self.addedArrows)
  103. {
  104. //Add the arrows
  105. [self addButtonArrowsToFullImage];
  106. }
  107.  
  108.  
  109. return _fullImage;
  110. }
  111.  
  112.  
  113. -(void)addButtonArrowsToFullImage
  114. {
  115. self.addedArrows = YES;
  116.  
  117. ButtonRects rects = [self buttonRects];
  118. UIImage* img = self.fullImage;
  119. self.fullImageWithoutArrows = img; //save for animations
  120. UIGraphicsBeginImageContext(img.size);
  121.  
  122. UIColor* color = [UIColor colorWithRed:.4 green:.4 blue:.4 alpha:.6];
  123.  
  124. //CGSize arrowSize = CGSizeMake(24,4);
  125. CGSize arrowSize = CGSizeMake(48,8);
  126. CGFloat edgeOffset = 26;
  127. CGContextRef ctx = UIGraphicsGetCurrentContext();
  128. CGContextSetLineWidth(ctx,6);
  129. CGContextSetLineJoin(ctx,kCGLineJoinRound);
  130. CGContextSetLineCap(ctx,kCGLineCapRound);
  131. CGContextSetStrokeColorWithColor(ctx,color.CGColor);
  132.  
  133. [img drawAtPoint:CGPointMake(0,0)];
  134.  
  135.  
  136. //Left arrow
  137. CGPoint leftCenter = CGPointMake(rects.left.origin.x + edgeOffset,rects.left.origin.y + rects.left.size.height/2);
  138. CGContextBeginPath(ctx);
  139. CGContextMoveToPoint(ctx,leftCenter.x + arrowSize.height,leftCenter.y - arrowSize.width/2);
  140. CGContextAddLineToPoint(ctx,leftCenter.x,leftCenter.y);
  141. CGContextAddLineToPoint(ctx,leftCenter.y + arrowSize.width/2);
  142. CGContextStrokePath(ctx);
  143.  
  144. CGPoint rightCenter = CGPointMake(rects.right.origin.x + rects.right.size.width - edgeOffset,rects.right.origin.y + rects.right.size.height/2);
  145. CGContextBeginPath(ctx);
  146. CGContextMoveToPoint(ctx,rightCenter.x,rightCenter.y - arrowSize.width/2);
  147. CGContextAddLineToPoint(ctx,rightCenter.x + arrowSize.height,rightCenter.y);
  148. CGContextAddLineToPoint(ctx,rightCenter.y + arrowSize.width/2);
  149. CGContextStrokePath(ctx);
  150.  
  151.  
  152. CGPoint topCenter = CGPointMake(rects.top.origin.x + rects.top.size.width/2,rects.top.origin.y + edgeOffset);
  153. CGContextBeginPath(ctx);
  154. CGContextMoveToPoint(ctx,topCenter.x - arrowSize.width/2,topCenter.y + arrowSize.height);
  155. CGContextAddLineToPoint(ctx,topCenter.x,topCenter.y);
  156. CGContextAddLineToPoint(ctx,topCenter.x + arrowSize.width/2,topCenter.y + arrowSize.height);
  157. CGContextStrokePath(ctx);
  158.  
  159. CGPoint bottomCenter = CGPointMake(rects.bottom.origin.x + rects.bottom.size.width/2,rects.bottom.origin.y + rects.bottom.size.height - edgeOffset);
  160. CGContextBeginPath(ctx);
  161. CGContextMoveToPoint(ctx,bottomCenter.x - arrowSize.width/2,bottomCenter.y);
  162. CGContextAddLineToPoint(ctx,bottomCenter.x,bottomCenter.y + arrowSize.height);
  163. CGContextAddLineToPoint(ctx,bottomCenter.x + arrowSize.width/2,bottomCenter.y);
  164. CGContextStrokePath(ctx);
  165.  
  166.  
  167. UIImage* imgWithButtons = UIGraphicsGetImageFromCurrentImageContext();
  168. UIGraphicsEndImageContext();
  169. _fullImage = imgWithButtons;
  170. }
  171.  
  172. -(UIImage*)subImageInRect:(CGRect)rect fromImage:(UIImage*)image
  173. {
  174. UIGraphicsBeginImageContext(rect.size);
  175.  
  176. [image drawInRect:CGRectMake(-rect.origin.x,-rect.origin.y,image.size.width,image.size.height)];
  177.  
  178. UIImage* newImage = UIGraphicsGetImageFromCurrentImageContext();
  179. UIGraphicsEndImageContext();
  180. return newImage;
  181. }
  182.  
  183. -(ButtonRects)buttonRects
  184. {
  185. UIImage* img = self.fullImage;
  186. CGSize size = self.watchSize;
  187. CGFloat topHeight = size.height * .25;
  188. CGFloat bottomHeight = size.height * .25;
  189. CGFloat middleHeight = size.height * .5;
  190.  
  191. CGRect topRect = CGRectMake(0,size.width,topHeight);
  192. CGRect leftRect = CGRectMake(0,topHeight,img.size.width/2.0,middleHeight);
  193. CGRect rightRect = CGRectMake(img.size.width/2.0,middleHeight);
  194. CGRect bottomRect = CGRectMake(0,topHeight + middleHeight,bottomHeight);
  195.  
  196. ButtonRects rects;
  197. rects.top = topRect;
  198. rects.bottom = bottomRect;
  199. rects.left = leftRect;
  200. rects.right = rightRect;
  201.  
  202. return rects;
  203. }
  204.  
  205. -(void)breakUpForButtons
  206. {
  207. UIImage* img = self.fullImage;
  208. ButtonRects rects = [self buttonRects];
  209.  
  210. _topImage = [self subImageInRect:rects.top fromImage:img];
  211. _leftImage = [self subImageInRect:rects.left fromImage:img];
  212. _rightImage = [self subImageInRect:rects.right fromImage:img];
  213. _bottomImage = [self subImageInRect:rects.bottom fromImage:img];
  214. }
  215.  
  216. @end

接下来在我的WKInterfaceController类中,我做这个动画.

  1. typedef NS_ENUM(NSInteger,GPWatchImageAnimation)
  2. {
  3. GPWatchImageAnimationNone,GPWatchImageAnimationSlideLeftToRight,GPWatchImageAnimationSlideRighToLeft,GPWatchImageAnimationSlideTopToBottom,GPWatchImageAnimationSlideBottomToTop,GPWatchImageAnimationZoomIn,GPWatchImageAnimationZoomOut
  4. };
  5.  
  6. #define kNumImagesInMapAnimations 6
  7. #define kMapAnimatinonDuration 0.4
  8.  
  9. ...
  10.  
  11. -(void)updateMapImageWithAnimation:(GPWatchImageAnimation)animation
  12. {
  13. GPWatchMapImage* prevIoUsImage = self.currentMapImage;
  14.  
  15. //This gets the size of the full image that you want
  16. CGSize size = [self mapSize];
  17. self.currentMapImage = [[GPWatchMapImage alloc] init];
  18. self.currentMapImage.watchSize = size;
  19.  
  20. //Check if we have a prevIoUs image to animate from
  21. if (prevIoUsImage != nil && animation != GPWatchImageAnimationNone)
  22. {
  23. NSDictionary* animatedImage = [self animateFromImage:prevIoUsImage toImage:self.currentMapImage withAnimation:animation];
  24. [self.mapTopImage setImage:[animatedImage objectForKey:@"top"]];
  25. [self.mapLeftImage setImage:[animatedImage objectForKey:@"left"]];
  26. [self.mapRightImage setImage:[animatedImage objectForKey:@"right"]];
  27. [self.mapBottomImage setImage:[animatedImage objectForKey:@"bottom"]];
  28.  
  29. [self.mapTopImage startAnimatingWithImagesInRange:NSMakeRange(0,kNumImagesInMapAnimations) duration:kMapAnimatinonDuration repeatCount:1];
  30. [self.mapLeftImage startAnimatingWithImagesInRange:NSMakeRange(0,kNumImagesInMapAnimations) duration:kMapAnimatinonDuration repeatCount:1];
  31. [self.mapRightImage startAnimatingWithImagesInRange:NSMakeRange(0,kNumImagesInMapAnimations) duration:kMapAnimatinonDuration repeatCount:1];
  32. [self.mapBottomImage startAnimatingWithImagesInRange:NSMakeRange(0,kNumImagesInMapAnimations) duration:kMapAnimatinonDuration repeatCount:1];
  33. }
  34. else
  35. {
  36. [self.mapTopImage setImage:self.currentMapImage.topImage];
  37. [self.mapLeftImage setImage:self.currentMapImage.leftImage];
  38. [self.mapRightImage setImage:self.currentMapImage.rightImage];
  39. [self.mapBottomImage setImage:self.currentMapImage.bottomImage];
  40. }
  41.  
  42. }
  43.  
  44. -(NSDictionary*)animateFromImage:(GPWatchMapImage*)fromImage toImage:(GPWatchMapImage*)toImage withAnimation:(GPWatchImageAnimation)animation
  45. {
  46. NSMutableArray* topAnimatedImages = [[NSMutableArray alloc] initWithCapacity:kNumImagesInMapAnimations];
  47. NSMutableArray* bottomAnimatedImages = [[NSMutableArray alloc] initWithCapacity:kNumImagesInMapAnimations];
  48. NSMutableArray* leftAnimatedImages = [[NSMutableArray alloc] initWithCapacity:kNumImagesInMapAnimations];
  49. NSMutableArray* rightAnimatedImages = [[NSMutableArray alloc] initWithCapacity:kNumImagesInMapAnimations];
  50.  
  51. CGSize size = fromImage.fullImage.size;
  52. for (int step = 0; step < kNumImagesInMapAnimations; step++)
  53. {
  54. UIGraphicsBeginImageContext(size);
  55.  
  56. //render this step
  57. if (animation == GPWatchImageAnimationSlideLeftToRight)
  58. {
  59. CGFloat stepSize = (size.width/2)/kNumImagesInMapAnimations;
  60. CGPoint fromPoint = CGPointMake(-(step+1)*stepSize,0);
  61. CGPoint toPoint = CGPointMake(size.width/2 - (step+1)*stepSize,0);
  62. [fromImage.fullImageWithoutArrows drawAtPoint:fromPoint];
  63. [toImage.fullImageWithoutArrows drawAtPoint:toPoint];
  64. }
  65. else if (animation == GPWatchImageAnimationSlideRighToLeft)
  66. {
  67. CGFloat stepSize = (size.width/2)/kNumImagesInMapAnimations;
  68. CGPoint fromPoint = CGPointMake((step+1)*stepSize,0);
  69. CGPoint toPoint = CGPointMake(-size.width/2 + (step+1)*stepSize,0);
  70. [fromImage.fullImageWithoutArrows drawAtPoint:fromPoint];
  71. [toImage.fullImageWithoutArrows drawAtPoint:toPoint];
  72. }
  73. else if (animation == GPWatchImageAnimationSlideTopToBottom)
  74. {
  75. CGFloat stepSize = (size.height/2)/kNumImagesInMapAnimations;
  76. CGPoint fromPoint = CGPointMake(0,(step+1)*stepSize);
  77. CGPoint toPoint = CGPointMake(0,-size.height/2 + (step+1)*stepSize);
  78. [fromImage.fullImageWithoutArrows drawAtPoint:fromPoint];
  79. [toImage.fullImageWithoutArrows drawAtPoint:toPoint];
  80. }
  81. else if (animation == GPWatchImageAnimationSlideBottomToTop)
  82. {
  83. CGFloat stepSize = (size.height/2)/kNumImagesInMapAnimations;
  84. CGPoint fromPoint = CGPointMake(0,-(step+1)*stepSize);
  85. CGPoint toPoint = CGPointMake(0,size.height/2 - (step+1)*stepSize);
  86. [fromImage.fullImageWithoutArrows drawAtPoint:fromPoint];
  87. [toImage.fullImageWithoutArrows drawAtPoint:toPoint];
  88. }
  89. else if (animation == GPWatchImageAnimationZoomOut)
  90. {
  91. CGFloat yStepSize = (size.height/2)/kNumImagesInMapAnimations;
  92. CGFloat xStepSize = (size.width/2)/kNumImagesInMapAnimations;
  93. //CGRect fromRect = CGRectMake((step + 1)*xStepSize,(step + 1)*yStepSize,size.width - 2*(step + 1)*xStepSize,size.height - 2*(step + 1)*yStepSize);
  94. CGRect toRect = CGRectMake(-size.width/2 + (step+1)*xStepSize,-size.height/2 + (step+1)*yStepSize,size.width + 2*(kNumImagesInMapAnimations - step - 1)*xStepSize,size.height + 2*(kNumImagesInMapAnimations - step - 1)*yStepSize);
  95. [toImage.fullImageWithoutArrows drawInRect:toRect];
  96.  
  97. //double alpha = (double)(kNumImagesInMapAnimations - step - 1)/(double)kNumImagesInMapAnimations;
  98. //CGContextSetAlpha(UIGraphicsGetCurrentContext(),alpha);
  99. //[fromImage.fullImageWithoutArrows drawInRect:fromRect];
  100. //CGContextSetAlpha(UIGraphicsGetCurrentContext(),1.0);
  101. }
  102. else if (animation == GPWatchImageAnimationZoomIn)
  103. {
  104. if (step == kNumImagesInMapAnimations -1)
  105. {
  106. [toImage.fullImageWithoutArrows drawAtPoint:CGPointMake(0,0)];
  107. }
  108. else
  109. {
  110. CGFloat yStepSize = (size.height/2)/kNumImagesInMapAnimations;
  111. CGFloat xStepSize = (size.width/2)/kNumImagesInMapAnimations;
  112. CGRect fromRect = CGRectMake(-(step + 1)*xStepSize,-(step + 1)*yStepSize,size.width + 2*(step + 1)*xStepSize,size.height + 2*(step + 1)*yStepSize);
  113. //CGRect toRect = CGRectMake(-size.width/2 + (step+1)*xStepSize,size.height + 2*(kNumImagesInMapAnimations - step - 1)*yStepSize);
  114. [fromImage.fullImageWithoutArrows drawInRect:fromRect];
  115. //[toImage.fullImageWithoutArrows drawInRect:fromRect];
  116. }
  117. }
  118. else
  119. {
  120. [toImage.fullImageWithoutArrows drawAtPoint:CGPointMake(0,0)];
  121. }
  122.  
  123. UIImage* stepImg = UIGraphicsGetImageFromCurrentImageContext();
  124. UIGraphicsEndImageContext();
  125.  
  126.  
  127. //Get each of the pieces of the image
  128. GPWatchMapImage* mapImage = [[GPWatchMapImage alloc] init];
  129. mapImage.showMapArrows = self.showMapArrows;
  130. mapImage.fullImage = stepImg;
  131. mapImage.watchSize = [self mapSize];
  132. [topAnimatedImages addObject:mapImage.topImage];
  133. [bottomAnimatedImages addObject:mapImage.bottomImage];
  134. [leftAnimatedImages addObject:mapImage.leftImage];
  135. [rightAnimatedImages addObject:mapImage.rightImage];
  136. }
  137.  
  138. UIImage* topAnimatedImage = [UIImage animatedImageWithImages:topAnimatedImages duration:kMapAnimatinonDuration];
  139. UIImage* bottomAnimatedImage = [UIImage animatedImageWithImages:bottomAnimatedImages duration:kMapAnimatinonDuration];
  140. UIImage* leftAnimatedImage = [UIImage animatedImageWithImages:leftAnimatedImages duration:kMapAnimatinonDuration];
  141. UIImage* rightAnimatedImage = [UIImage animatedImageWithImages:rightAnimatedImages duration:kMapAnimatinonDuration];
  142. return @{@"top": topAnimatedImage,@"bottom": bottomAnimatedImage,@"left": leftAnimatedImage,@"right": rightAnimatedImage};
  143. }

猜你在找的iOS相关文章