सुंदर तरीके से खड़े होने के लिए UITextView कैसे सिखाएं

समस्या का बयान

दिया: बहु-पंक्ति पाठ।
खोजें: खूबसूरती से डिजाइन की गई पृष्ठभूमि।

हाँ, यह एक घंटा है, मैंने सोचा। "आपको केवल एट्रिब्यूटेड टैक्स्ट में बैकग्राउंड कौर लगाने की जरूरत है।" लेकिन इतना ही काफी नहीं था। तथ्य यह है कि मानक चयन एक भरा हुआ आयत है। बदसूरत। समाधान - आपको एक कस्टम की आवश्यकता है! इसके निर्माण के कांटेदार रास्ते ने मुझे इस प्रक्रिया का वर्णन करने के लिए प्रेरित किया ताकि आने वाली पीढ़ियों को इतना नुकसान न उठाना पड़े। रुचि, मैं बिल्ली के लिए पूछना।

स्वीकार

पहली क्रिया एक क्लासिक इंटरनेट कॉल थी जिसमें उचित कार्यान्वयन का प्रश्न था। जवाब में, कुछ सुझाव थे। सबसे पर्याप्त में, सब कुछ fillBackgroundRectArray विधि के ओवरराइड के लिए आया था। सामान्य जीवन में, वह ऊपर उल्लिखित एट्रिब्यूट संपत्ति का उपयोग करके पाठ को रंग देने के लिए जिम्मेदार है। यह देखने के लिए कि यह किस प्रकार का जानवर है, मैंने इस उम्मीद में तैयार समाधान की कोशिश की कि काम अभी भी कुछ घंटों के लिए होगा। यह काम नहीं किया फैसले ने बुरी तरह से काम किया।

प्रलेखन सब कुछ है।

फिर से ऐसा न करने का निर्णय लेते हुए, मैंने प्रलेखन की ओर रुख किया। इससे यह स्पष्ट हो गया कि UITextView तीन साथियों द्वारा संचालित पाठ के लिए UIScrollView का एक सरल वंशज है:

• NSTextStorage - अनिवार्य रूप से NSMutableAtributedString पर एक आवरण, पाठ और इसकी विशेषताओं को संग्रहीत करने के लिए आवश्यक;
• NSTextContainer - NSObject, उस ज्यामितीय आकृति के लिए जिम्मेदार है जिसमें पाठ प्रस्तुत किया गया है। डिफ़ॉल्ट रूप से यह एक आयत है, आप कुछ भी अनुकूलित कर सकते हैं;
• NSLayoutManager - पहले दो का प्रबंधन करता है: पाठ लेता है, इंडेंट करता है, पैराग्राफ में विभाजित करता है, और हमें उस भरण के लिए भी जिम्मेदार है जो हमें चाहिए।

एल्गोरिदम शांत हैं

नतीजतन, कार्य एक कस्टम NSLayoutManadger बनाने और इसमें वांछित विधि को ओवरराइड करने के लिए उबलता है।

class SelectionLayoutManager: NSLayoutManager { override func fillBackgroundRectArray(_ rectArray: UnsafePointer<CGRect>, count rectCount: Int, forCharacterRange charRange: NSRange, color: UIColor) { } 

मुख्य कार्यान्वयन में, fillBackgroundRectArray शब्दों की आयतों को प्राप्त करता है और उन्हें पेंट करता है। चूंकि प्रदान किए गए आंकड़े, एक नियम के रूप में, एक जंक्शन के साथ एक पंक्ति के अलग-अलग हिस्से हैं, कहीं भी उन्हें छोड़ दिया जाना था। इसलिए समय का उप-योग: सही आयतों को निर्धारित करें जो लाइन की शुरुआत में शुरू होते हैं और इसके अंत तक अप्रचलित होते हैं।

इस समस्या को हल करने वाली विधि निम्न एल्गोरिथ्म है: यह पैराग्राफ के अनुसार एक लूप में जाती है और जांचती है कि क्या लाइन एक पंक्ति में फिट होगी यदि अगला शब्द इसमें जोड़ा गया है? यदि नहीं, तो यह एक अलग पूर्ण रेखा है, अगले पर जाएं। यदि ऐसा है, तो अगले शब्द को लें और स्थिति को फिर से जांचें। हां, कार्यान्वयन बेहद सरल है, एक पुनरावर्ती विधि बनाने का विचार था, लेकिन अभी तक हाथ नहीं पहुंचे हैं। टिप्पणी में, मैं आपके अनुकूलित विकल्पों के लिए पूछता हूं।

