Question

我想创建一个内圈的圆圈，如下图所示。我对内圈有困难而且我不知道如何创建它，因此很容易调整百分比（如图像所示）。

到目前为止，我有一个CircleGraph类，它可以画出一个迂回的圆圈和一个只能画50％的内圈。

import Foundation
import UIKit

class CircleGraph: UIView
{

    // Only override drawRect: if you perform custom drawing.
    // An empty implementation adversely affects performance during animation.
    override func drawRect(rect: CGRect)
    {
        super.drawRect(rect)

        // Outer circle
        Colors().getMainColor().setFill()
        let outerPath = UIBezierPath(ovalInRect: rect)
        outerPath.fill()

        // inner circle so far
        let percentage = 0.5
        UIColor.whiteColor().setFill()
        let circlePath = UIBezierPath(arcCenter: CGPoint(x: rect.height/2,y: rect.height/2), radius: CGFloat(rect.height/2), startAngle: CGFloat(-M_PI_2), endAngle:CGFloat(M_PI * 2 * percentage - M_PI_2), clockwise: true)
        circlePath.fill()

    }

}

任何人都可以帮助我吗？

我想要的是与下图相似的内容：

Answer 1

我会选择简单的解决方案并使用UIView和UILabel创建一个UIView作为子视图。如果你使用类似的东西：

// To make it round 
let width = self.frame.width
self.view.layer.cornerRadius = width * 0.5
self.view.layer.masksToBounds = true

为每个子图层。如果你已经将UIView的背景图层的背景颜色设置为红色和上面的UIView图层，使其背景颜色为alpha 0.5，那么你已经达到了这个效果。

如果您不知道如何处理此提示，请尝试提供代码示例。

- 编辑 -

以下是代码示例：

import UIKit

class CircleView: UIView {

    var percentage : Int?

    var transparency : CGFloat?

    var bottomLayerColor : UIColor?
    var middleLayerColor : UIColor?


    init(frame : CGRect, percentage : Int, transparency : CGFloat, bottomLayerColor : UIColor, middleLayerColor : UIColor) {
        super.init(frame : frame)
        self.percentage = percentage
        self.transparency = transparency
        self.bottomLayerColor = bottomLayerColor
        self.middleLayerColor = middleLayerColor

        viewDidLoad()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        viewDidLoad()
    }

    func viewDidLoad() {

        let width = self.frame.width
        let height = self.frame.height
        let textFrame = CGRectMake(0, 0, width, height)
        guard let percentage = self.percentage
            else {
                print("Error")
                return
        }

        let newHeight = (CGFloat(percentage)/100.0)*height
        let middleFrame = CGRectMake(0,height - newHeight, width, newHeight)


        // Set Background Color
        if let bottomLayerColor = self.bottomLayerColor {
            self.backgroundColor = bottomLayerColor
        }
        // Make Bottom Layer Round
        self.layer.cornerRadius = width * 0.5
        self.layer.masksToBounds = true

        // Create Middle Layer
        let middleLayer = UIView(frame: middleFrame)

        if let middleLayerColor = self.middleLayerColor {
            middleLayer.backgroundColor = middleLayerColor
        }

        if let transparency = self.transparency {
            middleLayer.alpha = transparency
        }


        // The Label
        let percentageLayer = UILabel(frame: textFrame)
        percentageLayer.textAlignment = NSTextAlignment.Center
        percentageLayer.textColor = UIColor.whiteColor()
        if let percentage = self.percentage {
            percentageLayer.text = "\(percentage)%"
        }

        // Add Subviews
        self.addSubview(middleLayer)
        self.addSubview(percentageLayer)
    }
}

在视图控制器中使用：

let redColor = UIColor.redColor()
let blueColor = UIColor.blueColor()
let frame = CGRectMake(50, 50, 100, 100)

// 50% Example
let circleView = CircleView(frame: frame, percentage: 50, transparency: 0.5, bottomLayerColor: redColor, middleLayerColor: blueColor)
self.view.addSubview(circleView)

// 33% Example
let newFrame = CGRectMake(50, 150, 120, 120)
let newCircleView = CircleView(frame: newFrame, percentage: 33, transparency: 0.7, bottomLayerColor: UIColor.redColor(), middleLayerColor: UIColor.whiteColor())
self.view.addSubview(newCircleView)

这会产生这样的结果：

创建圈子并将其用作＆＃34;条形图＆＃34;

1 个答案: