AndroidStudio レイアウトエディタを使う

レイアウトエディタを使ってレイアウトをするときの
初心者向けの操作とかを書いていく

~~~java:初期状態 activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
</androidx.constraintlayout.widget.ConstraintLayout>
~~~
:::note info
**<<foo>androidx.constraintlayout.widget.ConstraintLayout>**
このタグに囲まれた部品はレイアウトエディタで編集できる
レイアウトエディタに追加した分はこのタグ内に入っていく
が、今回はactivity_main.xmlは使わないので知識として
:::
## レイアウトエディタでレイアウトしてみる
テキストビューを２個配置
レイアウトへドラッグしてドロップする
![スクリーンショット 2024-12-16 141318.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3953063/e7a9ca45-e5c6-b86c-09ea-e8f03f204094.png)

## レイアウトをいじる
**テキストビューをくっつける**
部品をクリックすると白〇が出るのでそれをクリックしながら動かす
テキストビュー１：上と左の部分を画面の上と左に設定
テキストビュー２：上と左の部分をテキストビュー１の上と左に設定
![携帯.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3953063/bad3973d-5810-4da9-ec3d-ea872a688a86.gif)

間隔を設定する
![スクリーンショット 2024-12-16 143243.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3953063/4e73952d-1d97-8af2-bd9a-7f004679dd9b.png)

レイアウトのテキストビューをクリックすると
図のような画面になる(Layout∨に格納されてるかも)
![スクリーンショット 2024-12-16 143355.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3953063/4d1ccc0e-57c9-106b-a110-55c81ee61239.png)

**設定する**

:::note info
## テキストビュー１
上と左に１６の隙間を設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3953063/2068e8a1-c057-ecc4-3338-23899f5c851e.png)
**レイアウト**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3953063/d53777a0-ca35-01d6-cbea-0a262ea64f45.png)
:::
:::note info
## テキストビュー２
上が０左は１６に設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3953063/d6574e13-b5bb-f867-4eb7-f1eb74032a86.png)
**レイアウト**
テキストビュー１との間に隙間ができた
上面はテキストビュー１の上面と合うように設定している
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3953063/38e47936-be7d-ba8d-dbe6-d05e5eeae616.png)
:::
テキストビュー１を動かすと
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3953063/d5181440-7a21-686a-cb8a-6f0399a26018.png)
テキストビュー２も指定した間隔でついてきた

## プレーンテキストとくっつける
テキストビューとPlainTextを配置

テキストとプレーンテキストの位置を調整
テキストビュー下の白〇で右クリック　→　ShowBaseline
→　プレーンテキストの下部へくっつける
![携帯.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3953063/a091b98e-9a16-d275-7822-1973a17be0af.gif)

それぞれに間隔の設定した状態
プレーンテキストの位置が具合悪い
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3953063/ded87cc4-31bb-6bc9-b417-5bfdbcbb2026.png)

:::note info
## ガイドラインを作る
Verticalguidelineを選択
出てきたガイドラインの場所を指定
その場所へ基準を指定する
![携帯.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3953063/cb39756e-2bc1-5b48-fdac-399c69e01224.gif)
:::

<br></br>
**プレーンテキストを広げる**
右側へ広げたい
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3953063/080e51fc-7a06-ec99-4563-8a4df9783734.png)

設定する
右側へ新たに８の空白を作る(数値はなんでもよい)
真ん中のマークをクリックし |-ии-| こんなマークにする
![携帯.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3953063/0d5822c9-36d3-ab0b-b0eb-9991eddb1331.gif)

レイアウト
右側へ８の空白分まで広がった
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3953063/353c3f33-9bc3-4153-5128-04c2ee509c59.png)


<br></br>
<br></br>
まだたくさんある要更新