The playground

More information here

Androidでのデータバインディング:はじめに

コードファイルをユーザーインターフェイスとリンクすることは、Android開発者が直面する最も一般的なタス それが聞こえるように単純な、このプロセスは、多くのランタイムエラーが発生し、多くの時間を消費します。 それを世話 […]

コードファイルをユーザーインターフェイスとリンクすることは、Android開発者が直面する最も一般的なタス それが聞こえるように単純な、このプロセスは、多くのランタイムエラーが発生し、多くの時間を消費します。 それを世話した図書館があれば素晴らしいことではないでしょうか?

データバインドライブラリは救助のためにここにあります! Androidは、Google I/O2018でJetpackライブラリの一部としてこのライブラリを導入しました。

データバインディングを使用すると、ビューとデータソース間の通信を確実かつ簡単に処理できます。 このパターンに従うことは、Android開発における多くの重要なアーキテクチャ、特に現在最も使用されているAndroidアーキテクチャの一つであるMVVMに

このチュートリアルでは、買い物リストアプリであるGoBuyを構築し、データバインドライブラリを既存のAndroidプロジェクトに統合する方法を学習します。 道に沿って、あなたは学びます:

  • プロジェクトでデータバインディングを有効にする方法
  • 既存のレイアウトファイルをデータバインディングで動作するものに変換する方法
  • データバインディングライブラリで生成されたコードをアクティビティとフラグメントで処理する方法
  • RecyclerViewとViewHolderでデータバインディングを使用する方法
注:このチュートリアルでは、Kotlinを使用したAndroid開発の基本を知っていることを前提としています。 Kotlinを初めて使用する場合は、このKotlin introduction tutorialをチェックしてください。 Android開発を初めて使用する場合は、このAndroid開発のチュートリアルを読んで、基本を理解してください。

はじめに

チュートリアルの上部または下部にある材料のダウンロードボタンをクリックしてスタータープロジェクトをダウンロードし、解凍します。 Zipファイルから開始フォルダと終了フォルダの両方を抽出します。 Android Studio3.5以降のようこそ画面からプロジェクトのインポート(Gradle、Eclipse ADTなど)を選択して、プロジェクトの開始を開きます。Gradleの同期が完了するのを待ちます。

プロジェクトの構造を見てください。上のスクリーンショットでわかるように、フォルダ構造はMVVMアーキテクチャに従います。 モデル用のファイル、ビュー用のファイル、ViewModel用のファイルがあります。 このチュートリアルでは、以下のスクリーンショットに示すように、Viewフォルダー内のファイルと、resources/layout内のレイアウトXMLファイルを操作します。p>

ビルドして実行します。 あなたの買い物リストの最初のバージョンが表示されます。p>

アプリは機能的でナビゲートしやすいです。 画面の左上隅にある[項目を追加]ボタンをクリックして、製品を追加してみてください。 表示されるダイアログに入力し、[保存]ボタンをクリックします。 項目がリストに表示され、編集または削除するオプションが表示されます。p>

あなたの友人のためのサンドイッチを作りたいと言います。 あなたはパンの一塊、ジャムの一瓶、チーズの二つのパッケージとマヨネーズの瓶を購入する必要があります。 あなたの買い物リストにこれらを追加します。p>

上のスクリーンショットと同様の結果が得られましたか? あなたがアプリをナビゲートして快適に感じるまで、異なる値で遊んでみてください。

プロジェクトに飛び込む前に、データバインディングについてもう少し学ぶことが重要です。

なぜデータバインディングを使用する

すべての開発者は、きれいで理解しやすいコードを望んでいますが、それを作成する方が簡単です。 人々は急いで、リリースは次々に来て、クライアントは結果を望んでいて、あなたがそれを知る前に、あなたのコードは混乱しています。

これを知って、Androidチームは開発を標準化することで物事を簡単にすることに決めました。 そのために、彼らはデータバインドライブラリを含むJetpackライブラリを立ち上げました。 このライブラリにはいくつかの利点があります。

  1. より少ないコード:アクティビティやフラグメントのコードを小さく保つことで、よりクリーンで読みやすいコードを書くのに役立ちます。
  2. より少ないエラー:バインディングはコンパイル時にチェックされます。より高速なアプリ:バインディングはonCreateで行われないため、アプリはより高速に実行されます。
  3. ビューとコード間のより安全な接続:実行時にバインドされないため、UIコンポーネントを取得する方がfindViewById()よりも安全です。
  4. ビューとアクションの間のより安全な接続:データバインディングは、要求されたメソッドを実装しなかった場合にクラッシュする可能性があるonClick()に依存するよりも安全です。
  5. 簡単:コードが少なく、エラーが少ないので、テストと保守が簡単です。

利点を理解したので、データバインディングがどのように機能するかについて説明します。

データバインディングの仕組み

データバインディングは、XMLレイアウトのビューをデータオブジェクトと接続することです。 データバインドライブラリは、このプロセスに必要なクラスを生成します。

データバインディングを使用するレイアウトXMLファイルは、ルートlayoutdataview root要素が続くため、異なる。 このビューのルート要素は、バインドされていないレイアウトファイルのルートになります。

各レイアウトファイルには、独自に生成されたデータバインドクラスがあります。 Jetpackライブラリはあなたのために仕事をします。 デフォルトでは、クラス名はPascalの場合はレイアウトファイルの名前で、最後にbindingという単語があります。 たとえば、このプロジェクトでは、activity_grocery_listです。xmlにはbindingクラスA C Tivitygrocerylistbindingがあります。

データバインディングには、主に三つの用途があります。

  • データを表示します。
  • ユーザーイベントの処理。
  • レイアウト変数に対するアクションの呼び出し。

それを念頭に置いて、データバインディングのためのプロジェクトを準備する時間です。

データバインディングの構成

まず、データバインディング用にプロジェクトを構成します。 ビルドを開きます。アプリディレクトリからのgradle。 このファイルの下部にあるTODOコメントを見つけ、そこに次のコードを追加します:これは、データバインディングライブラリを使用してプロジェクトをビルドすることをGradleに指示します。

ビルドして実行します。 最初に行ったのと同じ画面が表示されます。

次に、既存のXMLレイアウトをデータバインディングで動作するように変換します。

標準のXMLレイアウトをデータバインドレイアウトに変換する

通常のXMLレイアウトファイルをデータバインドレイアウトに変換するには、次の三つの簡単な手順に従う必要があります。

  1. レイアウトをlayoutタグでラップします。
  2. レイアウト変数を追加します(オプション)。
  3. レイアウト式を追加します(オプション)。

プロジェクト内の3つのXMLレイアウトのそれぞれで、手順1を繰り返します。 まず、activity_grocery_listを開きます。xml。 このファイルの先頭にTODOがあります。

ファイルの一番下にあるこのタグを閉じる必要があります。 したがって、63行目に移動し、新しい行を追加し、次のコードで閉じます。

</layout>

このコードを追加すると、このレイアウトはデータバインディングを使 それ以外の場合は、標準のレイアウトファイルになり、自動バインディングファイルを生成します。

エラーのクリーンアップ

制約レイアウトタグに、冗長な宣言に関する警告が表示されるようになりました。 これを修正するには、xmlns:androidxmlns:appxmlns:tools

注:Android studioには、このレイアウトタグを作成するショートカットがあります。Control/Option+Enterまたは右クリ
メモ: インデントは、これらのコードスニペットを追加した直後ではないことに注意してください。 これを修正するには、Android Studioの[コード]メニューをクリックし、[コードの再フォーマット]を選択します。 これはコードを正しくidentします。

grocery_list_itemで上記の手順をもう一度繰り返します。xml

ビルドして実行します。 いくつかの項目を追加、編集、削除し、何もクラッシュしないことを確認してください。

自動生成されたバインディングクラス

