ビューを作成する

ビューを作成する

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

リコール 基本Screenlet作成チュートリアル ビューScreenletのUIを定義していること。 そのリストに対応するために、リストスクリーンレットのビューは、非リストスクリーンレットのビューとは少し異なります。 リストスクリーンレットのビューを作成するには、次のコンポーネントを作成します。

  1. 行レイアウト:各リスト行のレイアウト。
  2. アダプタクラス:各リスト行にデータを入力する Androidアダプタクラス
  3. ビュークラス:ビューを制御するクラス。 このクラスは、リストScreenletで非リストScreenletと同じ目的を果たします。
  4. メインレイアウト:リスト全体のレイアウト。 これは、個々の行のUIを定義する行レイアウトとは異なることに注意してください。

最初に、行レイアウトを作成します。

行レイアウトの作成

ビューの残りの部分を作成する前に、リストの各行に使用するレイアウトを最初に定義する必要があります。 たとえば、ブックマークリストスクリーンレットでは、各行にブックマークを表示する必要があります。 したがって、行レイアウト(res / layout / bookmark_row.xml)は、ブックマークのURLを表示する単一の TextView を含む LinearLayout です。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <TextView
        android:id="@+id/bookmark_url"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

</LinearLayout>

ご覧のとおり、この例は非常に単純です。 ただし、行レイアウトは、コンテンツを表示するために必要なだけ単純または複雑にすることができます。

次に、アダプタークラスを作成します。

アダプタークラスの作成

Androidアダプター はレイアウトをコンテンツで埋めます。 ブックマークリストスクリーンレットの例では、レイアウトは行レイアウト(bookmark_row.xml)であり、コンテンツは各リストアイテム(URL)です。 リストのスクロールをスムーズにするには、アダプタークラスで Androidビューホルダー使用する必要があります。 これを簡単にするために、モデルクラスとビューホルダーを型引数として使用して、リストScreenletフレームワークの BaseListAdapter クラス を拡張できます。 BaseListAdapter拡張することにより、アダプターは2つのメソッドのみを必要とします。

  • createViewHolder:ビューホルダーをインスタンス化します
  • fillHolder:各行のビューホルダーを塗りつぶします

ビューホルダーには、各行を表示する必要があるデータの変数も含める必要があります。 ビューホルダーは、これらの変数を対応する行レイアウト要素に割り当て、適切なデータを設定する必要があります。

たとえば、ブックマークリストスクリーンレットのアダプタークラス(BookmarkAdapter)は、 BaseListAdapterブックマーク および BookmarkAdapter.BookmarkViewHolder を型引数として拡張します。 このクラスのビューホルダーは、 BaseListAdapterのビューホルダーを拡張する内部クラスです。 ブックマークリストスクリーンレットは各行にURLを表示するだけでよいため、ビューホルダーに必要な変数は urlです。 ビューホルダーのコンストラクターは、 bookmark_row.xml から TextView をこの変数に割り当てます。 bind メソッドは、ブックマークのURLを TextViewのテキストとして設定します。 BookmarkAdapter の他のメソッドは、ビューホルダーを活用します。 createViewHolder メソッドは、 BookmarkViewHolderインスタンス化します。 fillHolder メソッドは、ビューホルダーの bind メソッドを呼び出して、ブックマークのURLを url 変数のテキストとして設定します。

public class BookmarkAdapter extends BaseListAdapter<Bookmark, BookmarkAdapter.BookmarkViewHolder> {

    public BookmarkAdapter(int layoutId, int progressLayoutId, BaseListAdapterListener listener) {
        super(layoutId, progressLayoutId, listener);
    }

    @NonNull
    @Override
    public BookmarkViewHolder createViewHolder(View view, BaseListAdapterListener listener) {
        return new BookmarkAdapter.BookmarkViewHolder(view, listener);
    }

    @Override
    protected void fillHolder(Bookmark entry, BookmarkViewHolder holder) {
        holder.bind(entry);
    }

    public class BookmarkViewHolder extends BaseListAdapter.ViewHolder {

        private final TextView url;

        public BookmarkViewHolder(View view, BaseListAdapterListener listener) {
            super(view, listener);

            url = (TextView) view.findViewById(R.id.bookmark_url);
        }

        public void bind(Bookmark entry) {
            url.setText(entry.getUrl());
        }
    }
}

