شروحات الكمبيوتر والإنترنت والموبايل

إنشاء رأس جدول ديناميكي الارتفاع في UITableView

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

البدء في تصميم رأس ديناميكي باستخدام UITableView

للقيام بذلك، سنقوم بإنشاء CustomHeaderView، حيث سيشتمل على UILabelين: أحدهما لعرض العنوان والآخر لعرض الوصف. سنستخدم UIStackView لترتيب هذه العناصر بشكل رأسي. من المهم أن نحرص على تطبيق حشوات للـ UIStackView حتى نحصل على تصميم جميل ومتوازن.

إعداد CustomHeaderView

يجب أولاً إنشاء كلاس مخصص لرأس الجدول، والذي سيحتوي على جميع العناصر الضرورية. بدايةً، سنقوم بتعريف UILabel للعناوين والأوصاف، بالإضافة إلى UIStackView لاحتوائهم. إليكم نموذجاً مبسطاً لما يمكن أن يكون عليه كلاس CustomHeaderView:

class CustomHeaderView: UIView {
    var padding: UIEdgeInsets = .zero
    // MARK: - عناصر واجهة المستخدم الخاصة
    var titleLabel: UILabel = {
        let label = UILabel()
        label.numberOfLines = 0
        label.translatesAutoresizingMaskIntoConstraints = false
        return label
    }()
    lazy var descriptionLabel: UILabel = {
        let label = UILabel()
        label.numberOfLines = 0
        label.translatesAutoresizingMaskIntoConstraints = false
        return label
    }()
    lazy var stackView: UIStackView = {
        let stackView = UIStackView(arrangedSubviews: [titleLabel, descriptionLabel])
        stackView.axis = .vertical
        stackView.alignment = .fill
        stackView.spacing = 8
        stackView.translatesAutoresizingMaskIntoConstraints = false
        return stackView
    }()
    override init(frame: CGRect = .zero) {
        super.init(frame: frame)
        setupView()
    }
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupView()
    }
    private func setupView() {
        addSubview(stackView)
        NSLayoutConstraint.activate([
            stackView.topAnchor.constraint(equalTo: topAnchor, constant: padding.top),
            stackView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: padding.left),
            stackView.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -padding.right),
            stackView.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -padding.bottom),
        ])
    }
}

تكوين رأس الجدول في ViewController

بعد إنشاء CustomHeaderView، يمكننا الآن تكوين هذا الرأس في ViewController. إليكم كيف يمكن القيام بذلك:

override func viewDidLoad() {
    super.viewDidLoad()
    let headerView = CustomHeaderView()
    headerView.padding = .init(top: 70, left: 23, bottom: 8, right: 23)
    tableView.tableHeaderView = headerView
}
override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    tableView.updateHeaderViewHeight()
}

تحديث ارتفاع الرأس ديناميكياً

من المهم أن نقوم بتحديث ارتفاع رأس الجدول بشكل ديناميكي بناءً على محتويات UIStackView. يمكن القيام بذلك باستخدام الامتداد التالي:

extension UITableView {
    func updateHeaderViewHeight() {
        guard let headerView = self.tableHeaderView else { return }
        headerView.setNeedsLayout()
        headerView.layoutIfNeeded()
        let size = headerView.systemLayoutSizeFitting(CGSize(width: self.bounds.width, height: 0))
        if headerView.frame.size.height != size.height {
            headerView.frame.size.height = size.height
            self.tableHeaderView = headerView
        }
    }
}

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

الخلاصة

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

استفد من هذه الخطوات لإنشاء رأس ديناميكي يناسب تطبيقك كما هو موضح في المقال حول "ios – كيفية إنشاء رأس جدول ديناميكي الارتفاع مع عنوان ووصف في UITableView؟" والذي يعتبر خطوة مهمة نحو بناء تطبيقات iOS فعالة.

فهد السلال

خبير تقني متخصص في شروحات الكمبيوتر والإنترنت والموبايل، يتمتع بخبرة واسعة في تقديم حلول تقنية مبتكرة ومبسطة. يهدف فهد إلى مساعدة المستخدمين على تحسين تجربتهم التقنية من خلال مقالات وأدلة عملية واضحة وسهلة الفهم.
زر الذهاب إلى الأعلى
Don`t copy text!