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

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

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

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

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

• プロジェクトでデータバインディングを有効にする方法
• 既存のレイアウトファイルをデータバインディングで動作するものに変換する方法
• データバインディングライブラリで生成されたコードをアクティビティとフラグメントで処理する方法
• RecyclerViewとViewHolderでデータバインディングを使用する方法

はじめに

チュートリアルの上部または下部にある材料のダウンロードボタンをクリックしてスタータープロジェクトをダウンロードし、解凍します。 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

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は別のトピックですが、高レベルでは、リニアレイアウトマネージャーは、食料品アイテムのリストを表示するビュー内のアイテムです。

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

binding.rvGroceryList.adapter?.notifyDataSetChanged()

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

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

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

android:text="@{totalAmount}"

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

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

android:text="@{itemName}"

android:text="@{price}"