iOS Designer‘daki Tablolarla Çalışma

Görsel taslaklar, iOS uygulamaları oluşturmanın bir WYSIWYG yoludur ve Mac ve Windows üzerinde Visual Studio'da desteklenir. Görsel Taslaklar hakkında daha fazla bilgi için Görsel Taslaklara Giriş belgesine bakın. Görsel taslaklar, tablodaki hücre düzenlerini düzenlemenize de olanak sağlar ve bu da tablo ve hücrelerle geliştirmeyi kolaylaştırır

iOS Tasarım Aracı tablo görünümünün özelliklerini yapılandırırken, aralarından seçim yapabileceğiniz iki tür hücre içeriği vardır: Dinamik veya Statik Prototip İçerik.

Dinamik Prototip İçeriği

UITableView Prototip içeriği olan bir genellikle prototip hücrenin (veya birden fazla tanımlayabildiğiniz gibi hücrelerin) listedeki her öğe için yeniden kullanıldığı verilerin listesini görüntülemeye yöneliktir. Hücrelerin örneğini oluşturması gerekmez, yönteminde GetView kendi UITableViewSourceyöntemi çağrılarak DequeueReusableCell elde edilir.

Statik İçerik

UITableViewstatik içerikli s tabloların doğrudan tasarım yüzeyinde tasarlanmasına olanak sağlar. Hücreler tabloya sürüklenebilir ve özellikler değiştirilerek ve denetimler eklenerek özelleştirilebilir.

Görsel Taslak Temelli Uygulama Oluşturma

StoryboardTable örneği, görsel taslakta her iki UITableView türünü de kullanan basit bir ana ayrıntı uygulaması içerir. Bu bölümün geri kalanında, tamamlandığında aşağıdaki gibi görünecek küçük bir yapılacaklar listesi örneğinin nasıl derlanacağı açıklanmaktadır:

Kullanıcı arabirimi görsel taslakla derlenir ve her iki ekranda da UITableView kullanılır. Ana ekranda satırın düzenini oluşturmak için prototip içerik kullanılır ve ayrıntı ekranı özel hücre düzenlerini kullanarak veri girişi formu oluşturmak için statik içerik kullanır.

İzlenecek yol

Yeni Proje Kullanarak Visual Studio'da yeni bir çözüm oluşturun... > Tek Görünüm Uygulaması (C#) ve storyboardTables olarak adlandırın.

Çözüm, bazı C# dosyaları ve zaten oluşturulmuş bir Main.storyboard dosyayla açılır. Dosyayı iOS Tasarım Aracı açmak için çift tıklayınMain.storyboard.

Görsel Taslak'ta değişiklik yapma

Görsel taslak üç adımda düzenlenir:

İlk olarak, gerekli görünüm denetleyicilerini düzenleyip özelliklerini ayarlayın.
İkinci olarak, nesneleri görünümünüzde sürükleyip bırakarak kullanıcı arabiriminizi oluşturun
Son olarak, her görünüme gerekli UIKit sınıfını ekleyin ve çeşitli denetimlere kodda başvurulabilmesi için bir ad verin.

Görsel taslak tamamlandıktan sonra, her şeyin çalışmasını sağlamak için kod eklenebilir.

Görünüm Denetleyicilerini Düzenleme

Görsel taslakta yapılan ilk değişiklik, mevcut Ayrıntı görünümünü silmek ve bunu uiTableViewController ile değiştirmektir. Şu adımları izleyin:

