it-swarm.asia

كيفية إضافة التباعد بين UITableViewCell

هل هناك أي طريقة لإضافة التباعد بين UITableViewCell؟

لقد قمت بإنشاء جدول وكل خلية تحتوي فقط على صورة. يتم تعيين الصورة إلى الخلية مثل هذا:

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

ولكن هذا يجعل الصورة مكبرة وتناسب الخلية بأكملها ، ولا يوجد تباعد بين الصور.

أو دعنا نقول بهذه الطريقة ، ارتفاع الصورة مثل 50 ، وأريد أن أضيف 20 تباعد بين الصور. هل هناك أي طريقة لتحقيق ذلك؟

148
saili

سويفت الإصدار

(تم التحديث لـ Swift 3

هذه الإجابة أكثر عمومية إلى حد ما من السؤال الأصلي من أجل مشاهدي المستقبل. إنه مثال تكميلي على المثال الأساسي UITableView لـ Swift .

 enter image description here 

نظرة عامة

الفكرة الأساسية هي إنشاء قسم جديد (بدلاً من صف جديد) لكل عنصر صفيف. يمكن بعد ذلك تباعد الأقسام باستخدام ارتفاع رأس القسم.

كيفية القيام بذلك

  • قم بإعداد مشروعك كما هو موضح في مثال UITableView لـ Swift . (أي ، أضف UITableView وقم بتوصيل منفذ tableView بوحدة تحكم العرض).

  • في Interface Builder ، قم بتغيير لون خلفية العرض الرئيسي إلى اللون الأزرق الفاتح ولون الخلفية 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 للحصول على القيم المناسبة لعناصر الصفيف ومواضع النقر.

كيف حصلت على الحشو/المساحة الإضافية على اليمين واليسار؟

حصلت عليه بنفس الطريقة التي تضيف بها مسافات إلى أي عرض. اعتدت قيود التصميم التلقائي. فقط استخدم أداة pin في Interface Builder لإضافة مسافات للقيود الأمامية والزائدة.

129
Suragch

الطريقة التي أحقق بها إضافة تباعد بين الخلايا هي جعل numberOfSections = "عدد الصفيف" وجعل كل قسم يحتوي على صف واحد فقط. ثم حدد headerView وارتفاعه.

- (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;
}
126
JonatWang

حل سهل باستخدام سويفت :

// Inside UITableViewCell subclass

override func layoutSubviews() {
    super.layoutSubviews()

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

النتيجة  enter image description here 

78
Husam

كنت بحاجة إلى القيام بنفس مفهوم وجود UITableCells لها "مسافة" بينهما. نظرًا لأنه لا يمكنك إضافة مسافة بين الخلايا حرفيًا ، يمكنك مزيفها عن طريق معالجة ارتفاع خلية UITableView ثم إضافة UIView إلى محتوى عرض الخلية الخاصة بك. إليك لقطة شاشة لنموذج أولي قمت به في مشروع اختبار آخر عندما كنت أحاكي هذا:

Spacing between UITableViewCells

إليك بعض الأكواد (ملاحظة: هناك الكثير من القيم المرمزة الثابتة لأغراض العرض التوضيحي)

أولاً ، كنت بحاجة إلى ضبط heightForRowAtIndexPath للسماح بارتفاعات مختلفة على UITableViewCell.

- (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 مما يمنحه المظهر.

قد تكون هناك طرق أخرى لإنجاز هذا بشكل أفضل ، لكن كيف وجدت كيفية القيام بذلك. آمل أن يساعد شخص آخر.

40
Flea

سيكون لديك لضبط الإطار لصورتك. رمز لم تختبر هو

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

إذا كنت لا تستخدم رؤوس الأقسام (أو تذييلاتها) بالفعل ، فيمكنك استخدامها لإضافة تباعد تعسفي إلى خلايا الجدول. بدلاً من احتواء قسم واحد على صفوف n ، قم بإنشاء جدول به أقسام n مع صف واحد لكل منها.

قم بتطبيق طريقة tableView:heightForHeaderInSection: للتحكم في التباعد.

قد ترغب أيضًا في تطبيق tableView:viewForHeaderInSection: للتحكم في شكل التباعد.

7
Ferruccio

أعتقد أن الحل الأكثر مباشرة للأمام إذا كنت تبحث فقط عن مساحة صغيرة وربما أقل تكلفة سيكون ببساطة تعيين لون حدود الخلية على لون خلفية الجداول ثم ضبط عرض الحدود للحصول على النتيجة المرجوة!

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

أنا حلها مثل هذا الطريق في سويفت 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
}

وآمل أن يساعد أنت.

4
JulianKro

مثال في سويفت 3 ..

 enter image description here 

  1. تجعد تطبيق عرض واحد
  2. إضافة tableview في رأي المراقب المالي
  3. إضافة customcell لخلية tablview
  4. عرض رمز تحكم هو رفع الصوت عاليا مثل

       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 {return 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. تنزيل المصدر الكامل لجيثب: رابط

    https://github.com/enamul95/CustomSectionTable

3
Enamul Haque

نعم يمكنك زيادة أو تقليل التباعد (الحشو) بين خليتين عن طريق إنشاء طريقة عرض أساسية واحدة على طريقة عرض المحتوى في الخلية. قم بتعيين لون واضح لخلفية عرض المحتوى ويمكنك ضبط ارتفاع طريقة العرض الأساسية لإنشاء مسافة بين الخلايا.

3
divya d

ثلاثة طرق يمكنني التفكير فيها:

  1. قم بإنشاء خلية جدول مخصصة تحدد طريقة عرض الخلية بأكملها بالطريقة التي تريدها

  2. بدلاً من إضافة الصورة إلى عرض الصورة ، قم بإلغاء تحديد المقاطع الفرعية لعرض الصورة ، وقم بإنشاء طريقة عرض مخصصة تضيف UIImageView للصورة وطريقة عرض أخرى ، وربما UIView بسيطة توفر التباعد المطلوب ، وإضافتها كعرض فرعي لـ عرض الصورة.

  3. أريد أن أقترح عليك التعامل مع UIImageView مباشرةً لتعيين حجم/حشوة ثابتة ، لكنني لست في أي مكان بالقرب من Xcode لذلك لا يمكنني تأكيد ما إذا كان/سيعمل هذا.

هل هذا منطقي؟

3
csano

سويفت 4.2 الحل

// Inside UITableViewCell subclass
override func layoutSubviews() {    
    super.layoutSubviews()

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

أعتقد أن هذا هو الحل الأنظف:

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

ساعدت هذه المقالة ، إنها إلى حد كبير ما قالته الإجابات الأخرى ولكن تلخيص وإيجاز

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

في ذلك ، يطبقهم فقط على الجانبين الأيسر والأيمن ، لكن الحرف UIEdgeInsetsMake يسمح بإضافة الحشو إلى النقاط الأربع.

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

وصف
لإنشاء حافة أقحم لزر أو عرض. أقحم هو هامش حول مستطيل. تمثل القيم الموجبة هوامش أقرب إلى مركز المستطيل ، بينما تمثل القيم السالبة هوامش أبعد من المركز.

المعلمات
أعلى: أقحم في الجزء العلوي من كائن.
اليسار: أقحم على يسار كائن
أسفل: أقحم على الجزء السفلي من كائن.
اليمين: أقحم على يمين كائن.

عائدات
أقحم لزر أو عرض

لاحظ أنه يمكن أيضًا استخدام UIEdgeInsets لتحقيق ذلك.

الكود 9.3/سويفت 4

1
Mauricio Chirino

بناءً على إجابة Husam: يتيح استخدام طبقة الخلية بدلاً من طريقة عرض المحتوى إضافة حد حول الخلية بأكملها والملحق إذا لزم الأمر. تتطلب هذه الطريقة ضبطًا دقيقًا للقيود السفلية للخلية بالإضافة إلى تلك الإضافات وإلا لن يكون العرض مناسبًا.

@implementation TableViewCell

- (void)awakeFromNib { 
    ... 
}

- (void) layoutSubviews {
    [super layoutSubviews];

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

@end
1
dev_exo

حاول البحث في - (UIEdgeInsets) layoutMargins ؛ على الخلية

0
drunknbass

كنت في نفس القارب. في البداية حاولت التبديل إلى أقسام ، لكن في حالتي ، أصبح الأمر أكثر من مجرد صداع أكثر مما كنت أعتقد في البداية ، لذلك كنت أبحث عن بديل. إلى الاستمرار في استخدام الصفوف (وليس العبث مع كيفية الوصول إلى بيانات النموذج الخاص بك) ، إليك ما نجح معي فقط باستخدام باستخدام قناع :

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. آمل أن يكون هذا يساعد شخص ما!

0
Raimondo Previdi

لقد كان موقفي هو استخدام UIView المخصص ل viewForHeader في القسم أيضًا heightForHeader في الإرجاع بارتفاع ثابت للقول 40 ، كانت المشكلة عندما لا توجد بيانات تم لمس جميع طرق عرض الرأس لبعضها البعض. لذلك أردت أن أقوم بمسافة بين القسم في غياب البيانات ، لذلك قمت بالتثبيت عن طريق تغيير مستوى "نمط جدول المائدة" إلى "المجموعة".

0
Avijit Nagare

كنت أواجه مشكلة في الحصول على هذا للعمل إلى جانب ألوان الخلفية ووجهات النظر في الخلية. انتهى الاضطرار إلى:

1) قم بتعيين خاصية عرض خلفية الخلايا باستخدام مجموعة UIView بلون الخلفية.

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

2) إعادة وضع هذا العرض في layoutSubviews لإضافة فكرة التباعد

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

تحقق من حل على GitHub مع فئة فرعية من UITableView واستخدام ميزات وقت تشغيل Objective-C.
يستخدم أساسًا بنية البيانات الخاصة بشركة 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

0
Gleb Linnik