1.はじめに
この記事では、テキストを表示する単純な Android アプリケーションを作成します。Android のさまざまなインターフェイス (UI) コンポーネントを詳しく理解すると、画面にテキストを適切に配置するのに役立ちます。
前提条件
- Android Studio で新しいアプリを作成する方法を学びます。
- エミュレーターまたは Android デバイスでアプリを実行する方法を学びます。
学習内容
Viewsや などのインターフェイス要素とは何ですかViewGroups。- アプリ
TextViewの. TextViewでテキスト、フォント、余白などのプロパティを設定する方法。
ビルドコンテンツ
- 誕生日の願い事をテキスト形式で表示する Android アプリ。
完了すると、アプリは次のようになります。
必要条件
- Android Studio がインストールされたコンピューター。
2. Happy Birthday アプリを設定する
空のアクティビティ プロジェクトを作成する
-
まず、空のアクティビティテンプレートを使用して、Android Studio で新しい Kotlin プロジェクトを作成します。
-
アプリに「Happy Birthday」という名前を付け、最小 API レベルを 19 (KitKat) に設定します。
重要: Android Studio での新しいプロジェクトの作成に慣れていない場合は、詳細について「初めての Android アプリを起動して実行する」を参照してください。
- アプリを実行すると、以下のスクリーンショットのようになります。
Empty Activity テンプレートを使用してこの Happy Birthday アプリを作成すると、Android Studio は、画面中央に表示される「Hello World!」メッセージなど、基本的な Android アプリに必要なリソースをセットアップしました。この Codelab では、メッセージを配置する方法、メッセージのテキストを誕生日の挨拶のように変更する方法、追加のメッセージを追加してフォーマットする方法を学びます。
インターフェイスの紹介
アプリのインターフェイス (UI) は、テキスト、画像、ボタン、およびその他の多くの種類の要素を含む、画面に表示されるものです。これは、アプリがコンテンツをユーザーに表示する方法であると同時に、ユーザーがアプリを操作する手段でもあります。
そのすべての要素は と呼ばれますView。アプリ画面に表示されるほとんどすべてが に属していますView。Viewsまた、クリック可能なボタンや編集可能な入力フィールドなどのインタラクティブな要素にすることもできます。
この記事では、テキストを表示するために 1 つを使用しView、これを と呼びますTextView。
Android アプリの は、それ自体では画面に浮かびViewsません。Viewsそれぞれが互いに関連しています。たとえば、画像がテキストの横にある場合や、複数のボタンがそれぞれの行にある場合があります。整理するためにViews、コンテナに入れることができます。オブジェクトをViewGroup配置できるコンテナであり、内部のアイテムの配置を担当します。配置 (つまり、レイアウト) は、アプリを実行している Android デバイスの画面サイズと縦横比によって異なる場合があり、デバイスが縦向きモードか横向きモードかに基づいて調整される場合があります。ViewViews
ConstraintLayoutViewGroupインテリアを自由にアレンジできる1台ですViews。
レイアウト エディターの概要
Viewsとを並べてインターフェースを作成することはViewGroups、Android アプリを作成する上で重要な部分です。Android Studio には、これを行うのに役立つLayout Editorというツールが用意されています。レイアウト エディターを使用して、"Hello World!" テキストを "Happy Birthday!" に変更し、テキストのスタイルを設定します。
Layout Editorを開くと、多くのウィンドウが表示されます。この Codelab では、これらのウィンドウのほとんどの使用方法を学習します。以下の注釈付きスクリーンショットを参照して、レイアウト エディターのウィンドウを識別してください。アプリを変更すると、各ウィンドウについて詳しく知ることができます。
- 左側のマーク (1) は、以前に見たプロジェクトウィンドウで、プロジェクトを構成するすべてのファイルが一覧表示されています。
- 中央の領域には、(4) と (5) というラベルの付いた 2 つの描画ウィンドウがあり、アプリケーションの画面レイアウトを表しています。左側の (4) というラベルの付いたウィンドウは、アプリケーションの実行時に画面に表示されるおおよその効果を示しています。これは、いわゆるデザインビューです。
- 右側の (5) というラベルの付いたウィンドウには、ブループリントビューが表示されます。このビューは、特定のアクションを実行するときに非常に役立ちます。
- (2) というラベルの付いたパレットウィンドウには、アプリケーションに追加できるさまざまなタイプ
Viewsの。 - (3) というラベルの付いたコンポーネント ツリーウィンドウは、画面ビューのもう 1 つの表示形式です。画面のすべてのビューがリストされます。
- 右端の (6) というラベルの付いたウィンドウはAttributesビューで、 のさまざまな属性
Viewが。これらのプロパティはここで変更できます。
Layout Editor とその構成方法の詳細については、開発者リファレンス ガイド を参照してください。
レイアウト エディター全体のスクリーンショット (注釈付き):
アプリをバースデー カードのように見せるために、レイアウト エディタで変更を加えてみましょう。
Hello World メッセージを変更する
- Android Studio で、左側にある[プロジェクト]ウィンドウを見つけます。
- 次のフォルダーとファイルに注意してください。アプリフォルダーには、変更するほとんどのアプリ ファイルが含まれています。resフォルダーは、写真や画面レイアウトなどのさまざまなリソースに使用されます。レイアウトフォルダは、画面レイアウトに使用されます。
activity_main.xmlこのファイルには、画面レイアウトの指示が含まれています。 - appフォルダー、resフォルダー、layoutフォルダーを順に展開します。
- ダブルクリックします
activity_main.xml。システムがレイアウト エディタで開きactivity_main.xml、記述されているレイアウトがデザインビューに表示されます。
注:これらの Codelab では、多くの場合、上記のようにファイルを開く必要があります。要するに、手順は次の手順に要約できます。activity_main.xml (res > layout > activity_main.xml)を開きます。各手順を個別にリストする必要はありません。
- コンポーネント ツリーのビューのリストを参照してください。
ConstraintLayoutそのリストに 1 つとその下に 1 つあることに注意してくださいTextView。これらは、アプリケーションのインターフェースを表します。内側TextViewなので凹んでいます。ConstraintLayoutにさらにConstraintLayout追加するViews、それらはすべてこのリストに追加されます。 - の横に表示される"Hello World!" に
TextView注意してください。これは、アプリの実行後に表示されるテキストです。
- コンポーネント ツリーで、 をクリックします
TextView。 - 右側の属性を見つけます。
- 宣言された属性セクションを見つけます。
10. Declared Attributesセクションのtext属性にHello World!が含まれていることに注意してください。
textプロパティは、テキスト出力をTextViewに。
- Hello World!テキストが配置されているテキストプロパティをクリックします。
- Happy Birthday!に変更し、Enter を押します。ハードコーディングされた文字列に関する警告が表示されても、今は心配する必要はありません。次のコードラボで警告に対処します。
- デザイン ビューのテキストが変更されていることに注意してください... (これはすばらしい、変更をすぐに確認できます!)
- これで、アプリを実行すると、Happy Birthday と表示されます。
素晴らしい！Android アプリに最初の変更を加えました。
3. TextView をレイアウトに追加する
作成中の誕生日カードは、アプリに既にあるものと同じには見えません。中央の小さなテキストの代わりに、左上と右下に 2 つの大きなメッセージが必要です。このタスクでは、既存のビューを削除しTextView、2 つの新しいビューを追加してTextViews、これらのビューConstraintLayoutを。
現在の TextView を削除します
- レイアウト エディターで、レイアウトの中央にある TextView をタップして選択します。
- 削除キーを押します。Android Studio は削除され
TextView、アプリはLayout EditorとComponent Treeにのみ表示されますConstraintLayout。
ヒント:レイアウトを拡大する場合は、レイアウト エディターの右下隅にあるコントロールを使用してサイズを調整できます。一番下のアイコンをクリックすると、
ズーム レベルが元に戻り、レイアウト全体が画面いっぱいに表示されます。
TextView を追加
このステップでは、アプリの左上隅に を追加してTextView、誕生日の願いを保持します。
レイアウト エディタの左上隅にあるパレットにViewsは、アプリケーションに追加できるさまざまな のリスト (カテゴリ別に編成) が含まれています。
- 見つけます
TextView。CommonカテゴリとTextカテゴリの両方にあります。
- パレットからレイアウト エディターのデザイン インターフェイスの左上隅に
TextViewドラッグアンド ドロップします。正確である必要はありません。左上隅の近くにドロップするだけです。
- コンポーネント ツリーに1 つ追加され
TextView、赤い感嘆符が表示されます。 - 感嘆符にカーソルを合わせると、ビューに制約がなく、アプリを実行すると別の場所に移動するという警告メッセージが表示されます。この次のステップでは、この問題を解決します。
TextView を配置する
バースデー カードを作成する場合は、左上隅付近にスペースをTextView空けて配置。前の警告で指摘された問題を修正するには、いくつかの制約を に追加して、ビューの配置方法をアプリに伝えるTextView必要。制約は、レイアウト内の配置Viewの。
上と左に追加された制約にはマージンがあります。マージンは、コンテナーの端Viewからの。
- 右側のAttributesで、LayoutセクションのConstraint Widgetを見つけます。ここに示されている四角形は、ビューを表しています。
- 正方形の上部にある+をクリックします。これにより、テキスト ビューの上部と制約レイアウトの上端の間に制約が追加されます。
- 上余白を設定するための数字のフィールドが表示されます。マージンは
TextView、ConstraintLayoutコンテナーの端 (つまり) からの距離です。表示される数は、TextViewドロップする。上マージンを設定すると、Android Studio は、テキスト ビューの上部と のConstrainLayout上部。
- 上余白を 16 に変更します。
注: UI の余白とその他の距離は、密度に依存しないピクセル (dp) で測定されます。センチメートルやインチに似ていますが、画面上の距離を表します。Android は、この値を各デバイスの対応する実際のピクセル数に変換します。一般に、1 dp は約 1/160 インチですが、デバイスによってはこのサイズが異なる場合があります。
- 左余白に同じ値を設定します。
- 友達の誕生日の願い事をテキストフィールドに入力し (例: "Happy Birthday, Sam!")、 Enterを押します。
別の TextView を追加して配置する
誕生日カードには、右下隅近くにもう 1 行のテキストも必要です。これは、前のタスクで行ったのと同じ方法で、このステップで追加します。このTextViewの外側のマージンはどうあるべきだと思いますか?
- パレット
TextViewから新しいものをドラッグし、レイアウト エディターのアプリ ビューの右下隅近くにドロップします。
- 右マージンを 16 に設定します。
- 下余白を 16 に設定します。
- Attributesで、 「From Emma」などのように、テキスト属性をカードの署名に設定します。
- アプリケーションを実行します。左上隅に誕生日の願いが表示され、右下隅に署名が表示されます。
おめでとう！アプリケーションにいくつかの UI 要素を追加して配置しました。
4. テキストにスタイルを追加する
インターフェイスにテキストを追加しましたが、まだ最終的なアプリのようには見えません。このタスクでは、 のTextView外観に。また、さまざまなフォントを試すこともできます。
-
コンポーネント ツリーの最初の属性をクリックし
TextView、[属性]ウィンドウの[共通属性]セクションを見つけます。このセクションを見つけるには、下にスクロールする必要がある場合があります。 -
fontFamily、textSize、textColor などのさまざまなプロパティに注意してください。
- textAppearanceを探します。
- textAppearanceが展開されていない場合は、下向きの三角形をクリックします。
- textSize を36spに設定します。
注: dp が画面上の距離の尺度であるように、spはフォント サイズの尺度です。Android アプリの UI 要素では、2 つの異なる測定単位が使用されます。以前はレイアウトに使用されていた密度に依存しないピクセル ( dp ) と、フォント サイズを設定するときに使用されたスケーラブルなピクセル ( sp ) です。デフォルトでは、sp と dp は同じサイズですが、前者のサイズは、ユーザーの好みのテキスト サイズに従って調整されます。
- レイアウト エディタに表示される変更に注目してください。
- fontFamilyをカジュアルに変更します。
- いくつかの異なるフォントを使用してみて、それぞれがどのように見えるかを確認してください。リストの下部にある[その他のフォント…]から他のフォントを選択することもできます。
- さまざまなフォントを試した後、fontFamily をsans-serif-lightに設定します。
10. textColorプロパティの編集ボックスをクリックし、black と入力し始めます。入力すると、これまでに入力した色のリストが Android Studio に表示されることに注意してください。
- 色のリストから @android:color/black を選択し、Enter キーを押します。
- 含まれている signature
TextViewで、 textSize、textColor、およびfontFamily を一致する値に変更します。 - アプリケーションを実行して結果を表示します。
おめでとうございます。Birthday Card アプリを作成するための最初のいくつかの手順が完了しました。
5. ソリューション
ソリューション コード URL: https://github.com/google-developer-training/android-basics-kotlin-birthday-card-app-solution
この記事のコードを取得して Android Studio で開くには、次の手順を実行します。
コードを取得
- 表示された URL をクリックします。この時点で、プロジェクトの GitHub ページがブラウザーで開きます。
- プロジェクトの GitHub ページで、[コード] ボタンをクリックしてダイアログを開きます。
- ダイアログで[ZIP をダウンロード]ボタンをクリックして、プロジェクトをコンピューターに保存します。ダウンロードが完了するまで待ちます。
- コンピューター上のファイルを見つけます (おそらく[ダウンロード]フォルダーにあります)。
- ZIP ファイルをダブルクリックして解凍します。プロジェクト ファイルを含む新しいフォルダーが作成されます。
Android Studio でプロジェクトを開く
- Android Studio を起動します。
- [Android Studio へようこそ]ウィンドウで、[既存の Android Studio プロジェクトを開く]をクリックします。
注: Android Studio が既に開いている場合は、[ファイル] > [新規] > [プロジェクトのインポート]メニュー オプションを選択します。
- [プロジェクトのインポート]ダイアログで、解凍されたプロジェクト フォルダーがある場所 (おそらく [ダウンロード]フォルダー) に移動します。
- プロジェクト フォルダをダブルクリックします。
- Android Studio がプロジェクトを開くのを待ちます。
- [実行]ボタンをクリックして、アプリケーションをビルドして実行します。アプリが期待どおりにビルドされることを確認します。
- プロジェクトツールウィンドウでプロジェクトファイルを参照して、アプリがどのようにセットアップされているかを確認します。
注意: Android Studio で「Android フレームワークが検出されました。クリックして構成します」というエラー メッセージが表示された場合は、プロジェクトが検出されていないか、[実行] ボタンが無効になっていることを確認してください。Android でHappyBirthday親ディレクトリではなくStudio 内。
6. まとめ
- レイアウト エディターは、 Android アプリケーションのインターフェイスを作成するのに役立ちます。
- アプリ画面に表示されるほとんどすべてがViewに属します。
TextViewアプリケーションでテキストを表示するインターフェイス要素です。ConstraintLayout他のインターフェイス要素を格納するためのコンテナーです。ConstraintLayoutでは、 に対してViews水平および垂直の拘束を設定する必要があります。- 配置
Viewする1 つの方法は、マージンを使用することです。 - 余白は、コンテナーの端
Viewからの。 TextViewでフォント、テキスト サイズ、色などのプロパティを設定できます。