Görünüm Denetleyicisi'nin altındaki çubuğu seçin ve silin.
Araç Kutusu'ndan Görsel Taslak'a bir Gezinti Denetleyicisi ve Tablo Görünümü Denetleyicisi sürükleyin.
Kök Görünüm Denetleyicisi'nden yeni eklenen ikinci Tablo Görünümü Denetleyicisi'ne bir segue oluşturun. Segue'yi oluşturmak için Control+Ayrıntı hücresinden yeni eklenen UITableViewController öğesine sürükleyin. Segue Seçimi altında Göster seçeneğini belirleyin.
Oluşturduğunuz yeni segue'yi seçin ve kodda bu segue'ye başvurması için bir tanımlayıcı verin. Segue öğesine tıklayın ve Özellikler Bölmesi'ndeki Tanımlayıcı için şunu girinTaskSegue:
Ardından, iki Tablo Görünümünü seçerek ve Özellikler Bölmesi'ni kullanarak yapılandırın. Görünüm Denetleyicisi'ni değil Görünüm'ü seçtiğinizden emin olun; seçime yardımcı olması için Belge Ana Hattı'nı kullanabilirsiniz.
Kök Görünüm Denetleyicisini İçerik olarak değiştirin: Dinamik Prototipler (Tasarım Yüzeyindeki Görünüm Prototip İçerik olarak etiketlenir):
Yeni UITableViewController öğesini İçerik: Statik Hücreler olarak değiştirin.
Yeni UITableViewController'ın sınıf adı ve tanımlayıcı kümesi olmalıdır. Görünüm Denetleyicisi'ni seçin ve Özellikler Bölmesi'ndeki Sınıf için TaskDetailViewController yazın; bu, Çözüm Bölmesi'nde yeni TaskDetailViewController.cs bir dosya oluşturur. Aşağıdaki örnekte gösterildiği gibi StoryboardID değerini ayrıntı olarak girin. Bu, daha sonra bu görünümü C# kodunda yüklemek için kullanılacaktır:
Görsel taslak tasarım yüzeyi artık şöyle görünmelidir (Kök Görünüm Denetleyicisi'nin gezinti öğesi başlığı "Chore Board" olarak değiştirildi):

Kullanıcı arabirimini oluşturma

Görünümler ve segue'ler yapılandırıldığına göre, kullanıcı arabirimi öğelerinin eklenmesi gerekir.

Kök Görünüm Denetleyicisi

İlk olarak, Ana Görünüm Denetleyicisi'nde prototip hücreyi seçin ve tanımlayıcıyı aşağıda gösterildiği gibi görev hücresi olarak ayarlayın. Bu, bu UITableViewCell örneğini almak için kodda daha sonra kullanılacaktır:

Ardından, aşağıda gösterildiği gibi yeni görevler ekleyecek bir düğme oluşturmanız gerekir:

Aşağıdakileri yapın:

Araç Kutusu'ndan bir Çubuk Düğme Öğesi'ni gezinti çubuğunun sağ tarafına sürükleyin.
Özellikler Bölmesi'ndeki Çubuk Düğme Öğesi'nin altında Tanımlayıcı: Ekle'yi (artı düğmesi yapmak + için) seçin.
Daha sonraki bir aşamada kodda tanımlanabilmesi için ad verin. Çubuk düğmesi öğesinin adını ayarlamanıza izin vermek için Kök Görünüm Denetleyicisine bir Sınıf Adı (örneğin ItemViewController) vermeniz gerektiğini unutmayın.

TaskDetail Görünüm Denetleyicisi

Ayrıntı Görünümü çok daha fazla çalışma gerektirir. Tablo Görünümü Hücrelerin görünüme sürüklenip etiketler, metin görünümleri ve düğmelerle doldurulmalıdır. Aşağıdaki ekran görüntüsünde iki bölüm içeren tamamlanmış kullanıcı arabirimi gösterilmektedir. Bir bölümde üç hücre, üç etiket, iki metin alanı ve bir anahtar bulunurken, ikinci bölümde iki düğme içeren bir hücre bulunur:

Düzenin tamamını oluşturma adımları şunlardır:

Tablo görünümünü seçin ve Özellik Bölmesi'ni açın. Aşağıdaki özellikleri güncelleştirin:

Bölümler: 2
Stil: Gruplandırılmış
Ayırıcı: Yok
Seçim: Seçim Yok

En üstteki bölümü seçin ve Özellikler > Tablo Görünümü Bölümü'nin altında Satırlar'ı aşağıda gösterildiği gibi 3 olarak değiştirin:

Her hücre için Özellikler Bölmesi'ni açın ve ayarlayın:

Stil: Özel
Tanımlayıcı: Her hücre için benzersiz bir tanımlayıcı seçin (örn. "title", "notes", "done").
Ekran görüntüsünde gösterilen düzeni oluşturmak için gerekli denetimleri sürükleyin (UILabel, UITextField ve UISwitch'i doğru hücrelere yerleştirin ve etiketleri uygun şekilde ayarlayın, örneğin. Başlık, Notlar ve Bitti).

İkinci bölümde Satırlar'ı 1 olarak ayarlayın ve hücreyi daha uzun yapmak için alt yeniden boyutlandırma tutamacını alın.

Tanımlayıcı: değerini benzersiz bir değer olarak ayarlayın (örn. "kaydet").
Arka Plan: Rengi Temizle'yi ayarlayın.
İki düğmeyi hücreye sürükleyin ve başlıklarını aşağıda gösterildiği gibi uygun şekilde ayarlayın ( kaydet ve sil gibi):

Bu noktada, uyarlamalı bir düzen sağlamak için hücrelerinizde ve denetimlerinizde kısıtlamalar ayarlamak da isteyebilirsiniz.

UIKit Sınıfı ve Adlandırma Denetimleri Ekleme

Görsel Taslak oluşturmanın birkaç son adımı vardır. İlk olarak, daha sonra kodda kullanılabilmesi için denetimlerimizin her birine Kimlik > Adı altında bir ad vermeliyiz. Bunları aşağıdaki gibi adlandırın:

Title UITextField : TitleText
Notlar UITextField : NotesText
UISwitch : DoneSwitch
DELETE UIButton : DeleteButton
UIButton'ı Kaydet : SaveButton

Kod Ekleme

Çalışmanın geri kalanı Mac üzerinde Visual Studio'da veya C# ile Windows'ta yapılacaktır. Kodda kullanılan özellik adlarının yukarıdaki kılavuzda ayarlananları yansıttığını unutmayın.

İlk olarak, uygulama genelinde bu değerleri kullanabilmek için ID, Name, Notes ve Done Boole değerini almak ve ayarlamak için bir yol sağlayacak bir sınıf oluşturmak Chores istiyoruz.

Sınıfınıza Chores aşağıdaki kodu ekleyin:

public class Chores {
    public int Id { get; set; }
    public string Name { get; set; }
    public string Notes { get; set; }
    public bool Done { get; set; }
  }

Ardından, öğesinden UITableViewSourcedevralan bir RootTableSource sınıf oluşturun.

Bu ve Görsel Taslak olmayan tablo görünümü arasındaki fark, yöntemin GetView herhangi bir hücre örneği oluşturması gerekmesidir; theDequeueReusableCell yöntem her zaman prototip hücrenin bir örneğini döndürür (eşleşen tanımlayıcı ile).

Aşağıdaki kod dosyasındandır RootTableSource.cs :

public class RootTableSource : UITableViewSource
{
// there is NO database or storage of Tasks in this example, just an in-memory List<>
Chores[] tableItems;
string cellIdentifier = "taskcell"; // set in the Storyboard

    public RootTableSource(Chores[] items)
    {
        tableItems = items;
    }

public override nint RowsInSection(UITableView tableview, nint section)
{
  return tableItems.Length;
}

public override UITableViewCell GetCell(UITableView tableView, NSIndexPath indexPath)
{
  // in a Storyboard, Dequeue will ALWAYS return a cell, 
  var cell = tableView.DequeueReusableCell(cellIdentifier);
  // now set the properties as normal
  cell.TextLabel.Text = tableItems[indexPath.Row].Name;
  if (tableItems[indexPath.Row].Done)
    cell.Accessory = UITableViewCellAccessory.Checkmark;
  else
    cell.Accessory = UITableViewCellAccessory.None;
  return cell;
}
public Chores GetItem(int id)
{
  return tableItems[id];
}

sınıfını RootTableSource kullanmak için' oluşturucusunda ItemViewControlleryeni bir koleksiyon oluşturun:

chores = new List<Chore> {
      new Chore {Name="Groceries", Notes="Buy bread, cheese, apples", Done=false},
      new Chore {Name="Devices", Notes="Buy Nexus, Galaxy, Droid", Done=false}
    };

içinde ViewWillAppear koleksiyonu kaynağa geçirin ve tablo görünümüne atayın:

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

    TableView.Source = new RootTableSource(chores.ToArray());
}

Uygulamayı şimdi çalıştırırsanız, ana ekran yüklenir ve iki görev listesini görüntüler. Bir göreve dokunulduğunda görsel taslak tarafından tanımlanan segue, ayrıntı ekranının görünmesine neden olur, ancak şu anda herhangi bir veri görüntülemez.

Bir segue'de 'parametre göndermek' için yöntemini geçersiz kılın PrepareForSegue ve üzerindeki DestinationViewController özelliklerini ayarlayın ( TaskDetailViewController bu örnekte). Hedef Görünüm Denetleyicisi sınıfı örneği oluşturulmuş ancak kullanıcıya henüz görüntülenmemiştir; bu, sınıftaki özellikleri ayarlayabileceğiniz ancak kullanıcı arabirimi denetimlerini değiştirebileceğiniz anlamına gelir:

public override void PrepareForSegue (UIStoryboardSegue segue, NSObject sender)
    {
      if (segue.Identifier == "TaskSegue") { // set in Storyboard
        var navctlr = segue.DestinationViewController as TaskDetailViewController;
        if (navctlr != null) {
          var source = TableView.Source as RootTableSource;
          var rowPath = TableView.IndexPathForSelectedRow;
          var item = source.GetItem(rowPath.Row);
          navctlr.SetTask (this, item); // to be defined on the TaskDetailViewController
        }
      }
    }

yönteminde TaskDetailViewController SetTask , ViewWillAppear'da başvurulabilmeleri için parametreleri özelliklere atar. Denetim özellikleri içinde değiştirilemiyor SetTask , çünkü çağrıldığında PrepareForSegue mevcut olmayabilir:

Chore currentTask {get;set;}
    public ItemViewController Delegate {get;set;} // will be used to Save, Delete later

public override void ViewWillAppear (bool animated)
    {
      base.ViewWillAppear (animated);
      TitleText.Text = currentTask.Name;
      NotesText.Text = currentTask.Notes;
      DoneSwitch.On = currentTask.Done;
    }

    // this will be called before the view is displayed
    public void SetTask (ItemViewController d, Chore task) {
      Delegate = d;
      currentTask = task;
    }

Segue artık ayrıntı ekranını açar ve seçili görev bilgilerini görüntüler. Ne yazık ki Kaydet ve Sil düğmeleri için bir uygulama yoktur. Düğmeleri uygulamadan önce, temel alınan verileri güncelleştirmek ve ayrıntı ekranını kapatmak için bu yöntemleri ItemViewController.cs ekleyin:

public void SaveTask(Chores chore)
{
  var oldTask = chores.Find(t => t.Id == chore.Id);
        NavigationController.PopViewController(true);
}

public void DeleteTask(Chores chore)
{
  var oldTask = chores.Find(t => t.Id == chore.Id);
  chores.Remove(oldTask);
        NavigationController.PopViewController(true);
}

Ardından, düğmenin TouchUpInside olay işleyicisini TaskDetailViewController.cs yöntemine ViewDidLoad eklemeniz gerekir. Delegate özelliğine ItemViewController yönelik başvuru özel olarak oluşturulmuştur, böylece ve öğesini çağırabiliriz SaveTask ve DeleteTaskbu da işlemlerinin bir parçası olarak bu görünümü kapatır:

SaveButton.TouchUpInside += (sender, e) => {
        currentTask.Name = TitleText.Text;
        currentTask.Notes = NotesText.Text;
        currentTask.Done = DoneSwitch.On;
        Delegate.SaveTask(currentTask);
      };

DeleteButton.TouchUpInside += (sender, e) => Delegate.DeleteTask(currentTask);

Oluşturulacak son işlev, yeni görevlerin oluşturulmasıdır. ItemViewController.cs yeni görevler oluşturan ve ayrıntı görünümünü açan bir yöntem ekleyin. Görsel taslaktan bir görünümün örneğini oluşturmak için bu görünüm için yöntemini Identifier kullanınInstantiateViewController; bu örnekte "ayrıntı" olacaktır:

public void CreateTask () 
    {
      // first, add the task to the underlying data
      var newId = chores[chores.Count - 1].Id + 1;
      var newChore = new Chore{Id = newId};
      chores.Add (newChore);

      // then open the detail view to edit it
      var detail = Storyboard.InstantiateViewController("detail") as TaskDetailViewController;
      detail.SetTask (this, newChore);
      NavigationController.PushViewController (detail, true);
    }

Son olarak, ItemViewController.csViewDidLoad yönteminin gezinti çubuğundaki düğmeyi çağırarak çağırın:

AddButton.Clicked += (sender, e) => CreateTask ();

Bu işlem Görsel Taslak örneğini tamamlar; tamamlanmış uygulama şu şekilde görünür:

Örnekte aşağıdakiler gösterilmiştir:

Verilerin listelerini görüntülemek için hücrelerin yeniden kullanılmak üzere tanımlandığı Prototip İçerikli bir tablo oluşturma.
Giriş formu oluşturmak için Statik İçerik içeren bir tablo oluşturma. Bu, tablo stilini değiştirmeyi ve bölümler, hücreler ve kullanıcı arabirimi denetimleri eklemeyi içerir.
Bir segue oluşturma ve yöntemini geçersiz kılarak PrepareForSegue gerekli parametrelerin hedef görünümüne bildirme.
Görsel taslak görünümlerini doğrudan yöntemiyle Storyboard.InstantiateViewController yükleme.

Görsel Taslaklara Giriş

Last updated on 2017-03-22

Aracılığıyla paylaş