UITableViewCell के बीच रिक्ति कैसे जोड़ें


182

क्या बीच में रिक्ति जोड़ने का कोई तरीका है UITableViewCell?

मैंने एक तालिका बनाई है और प्रत्येक कोशिका में केवल एक छवि होती है। छवि को सेल को इस तरह सौंपा गया है:

cell.imageView.image = [myImages objectAtIndex:indexPath.row];

लेकिन यह छवि को बड़ा कर देता है और पूरे सेल में फिट हो जाता है, और छवियों के बीच कोई अंतर नहीं होता है।

या इस तरह से कह सकते हैं, छवि की ऊंचाई उदाहरण के लिए 50 हैं, और मैं छवियों के बीच 20 रिक्ति जोड़ना चाहता हूं। क्या इसे पूरा करने का कोई रास्ता है?


1
के लिए स्विफ्ट 2.2 : यहाँ मेरा उत्तर देख stackoverflow.com/a/37673417/2696626
ibrahimyilmaz

जवाबों:


160

स्विफ्ट संस्करण

स्विफ्ट 3 के लिए अपडेट किया गया

यह उत्तर भविष्य के दर्शकों के लिए मूल प्रश्न से कुछ अधिक सामान्य है। यह स्विफ्ट के लिए मूल UITableView उदाहरण का पूरक उदाहरण है ।

यहां छवि विवरण दर्ज करें

अवलोकन

मूल विचार प्रत्येक सरणी आइटम के लिए एक नया खंड (एक नई पंक्ति के बजाय) बनाना है। तब अनुभाग हेडर ऊंचाई का उपयोग करके अनुभागों को स्थान दिया जा सकता है।

यह कैसे करना है

  • स्विफ्ट के लिए UITableView उदाहरण में वर्णित के रूप में अपनी परियोजना को सेट करें । (यही है, एक जोड़ें UITableViewऔर tableViewआउटलेट को व्यू कंट्रोलर को हुक करें )।

  • इंटरफ़ेस बिल्डर में, मुख्य दृश्य पृष्ठभूमि का रंग हल्का नीला और UITableViewपृष्ठभूमि का रंग साफ़ करने के लिए बदलें ।

  • निम्नलिखित के साथ ViewController.swift कोड को बदलें।

ViewController.swift

import UIKit
class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
    
    // These strings will be the data for the table view cells
    let animals: [String] = ["Horse", "Cow", "Camel", "Sheep", "Goat"]
    
    let cellReuseIdentifier = "cell"
    let cellSpacingHeight: CGFloat = 5
    
    @IBOutlet var tableView: UITableView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // These tasks can also be done in IB if you prefer.
        self.tableView.register(UITableViewCell.self, forCellReuseIdentifier: cellReuseIdentifier)
        tableView.delegate = self
        tableView.dataSource = self
    }
    
    // MARK: - Table View delegate methods
    
    func numberOfSections(in tableView: UITableView) -> Int {
        return self.animals.count
    }
    
    // There is just one row in every section
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 1
    }
    
    // Set the spacing between sections
    func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
        return cellSpacingHeight
    }
    
    // Make the background color show through
    func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
        let headerView = UIView()
        headerView.backgroundColor = UIColor.clear
        return headerView
    }
    
    // create a cell for each table view row
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        
        let cell:UITableViewCell = self.tableView.dequeueReusableCell(withIdentifier: cellReuseIdentifier) as UITableViewCell!
        
        // note that indexPath.section is used rather than indexPath.row
        cell.textLabel?.text = self.animals[indexPath.section]
        
        // add border and color
        cell.backgroundColor = UIColor.white
        cell.layer.borderColor = UIColor.black.cgColor
        cell.layer.borderWidth = 1
        cell.layer.cornerRadius = 8
        cell.clipsToBounds = true
        
        return cell
    }
    
    // method to run when table view cell is tapped
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        // note that indexPath.section is used rather than indexPath.row
        print("You tapped cell number \(indexPath.section).")
    }
}

ध्यान दें कि सरणी तत्वों और टैप स्थितियों के लिए उचित मान प्राप्त करने के indexPath.sectionबजाय इसका उपयोग किया जाता है indexPath.row

आपको दाएँ और बाएँ अतिरिक्त पैडिंग / स्थान कैसे मिला?

मैंने इसे उसी तरह से प्राप्त किया जैसे आप किसी भी दृश्य में रिक्ति जोड़ते हैं। मैंने ऑटो लेआउट बाधाओं का इस्तेमाल किया। प्रमुख और अनुगमन बाधाओं के लिए रिक्ति जोड़ने के लिए इंटरफ़ेस बिल्डर में पिन टूल का उपयोग करें ।


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

3
@ user2901306, मैं पहली बार में इस विधि का उपयोग करने में संकोच कर रहा था, क्योंकि यह महसूस किया कि मुझे सिर्फ पंक्तियों का उपयोग करने और मार्जिन या कुछ बढ़ाने में सक्षम होना चाहिए। हालाँकि, मुझे ऐसा करने का कोई तरीका नहीं मिला और इस विधि ने काफी अच्छा काम किया। आपको अपने सेल पर अनुकूलन को बदलना नहीं है। आपको मूल रूप से केवल पंक्तियों की संख्या के लिए numberOfSectionsInTableViewऔर जोड़ना होगा return 1। फिर indexPath.sectionवर्तमान सेल इंडेक्स प्राप्त करने के लिए उपयोग करें। एक बार आजमा कर देखिए। मुझे लगता है कि आपको पता चल जाएगा कि आपको अपने वर्तमान सेटअप में बहुत अधिक बदलाव करने की आवश्यकता नहीं है। यह निश्चित रूप से उपवर्ग की तुलना में आसान है।
सुरगाछ

CellForRow में cell.layer.xxx का उपयोग करके आप एक प्रदर्शन हिट दे सकते हैं। XIB में इन मूल्यों को बेहतर तरीके से सेट करें
अभिषेक बेदी

@AbhishekBedi, मैंने हमेशा layerकाफी तेजी से जोड़तोड़ पाया है। क्या आप ऐसा कह रहे हैं क्योंकि आपने एक प्रदर्शन हिट पर ध्यान दिया है, या एक सामान्य अभ्यास के रूप में? यहां तक ​​कि अगर आप उन्हें एक XIB में सेट करते हैं, तब भी उन्हें सेल सेट होने पर सेट करना होगा।
सुरगाछ

1
@FateNuller, मैं आपसे असहमत नहीं हूं। हुसाम का जवाब बहुत अच्छा लग रहा है।
सूरगाछ

150

स्विफ्ट का उपयोग करके मेरा आसान समाधान :

// Inside UITableViewCell subclass

override func layoutSubviews() {
    super.layoutSubviews()

    contentView.frame = contentView.frame.inset(by: UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10))
}

परिणाम यहां छवि विवरण दर्ज करें


11
अच्छा समाधान है। यदि किसी के पास कोई समस्या है, तो मुझे super.layoutSubviews()यह सुनिश्चित करने के लिए पहले फोन करना था कि पूरे दृश्य को ठीक से निर्धारित किया गया था ताकि इसकी रूपरेखा तैयार की जा सके।
रुटटोपिया

@ हसम आपके समाधान ने मेरे लिए काम किया। लेकिन मुझे एक समस्या है जब चयनित सेल। मैंने contentView के लिए बॉर्डर सेट किया है और जब भी मैंने सेल का चयन किया है बॉर्डर छोटा होगा। मेरे द्वारा यह कैसे किया जा सकता है?
Bad_Developer

@SonHoang आप ओवरराइड करने के लिए आवश्यकता हो सकती है didSetके लिए selectedचर और कॉल layoutSubviews()के अंदर!
हुसाम

1
अरे, हुसाम। महान समाधान के लिए धन्यवाद। मुझे मत बताओ कि कोशिकाओं के बीच जोड़ा सामग्री का रंग कैसे बदलना है?
ए। कंठ

1
स्वीकृत उत्तर की तुलना में यह इतना बेहतर समाधान है। स्वीकृत उत्तर कोड की 100 लाइनों के पास लानत है और यह सिर्फ एक है। अतुल्य।
यंगगुन

135

जिस तरह से मैं कोशिकाओं के बीच रिक्ति जोड़ने को प्राप्त करता हूं वह नंबरऑफसेक्शन बनाने के लिए है = "आपकी सरणी गिनती" और प्रत्येक अनुभाग को बनाने के लिए केवल एक पंक्ति होती है। और फिर शीर्ष लेख देखें और इसकी ऊँचाई को परिभाषित करें।

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    return yourArry.count;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return 1;
}

-(CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
    return cellSpacingHeight;
}

-(UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
    UIView *v = [UIView new];
    [v setBackgroundColor:[UIColor clearColor]];
    return v;
}

22
यह बहुत अच्छा काम करता है। मुझे CellForRowAtIndexPath को थोड़ा बदलना पड़ा, न कि सामान्य सरणी [indexPath.row] को लेकिन array [indexPath.section] को। अन्यथा यह सभी खंडों में सरणी का पहला आइटम दिखाएगा।
टॉम स्पी 10

@TomSpee - आपने सेलफ़ोररौटएंडएक्सएक्सपाथ में उस मुद्दे को कैसे हल किया?

5
@TKutal - CellForRowAtIndexPath में सामान्य कोड की तरह ही लेकिन indexPath.row को indexPath.section में बदलें
टॉम स्पी

हालांकि यह पूरा करता है कि पूछने वाला क्या चाहता है, मुझे विश्वास नहीं है कि Apple इस दृष्टिकोण की सिफारिश करेगा। अगर मैं गलत हूं तो मुझे सुधारें, लेकिन मेरा मानना ​​है कि "अनुभाग" तार्किक रूप से डेटा के "खंड" को अलग करने के लिए हैं जो आप अपनी तालिका में प्रतिनिधित्व कर रहे हैं। आपको डेटा के प्रत्येक सेल के बीच रिक्त स्थान को स्टाइल करने के लिए "सेक्शन" का उपयोग नहीं करना चाहिए जो अन्यथा सभी को एक ही खंड में प्रदर्शित किया जाना चाहिए। मुझे लगता है कि बेहतर दृष्टिकोण, यद्यपि अधिक कठिन है, UITableViewCell को उप-वर्ग करना होगा, और सेल के निचले भाग में एक दृश्य जोड़कर तालिका दृश्य विभाजक का अनुकरण करना होगा।
फेटनुलर

2
तब Apple को शिकायत नहीं करनी चाहिए बल्कि पंक्तियों के बीच अलग-अलग जगह के लिए एक सुविधाजनक तरीका बनाना चाहिए।
अरनी श्वार्ज़ोगेल

44

मुझे UITableCells के बीच एक "स्पेस" होने की समान अवधारणा को करने की आवश्यकता थी। चूंकि आप शाब्दिक रूप से उन कक्षों के बीच स्थान नहीं जोड़ सकते हैं, जो आप इसे यूआईटेबल व्यू की सेल ऊंचाई में हेरफेर करके और फिर अपने सेल के contentView में एक UIView जोड़कर नकली कर सकते हैं। यहाँ एक प्रोटोटाइप का स्क्रीन शॉट है जो मैंने एक अन्य परीक्षण परियोजना में किया था जब मैं यह अनुकरण कर रहा था:

UITableViewCells के बीच अंतर

यहां कुछ कोड दिए गए हैं (नोट: प्रदर्शन उद्देश्यों के लिए बहुत कठिन कोडित मूल्य हैं)

सबसे पहले, मुझे heightForRowAtIndexPathUITableViewCell पर विभिन्न ऊंचाइयों की अनुमति देने के लिए सेट करने की आवश्यकता थी ।

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{

    NSString *text = [self.newsArray  objectAtIndex:[indexPath row]];
    if ([text isEqual:@"December 2012"])
    {
        return 25.0;
    }

    return 80.0;
}

