बनाना UIProgressView गोलाकार कोने

Question

मैं निम्नलिखित गुण

progressView.progressTintColor = UIColor.appChallengeColorWithAlpha(1.0) 
progressView.trackTintColor = UIColor.clearColor() 
progressView.clipsToBounds = true 
progressView.layer.cornerRadius = 5 

के साथ एक UIProgressView बनाया है मैं सीमा के लिए एक UIView उपयोग कर रहा हूँ। यह उसकी प्रगति = 1 की तरह प्रतीत होता है, जो वास्तव में मैं चाहता हूं।

लेकिन अगर प्रगति मूल्य से कम 1. कोनों के रूप में यह होना चाहिए गोल नहीं कर रहे हैं।

Am मैं कुछ याद आ रही? मैं इसे गोल कोने कैसे बना सकता हूं?

Answer 1

खोज और प्रयास करने के बाद मैंने अपना स्वयं का कस्टम प्रगति दृश्य बनाने का फैसला किया। यहां किसी भी व्यक्ति के लिए कोड है जो उन्हें एक ही समस्या में selevs मिल सकता है।

import Foundation 
import UIKit 

class CustomHorizontalProgressView: UIView { 
var progress: CGFloat = 0.0 { 

    didSet { 
     setProgress() 
    } 
} 

override init(frame: CGRect) { 
    super.init(frame: frame) 

    setup() 
} 

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

    setup() 
} 

func setup() { 
    self.backgroundColor = UIColor.clearColor() 
} 

override func drawRect(rect: CGRect) { 
    super.drawRect(rect) 

    setProgress() 
} 

func setProgress() { 
    var progress = self.progress 
    progress = progress > 1.0 ? progress/100 : progress 

    self.layer.cornerRadius = CGRectGetHeight(self.frame)/2.0 
    self.layer.borderColor = UIColor.grayColor().CGColor 
    self.layer.borderWidth = 1.0 

    let margin: CGFloat = 6.0 
    var width = (CGRectGetWidth(self.frame) - margin) * progress 
    let height = CGRectGetHeight(self.frame) - margin 

    if (width < height) { 
     width = height 
    } 

    let pathRef = UIBezierPath(roundedRect: CGRect(x: margin/2.0, y: margin/2.0, width: width, height: height), cornerRadius: height/2.0) 

    UIColor.redColor().setFill() 
    pathRef.fill() 

    UIColor.clearColor().setStroke() 
    pathRef.stroke() 

    pathRef.closePath() 

    self.setNeedsDisplay() 
} 
} 

बस एक तेज फ़ाइल के कोड से ऊपर डाल दिया और खींचें आईबी में एक UIView ड्रॉप और यह वर्ग CustomHorizontalProgressView दे। और वह यह है।

Answer 2

हाँ, एक बात याद है ... कोने की त्रिज्या progressview के लिए निर्धारित है और यह उम्मीद के रूप में दर्शाती है ..

लेकिन अगर आप चाहते हैं कि आपके ट्रैक छवि पूर्ण होना आप अपने progressview अनुकूलित करने के लिए की है। आपको गोल कोने के साथ छवि का उपयोग करना होगा।

[progressView setTrackImage:[UIImage imageNamed:@"roundedTrack.png"]]; 
//roundedTrack.png must be of rounded corner 

यह उपरोक्त कोड आपको आपकी प्रगति के लिए trackView की छवि बदलने में मदद करेगा।

आपको छवि के अनुचित खींचने का सामना करना पड़ सकता है। आपको अपनी छवि को आकार देने योग्य बनाना है। हो सकता है नीचे दिए गए लिंक उपयोगी हो सकता है अगर इस मुद्दे को उठता https://www.natashatherobot.com/ios-stretchable-button-uiedgeinsetsmake/

Answer 3

class ViewController: UIViewController { 

    override func viewDidLoad() { 
     super.viewDidLoad() 

     let v = ProgessView(frame: CGRect(x: 20, y: 200, width: 100, height: 10)) 
     view.addSubview(v) 

     //v.progressLayer.strokeEnd = 0.8 

    } 
} 

class ProgessView: UIView { 

