IOS एप्लिकेशन में चैट करने का सबसे आसान तरीका

सभी को नमस्कार! हर बार चैट के डिज़ाइन और लेआउट के दौरान, मेरे पास एक सवाल था: "क्या यह किसी भी तरह सरल हो सकता है?" अगले हफ्ते मुझे आवेदन के लिए एक बड़ी बातचीत करनी है, इसलिए फिर से मेरे सिर में लेआउट की सुविधा के बारे में विचार आने लगे। थोड़ा और पॉचिंग ऑटोलॉयट सुविधाओं को बैठने के बाद, मुझे लेआउट प्रक्रिया को सरल बनाने और अधिकतम काम करने का एक तरीका मिला। ऐसी समस्याओं को हल करते समय, वे अक्सर UICollectionView का उपयोग करते हैं, लेकिन इस बार हम UITableView का उपयोग करेंगे।

एक कदम: एक UITableView तैयार करना

पहले आपको UITableView बनाने और ठीक से कॉन्फ़िगर करने की आवश्यकता है। मैं कोड के साथ ऐसा करना पसंद करता हूं:

tableView = UITableView() tableView.delegate = self tableView.dataSource = self tableView.rowHeight = UITableView.automaticDimension tableView.estimatedRowHeight = 44.0 tableView.translatesAutoresizingMaskIntoConstraints = false view.addSubview(tableView) tableView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true tableView.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true tableView.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true tableView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true 

यहां महत्वपूर्ण बिंदु पंक्तिहाइट सेट करना और अनुमानित रोहाइट को परिभाषित करना है।

चरण दो: एक सेल बनाएं

अब हम सबसे दिलचस्प भाग की ओर मुड़ते हैं - सेल का लेआउट! एक नई फ़ाइल बनाएँ, यह UITableViewCell का एक उपवर्ग होना चाहिए, "XIB फ़ाइल भी बनाएँ" पर टिक करना न भूलें। हम लेआउट प्रक्रिया को आसान बनाने के लिए चरणों में विभाजित करेंगे।

सेल में एक नया UIView खींचें और कोई भी बैकग्राउंड रखें, और फिर इस दृश्य पर नए UILabel को खींचें। अब इस UILabel के लिए अटेंडेंस इंस्पेक्टर में आपको लाइन्स फील्ड में 0 सेट करना होगा। इससे सेल को टेक्स्ट की कई लाइनें मिल सकती हैं। यह इस तरह दिखना चाहिए:



अब आपको लेबल के किनारों को इसके सुपरव्यू के किनारों पर एक मामूली इंडेंटेशन के साथ संलग्न करने की आवश्यकता है।



और अब शुद्ध जादू! भूरे रंग के दृश्य के बाएँ, ऊपरी और निचले किनारों को सेल के संबंधित किनारों पर हुक करें, फिर, एक अलग चरण में, ग्रे दृश्य के दाईं ओर से सेल के दृश्य के दाहिने किनारे पर एक स्थिरांक बनाएं। अब नए बनाए गए स्थिरांक का चयन करें और इसके लिए गुण निरीक्षक खोलें। संबंध क्षेत्र में, "अधिक से अधिक या बराबर" सेट करें, और लगातार क्षेत्र में, उदाहरण के लिए, 60 नंबर दर्ज करें। यह बाधा संदेश "बुलबुला" की अधिकतम चौड़ाई को सीमित करेगी।



हम आखिरी हिस्से में पास होते हैं। संदेश बबल के लिए एक ऊँचाई स्थिर बनाएं, और फिर ग्रेटर थान या समतुल्य से संबंध और किसी भी मान को स्थिर क्षेत्र में सेट करें। कॉन्स्टेंट का मूल्य ऊंचाई में "बुलबुले" का न्यूनतम आकार होगा, यह फ़ॉन्ट आकार और इंडेंटेशन पर निर्भर करता है। अब सेल वर्ग में लेबल और बुलबुले के लिए एक IBOutlet बनाएं।

स्टेप थ्री एंड लास्ट: पुटिंग इट ऑल टुगेदर

यह केवल UITableViewDataSource के तरीकों को भरने और हमारे सेल को पंजीकृत करने के लिए बना हुआ है:

 tableView.register(UINib(nibName: "ExampleCell", bundle: nil), forCellReuseIdentifier: "incomingMessage") 

उसके बाद, यह केवल हमारे सेल बनाने और वापस करने के लिए रहता है:

 let cell = tableView.dequeueReusableCell(withIdentifier: "incomingMessage", for: indexPath) cell.messageLabel.text = "This is a test message" return cell 

निष्कर्ष

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



वह सब है! मुझे आशा है कि आपको यह पसंद आया होगा!