Computer >> 컴퓨터 >  >> 프로그램 작성 >> IOS

iOS에서 원형 진행률 표시줄 만들기

<시간/>

iOS 개발자를 위한 원형 진행률 표시줄을 만드는 방법을 아는 것은 매우 중요합니다. 거의 모든 애플리케이션에 이 표시줄이 있습니다.

주로 다운로드 상태, 로딩 상태 또는 기타 진행 상황을 표시하는 데 사용됩니다.

원형 진행률 표시줄을 만드는 것은 새로운 프로그래머에게 매우 지루하고 작업하는 데 어려움을 겪을 수 있습니다.

원형 진행률 표시줄을 만드는 방법에는 여러 가지가 있습니다. 이 게시물에서는 원형 진행률 표시줄을 만드는 가장 간단하고 쉬운 방법 중 하나를 볼 것입니다.

시작하겠습니다

1단계 − Xcode, Single View Application을 열고 이름을 CircularProgress로 지정합니다.

따라서 백분율이 있는 3개의 버튼과 하나의 원형 진행률 보기가 있는 응용 프로그램을 만들 것입니다. 여기에서 버튼을 탭하면 진행률 보기가 백분율에 따라 변경됩니다.

2단계 − 새 클래스 생성, File -> 새 파일 추가 -→ Cocoa Touch 클래스 -→ UIView 클래스의 CircularProgressView

iOS에서 원형 진행률 표시줄 만들기

3단계 − UI 생성, UI 뷰 추가, 아래 이미지와 같은 CircularProgressView 클래스를 추가하고 버튼 3개를 추가하고 이름을 30%, 60%, 95%로 지정합니다.

ViewController.swift의 세 버튼 모두에 대해 @IBAction을 만들고 아래와 같이 이름을 지정합니다.

@IBAction func btn95(_ sender:Any) {}@IBAction func btn30(_ sender:Any) {}@IBAction func btn60(_ sender:Any) {}

ViewController.swift에 UI View용 @IBoutlet을 만들고 이름을 아래와 같이 지정합니다.

@IBOutlet 약한 var circleProgress:CircularProgressView!

iOS에서 원형 진행률 표시줄 만들기

4단계 − CircularProgressView.swift에서 두 개의 객체 진행 레이어와 CAShapeLayer() 유형의 트랙 레이어를 생성합니다.

var progressLyr =CAShapeLayer()var trackLyr =CAShapeLayer()

5단계 write는 아래와 같이 progressLyr 및 trackLyr를 설정하는 방법을 설정했습니다.

var progressClr =UIColor.white { didSet { progressLyr.strokeColor =progressClr.cgColor }}var trackClr =UIColor.white { didSet { trackLyr.strokeColor =trackClr.cgColor }}

여기에서는 progressLyr 및 trackLyr 속성을 설정합니다.

didSet은 속성 관찰자이고 속성 관찰자는 속성 값의 변경 사항을 관찰하고 응답합니다. 새 값이 속성의 현재 값과 같더라도 속성 값이 설정될 때마다 속성 관찰자가 호출됩니다.

5단계 − makeCircularPath 기능을 추가하고 아래 코드를 추가합니다.

func makeCircularPath() { self.backgroundColor =UIColor.clear self.layer.cornerRadius =self.frame.size.width/2 let circlePath =UIBezierPath(arcCenter:CGPoint(x:frame.size.width/2, y) :frame.size.height/2), 반경:(frame.size.width - 1.5)/2, startAngle:CGFloat(-0.5 * .pi), endAngle:CGFloat(1.5 * .pi), 시계 방향:true) trackLyr .path =circlePath.cgPath trackLyr.fillColor =UIColor.clear.cgColor trackLyr.strokeColor =trackClr.cgColor trackLyr.lineWidth =5.0 trackLyr.strokeEnd =1.0 layer.addSublayer(trackLyr) progressLyr.path =circlePath.cgPath progressLyr.fillColor =UIColor .clear.cgColor progressLyr.strokeColor =progressClr.cgColor progressLyr.lineWidth =10.0 progressLyr.strokeEnd =0.0 layer.addSublayer(progressLyr)}

이 함수에서 우리는 순환 경로를 만들고 매개변수와 동작을 정의합니다.

6단계 − 필수 초기화 기능을 추가합니다. 스토리보드에서 UI를 디자인할 때 필수 초기화를 사용해야 하고, 프로그래밍 방식으로 UI를 디자인할 때 초기화 초기화를 사용합니다. 이 경우 초기화 초기화를 사용합니다.

필수 init?(coder aDecoder:NSCoder) { super.init(coder:aDecoder) makeCircularPath()}