    lazy var progressLayer: CAShapeLayer = { 
     let line = CAShapeLayer() 
     let path = UIBezierPath() 
     path.move(to: CGPoint(x: 5, y: 5)) 
     path.addLine(to: CGPoint(x: self.bounds.width - 5, y: 5)) 
     line.path = path.cgPath 
     line.lineWidth = 6 
     line.strokeColor = UIColor(colorLiteralRed: 127/255, green: 75/255, blue: 247/255, alpha: 1).cgColor 
     line.strokeStart = 0 
     line.strokeEnd = 0.5 
     line.lineCap = kCALineCapRound 
     line.frame = self.bounds 
     return line 
    }() 

    override init(frame: CGRect) { 
     super.init(frame: frame) 
     backgroundColor = UIColor.white 
     layer.cornerRadius = 5 
     layer.borderWidth = 1 
     layer.borderColor = UIColor(colorLiteralRed: 197/255, green: 197/255, blue: 197/255, alpha: 1).cgColor 
     layer.addSublayer(progressLayer) 
    } 

    required init?(coder aDecoder: NSCoder) { 
     fatalError("init(coder:) has not been implemented") 
    } 

} 

टेस्ट मेरी कोड। आप ऊंचाई और चौड़ाई को अपनी इच्छानुसार डिजाइन कर सकते हैं। प्रगति दृश्य की प्रगति को बदलने के लिए आप strokeEnd का उपयोग कर सकते हैं। आप इसमें एक एनीमेशन जोड़ सकते हैं। लेकिन वास्तव में, यह पहले से ही एनिमेटेबल है, आप इसके प्राथमिक प्रभाव को देखने के लिए strokeEnd के मान को बदल सकते हैं। यदि आप अपनी खुद की एनीमेशन डिजाइन करना चाहते हैं। नीचे की तरह CATransaction आज़माएं।

func updateProgress(_ progress: CGFloat) { 
     CATransaction.begin() 
     CATransaction.setAnimationDuration(3) 
     progressLayer.strokeEnd = progress 
     CATransaction.commit() 
    } 

Answer 4

सेट लाइन टोपी:

.lineCap = kCALineCapRound;

Answer 5

मुझे यह वही समस्या थी, जो मुझे पागल की तरह गुगलने के बाद आपके प्रश्न का कारण बनती है। समस्या दो गुना है। सबसे पहले, अंत में प्रगति पट्टी के अंदर कैसे बनाना है (जो 季 亨达 का जवाब दिखाता है कि कैसे करना है), और दूसरी बात, कैशपलेयर के राउंड एंड को कैसे बनाया जाए, आपने मूल प्रगति के वर्ग अंत के साथ मिलान किया नीचे बार (यह अन्य StackOverflow सवाल का जवाब है कि How to get the exact point of objects in swift? के साथ मदद) आप 季 亨达 के जवाब में कोड की इस पंक्ति की जगह हैं: करने के लिए (

path.addLine: CGPoint (एक्स: self.bounds.width - 5, वाई : 5))

इस के साथ

:

path.addLine (करने के लिए: CGPoint (एक्स: (इंट (self.progress * फ्लोट (self.bounds.width))), वाई: 5))

आपको उम्मीद है कि आप जिस परिणाम को खोज रहे हैं उसे प्राप्त करें।

Answer 6

UIProgressView में दो भाग हैं, प्रगति भाग और ट्रैक भाग है। यदि आप प्रकटन का उपयोग करते हैं, तो आप देख सकते हैं कि इसमें केवल दो सबव्यूव हैं। प्रगति दृश्य पदानुक्रम बहुत सरल है। इसलिए ...

ऑब्जेक्टिव-सी

- (void)layoutSubviews 
{ 
    [super layoutSubviews]; 
    [self.progressView.subviews enumerateObjectsUsingBlock:^(__kindof UIView * _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) { 
     obj.layer.masksToBounds = YES; 
     obj.layer.cornerRadius = kProgressViewHeight/2.0; 
    }]; 
} 

स्विफ्ट 3

override func layoutSubviews() { 
    super.layoutSubviews() 
    subviews.forEach { subview in 
     subview.layer.masksToBounds = true 
     subview.layer.cornerRadius = kProgressViewHeight/2.0 
    } 
} 

मैं उपवर्ग सुझाया गया तरीका स्वीकार करते हैं या प्रगति को देखने का विस्तार कर रहा है। यदि आप इस तरह के एक साधारण प्रभाव के लिए ऐसा नहीं करना चाहते हैं, तो यह चाल हो सकती है। स्थिति को रखें ऐप्पल दृश्य पदानुक्रम बदल देगा, और कुछ गलत हो सकता है दिमाग में।