 private func detectLines(from string: String, width: CGFloat, font: UIFont) -> [String] { var strings: [String] = [] var cumulativeString = "" let words = string.components(separatedBy: CharacterSet.whitespaces) for word in words { let checkingString = cumulativeString + word if checkingString.size(withFont: font).width < width { cumulativeString.append(word) } else { if cumulativeString.isNotEmpty { strings.append(cumulativeString) } if word.size(withFont: font).width < width { cumulativeString = word } else { var stringsFromWord: [String] = [] var handlingWord = word while handlingWord.isNotEmpty { let fullFillString = detectFullFillString(from: handlingWord, width: width, font: font) stringsFromWord.append(fullFillString) handlingWord = word.replacingOccurrences(of: stringsFromWord.reduce("") { $0 + $1 }, with: "") } stringsFromWord.removeLast() strings.append(contentsOf: stringsFromWord) let remainString = word.replacingOccurrences(of: stringsFromWord.reduce("") { $0 + $1 }, with: "") cumulativeString = remainString } } } if cumulativeString.isNotEmpty { strings.append(cumulativeString) } return strings } 

यह शब्दों के एक विशेष मामले पर ध्यान देने योग्य है कि स्वयं द्वारा एक पंक्ति में फिट नहीं होता है। UITextView उनके साथ बहुत सरलता से काम करता है - उस हिस्से की अगली पंक्ति में स्थानांतरित करना जो शामिल नहीं था। हम अनुक्रमिक मार्ग के समान दृष्टिकोण के साथ एक अलग विधि में इस तर्क की नकल करते हैं, लेकिन प्रतीकों द्वारा इस मामले में। इसमें क्या शामिल था: एक पूरी लाइन, बाकी - या तो एक पूरी लाइन, एक बहुत लंबे शब्द के मामले में, या एक नई लाइन पर सिर्फ एक नया शब्द।

 private func detectFullFillString(from word: String, width: CGFloat, font: UIFont) -> String { var string = "" for character in word { let checkingString = string.appending(String(character)) if checkingString.size(withFont: font).width > width { break } else { string.append(contentsOf: String(character)) } } return string } 

डिटेललाइन के परिणामस्वरूप (से: चौड़ाई: फ़ॉन्ट :) विधि, हमें उन तारों की एक सरणी मिलती है जो लाइनों के साथ सही ढंग से विभाजित होती हैं। अगला, फ़्रेम से (लाइनों के लिए: चौड़ाई: फ़ॉन्ट) विधि, हमें निर्देशांकों और रेखा आकारों की एक सरणी मिलती है।

 private func frames(for lines: [String], width: CGFloat, font: UIFont) -> [CGRect] { var rects: [CGRect] = [] let stringsSizes = lines.map { $0.size(withFont: font) } stringsSizes.forEach { let rect = CGRect(origin: CGPoint(x: (width - $0.width) / 2, y: $0.height * CGFloat(rects.count)), size: $0) rects.append(rect) } return rects } 

सुंदरता लाना

उपशीर्षक संख्या दो: आयतों पर पेंट करें। "सुंदर" की अवधारणा के तहत गोल कोनों के साथ आयत के चयनित रंग को भरना था। समाधान: UIBezierPath का उपयोग करते हुए संदर्भ में निर्दिष्ट निर्देशांक पर एक अतिरिक्त परत खींचें। जोड़ों को बेहतर दिखने के लिए, हम आयत के किनारों को गोल नहीं करेंगे, जो चौड़ाई में छोटा है। विधि सरल है: हम प्रत्येक आयत के निर्देशांक का पालन करते हैं और एक समोच्च आकर्षित करते हैं।