以前は、データバインドライブラリが自動的にバインディング用のクラスを生成す これで、生成されたクラスを見ることができます。 以下のスクリーンショットを見て、ファイル構造内のどこにあるかを確認してください。注:別のコードインスタンスを含むJava(generated)用の別のファイルがあります。 このチュートリアルではそれらを編集しませんが、それらが存在することを知っておくのは良いことです。

アクティビティ、フラグメント、および関連コードでデータバインディングを有効にする

アプリとレイアウトがデータバインディングを使 前述したように、viewフォルダー内の3つのファイルを操作します。

アクティビティへのデータバインディングの追加

GroceryListActivityを開きます。kt. ファイルにはいくつかのTODOがあります。 データバインディングがコードでXMLレイアウトをどのように構成するかを学ぶときに、上から下に置き換えます。53行目の最初のTODOは、button、RecyclerView、TextViewのビュー項目を削除するように指示します。 これらのオブジェクトはすべて、レイアウト内の項目を参照します。activity_grocery_list. データバインドライブラリを使用すると、ライブラリがそれを行うため、それぞれの変数を作成する必要はありません。

これらの3行を次のコード行に置き換えます。p>

private lateinit var binding: ActivityGroceryListBinding

このコードは、activity_grocery_listのために自動的に作成されたバインディングクラスのインスタンスを作成します。xml。 後で、onCreateを使用して初期化します。このコードを追加すると、Android Studioはいくつかの依存関係をインポートするように求めます。 提案されたようにしてください。 あなたは分でそれらを修正しますので、エラーを心配しないでください。

import com.raywenderlich.android.gobuy.databinding.ActivityGroceryListBinding

このクラスをインポートすることで、前の手順からbindingクラスへの参照を行います。次に、onCreatesetContentView(R.layout.plain_activity)の呼び出しを次のように置き換えます。

binding = DataBindingUtil.setContentView(this, R.layout.activity_grocery_list)

このコードは、DataBindingUtilというデータバインドライブラリクラスを使用してコン この行は、以前に削除した行と非常によく似ていますが、コードをデータバインディングに関連付けます。

3. コードのfindViewByIdonCreatefindViewByIdの3行を削除できます。 これらの行は、レイアウト変数を使用してビューを設定するため、Idでビューを検索する必要がないため、削除できます。

データバインディングの前に、findViewById()レイアウトとコードを接続する最も一般的な方法でした。 実行時にエラーが発生し、時にはそれらのエラーが生産後まで検出されなかったため、多くの問題を引き起こしました。

ビューの子にアクセスする

onCreateの残りのコード行を削除し、次のように置き換えます。

