عرض بيانات JSON في UICollectionView

لعرض الاسم والعمر في نفس العنصر Label باستخدام JSON، يمكنك استخدام الدالة NSAttributedString في Swift. في هذه الحالة، يمكنك تحديد نص مختلط بين النص العادي ونص آخر لتمثيل العمر. يمكنك استخدام نفس الفكرة لعرض المدينة والمسافة في نفس العنصر Label. إليك كيفية القيام بذلك:

swiftCopy code
// Example JSON data
let json = """
{
    "name": "John Doe",
    "age": 30,
    "city": "New York",
    "distance": "5 km"
}
"""

// Parse JSON data
struct Person: Codable {
    let name: String
    let age: Int
    let city: String
    let distance: String
}

if let jsonData = json.data(using: .utf8) {
    do {
        let person = try JSONDecoder().decode(Person.self, from: jsonData)
        let nameLabel = UILabel()
        let cityLabel = UILabel()

        // Set name and age in the same label
        let nameAgeString = NSMutableAttributedString()
        nameAgeString.append(NSAttributedString(string: person.name, attributes: [.font: UIFont.systemFont(ofSize: 18)]))
        nameAgeString.append(NSAttributedString(string: " (\(person.age))", attributes: [.font: UIFont.systemFont(ofSize: 14), .foregroundColor: UIColor.gray]))
        nameLabel.attributedText = nameAgeString

        // Set city and distance in the same label
        let cityDistanceString = NSMutableAttributedString()
        cityDistanceString.append(NSAttributedString(string: person.city, attributes: [.font: UIFont.systemFont(ofSize: 18)]))
        cityDistanceString.append(NSAttributedString(string: " - \(person.distance)", attributes: [.font: UIFont.systemFont(ofSize: 14), .foregroundColor: UIColor.gray]))
        cityLabel.attributedText = cityDistanceString

        // Now you can add nameLabel and cityLabel to your collection view cell
        // cell.addSubview(nameLabel)
        // cell.addSubview(cityLabel)

    } catch {
        print("Error decoding JSON: \(error)")
    }
}

يرجى تغيير المتغير json ليحتوي على بيانات JSON الفعلية التي تستخدمها. كما يجب عليك استخدام هيكل JSON المناسب الذي يتوافق مع بياناتك.

يمكنك أيضًا استخدام نفس الفكرة لتعيين البيانات في cell الخاصة بك في UICollectionView.

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

1. إنشاء هيكل لتمثيل البيانات:
   قم بإنشاء هيكل يحتوي على البيانات التي تريد عرضها في كل cell. على سبيل المثال، يمكنك استخدام الهيكل التالي:

   swiftCopy code
   struct Person {
       let name: String
       let age: Int
       let city: String
       let distance: String
   }
   

2. إنشاء UICollectionViewCell مخصص:
   قم بإنشاء UICollectionViewCell مخصص لعرض البيانات. يمكنك استخدام مصفوفة من الـLabels داخل cell لعرض البيانات. يمكنك أيضًا استخدام NSAttributedString لعرض النص بتنسيق مختلف، كما فعلنا في الشفرة السابقة.

   swiftCopy code
   class CustomCollectionViewCell: UICollectionViewCell {
       @IBOutlet weak var nameLabel: UILabel!
       @IBOutlet weak var cityLabel: UILabel!
   
       func configure(with person: Person) {
           let nameAgeString = NSMutableAttributedString()
           nameAgeString.append(NSAttributedString(string: person.name, attributes: [.font: UIFont.systemFont(ofSize: 18)]))
           nameAgeString.append(NSAttributedString(string: " (\(person.age))", attributes: [.font: UIFont.systemFont(ofSize: 14), .foregroundColor: UIColor.gray]))
           nameLabel.attributedText = nameAgeString
   
           let cityDistanceString = NSMutableAttributedString()
           cityDistanceString.append(NSAttributedString(string: person.city, attributes: [.font: UIFont.systemFont(ofSize: 18)]))
           cityDistanceString.append(NSAttributedString(string: " - \(person.distance)", attributes: [.font: UIFont.systemFont(ofSize: 14), .foregroundColor: UIColor.gray]))
           cityLabel.attributedText = cityDistanceString
       }
   }
   

3. تكوين cell في UICollectionViewDataSource:
   قم بتكوين cell في cellForItemAt method في UICollectionViewDataSource. استخدم الهيكل الذي قمت بإنشائه لتمثيل البيانات وقم بتحديث خلية العرض.

   swiftCopy code
   func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
       let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CustomCollectionViewCell", for: indexPath) as! CustomCollectionViewCell
       let person = people[indexPath.item] // people هنا هو مصفوفة من الأشخاص التي تريد عرضها
       cell.configure(with: person)
       return cell
   }
   

بهذه الطريقة، يمكنك عرض الاسم والعمر في نفس الLabel وكذلك عرض المدينة والمسافة في نفس الLabel في كل cell من UICollectionView الخاص بك.