カテゴリー
Kotlin言語

ゼロから始めるAndroidアプリ(Kotlin編)Unit1 – 3:Layout Editor の使い方

Android Developers > スタートガイド > Kotlin と Android をゼロから学ぶ > Unit1 – Kotlin を用いた Android の基本Unit1-3 の内容をまとめたものです(翻訳ではありません)


Unit1 – 3 の内容

  • 全3回(第1回~第3回、クイズは省略)
  • Android Studio の Layout Editor を使って簡単なAndroidアプリ(画面にテキストや画像を表示する)を作ってみる

Unit1 – 3 の 第1回

動画(英語)での紹介。観なくても大丈夫かも

Unit1 – 3 の 第2回

第2回では、だいたい次のようなことが説明されています

Layout Editor を使ったUI画面の作り方

  • AndroidアプリのUI画面は Android Studio の Layout Editorを使って作ります
  • Layout Editor では ConstraintLayout というレイアウトを使うのが標準的です

アプリのUI画面と View というオブジェクトについての説明

  • アプリのUI画面のほとんどが View というオブジェクトで出来ている
  • TextView はテキストを表示するための View(UI部品)
  • ConstraintLayout は View(UI部品)を入れるコンテナ
  • ConstraintLayout を使う場合、View には水平方向と垂直方向について配置条件(制約:constraint)の設定が必須
  • View にマージン設定するのも配置条件(constraint)の付け方のひとつ
    • マージンは View(部品)が置かれているコンテナの縁から View(部品)がどれくらい離れているかを設定するもの
  • TextView にフォント、サイズ、色などの属性を設定することもできる

まず Android Studio を使ったUI画面作成のための基本を説明しています

Android Studio を立ち上げて、新規にプロジェクトを作成しておく

  • テンプレートは Empty Activity
  • アプリの名前は “Happy Birthday”
  • APIレベルは 19 (KitKat)

UIを構成している部品は View と呼ばれるもの

  • これから作るアプリのUIにあるものはほとんどすべてが View です
  • View は表示するだけでなく操作もできる(たとえばボタンや入力欄など)
  • Androidの View は、ひとつひとつが単純に置かれているのでなく、位置について互いの関係を決めることでデバイスに応じた配置がされる(たとえばその画像はテキストの右横に置くとか、そのボタンは横一列に並べるなど)
    • ConstraintLayout では、画面に配置する View に設定する配置条件を constraint(制約)と呼んでいる
  • ViewViewGroup と呼ばれるコンテナに入れて使われる。View を実際に配置(レイアウト)するのは ViewGroup の仕事
  • 配置(レイアウト)は、アプリが実行されるAndroidデバイスに応じて(Androidシステムによって)行われる
  • ConstraintLayoutViewGroup のひとつ。現在はこれを使うのがおすすめされている

Layout Editor(レイアウトエディタ)

  • Androidアプリ作成のかなりの部分が ViewViewGroup を使ったUI作成作業。Android Studio ではこの作業を Layout Editor(レイアウトエディタ)で行う
  • Layout Editor(レイアウトエディタ)を開くと、白っぽい普通のスマホ画面と、その右の紺色のスマホ画面の2面が表示される
    • 白っぽいほうが Design view(デザインビュー)。通常はこちらを見ながら View を配置していけばよい
    • 紺色のほうが Blueprint view(ブループリントビュー)。特定の操作についてはこちらが役立つらしい
  • Design view(デザインビュー)の左に Pallet(パレット:UI部品として使えるいろんな View が並んでいる)、その下が Component Tree(コンポーネントツリー:UIに配置された View の階層構造が表示される)、右に Attributes(アトリビュート:View の属性が表示される)
  • Layout Editor(レイアウトエディタ)について詳しく知りたいときは Android Studio のユーザーガイド を参照

実際にUI画面作成の作業をしてみます

UI画面を実際に書き換えてみる

  • Android Studio を起動して、左側の Project から activity_main.xml を探してダブルクリックすると Layout Editor(レイアウトエディタ)で開かれる
    • アプリのUI画面は activity_main.xml に保存されている
    • activity_main.xmlapp/res/layout の中にある
  • 左下の Component Tree の中にある TextView をクリック
  • 右の Attributes の中の Declared Attributes セクションに text という項目があり、ここに設定されている Hello World! を Happy Birthday! に書き換える
    • ハードコード(値そのものを直接コードに書き込むこと)の警告が出るかもしれないが今のところ気にしなくていい
  • Design view(デザインビュー)に表示されている文字が変わったことを確認する
    • 尚、デザインビューの右下の方にある「手や+やー」のアイコンを使うと表示の大きさなどが変えられる

UI画面への TextView の追加や削除のしかた

  • TextView の削除・・・Design view で削除したいTextView を選択して Delete を押す
  • TextView の追加・・・左上のパレットから TextView を探して Design view の上にドロップする
    • TextViewDesign view に追加される
    • 左側の Component Tree にも TextView が追加される(ただし赤いが付く)
    • 配置について constraint(制約)が設定されていないと赤いが付く
    • constraint(制約)をつけないと、Design view上でどのように並べても、実行時には無条件に画面の (0,0) の位置に移動させられてしまう

必ず constraint(制約)を設定するんですね

TextView に constraint(制約)としてマージンを設定してみる

  • 右の Attributes にある Layout セクションを使う
  • 四角い枠(Constraint Widget)が選択されている View をあらわしている
  • 四角い枠の周りにあるマークをクリックするとマージンが設定できる
    • マージンは、関連づけられているところまでの距離(固定値)のこと。最初はコンテナになっている ConstraintLayout の枠までが設定される
    • マージンなど、AndroidのUI画面で使う距離の単位は dp。 Androidはデバイスに応じてdpを画面上の実際の距離に計算しなおす
    • 目安としては 1dp はだいたい1/160インチ(1/6mmくらい)。ただしもちろんデバイスによって変わる

