リストスクリーンレットでのカスタムセルの使用

リストスクリーンレットでのカスタムセルの使用

ご覧のページは、お客様の利便性のために一部機械翻訳されています。また、ドキュメントは頻繁に更新が加えられており、翻訳は未完成の部分が含まれることをご了承ください。最新情報は都度公開されておりますため、必ず英語版をご参照ください。翻訳に問題がある場合は、こちらまでご連絡ください。

Liferayスクリーンに付属するものを含むほとんどのリストスクリーンレットでは、デフォルトテーマは iOSの UITableView のデフォルトセルを使用してリストを表示します。 リストスクリーンレット作成チュートリアルのテーマ作成手順 では、これらのセルを使用するよう指示されています。 ただし、カスタムセルを使用して、リストをニーズに合わせることができます。 これを行うには、必要があります 拡張されたテーマの作成 テーマから使用している のUITableViewのデフォルトのセルを。 これは通常、リストスクリーンレットのデフォルトテーマを拡張することを意味します。 このチュートリアルでは、リストScreenletのカスタムセルを含む拡張テーマを作成する方法を示します。 例として、このチュートリアルでは、サンプルのブックマークリストスクリーンレットのカスタムテーマのコードを使用します。 このテーマの完成したコード は、GitHub でいつでも参照できます。

カスタムセルの作成に加えて、このチュートリアルは、拡張テーマを作成するための

テーマ作成チュートリアルと同じ基本手順に従うことに注意してください。 たとえば、テーマを作成する場所を決定し、テーマのXIBおよびViewクラスを作成する必要があります。

最初に、テーマのカスタムセルを作成します。

カスタムセルの作成

あなたいったん 、あなたのテーマを作成する場所を決める、あなたが始めることができます。 最初に、カスタムセルのXIBファイルとそのコンパニオンクラスを作成します。 応じてそれらに名前を チュートリアルのベストプラクティスで命名規則。 XIBでセルのUIを定義したら、コンパニオンクラスで必要な数のアウトレットとアクションを作成します。 また、Interface BuilderでこのクラスをXIBのカスタムクラスとして割り当ててください。 行ごとに異なるレイアウトを使用する場合は、それぞれにXIBファイルとコンパニオンクラスを作成する必要があることに注意してください。

たとえば、次のスクリーンショットは、ブックマークリストスクリーンレットのカスタムセルのXIBファイル BookmarkCell_default-custom.xib を示しています。 このセルにはブックマークの名前とURLが表示される必要があるため、2つのラベルが含まれています。

図1:ブックマークリストスクリーンレットのカスタムセルのXIBファイル。

このXIBのカスタムクラス BookmarkCell_default_customには、各ラベルのアウトレットが含まれています。 bookmark 変数には、ブックマークの名前とURLをそれぞれのラベルに設定する didSet オブザーバーも含まれています。

import UIKit

class BookmarkCell_default_custom: UITableViewCell {

    @IBOutlet weak var nameLabel: UILabel?
    @IBOutlet weak var urlLabel: UILabel?

    var bookmark: Bookmark? {
        didSet {
            nameLabel?.text = bookmark?.name
            urlLabel?.text = bookmark?.url
        }
    }

}

すばらしいです\! これで、カスタムセルができました。 次に、残りのテーマを作成します。

テーマのXIBおよびビュークラスの作成

これで、テーマのXIBファイルとViewクラスを作成する準備が整いました。 親テーマのXIBをコピーし、必要な変更を加えてXIBを作成します。 ファイル名とカスタムクラス名以外に変更を加える必要がない場合があります。 たとえば、カスタムセルは、ブックマークリストスクリーンレットのカスタムテーマとデフォルトテーマの唯一の違いです。 したがって、これらのテーマのXIBファイル(BookmarkListView_default-custom.xib および BookmarkListView_default.xib)は、名前とカスタムクラス以外は同一です。 UIコンポーネントのサイズと位置は同じです。

次に、親テーマのViewクラスを拡張して、Viewクラスを作成します。 セルIDとして機能する文字列定数も追加する必要があります。 すぐに、この定数を使用してカスタムセルを登録します。 たとえば、ブックマークリストスクリーンレットのカスタムテーマ(BookmarkListView_default_custom)のViewクラスは、デフォルトテーマのViewクラス(BookmarkListView_default)を拡張し、文字列定数 BookmarkCellIdを定義します。

public class BookmarkListView_default_custom: BookmarkListView_default {

    let BookmarkCellId = "bookmarkCell"
    …

次に、 doRegisterCellNibs メソッドをオーバーライドして、カスタムセルを登録します。 この方法では、作成 UINib あなたのセルのインスタンスをした後に登録 のUITableView インスタンス(のtableViewから継承) BaseListTableView クラス。 nibファイルを登録するときは、先ほど作成した文字列定数を forCellReuseIdentifierとして使用する必要があります。 たとえば、 BookmarkListView_default-customdoRegisterCellNibs メソッドは次のとおりです。

  public override func doRegisterCellNibs() {
      let nib = UINib(nibName: "BookmarkCell_default-custom", bundle: NSBundle.mainBundle())

      tableView?.registerNib(nib, forCellReuseIdentifier: BookmarkCellId)
}

また、Viewクラスで、 doGetCellId メソッドをオーバーライドして、各行のセルIDを返します。 このメソッドで行う必要があるのは、前に作成した文字列定数を返すことだけです。 たとえば、 BookmarkListView_default-customdoGetCellId メソッドは、 BookmarkCellId 定数を返します。

override public func doGetCellId(row row: Int, object: AnyObject?) -> String {
    return BookmarkCellId
}

doFillLoadedCell メソッドをオーバーライドして、セルにデータを入力します。 このメソッドは、進行中のセルに対しては呼び出されないことに注意してください。データを表示するセルに対してのみ呼び出されます。 また、このメソッドの object 引数には、データが AnyObjectとして含まれていることに注意してください。 これを目的の型にキャストしてから、適切なセル変数に設定する必要があります。 たとえば、 BookmarkListView_default-customdoFillLoadedCell メソッドは、 object 引数を Bookmark キャストし、それをセルの bookmark 変数に設定します。

override public func doFillLoadedCell(row row: Int, cell: UITableViewCell, object:AnyObject) {
    if let bookmarkCell = cell as? BookmarkCell_default_custom, bookmark = object as? Bookmark {
        bookmarkCell.bookmark = bookmark
    }
}

典型的なiOS UITableViewDelegate プロトコル および UITableViewDataSource プロトコル メソッドもViewクラスで使用できます。 必要な場合は、それらのいずれかをオーバーライドできます(最初にチェックして、それらが既にオーバーライドされていないことを確認します)。 たとえば、 BookmarkListView_default-custom は次のメソッドを実装して、行ごとに異なるセルの高さを使用します。

public func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
    return 80
}

終了したら、ViewクラスをXIBファイルのカスタムクラスとして設定します。

驚くばかり\! 完了です! これで、リストスクリーンレットで使用する独自のカスタムセルを実装する方法がわかりました。

関連トピック

iOSリストスクリーンレットの作成

iOSテーマの作成

リストスクリーンレットの並べ替え

リストスクリーンレットで複雑なリストを作成する

iOSのベストプラクティス

« スクリーンレットのモデルクラスの作成と使用リストスクリーンレットの並べ替え »
この記事は役に立ちましたか?
0人中0人がこの記事が役に立ったと言っています