Xamarin.iOS'ta Satır Yüksekliğini Otomatik Boyutlandırma

Uyarı

iOS Tasarım Aracı, Mac için Visual Studio 2019 sürüm 16.8 ve Visual Studio 2019 sürüm 8.8'de kullanım dışı bırakıldı ve Visual Studio 2019 sürüm 16.9 ve Mac için Visual Studio sürüm 8.9'da kaldırıldı. iOS kullanıcı arabirimleri oluşturmanın önerilen yolu doğrudan Xcode'un Interface Builder'ını çalıştıran bir Mac'tedir. Daha fazla bilgi için bkz . Xcode ile kullanıcı arabirimleri tasarlama.

iOS 8'den başlayarak, Apple Otomatik Düzen, Boyut Sınıfları ve Kısıtlamaları kullanarak belirli bir Satırın boyutunu temel alarak otomatik olarak büyüyebilen ve yüksekliği küçülebilen bir Tablo Görünümü (UITableView) oluşturma özelliği ekledi.

iOS 11, satırların otomatik olarak genişletilebilmesini sağlar. Üst bilgiler, alt bilgiler ve hücreler artık içeriğine göre otomatik olarak boyutlandırılabilir. Ancak, tablonuz iOS Tasarım Aracı, Arabirim Oluşturucusu'nda oluşturulduysa veya sabit satır yükseklikleri varsa, bu kılavuzda açıklandığı gibi kendi kendine boyutlandırma hücrelerini el ile etkinleştirmeniz gerekir.

iOS Tasarım Aracı Hücre Düzeni

iOS Tasarım Aracı Satır'ın otomatik olarak yeniden boyutlandırılmasını istediğiniz Tablo Görünümü için görsel taslak açın, Hücrenin Prototipini seçin ve hücrenin düzenini tasarlar. Örneğin:

Prototype içindeki her öğe için, Tablo Görünümü döndürme veya farklı iOS Cihaz ekran boyutları için yeniden boyutlandırıldığı için öğeleri doğru konumda tutmak için kısıtlamalar ekleyin. Örneğin, Hücrenin İçerik Görünümünün üst, sol ve sağ üst kısmına sabitlemeTitle:

Örnek tablomuzda küçük Label olan (altında Title), Satır yüksekliğini artırmak veya azaltmak için küçülebilen ve büyüyebilen alandır. Bu etkiyi elde etmek için etiketin sol, sağ, üst ve alt kısımlarını sabitlemek için aşağıdaki kısıtlamaları ekleyin:

Hücredeki öğeleri tamamen kısıtladığımıza göre, hangi öğenin esnetilmesi gerektiğini netleştirmemiz gerekir. Bunu yapmak için, Özellikler Bölmesi'nin Düzen bölümünde İçerik Kucaklama Önceliği ve İçerik Sıkıştırma Direnci Önceliği'ni gerektiği gibi ayarlayın:

Genişletmek istediğiniz öğeyi daha düşük bir Sarma Önceliği değerine ve daha düşük Sıkıştırma Direnci Önceliği değerine sahip olacak şekilde ayarlayın.

Ardından, Hücre Prototipi'ni seçip benzersiz bir Tanımlayıcı vermemiz gerekir:

Örneğimiz söz konusu olduğunda, GrowCell. Bu değeri daha sonra tabloyu doldururken kullanacağız.

Önemli

Tablonuzda birden fazla hücre türü (Prototip) varsa, Otomatik Satır Yeniden Boyutlandırma'nın çalışması için her türün kendi benzersiz Identifier türüne sahip olduğundan emin olmanız gerekir.

Hücre Prototipimizin her öğesi için, C# koduna göstermek için bir Ad atayın. Örneğin:

Ardından, UITableView ve UITableCell (Prototype) için UITableViewControllerözel bir sınıf ekleyin. Örneğin:

Son olarak, etiketimizde beklenen tüm içeriğin görüntülendiğinden emin olmak için Lines özelliğini olarak 0ayarlayın:

Kullanıcı arabirimi tanımlandığında, Otomatik Satır Yüksekliğini Yeniden Boyutlandırma'yı etkinleştirmek için kodu ekleyelim.

Yüksekliği Otomatik Yeniden Boyutlandırmayı Etkinleştirme

Tablo Görünümümüzün Veri Kaynağında (UITableViewDatasource) veya Kaynağında (UITableViewSource ) bir Hücreyi sıraladığımızda tasarımcıda tanımladığımız hücreyi Identifier kullanmamız gerekir. Örneğin:

public string CellID {
    get { return "GrowCell"; }
}
...

public override UITableViewCell GetCell (UITableView tableView, Foundation.NSIndexPath indexPath)
{
    var cell = tableView.DequeueReusableCell (CellID, indexPath) as GrowRowTableCell;
    var item = Items [indexPath.Row];

    // Setup
    cell.Image = UIImage.FromFile(item.ImageName);
    cell.Title = item.Title;
    cell.Description = item.Description;

    return cell;
}

Varsayılan olarak, Tablo Görünümü Satır Yüksekliğini Otomatik Yeniden Boyutlandırma için ayarlanır. Bunu RowHeight sağlamak için özelliği olarak UITableView.AutomaticDimensionayarlanmalıdır. Özelliğini de içinde ayarlamamız EstimatedRowHeightUITableViewControllergerekir. Örneğin:

public override void ViewWillAppear (bool animated)
{
    base.ViewWillAppear (animated);

    // Initialize table
    TableView.DataSource = new GrowRowTableDataSource(this);
    TableView.Delegate = new GrowRowTableDelegate (this);
    TableView.RowHeight = UITableView.AutomaticDimension;
    TableView.EstimatedRowHeight = 40f;
    TableView.ReloadData ();
}

Bu tahminin tam olması gerekmez, yalnızca Tablo Görünümü'ndeki her satırın ortalama yüksekliğine ilişkin kabaca bir tahmindir.

Bu kod kullanıldığında, uygulama çalıştırıldığında her satır Hücre Prototipi'ndeki son Etiketin yüksekliğine göre küçülür ve büyür. Örneğin: