第1回PG初心者がAndroidStudioでアプリ開発してみた~Wedgetの配置ってどうやるの??①~
初めまして!草もちです。
このブログではAndroidStudioでスロットアプリを完成させるまでの軌跡を綴っていこうと思います。
さっそくスタート画像と、スタートボタンを配置して、
(普通、スロットアプリは3つのロールがくるくる回るのですが、
まずは1ロール目を試しに作ってみてる段階なのです…!)
スタートボタンを押すとスタート画像がランダムに変化する機能を作って
エミュレータで実行~!
・・・え?
すべての画像が左上端に寄っている?!
ということで、今回はWedgetの配置について学んでいきたいと思います。
レイアウトの種類について
レイアウトにも種類があるらしいです!
主な種類として…
- RelativeLayout
- LinearLayout
- FrameLayout
- TableLayout
- GridLayout
などがあるらしいです。
今回はスロットアプリに使えそうな、RelativeLayoutについて紹介したいと思います。
RelativeLayoutの使い方
RelativeLayoutとは?
RelativeLayoutとはView(LayoutとWedgetの総称)を相対的に配置するためのレイアウトです。
レイアウトのText文を見ると
(場所は、プロジェクト配下のapp/src/main/res/layout/activity_main.xml)
<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" tools:context=".MainActivity">
2行目に”android.support.constraint.ConstraintLayout”って書いてありますね。
AndroidStudioの最新版は自動でこのConstraintLayoutモードで編集してくれるみたいですが、このレイアウトが何なのか?はさておき(いまいちよく分かってない泣)
この一文すべて消して、RelativeLayoutって書き換えます。
※今回はandroid:orientationの項目使用しないので、消しちゃいましょう。
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity">
ここで、Design画面に移ってAll Attributes(下記画像の右側の文字ずらーって並んでるところ。)を見直してみると、
…!!!
layout_align何とかって項目達が追加されています!
ここで追加された、このRelativeLayout特有の項目について以下説明します。
RelativeLayout特有の項目
- 親レイアウトを基準とする項目
layout_alignParentLeft | 親レイアウトの左端に配置 |
layout_alignParentRight | 親レイアウトの右端に配置 |
layout_alignParentTop | 親レイアウトの上端に配置 |
layout_alignParentBottom | 親レイアウトの下端に配置 |
layout_centerInParent | 親レイアウトの中央に配置 |
- 指定Viewを基準とする項目
layout_toLeftOf | 指定 View の左側に配置 |
layout_toRightOf | 指定 View の右側に配置 |
layout_above | 指定 View の上側に配置 |
layout_below | 指定 View の下側に配置 |
layout_alignLeft | 指定 View の左端ラインに合わせて配置 |
layout_alignRight | 指定 View の右端ラインに合わせて配置 |
layout_alignStart | 指定 View の左端ラインに合わせて配置 |
layout_alignEnd | 指定 View の右端ラインに合わせて配置 |
layout_alignTop | 指定 View の上端ラインに合わせて配置 |
layout_alignBottom | 指定 View の下端ラインに合わせて配置 |
layout_alignBaseline | 指定 View のテキストのラインに合わせて配置 |
- 共通項目
layout_marginLeft | 現在位置の左側に指定幅の余白を設定 |
layout_marginRight | 現在位置の右側に指定幅の余白を設定 |
layout_marginTop | 現在位置の上側に指定幅の余白を設定 |
layout_marginBottom | 現在位置の下側に指定幅の余白を設定 |
以上を踏まえて実際にスタート画像とボタンを配置してみましょう!