すばらしいです\! アダプタクラスが完成しました。 次に、Viewクラスを作成します。

ビュークラスの作成

アダプターが存在するので、リストScreenletのViewクラスを作成できます。 リコール 基本Screenlet作成チュートリアル Viewクラスは、任意のScreenletのUIの中央ハブであること。 UIをレンダリングし、ユーザーインタラクションを処理し、Screenletクラスと通信します。 リストScreenletフレームワークは経由してあなたのために、この機能のほとんどを提供します BaseListScreenletView クラス。 Viewクラスは、このクラスを拡張して、行レイアウトIDとアダプターのインスタンスを提供する必要があります。 これを行うには、 BaseListScreenletViewgetItemLayoutId および createListAdapter メソッドをオーバーライドします。 多くの場合、これはViewクラスに必要な唯一のカスタム機能であることに注意してください。 さらに必要な場合は、新しいメソッドを作成するか、他の BaseListScreenletView メソッドをオーバーライドして提供できます。

型引数としてモデルクラス、ビューホルダー、およびアダプターを使用して BaseListScreenletView を拡張することにより、Viewクラスを作成します。 これは、Viewクラスがアダプター内のビューホルダーでモデルオブジェクトを表すために必要です。 たとえば、ブックマークリストスクリーンレットのビュークラス(BookmarkListView)は、 BookmarkAdapter内の BookmarkViewHolder 内の Bookmark インスタンスを表す必要があります。 BookmarkListView クラスは、したがって、拡張する必要が BaseListScreenletView 用いてパラメータ化 ブックマークBookmarkAdapter.BookmarkViewHolder、及び BookmarkAdaptercreateListAdapter をオーバーライドして BookmarkAdapter インスタンスを返すことに加えて、このViewクラスがサポートする必要がある他の機能は、リスト内の各行のレイアウトを取得することだけです。 オーバーライドされた getItemLayoutId メソッドは、行レイアウト bookmark_row返すことでこれを行います。

import android.content.Context;
import android.util.AttributeSet;

import com.liferay.mobile.screens.base.list.BaseListScreenletView;

public class BookmarkListView
    extends BaseListScreenletView<Bookmark, BookmarkAdapter.BookmarkViewHolder, BookmarkAdapter> {

    public BookmarkListView(Context context) {
        super(context);
    }

    public BookmarkListView(Context context, AttributeSet attributes) {
        super(context, attributes);
    }

    public BookmarkListView(Context context, AttributeSet attributes, int defaultStyle) {
        super(context, attributes, defaultStyle);
    }

    @Override
    protected BookmarkAdapter createListAdapter(int itemLayoutId, int itemProgressLayoutId) {
        return new BookmarkAdapter(itemLayoutId, itemProgressLayoutId, this);
    }

    @Override
    protected int getItemLayoutId() {
        return R.layout.bookmark_row;
    }
}

次に、ビューのメインレイアウトを作成します。

ビューのメインレイアウトの作成

リスト行のレイアウトはすでに作成していますが、リスト全体を定義するにはレイアウトを作成する必要があります。 このレイアウトには以下が含まれている必要があります。

  • レイアウトの最初の要素としてのViewクラスの完全修飾名。
  • アンドロイド RecyclerView アプリケーションが効率的にアイテムの潜在的に大きなリストをスクロールできるようにします。
  • Android ProgressBar リストをロードするときの進行状況を示します。

Viewクラスとスタイリングを除き、このレイアウトのコードはすべてのリストスクリーンレットで同じです。 たとえば、ブックマークリストスクリーンレットのレイアウト res / layout / list_bookmarks.xml次のとおりです。

<com.liferay.mobile.screens.listbookmark.BookmarkListView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/liferay_list_screenlet"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ProgressBar
        android:id="@+id/liferay_progress"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:visibility="gone"/>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/liferay_recycler_list"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:visibility="gone"/>
</com.liferay.mobile.screens.listbookmark.BookmarkListView>

よくやった\! ビューが完成しました。 次に、スクリーンレットのインタラクターを作成します。

関連トピック

モデルクラスの作成

インタラクターの作成

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

« モデルクラスの作成インタラクターの作成 »
この記事は役に立ちましたか?
0人中0人がこの記事が役に立ったと言っています