 private func path(from rects: [CGRect], cornerRadius: CGFloat, horizontalInset: CGFloat) -> CGPath { let path = CGMutablePath() rects.enumerated().forEach { (index, rect) in let hasPrevious = index > 0 let isPreviousWider = hasPrevious ? rects[index - 1].width >= rect.width || abs(rects[index - 1].width - rect.width) < 5 : false let hasNext = index != rects.count - 1 let isNextWider = hasNext ? rects[index + 1].width >= rect.width || abs(rects[index + 1].width - rect.width) < 5 : false path.move(to: CGPoint(x: rect.minX - horizontalInset + (isPreviousWider ? 0 : cornerRadius), y: rect.minY)) // top path.addLine(to: CGPoint(x: rect.maxX + horizontalInset - (isPreviousWider ? 0 : cornerRadius), y: rect.minY)) if isPreviousWider == false { path.addQuadCurve(to: CGPoint(x: rect.maxX + horizontalInset, y: rect.minY + cornerRadius), control: CGPoint(x: rect.maxX + horizontalInset, y: rect.minY)) } // right path.addLine(to: CGPoint(x: rect.maxX + horizontalInset, y: rect.maxY - (isNextWider ? 0 : cornerRadius))) if isNextWider == false { path.addQuadCurve(to: CGPoint(x: rect.maxX + horizontalInset - cornerRadius, y: rect.maxY), control: CGPoint(x: rect.maxX + horizontalInset, y: rect.maxY)) } // bottom path.addLine(to: CGPoint(x: rect.minX - horizontalInset + (isNextWider ? 0 : cornerRadius), y: rect.maxY)) if isNextWider == false { path.addQuadCurve(to: CGPoint(x: rect.minX - horizontalInset, y: rect.maxY - cornerRadius), control: CGPoint(x: rect.minX - horizontalInset, y: rect.maxY)) } // left path.addLine(to: CGPoint(x: rect.minX - horizontalInset, y: rect.minY + (isPreviousWider ? 0 : cornerRadius))) if isPreviousWider == false { path.addQuadCurve(to: CGPoint(x: rect.minX - horizontalInset + cornerRadius, y: rect.minY), control: CGPoint(x: rect.minX - horizontalInset, y: rect.minY)) } path.closeSubpath() } return path } 

अगला, ड्रा (_: रंग :) विधि में, पथ भरें।

 private func draw(_ path: CGPath, color: UIColor) { color.set() if let ctx = UIGraphicsGetCurrentContext() { ctx.setAllowsAntialiasing(true) ctx.setShouldAntialias(true) ctx.addPath(path) ctx.drawPath(using: .fillStroke) } } 

FillBackgroundRectArray विधि का पूरा कोड (_: गिनती: forCharacterRange: रंग :)

 override func fillBackgroundRectArray(_ rectArray: UnsafePointer<CGRect>, count rectCount: Int, forCharacterRange charRange: NSRange, color: UIColor) { let cornerRadius: CGFloat = 8 let horizontalInset: CGFloat = 5 guard let font = (textStorage?.attributes(at: 0, effectiveRange: nil).first { $0.key == .font })?.value as? UIFont, let textContainerWidth = textContainers.first?.size.width else { return } /// Divide the text into paragraphs let lines = paragraphs(from: textStorage?.string ?? "") /// Divide the paragraphs into separate lines let strings = detectLines(from: lines, width: textContainerWidth, font: font) /// Get rects from the lines let rects = frames(for: strings, width: textContainerWidth, font: font) /// Get a contour by rects let rectsPath = path(from: rects, cornerRadius: cornerRadius, horizontalInset: horizontalInset) /// Fill it draw(rectsPath, color: color) } 

हम शुरू करते हैं। हम जांच करते हैं। महान काम करता है।


निष्कर्ष में: रिवाज कभी-कभी मुश्किल और बीमार होता है, लेकिन जब यह काम करना चाहिए तो यह कितना सुंदर है। कास्ट, यह बहुत अच्छा है।

पूर्ण कोड यहां पाया जा सकता है SelectionLayoutManager ।

संदर्भ

1. NSLayoutManager
2. NSTextContainer
3. NSTextView
4. पाठ को आकर्षित और प्रबंधित करने के लिए पाठ किट का उपयोग करना