आगे, मैं UITableViewCells के लुक और फील को मैनिपुलेट करना चाहता हूं इसलिए मैं इसे willDisplayCell:(NewsUITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPathविधि में करता हूं ।

- (void)tableView:(UITableView *)tableView willDisplayCell:(NewsUITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath
{
    if (cell.IsMonth)
    {
        UIImageView *av = [[UIImageView alloc] initWithFrame:CGRectMake(20, 20, 20, 20)];
        av.backgroundColor = [UIColor clearColor];
        av.opaque = NO;
        av.image = [UIImage imageNamed:@"month-bar-bkgd.png"];
        UILabel *monthTextLabel = [[UILabel alloc] init];
        CGFloat font = 11.0f;
        monthTextLabel.font = [BVFont HelveticaNeue:&font];

        cell.backgroundView = av;
        cell.textLabel.font = [BVFont HelveticaNeue:&font];
        cell.textLabel.textColor = [BVFont WebGrey];
    }


    if (indexPath.row != 0)
    {
        cell.contentView.backgroundColor = [UIColor clearColor];
        UIView *whiteRoundedCornerView = [[UIView alloc] initWithFrame:CGRectMake(10,10,300,70)];
        whiteRoundedCornerView.backgroundColor = [UIColor whiteColor];
        whiteRoundedCornerView.layer.masksToBounds = NO;
        whiteRoundedCornerView.layer.cornerRadius = 3.0;
        whiteRoundedCornerView.layer.shadowOffset = CGSizeMake(-1, 1);
        whiteRoundedCornerView.layer.shadowOpacity = 0.5;
        [cell.contentView addSubview:whiteRoundedCornerView];
        [cell.contentView sendSubviewToBack:whiteRoundedCornerView];

    }
}

ध्यान दें कि मैंने अपनी whiteRoundedCornerView ऊंचाई 70.0 बनाई है और यही कारण है कि सिम्युलेटेड स्पेस का कारण बनता है क्योंकि सेल की ऊंचाई वास्तव में 80.0 है, लेकिन मेरा कंटेंट व्यू 70.0 है जो इसे उपस्थिति देता है।

इसे बेहतर तरीके से पूरा करने के अन्य तरीके भी हो सकते हैं लेकिन यह सिर्फ इतना है कि मैंने इसे कैसे किया। मुझे उम्मीद है कि यह किसी और की मदद कर सकता है।


सिर्फ एक FYI करें, बहुत बड़ी संख्या में कोशिकाओं के लिए, आप willDisplayCell के बजाय सेल उपवर्ग के अंदर सामग्री दृश्य सेट करना चाहते हैं। प्रदर्शन एक बड़ी हिट लेने के लिए शुरू होता है इस तरह से अधिक कोशिकाओं को आप कतार में जोड़ते हैं
BBH1023

@ BBH1023 छाया की परत हर बार जब दृश्य आगे और पीछे तेजी से देखने के लिए नेविगेट करते हुए दिखाई देती है तो कई गुना बढ़ जाती है। यदि आप इसे पहले ही एक बार लागू कर चुके हैं, तो इसे रद्द करने का सुझाव कैसे देंगे
०११ पर ५:१४

अधिक छाया को जोड़ने के लिए निजी करें: NSInteger टैग = 120; if (indexPath.row! = 0) {if (cell.tag! = 120) {cell.contentView.backgroundColor = [UIColor clearColor]; ... [cell.contentView sendSubviewToBack: whiteRoundedCornerView]; सेल.टैग = टैग; }}
user3001228

24

आपको अपनी छवि को फ्रेम सेट करना होगा। अनटाइटेड कोड है

cell.imageView.frame = CGRectOffset(cell.frame, 10, 10);

2
बस बैकग्राउंड व्यू के साथ परीक्षण किया गया है और यह सबसे सरल कार्य समाधान है
सैम

2
layoutSubviewsयदि आप उपवर्ग में हैं तो बस इस कोड को कॉल करना सुनिश्चित करेंUITableViewCell
Mazyod

30
@ NicoHämäläinen ठीक है, मैंने पिछले तीन वर्षों में 20 से अधिक ऐप विकसित किए हैं, और मुझे हमेशा UITableViewCellपरिणाम की आवश्यकता के क्रम में उप-वर्ग दिया गया है ... उप-वर्ग UITableViewCellबहुत आम है।
माजिद

1
@ NicoHämäläinen उपवर्ग के साथ कुछ भी गलत नहीं है UITableViewCell। जब आप रिवाज बना रहे हैं तो आपको UITableViewCellsउपवर्ग होना चाहिए UITableViewCell
Popeye

1
@ NicoHämäläinen आपको अपनी टिप्पणी तब अपडेट करनी चाहिए। लोग जानकारी को हड़प लेते हैं और आगे नहीं पढ़ते हैं। चूंकि यह साइट एक महान संसाधन है और डेवलपर्स उन तथ्यों पर भरोसा करते हैं जो वे यहां देखते हैं कि यह उन्हें भयानक चीजों में गुमराह कर सकता है .. बस मेरे दो सिक्के। हो सकता है कि मुझे हिस्टीरिया है
chrs

11

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

func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath)
{
    let verticalPadding: CGFloat = 8

    let maskLayer = CALayer()
    maskLayer.cornerRadius = 10    //if you want round edges
    maskLayer.backgroundColor = UIColor.black.cgColor
    maskLayer.frame = CGRect(x: cell.bounds.origin.x, y: cell.bounds.origin.y, width: cell.bounds.width, height: cell.bounds.height).insetBy(dx: 0, dy: verticalPadding/2)
    cell.layer.mask = maskLayer
}

आपको बस इतना करना है कि सेल की ऊँचाई को आपके वांछित के समान मान से बड़ा करें verticalPadding, और फिर अपने आंतरिक लेआउट को संशोधित करें ताकि सेल के किनारों पर जो भी दृश्य हो, वही रिक्ति बढ़े verticalPadding/2। माइनर डाउनसाइड: आपको verticalPadding/2टेबल व्यू के ऊपर और नीचे दोनों तरफ पैडिंग मिलती है , लेकिन आप सेटिंग करके tableView.contentInset.bottom = -verticalPadding/2और इसे जल्दी ठीक कर सकते हैं tableView.contentInset.top = -verticalPadding/2। आशा है कि यह किसी की मदद करता है!


1
स्विफ्ट 5 में भी काम करता है।
लंदनगू

1
सबसे बढ़िया उत्तर!! धन्यवाद। यदि कोई कस्टम सेल का उपयोग कर रहा है, तो यह "ओवरराइड फंक अवेकफ्रेमनिब ()" में काम करता है
पेड़_आरे_ग्रीट

10

मुझे लगता है कि सबसे सीधा फॉरवर्ड सॉल्यूशन अगर आपकी बस थोड़ी सी जगह की तलाश में है और शायद कम से कम इतना महंगा हो कि सेल टेबल कलर को आपके टेबल बैकग्राउंड कलर में सेट कर दें तो मनचाहा रिजल्ट पाने के लिए बॉर्डर की चौड़ाई सेट करें!

    cell.layer.borderColor = blueColor.CGColor
    cell.layer.borderWidth = 3

1
पारदर्शी पृष्ठभूमि के लिए अच्छा विचार नहीं है। अन्यथा, यह काम कर सकता है।
एर्गुनकोक

1
यह सच है। सभी मामलों के लिए एक समाधान नहीं है लेकिन यह कुछ के लिए काम करेगा! @ergunkocak
क्रेग

8

यदि आप पहले से अनुभाग हेडर (या पाद) का उपयोग नहीं कर रहे हैं, तो आप तालिका कोशिकाओं में मनमाने ढंग से रिक्ति जोड़ने के लिए उनका उपयोग कर सकते हैं। N पंक्तियों के साथ एक खंड होने के बजाय, प्रत्येक पंक्ति के साथ n अनुभागों के साथ एक तालिका बनाएं।

tableView:heightForHeaderInSection:रिक्ति को नियंत्रित करने के लिए विधि को लागू करें ।

आप यह भी tableView:viewForHeaderInSection:नियंत्रित करना चाहते हैं कि रिक्ति कैसी दिखती है।


8

मैंने इसे स्विफ्ट 4 में इस तरह से हल किया।

मैं UITableViewCell का विस्तार बनाता हूं और इस कोड को शामिल करता हूं:

override open var frame: CGRect {
    get {
        return super.frame
    }
    set (newFrame) {
        var frame =  newFrame
        frame.origin.y += 10
        frame.origin.x += 10
        frame.size.height -= 15
        frame.size.width -= 2 * 10
        super.frame = frame
    }
}

override open func awakeFromNib() {
    super.awakeFromNib()
    layer.cornerRadius = 15
    layer.masksToBounds = false
}

मुझे उम्मीद है इससे आपको मदद मिली होगी।


सेल में पाठ काटा गया है।
मेहदिको

CGRect ओवरराइड काम कर रहा है, और मैंने awakeFromNib को नहीं जोड़ा है।
एरिक टैन

5

स्विफ्ट 3 में उदाहरण ..

यहां छवि विवरण दर्ज करें

  1. एकल दृश्य एप्लिकेशन को क्रीज करें
  2. व्यू कंट्रोलर में टेबलव्यू जोड़ें
  3. tablview सेल के लिए एक रिवाज जोड़ें
  4. व्यू कंट्रोलर कोड bellow like है

       class ViewController: UIViewController,UITableViewDelegate,UITableViewDataSource {
    
       @IBOutlet weak var tableView: UITableView!
    
    
        var arraytable = [[String:Any]]()
         override func viewDidLoad() {
         super.viewDidLoad()
    
         arraytable = [
         ["title":"About Us","detail":"RA-InfoTech Ltd -A Joint Venture IT Company formed by Bank Asia Ltd"],
         ["title":"Contact","detail":"Bengal Center (4th & 6th Floor), 28, Topkhana Road, Dhaka - 1000, Bangladesh"]
    ]
    
    
    
    
    
    
       tableView.delegate = self
       tableView.dataSource = self
    
       //For Auto Resize Table View Cell;
      tableView.estimatedRowHeight = 44
       tableView.rowHeight = UITableViewAutomaticDimension
    
       //Detault Background clear
       tableView.backgroundColor = UIColor.clear
    }

    func numberOfSections (tableView: UITableView में) -> Int {रिटर्न arraytable.count}

       func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
     return 1
     }
    
    // Set the spacing between sections
     func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
    return 10
    }
    
    // Make the background color show through
      func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    let headerView = UIView()
    headerView.backgroundColor = UIColor.clear
    
    return headerView
    }
    
         func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    
         let cell = tableView.dequeueReusableCell(withIdentifier: "cell")! as! CustomCell
    
         cell.tv_title.text = arraytable[indexPath.section]["title"] as! String?
        cell.tv_details.text = arraytable[indexPath.section]["detail"] as! String?
    
       //label height dynamically increase
       cell.tv_details.numberOfLines = 0
    
    
    
    
       //For bottom border to tv_title;
       let frame =  cell.tv_title.frame
        let bottomLayer = CALayer()
       bottomLayer.frame = CGRect(x: 0, y: frame.height - 1, width: frame.width, height: 1)
        bottomLayer.backgroundColor = UIColor.black.cgColor
       cell.tv_title.layer.addSublayer(bottomLayer)
    
      //borderColor,borderWidth, cornerRadius
      cell.backgroundColor = UIColor.lightGray
      cell.layer.borderColor = UIColor.red.cgColor
      cell.layer.borderWidth = 1
      cell.layer.cornerRadius = 8
      cell.clipsToBounds = true
    
      return cell
      }
    
       }
  5. Github पर पूर्ण स्रोत डाउनलोड करें: लिंक

    https://github.com/enamul95/CustomSectionTable


