可调整大小的居中圆形 UIView

Posted 2023-02-24

【中文标题】可调整大小的居中圆形 UIView

【英文标题】：Resizable Centered Circular UIView

【发布时间】：2015-03-17 18:47:54

【问题描述】：

我正在寻找一种方法来创建可调整大小并保持居中的 CIRCULAR UIView（参见图片）。此示例中的 CIRCULAR 视图是 UIView 子类 WCSDailyGoal。

ContainerView.m

- (void)createDailyGoalView

    _dailyGoalView = [[WCSDailyGoalView alloc] initWithFrame:CGRectMake(0, 0, 200, 200)];
    _dailyGoalView.delegate = self;
    _dailyGoalView.goal = 200;
    _dailyGoalView.center = self.view.center;
    [self.view addSubview:_dailyGoalView];

WCSDailyGoal.m

- (void)setGoal:(CGFloat)goal

    CGPoint saveCenter = self.center;
    CGRect newFrame = CGRectMake(self.frame.origin.x, self.frame.origin.y, goal, goal);
    self.frame = newFrame;
    self.layer.cornerRadius = goal / 2.0;
    self.center = saveCenter;

【参考方案1】：

我可以通过制作自定义视图来实现这个效果（下面的代码在swift中）：

class ResizableCircleView: UIView 

   var maxSize: CGFloat = 100
   var minSize: CGFloat = 10

   private var dragRecognizer: UIPanGestureRecognizer!
   private var currentScale: CGFloat = 1

   private var defaultSize: CGFloat  return frame.width / currentScale 

   override func layoutSubviews() 
      super.layoutSubviews()
      if dragRecognizer == nil
         dragRecognizer = UIPanGestureRecognizer(target: self, action: "handleDrag:")
         addGestureRecognizer(dragRecognizer)
      
      backgroundColor = UIColor.blackColor()
      layer.cornerRadius = frame.width / 2
      clipsToBounds = true
   

   func handleDrag(recognizer: UIPanGestureRecognizer)
      let inTopArea = recognizer.locationInView(self).y < frame.height / 2
      let dy = recognizer.translationInView(self).y

      var newSize = frame.height + (inTopArea ? -1 : 1) * dy
      newSize = min(maxSize, newSize)
      newSize = max(minSize, newSize)
      currentScale = newSize/defaultSize
      transform = CGAffineTransformMakeScale(currentScale, currentScale)

      recognizer.setTranslation(CGPointZero, inView: self)
   

您可以通过将所需值设置为maxSize 和minSize 来调整最大和最小尺寸。希望这会有所帮助。

【讨论】：

哇，太好了！你拯救了我的一天，@Nikita！

【参考方案2】：

从您的问题来看，您并不清楚您想要什么，也不清楚您的问题是什么，但我会根据我对您的意思的假设来尝试回答。

首先 - 视图不应该管理自己的位置。视图控制器或父视图最好在viewDidLayoutSubviews 或layoutSubviews 中视情况而定。 self.center = ...总是是错误的，因为视图的中心应该在哪里取决于其父视图的大小和形状，而子视图不应该知道这些事情它的父级。

其次，没有所谓的“圆形”UIView。您可以制作一个正方形 UIView 并遮盖其图层，使其显示为圆形，方法是使用 CAShapeLayer 制作一个圆形，并使用圆形作为其路径，然后使用 myView.layer.mask = circleShapeLayer 应用遮罩。

要处理交互，请在父视图上使用PanGestureRecognizer。在gestureRecognizerShouldBegin 中，确定触摸是否在大约正确的位置开始交互（在圆圈内？在圆圈半径上？在顶部的圆圈半径上？），并根据需要返回YES 或NO。在您的手势识别器操作函数中，计算新的圆圈大小并使用 myView.bounds = CGRectMake(0, 0, 2*circleRadius, 2*circleRadius); 设置圆形视图的大小。

这应该可以满足您的需求。