View に表示するテキストのスタイルを設定してみる

  • 左下の Component Tree から TextView を選択
  • 右にある AttributesCommon Attributes セクションにある項目を変更すればよい( textAppearancefontFamilytextSize , textColor など)
    • フォントサイズの単位は sp。AndroidではUI画面でのサイズの単位に dp、テキストのサイズに sp を使う。sp はデフォルトで dp と同じに設定される。その後、ユーザがフォントサイズを変更するとそれに応じて変更される
    • 色の指定は一般的なものなら black などのテキストでも設定可能

ここで説明したアプリのプロジェクトはネットからダウンロードできる

  • ダウンロード・・・GitHubの指定されたURLにアクセスしてダウンロードできます
  • 読み込み(インポート)
    • Android Studio のオープニングメニューから Open an existing Android Studio project. を選択する
    • Android Studio が立ち上がってから File > New > Import Project を選択する

Unit1 – 3 の 第3回

第3回では、だいたい次のようなことが説明されています

  • Android Studio でプロジェクトにリソース(アプリで使う画像など)を追加するには Resource Manager を使う
  • アプリに画像を表示するには ImageView というUI部品を使う
  • アプリのUI画面で使うテキストは、UI部品に直接書き込まず(ハードコードせず)、できるだけ string resource(文字列リソース)を利用する
    • アプリを他の言語に対応させたりしやすい
  • ImageView のようなUI画面上の View にはアプリの Accessibility を向上させるための説明テキストを追加する

ImageView を使ってアプリに画像を表示します

画像ファイル(png)をプロジェクトに読み込む

  • メニューバーで View > Tool Windows > Resource Manager を選択
  • Resource Managerマークのところをクリックして、Import Drawables を選択
  • 読み込む画像ファイルを選んで Open > Next > Import でインポート完了
  • Resource ManagerDrawables をクリックして、読み込んだ画像があるか確認
  • Android Studio のウィンドウ左側に Project というタブがあるのでそれをクリックして Project に戻る
  •  app > res > drawable とたどって、画像ファイルが読み込まれているか確認

アプリに ImageView を設置する

  • activity_main.xml をひらく
  • Pallet から ImageView をつかんでドロップ
  • Pick a Resource ダイアログが開くので読み込んである画像を選択
  • Layout Editor に表示された画像をドラッグして適当な位置に配置する

ImageView にも必ず constraint(制約)を設定します

constraint(制約)を設定する

  • Layout EditorImageView を選択。丸や四角のハンドルがついた枠が表示される。丸いハンドルをつかんでスマホ画面の端のほうにドラッグすると接続される
  • 同じようにして縦方向、横方向の constraint(制約)を設定する
  • UI部品がドラッグ先に近すぎてうまく接続できないとき
    • 右の Attributes Layout セクションにある Constraint Widget を使う
    • 四角い枠の周りにあるをクリックするだけで接続される(もう一度クリックすると解除される)。とりあえずマージンは0にしておく

位置やサイズを調整しますね

  • 画像を画面いっぱいに引き延ばしたいとき
    • 右の Attributes の中の Layout セクションを見る。Constraint Widget の下に Constraints というセクションがある。ここの layout_widthlayout_height に 0dp (match constraint) を設定する。
    • これによって、マージン分をあけて可能な限り上下に画像が引き延ばされる
    • 引き延ばしたエリア内で画像が実際にどのように展開されるのかは Attributes にある ScaleType で設定する
      • ScaleType の項目が見つからないときは、Attributes の上の方にある虫眼鏡アイコンをクリックして検索する
  • UI画面上の View の上下関係(レイヤー)を変える方法
    • 左下の Component TreeView をドラッグ&ドロップして順番を入れ替えればよい

Component Tree に出た警告のを消します。strings.xml を利用したり、View に説明を追加したりします

ハードコードしたテキストを strings.xml に登録する

  • テキストを View 内にハードコードすると Component Tree でオレンジのが表示される。このをクリック
  • 警告の内容が表示される。その中に Fix ボタンがあるのでこれをクリック
  • 開いたダイアログで内容をチェックして OK を押す。するとハードコードした文字列が自動的に strings.xml に登録され、View にはリソース名が設定される
    • resource name は全部小文字でスペースのかわりにアンダースコアを使うのがよい
    • Fix ボタンを使って修正する場合、ハードコードしたテキストから生成された名前が自動で代入されているため、通常はそれをそのまま使えばよい
  • Project から strings.xml ( app > res > values > strings.xml )を開いて内容を確認する

アプリの accessibility への配慮不足の警告に対処する

  • Layout EditorComponent Tree を見ると、問題があるところにオレンジや赤のが表示される
    • 赤は必ず修正、オレンジは修正が望ましい
    • をクリックすると警告内容の説明がでる。Fix ボタンをクリックすると修正できる
    • 修正されるとアイコンは消えるので、すべてのアイコンが消えるようにすべてチェックする
  • オレンジのについては、修正する必要のないものもある
    • たとえば TalkBack(Androidデバイスに搭載されているGoogleのスクリーンリーダー)用のテキストを設定するようにと警告されることがあるが、そもそも読み上げ対象にしたくない View であることもある
    • この場合、TalkBack の対象から外すことで警告を消すことができる。該当する View を選択後、attributes にある  importantForAccessibilityno を設定する(警告のオレンジのが消えることを確認)

その他

  • Androidアプリで一般的によく使われる画像(ビットマップ)形式は jpg と png。png には透過(アルファチャンネル)があります。詳しくはこちら
  • View にはとにかくまず constraint(制約)とマージンを設定する。スタイルの設定などはそのあと行う