第1回PG初心者がAndroidStudioでアプリ開発してみた~Wedgetの配置ってどうやるの??①~

第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現在位置の下側に指定幅の余白を設定

 

以上を踏まえて実際にスタート画像とボタンを配置してみましょう!

コメント

タイトルとURLをコピーしました