इसने एक और जवाब दोहराया कि @Suragch को स्विफ्ट संस्करण के लिए पहले उत्तर दिया गया है, कृपया अनुलिपि बनाने से बचें
अमृत ​​एंग्री

1
यह एक अच्छा समाधान नहीं है। अगर आपको शीर्षक वाले सेक्शन की जरूरत है तो यह काम नहीं करेगा
kuzdu

4

तीन दृष्टिकोण जो मैं सोच सकता हूं:

  1. एक कस्टम टेबल सेल बनाएं जो पूरे सेल के दृश्य को उस तरीके से प्रस्तुत करता है जो आप चाहते हैं

  2. छवि को छवि दृश्य में जोड़ने के बजाय, छवि दृश्य के सबव्यूअर को साफ़ करें, एक कस्टम दृश्य बनाएं जो छवि के लिए एक UIImageView जोड़ता है और दूसरा दृश्य, शायद एक साधारण यूआईईयूईवाई जो वांछित रिक्ति प्रदान करता है, और इसे एक सबव्यू के रूप में जोड़ें छवि देखें।

  3. मैं सुझाव देना चाहता हूं कि आप निश्चित आकार / पैडिंग सेट करने के लिए सीधे UIImageView में हेरफेर करें, लेकिन मैं Xcode के पास कहीं नहीं हूं इसलिए मैं पुष्टि नहीं कर सकता कि क्या / यह कैसे काम करेगा।