7단계 − 이제 진행 상황에 애니메이션을 적용하고 싶으므로 새 함수 setProgressWithAnimation을 만들고 아래 코드를 작성합니다.

func setProgressWithAnimation(duration:TimeInterval, 값:Float) { let animation =CABasicAnimation(keyPath:"strokeEnd") animation.duration =지속 시간 animation.fromValue =0 animation.toValue =값 animation.timingFunction =CAMediaTimingFunction(이름:kCAMediaTimingFunctionLinear ) progressLyr.strokeEnd =CGFloat(값) progressLyr.add(애니메이션, forKey:"animateprogress")}

완료, CircularProgressView.swift의 최종 코드는 다음과 같아야 합니다. 

UIKitclass CircularProgressView 가져오기:UIView { var progressLyr =CAShapeLayer() var trackLyr =CAShapeLayer() 필수 init?(coder aDecoder:NSCoder) { super.init(coder:aDecoder) makeCircularPath() } var progressClr =UIColor.white { didSet { progressLyr.strokeColor =progressClr.cgColor } } var trackClr =UIColor.white { didSet { trackLyr.strokeColor =trackClr.cgColor } } func makeCircularPath() { self.backgroundColor =UIColor.clear self.layer.cornerRadius =self.frame .size.width/2 circlePath =UIBezierPath(arcCenter:CGPoint(x:frame.size.width/2, y:frame.size.height/2), 반경:(frame.size.width - 1.5)/2, startAngle:CGFloat(-0.5 * .pi), endAngle:CGFloat(1.5 * .pi), 시계 방향:true) trackLyr.path =circlePath.cgPath trackLyr.fillColor =UIColor.clear.cgColor trackLyr.strokeColor =trackClr.cgColor trackLyr. lineWidth =5.0 trackLyr.strokeEnd =1.0 layer.addSubl ayer(trackLyr) progressLyr.path =circlePath.cgPath progressLyr.fillColor =UIColor.clear.cgColor progressLyr.strokeColor =progressClr.cgColor progressLyr.lineWidth =10.0 progressLyr.strokeEnd =0.0 layer.addSublayer(progressLyr) } func setProgressWithAnimation(지속 시간:, 값:Float) { 애니메이션 =CABasicAnimation(keyPath:"strokeEnd") animation.duration =기간 animation.fromValue =0 animation.toValue =값 animation.timingFunction =CAMediaTimingFunction(이름:kCAMediaTimingFunctionLinear) progressLyr.strokeEnd =CGFloat(값) progressLyr.add(애니메이션, forKey:"animateprogress") }}

8단계 − 위의 코드를 실행하여 모든 것이 제대로 작동하는지 확인합니다. 아래와 같이 UI가 표시되지만 ViewController.swift에 코드를 추가하지 않았기 때문에 작동하지 않는 것을 볼 수 있습니다.

iOS에서 원형 진행률 표시줄 만들기

9단계 − ViewController.swift에 코드를 추가해 봅시다.

viewDidLoad()에 아래 줄을 작성하면 진행률 표시줄의 색상이 지정됩니다.

circularProgress.trackClr =UIColor.cyancircularProgress.progressClr =UIColor.purple

95%, 30% 및 60% 기간의 버튼 기능에 아래 줄을 추가하십시오.

@IBAction func btn95(_ sender:Any) { circleProgress.setProgressWithAnimation(duration:1.0, value:0.95)}@IBAction func btn30(_ sender:Any) {circularProgress.setProgressWithAnimation(duration):1.0, value:0.30 }@IBAaction func btn60(_ 발신자:Any) {circularProgress.setProgressWithAnimation(기간:1.0, 값:0.60)}

마침내 ViewController.swift에 아래 코드가 있어야 합니다. 

UIKitclass ViewController 가져오기:UIViewController { @IBOutlet 약한 var circleProgress:CircularProgressView! 재정의 func viewDidLoad() { super.viewDidLoad() circleProgress.trackClr =UIColor.cyan circleProgress.progressClr =UIColor.purple } @IBAction func btn95(_ sender:Any) { circleProgress.setProgressWithAnimation(지속 시간:1.0, 값:0.95) } @IBAction func btn30(_ sender:Any) { circleProgress.setProgressWithAnimation(duration:1.0, value:0.30) } @IBAction func btn60(_ sender:Any) { circleProgress.setProgressWithAnimation(duration:1.0, value:0.60) /사전> 

 버튼 기능에서 값과 지속 시간을 사용하여 setProgressWithAnimation을 호출합니다.
 

 다 끝났습니다. 애플리케이션을 실행하고 30% 또는 60% 또는 95%를 탭합니다. 보기가 움직이는 것을 볼 수 있습니다. 
 

 iOS에서 원형 진행률 표시줄 만들기