3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

【AndroidStudio】RelativeLayoutの使い方

Last updated at Posted at 2019-09-09

#RelativeLayoutとは?
View(LayoutとWedgetの総称)を相対的に配置するためのレイアウトです。

AndroidStudioのレイアウトのText文を見ると
(場所は、プロジェクト配下のapp/src/main/res/layout/activity_main.xml)

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では(現在使用中のバージョンは3.4.1)
自動でこのConstraintLayoutモードで編集してくれるみたいですが、
このレイアウトが何なのか?はさておき(いまいちよく分かってない泣)

この一文すべて消して、RelativeLayoutって書き換えます。

※RelativeLayoutのレイアウトではandroid:orientationの項目使用しないので、消しちゃいましょう。

activity_main.xml
<?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(下記画像の右側の文字ずらーって並んでるところ。)を見直してみると、

0701Layput05.png

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?