क्या इसका कोई मतलब है?


4

हां आप सेल में कंटेंट व्यू पर एक बेस व्यू बनाकर दो सेल के बीच स्पेसिंग (पैडिंग) को बढ़ा या घटा सकते हैं। कंटेंट व्यू बैकग्राउंड के लिए क्लियर कलर और आप सेल के बीच स्पेस बनाने के लिए बेस व्यू की ऊंचाई को एडजस्ट कर सकते हैं।


4

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

@implementation TableViewCell

- (void)awakeFromNib { 
    ... 
}

- (void) layoutSubviews {
    [super layoutSubviews];

    CGRect newFrame = UIEdgeInsetsInsetRect(self.layer.frame, UIEdgeInsetsMake(4, 0, 4, 0));
    self.layer.frame = newFrame;
}

@end

3

पंक्तियों की संख्या को अनुभाग में बदलें 1 आपने पंक्तियों की संख्या के बजाय अनुभागों की संख्या को बदल दिया है

 func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        1
    }

    func numberOfSections(in tableView: UITableView) -> Int {
        return 2
    }

यहां आप पंक्तियों के बीच रिक्ति रखते हैं

 func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
        return 50
    }

2

मुझे लगता है कि यह सबसे साफ समाधान है:

class MyTableViewCell: UITableViewCell {
    override func awakeFromNib() {
        super.awakeFromNib()
        layoutMargins = UIEdgeInsetsMake(8, 0, 8, 0)
    }
}

1
मैं layoutMarginsइस तरह से आवेदन करने के बाद कोई भी दृश्य परिवर्तन नहीं देख सकता था । हो सकता है कि क्योंकि मैं autolayout का उपयोग कर रहा हूँ।
कोरूर

मार्जिन सेल के लिए एक स्पष्ट ऊँचाई को "नहीं" तोड़ देगा, इसलिए आपको काम करने के लिए कोशिकाओं के लिए स्वचालित ऊंचाई की आवश्यकता है
अवील सकल

1
मेरे पास स्वचालित ऊंचाई है।
कोरूर

2

इस लेख ने मदद की, यह बहुत अधिक है जो अन्य उत्तरों ने कहा लेकिन संक्षेप और संक्षिप्त करें

https://medium.com/@andersongusmao/left-and-right-margins-on-uitableviewcell-595f0ba5f5e6

इसमें, वह केवल उन्हें बाएं और दाएं पक्षों पर लागू करता है, लेकिन UIEdgeInsetsMakeinit सभी चार बिंदुओं में पैडिंग को जोड़ने की अनुमति देता है।

func UIEdgeInsetsMake (_ top: CGFloat, _ left: CGFloat, _ bottom: CGFloat, _ right: CGFloat) -> UIEdgeInsets

विवरण
एक बटन या दृश्य के लिए एक किनारे इनसेट बनाता है। एक आयत एक आयत के चारों ओर एक मार्जिन है। सकारात्मक मूल्य मार्जिन को आयत के केंद्र के करीब दर्शाते हैं, जबकि नकारात्मक मूल्य केंद्र से आगे मार्जिन का प्रतिनिधित्व करते हैं।

