Android Kotlin基礎講座 02.1: レイアウトエディターを利用したLinear layoutについて

Android Kotlin基礎講座02.1 Android Kotlin基礎講座

タスク:ScrollViewを追加する

ScrollViewはビューグループのひとつで、その中に含まれたビューをスクロールできるものにします。スクロールビューは子ビューとして他のビュー、またはビューグループを一つだけ含むことができます。子ビューは通例としてLinearLayoutが用いられます。LinearLayoutの中に他のビューを追加することができます。

次の画像は他のビューをいくつか含むLinearLayoutを含むScrollViewの例を示しています。

このタスクではユーザーにスクロール可能な簡単な生い立ちを紹介するテキストビューを表示するためにScrollViewを追加します。一つのビューのみをスクロール可能にしたい場合は、ScrollViewに直接そのビューを追加するだけで大丈夫です。このタスクではそれをやっていきます。

ステップ1:TextViewを含むScrollViewを追加する

  1. activity_main.xmlファイルを開いてデザインタブで表示してください。
  2. パレットからScrollViewをデザインエディター、またはコンポーネントツリーのstar_imageの下にドラッグしてください。
  3. Textタブに切り替えて、生成されたコードを確認してください。
// Auto generated code
<ScrollView
   android:layout_width="match_parent"
   android:layout_height="match_parent">

   <LinearLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:orientation="vertical" />
</ScrollView>

ScrollViewのheightとwidthが親要素にマッチするようになっています。name_textテキストビューとstar_imageイメージビューが各々のコンテンツを表示するために十分なスペースを既に使っているので、AndroidシステムはScrollViewを画面の残りの利用可能なスペースに配置しています。

  1. 追加したスクロールビューのidをbio_scrollにしてください。スクロールビューにidを追加することで、ユーザーが端末を回転させた際にもAndroidシステムがスクロールされた位置を覚えておくことができるようになります。
  2. ScrollViewの中のLinearLayoutコードを削除してください。TextViewをひとつスクロールできるようにするだけなので、これは必要ありません。
  3. パレットからTextViewをコンポーネントツリーににドラッグしてください。bio_scrollの子要素として、bio_scrollの配下においてください。
  1. 追加したテキストビューのidをbio_textとしてください。
  2. 次にテキストビューにスタイルを追加します。アトリビュートパネルからsyle属性の横の三つの点をクリックして、Resourcesダイアログを開いてください。
  3. Resourcesダイアログの中でNameStyleを検索し、リストからNameStyleを選択してOKをクリックしてください。これで追加したテキストビューは前のタスクで作成したNameStyleを使用するようになりました。

ステップ2:TextViewに自己紹介を追加する

  1. strings.xmlを開いて、bioという名前のstringリソースを作ってください。そこに自己紹介など、なんでもいいので入力してください。

Note:

  • “\n”は改行のために使います。
  • アポストロフィを使いたい場合は、バックスラッシュを使ってエスケープする必要があります。例えば、”You mustn\’t forget the backslash.”のようにです。
  • 太字にしたい場合は<b>・・・</b>で囲います。またイタリック体にしたい場合も同様に、<i>・・・</i>で囲います。
    例:”<b>この文字</b>は太字で、<i>この文字</i>はイタリック体です。”

自己紹介の例(英文)

<string name="bio">Hi, my name is Aleks.
\n\nI love fish.
\n\nThe kind that is alive and swims around in an aquarium or river, or a lake, and definitely the ocean.
\nFun fact is that I have several aquariums and also a river.
\n\nI like eating fish, too. Raw fish. Grilled fish. Smoked fish. Poached fish - not so much.
\nAnd sometimes I even go fishing.
\nAnd even less sometimes, I actually catch something.
\n\nOnce, when I was camping in Canada, and very hungry, I even caught a large salmon with my hands.
\n\nI\'ll be happy to teach you how to make your own aquarium.
\nYou should ask someone else about fishing, though.\n\n</string>
  1. bio_textテキストビューのtext属性の値に自己紹介文が含まれているbio stringリソースをセットしてください。
  2. bio_textのテキストを読みやすくするために、行の間に空白を追加します。lineSpacingMultiplier属性を使い、値は1.2にしてください。



    デザインエディターでどのように見えるか確認してください。bioテキストは画面の端までいっぱいに表示されています。この問題を解決するために、left、start、right、endのパディングをLinearLayoutに追加するという手があります。bottomのパディングは追加する必要はありません。なぜなら一番下まで表示されているテキストによって、ユーザーはこのテキストがスクロールできるものであるということを知ることができるからです。
  3. LinearLayoutのstartとendのパディングを16dpにしてください。
  4. Textタブに切り替えて、ディメンションリソースを抽出し、layout_paddingと命名してください。

Note: API 17からアラビア語のようなRTL言語(右から左に読む言語)に対応するため、”leftと”right”の代わりに”start”と”end”を使用するようになりました。

  1. アプリを起動して、テキストをスクロールしてみてください。

おめでとうございます!

0からスクラッチで完全なアプリを完成させることができました!
完成済みのプロジェクトファイルはこちらからダウンロードできます。AboutMe

コメント

プロフィール

プロフィール
コードラボJP

大学卒業後SEに就職、現在は退職しフリーランスとして活動中。
『初心者でも挫折せずに一人でプログラミングを学べる』をモットーに、コードラボJPを開設
お問い合わせ等はcodelabsjp@gmail.comまで

コードラボJPをフォローする
タイトルとURLをコピーしました