ここでは、ステップバイステップの内訳:最初の部分は、RECYCLERVIEWをXMLファイル内の対応するレイアウトマネージャにバインドします。 RecyclerViewsは別のトピックですが、高レベルでは、リニアレイアウトマネージャーは、食料品アイテムのリストを表示するビュー内のアイテムです。

  • RecyclerViewには、アイテムを取得してレイアウトに割り当てるアダプタもあります
  • 最後に、addItemButtonをそのclickメソッドにバインドします。あなたはすべてのTODOonCreateがどのように見えるかを確認してください:p>

    最後の三つのメソッドにはまだエラーがあることに注意してください。 これらは次のセクションで修正します。

    エラーを取り除く

    deleteGroceryItem内の最後の行を次のように置き換えます。

    //groceriesTotal.text = viewModel.getTotal().toString()binding.rvGroceryList.adapter?.notifyDataSetChanged()

    上記の行は、食料品のリストを表示するRecyclerViewに、リスト内の項目を削除し、更新する必要があることを伝えます。 チュートリアルの後半で合計金額を修正するので、今のところその行をコメントアウトします。p>

    onDialogPositiveClickに必要な変更が今行ったものと非常によく似ていることがわかります。 エラーのある行を次のように変更します。

    binding.rvGroceryList.adapter?.notifyDataSetChanged()

    この行は、アラートの追加ボタンをクリックするたびに、リストが変更されたことをRecyclerViewp>

    過去の方法で行ったように、後で戻ってくるまで合計のコードをコメントアウトします。

    //groceriesTotal.text = viewModel.getTotal().toString()

    ファイル内の2つのエラーになりま どちらもaddItemButtonを参照しています。 ご想像のとおり、bindingオブジェクトを参照するには、これらの行を変更する必要があります。 onDialogPositiveClick内のエラーで行を置き換えて、次のようにします:

    Snackbar.make(binding.addItemButton, "Item Added Successfully", Snackbar.LENGTH_LONG).setAction("Action", null).show()

    そして、onDialogNegativeClickのエラー:

    Snackbar.make(binding.addItemButton, "Nothing Added", Snackbar.LENGTH_LONG).setAction("Action", null).show()

    これらのメソッドの違いは、addItemButtonbinding.addItemButton。あなたはすべてのエラーを解決しました!

    あなたはすべてのエラーを解決しました! 最終的に変更をテストできます。

    ビルドして実行します。 前のセクションで行ったようにテストします。 何か違うことに気づきますか? p>

    アプリは以前と同じように動作しますが、合計は表示されません。 心配しないで! これは、上記のコメントアウトした2行のコードのために発生します。 あなたは次のことを修正します。次に、GroceryListActivityの場合と同様に、GroceryAdapterをbindingクラスに接続します。 このプロセスは非常に簡単で、非常によく似た手順が含まれます。

    GroceryAdapterを開きます。ktと下から始めて、ViewHolder全体を次のコードに置き換えます。

    前後のコードを見てください。 以前は、ViewHolderはビューのみを参照していました。 新しいコードでバインディングを適用することで、アイテムの値と価格も設定します。 彼らはあなたが後で修正しますエラーをスローするので、二つの行がコメントアウトされています。この変更の後、onBindViewHolderはビューオブジェクトが存在しなくなったため、認識を停止します。 これを修正するには、このメソッドのコードを次のコードに置き換えます。

    このコードでは、リスナーを編集ボタンと削除ボタンに割り当てます。 また、リサイクラービューのリストから各アイテムをバインドします。

    アダプターで最後に変更を加えます。 onCreateViewHolderコードを次のように置き換えます。

    アダプターはリサイクラービューの各行を表示するために使用するクラスであり、ビューホルダをバイ このコードでは、バインドクラスを使用して、対応する行のビューホルダーのインスタンスを作成します。

    ビルドして実行します。 アプリをテストし、項目を追加します。 ああいや! リストテキストがなくなった!p>

    心配しないでください! 次のステップでは、データバインディングを使用してリストと合計ラベルを画面に追加します。

    Value Binding

    Value Bindingは、バインディングクラスの変数の作成を指します。 それらを使用すると、Kotlinコード内で何かが変更されると、コードの結果を直接観察しているかのようにレイアウトが自動的に更新されます。 値を更新するには、レイアウト変数とレイアウト式の2つの方法があります。

    レイアウト変数

    レイアウトファイルの上部に追加したデータタグ内の変数は、データバインドレイアウト内のプロパティを記述します。 どちらがデータタグであるかわからない場合は、このチュートリアルの冒頭で変更した三つのレイアウトファイルのいずれかを開きます。 ここでは、それらを見つけるのに役立つスクリーンショットです:

    レイアウト式

    いわゆる式言語を使用して式を書くこ ビューでイベントを処理し、それに応じてデータを更新または書式設定できます。注:Androidのドキュメントによると、レイアウト式は単体テストができず、IDEサポートが限られているため、小さくてシンプルでなければなりません。 代わりに、Androidではバインディングアダプタを使用することをお勧めします。 このチュートリアルでは、バインディングアダプターを使用することはありません。レイアウトのデータタグの間に値を追加できることがわかったので、アプリのラベルが機能しなくなった理由を確認できます。 あなたは次のことを修正します。

    アクティビティのバインド値

    activity_grocery_listに移動します。xmlとファイルの上部にあるデータタグを見つけます。 データタグの間に次のコードを追加します:この変数を追加することで、Kotlinコードは以前に消えた合計金額ラベルに対してどの値を観察するかを知るようになりました。ファイルの一番下にあるTODOandroid:text=""は空です。 引用符の間で、作成された変数を参照します。

    android:text="@{totalAmount}"

    この参照を使用すると、レイアウトにtotalAmountの値を配置する場所を知らせま

    次に、GroceryListActivityに戻り、次の行のコメントを解除します:これは、レイアウトで作成したtotalAmountを検索し、viewModelのgetTotalメソッドから返された値で更新するようにデータバインドオブジェクトに指示します。他のコメントされた行を見つけてコメントを削除し、totalAmount値が割り当てられるようにします。 次のようになります。

    binding.totalAmount = String.format("%.2f", viewModel.getTotal())

    ここのコードはtotalAmountを検索し、小数点以下二桁まで表示するようにフォーマットします。

    ビルドして実行します。 アイテムを追加し、合計金額がそこにあることに注意してください。 偉大なスタートが、あなたはまだ戻ってリストラベルを取得する必要があります。 一方、アプリは次のようになります。

    アダプターのバインド値

    アダプターの手順は、修正したアクティビティの手順と似ています。 フラグメントなど、他のレイアウトファイルにも同じことが当てはまります。

    まず、grocery_list_itemを開きます。xmlと上部にあるデータタグを見つけます。 これらの変数をそこに追加します。

    <variable name="itemName" type="String"/><variable name="price" type="String" />

    最初は、breadやcheeseなど、リストに追加した項目の名前を参照します。 第二は、10または200のような数である単価を参照します。

    ここで、対応する変数をテキスト属性に配置します。 それらの前にTODOコメントがあるため、簡単に見つけることができます。 アイテム名には、次のコードを追加します。

    android:text="@{itemName}"

    上記のコードは、データタグで作成した変数コンテンツを参照しています。

    価格についても同じことを行います。

    android:text="@{price}"

    この場合、データタグからprice変数の値を参照します。

    GroceryAdapterを開き、コメントされたコードを見つけます。 この場合、変更する必要はないので、コメントを削除します。 今では動作します!

    ビルドして実行します。 あなたのアプリは今完全に機能しています!

    それで遊んで、すべてが期待どおりに動作することを確認してください。 あなたはスクリーンショットで見ることができるように、ユーザーは彼らのサンドイッチにジャムを使用して約彼らの心を変更し、ハムに切り替えました。 編集ボタンを持つことは便利である理由です。

    ここに来ておめでとうございます!

    p>

    ここからどこに行くのですか?

    このチュートリアルの上部または下部にある材料のダウンロードボタンをクリックして、完成したプロジェクトファイルをダウンロー

    データバインディングを使用して、Androidでのアプリ開発に、より安全で現代的なアプローチを使用するために、既存のアプリを変換することにおめでとう

    このトピックの詳細については、以下を参照してください。

    • MVVMとデータバインディング:Androidデザインパターン
    • Android Jetpackアーキテクチャコンポーネント:はじめに
    • Androidアーキテクチャコンポーネント: Live Data

    何か提案や質問がある場合、またはこのプロジェクトを改善するために行ったことを披露したい場合は、以下の議論に参加してください。h4>

    raywenderlich.com 週次

    このページは

    raywenderlich.com ニュースレターは、あなたがモバイル開発者として知っておく必要があるすべてのものに最新の滞在する最も簡単な方法です。

    私たちのチュートリアルやコースの毎週のダイジェストを取得し、ボーナスとして無料の詳細な電子メールコースを受け取ります!

    平均評価

    4.このコンテンツの評価を追加するサインインして評価を追加する

    15評価

  • コメントを残す

    メールアドレスが公開されることはありません。