पैरामीटर्स
टॉप: किसी ऑब्जेक्ट के शीर्ष पर इनसेट।
बायां: किसी वस्तु के
तल के बाईं ओर का इनसेट: किसी वस्तु के तल का इनसेट।
अधिकार: किसी वस्तु के अधिकार पर इनसेट।


एक बटन या दृश्य के लिए एक इनसेट देता है

ध्यान दें कि UIEdgeInsets का उपयोग उसी को प्राप्त करने के लिए भी किया जा सकता है।

Xcode 9.3 / स्विफ्ट 4


यह उत्तर गलत तरीके से कहता है कि कोड स्विफ्ट 4 संगत है, लेकिन UIEdgeInsetsMake को हटा दिया गया है। इसके बजाय UIEdgeInsets का उपयोग किया जाना चाहिए।
जोस

developer.apple.com/documentation/uikit/… जहां यह कहता है कि इसे हटा दिया गया है? मैं अपनी परियोजनाओं में इसका उपयोग करता हूं और नवीनतम Xcode के साथ काम कर रहा हूं, इसलिए स्विफ्ट 9.3 @ जोस
मौरिसियो चिरिनो

आप सही हैं, क्षमा करें, मेरा बुरा। UIEdgeInsets को प्राथमिकता दी जाती है, लेकिन इसका मतलब यह नहीं है कि दूसरे को हटा दिया जाए। हालांकि UIEdgeInsetsMake का उपयोग करते समय SwiftLint विरासत निर्माता के बारे में शिकायत करेगा।
जोस

1
ठीक मिल गया। कृपया नीचे हटा दें यदि आप एक थे जो कृपया डालते हैं, तो मैंने कभी नहीं कहा कि मेरा उत्तर एकमात्र संभव था।
मौरिसियो चिरिनो

यह कहता है कि मैं अपना वोट तब तक नहीं बदल सकता जब तक आप अपना जवाब नहीं बदलते। क्या आप शायद शब्दों को थोड़ा मोड़ सकते हैं?
जोस

2

विभिन्न वर्गों के एक गुच्छा का उपयोग करने की आवश्यकता नहीं है। अन्य उत्तर फ़्रेम इनसेट और CGRect और लेयर्स और ... BLAH का उपयोग करते हैं। अच्छा नही; ऑटो लेआउट और एक कस्टम UITableViewCell का उपयोग करें। उस UITableViewCell में, contentView के अंदर अपनी सामग्री को देखने के बजाय, एक नया कंटेनर व्यू (UIView) बनाएं, कंटेन्ट व्यू के अंदर कंटेनर व्यू को सबव्यू करें, फिर कंटेनर व्यू के अंदर अपने सभी व्यूज को सबव्यू करें।

रिक्ति बनाने के लिए, बस कंटेनर दृश्य के लेआउट मार्जिन को संपादित करें, जैसे:

class CustomTableViewCell: UITableViewCell {
    let containerView = UIView()
    let imageView = UIImageView()

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

    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)

        containerView.translatesAutoResizingMaskIntoConstraints = false
        imageView.translatesAutoResizingMaskIntoConstraints = false
        contentView.addSubview(containerView)
        containerView.addSubview(imageView)

        contentView.layoutMargins = UIEdgeInsets(top: 15, left: 3, bottom: 15, right: 3)
        containerView.layoutMargins = UIEdgeInsets(top: 15, left: 17, bottom: 15, right: 17) // It isn't really necessary unless you've got an extremely complex table view cell. Otherwise, you could just write e.g. containerView.topAnchor

        let cg = contentView.layoutMarginsGuide
        let lg = containerView.layoutMarginsGuide
        NSLayoutConstraint.activate([
            containerView.topAnchor.constraint(equalTo: cg.topAnchor),
            containerView.leadingAnchor.constraint(equalTo: cg.leadingAnchor),
            containerView.trailingAnchor.constraint(equalTo: cg.trailingAnchor),
            containerView.bottomAnchor.constraint(equalTo: cg.bottomAnchor),
            imageView.topAnchor.constraint(equalTo: lg.topAnchor),
            imageView.leadingAnchor.constraint(equalTo: lg.leadingAnchor),
            imageView.trailingAnchor.constraint(equalTo: lg.trailingAnchor),
            imageView.bottomAnchor.constraint(equalTo: lg.bottomAnchor)
        ])
    }
}

1

देखने की कोशिश करें - (UIEdgeInsets) LayoutMargins; सेल पर


1

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


1

उद्देश्य-सी के रनटाइम विशेषताओं का उपयोग और उपयोग करने के साथ GitHub पर मेरा समाधान देखें UITableView
यह मूल रूप से Apple के निजी डेटा संरचना का उपयोग करता है UITableViewRowDataजो मुझे निजी रनटाइम हेडर की खोज में मिला है UITableView:

https://github.com/JaviSoto/iOS10-Runtime-Headers/blob/master/Frameworks/UIKit.framework/UITableView.h ,

और यहां वांछित निजी वर्ग है जिसमें वह सब कुछ है जो आपको अपने सेल की स्पेसिंग्स को लेआउट करने की आवश्यकता है, हालांकि आप इसे कोशिकाओं की कक्षाओं में स्थापित किए बिना चाहते हैं:

https://github.com/JaviSoto/iOS10-Runtime-Headers/blob/master/Frameworks/UIKit.framework/UITableViewRowData.h


1

मुझे सेल में बैकग्राउंड कलर्स और एक्सेसरी व्यूज के साथ काम करने में दिक्कत हो रही थी। समाप्त हो रहा है:

1) एक पृष्ठभूमि रंग के साथ एक UIView सेट के साथ कोशिकाओं पृष्ठभूमि दृश्य संपत्ति सेट करें।

let view = UIView()
view.backgroundColor = UIColor.white
self.backgroundView = view

2) रिस्पांस के विचार को जोड़ने के लिए लेआउटसुब्यू में इस दृश्य को फिर से रखें

override func layoutSubviews() {
    super.layoutSubviews()
    backgroundView?.frame = backgroundView?.frame.inset(by: UIEdgeInsets(top: 2, left: 0, bottom: 0, right: 0)) ?? CGRect.zero
}

1

रिक्ति के रूप में हेडर का उपयोग करना ठीक काम करेगा मुझे लगता है कि यदि आप किसी हेडर का उपयोग नहीं करना चाहते हैं। अन्यथा, शायद सबसे अच्छा विचार नहीं है। मैं जो सोच रहा हूं वह एक कस्टम सेल व्यू है।

उदाहरण:

कस्टम सेल में, बाधाओं के साथ एक पृष्ठभूमि दृश्य बनाएं ताकि यह पूरे सेल को न भरे, इसे कुछ पैडिंग दें।

फिर, टेबलव्यू पृष्ठभूमि को अदृश्य बना दें और विभाजकों को हटा दें:

// Make the background invisible
tableView.backgroundView = UIView()
tableView.backgroundColor = .clear

// Remove the separators
tableview.separatorStyle = .none

1

यदि आप अपने टेबल व्यू के सेक्शन और रो नंबर को बदलना नहीं चाहते हैं (जैसे मैंने किया), तो यहां आप क्या करते हैं:

1) अपने टेबल सेल दृश्य के नीचे एक ImageView जोड़ें।

2) इसे टेबल व्यू के बैकग्राउंड कलर की तरह ही कलर करें।

मैंने अपने आवेदन में ऐसा किया है और यह पूरी तरह से काम करता है। चीयर्स! : डी


0

यहां छवि विवरण दर्ज करेंस्विफ्ट -5, यूआईटेबल व्यूसेल के बीच रिक्ति

    1. use sections instead of rows
    2. each section should return one row
    3. assign your cell data like this e.g [indexPath.section], instead of row
    4. use UITableView Method "heightForHeader" and return your desired spacing
    5. Do rest things as you were doing it

    Thanks!

0

आप बस इस तरह से कोड में बाधा का उपयोग कर सकते हैं:

class viewCell : UITableViewCell 
{

@IBOutlet weak var container: UIView!



func setShape() {
    self.container.backgroundColor = .blue
    self.container.layer.cornerRadius = 20
    container.translatesAutoresizingMaskIntoConstraints = false
    self.container.widthAnchor.constraint(equalTo:contentView.widthAnchor , constant: -40).isActive = true
           self.container.heightAnchor.constraint(equalTo: contentView.heightAnchor,constant: -20).isActive = true
           self.container.centerXAnchor.constraint(equalTo: contentView.centerXAnchor).isActive = true
           self.container.centerYAnchor.constraint(equalTo: contentView.centerYAnchor).isActive = true

    }
}

सबव्यू (कंटेनर) को जोड़ना और इसमें अन्य तत्वों को डालना महत्वपूर्ण है।


-2

सेल में एक आंतरिक दृश्य जोड़ें, फिर उसमें अपने स्वयं के विचार जोड़ें।


-2

स्विफ्ट 5.0 समाधान

अंदर UITableViewCell उपवर्ग

override func layoutSubviews() {
    super.layoutSubviews()
    let padding = UIEdgeInsets(top: 0, left: 0, bottom: 10, right: 0)
    bounds = UIEdgeInsetsInsetRect(bounds, padding)
}

-4

UITableViewDelegate का उपयोग करें, heightForRowAtIndexPathऔर पंक्ति की ऊंचाई वापस करें।

 (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
 return 100.0f ;
}

सवाल यह है कि सेल की ऊंचाई के बजाय कोशिकाओं के बीच रिक्ति को कैसे जोड़ा जाए
shippo7
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.