[안드로이드] 코틀린 / 안드로이드스튜디오 디자인으로 배치하기

프로그램

[안드로이드] 코틀린 / 안드로이드스튜디오 디자인으로 배치하기

오디세이99 2023. 1. 2. 22:10

728x90

https://question99.tistory.com/543

[안드로이드] 코틀린 / 버튼 만들고 이벤트 추가하기

https://question99.tistory.com/542 [안드로이드] 코들린 / HelloWorld 만들기 안드로이드스튜디오 버전 입니다. 버전만다 약간씩 다르군요. 다음과 같이 메뉴에서 File / New / New Project 를 선택 합니다. 'Phone and

question99.tistory.com

앞에서 단순하게 버튼을 추가하였었습니다.

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/txtView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        tools:layout_editor_absoluteY="459dp" />

</androidx.constraintlayout.widget.ConstraintLayout>

- Design에서 'Button'을 드래그해서 화면으로 이동해서 놓습니다.

- 버튼 추가 후

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/txtView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        tools:layout_editor_absoluteY="459dp" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button2"
        tools:layout_editor_absoluteX="283dp"
        tools:layout_editor_absoluteY="458dp" />

</androidx.constraintlayout.widget.ConstraintLayout>

- 실행합니다. 버튼의 배치가 이상하게되어 있습니다.

- 'Design'화면에서 BUTTON1을 클릭해서 드래그해서 화면 왼쪽으로 이동합니다.

- 이후 다시 드래그해서 오른쪽으로 이동합니다.

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/txtView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.247"
        app:layout_constraintStart_toStartOf="parent"
        tools:layout_editor_absoluteY="458dp" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button2"
        tools:layout_editor_absoluteX="283dp"
        tools:layout_editor_absoluteY="458dp" />

</androidx.constraintlayout.widget.ConstraintLayout>

- 수정전

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        tools:layout_editor_absoluteY="459dp" />

- 수정후

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.247"
        app:layout_constraintStart_toStartOf="parent"
        tools:layout_editor_absoluteY="458dp" />

'app:layout_constraintHorizontal_bias="0.247"' 가 추가된 것을 확인 할 수 있습니다.

- BUTTON2를 클릭해서 왼쪽 원을 드래그해서 BUTTON1의 오른쪽에 가져가면 붙게됩니다.

- BUTTON2를 드래그해서 오른쪽으로 이동합니다.(사진에서 BUTTON1과 거리가 40으로 이동거리가 보입니다.)

- 수정 전

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button2"
        tools:layout_editor_absoluteX="283dp"
        tools:layout_editor_absoluteY="458dp" />

- 수정 후

<Button
    android:id="@+id/button2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="40dp"
    android:text="Button2"
    app:layout_constraintStart_toEndOf="@+id/button1"
    tools:layout_editor_absoluteY="458dp" />

- 실행

- BUTTON1을 클릭해서 상단의 원을 드래그해서 HelloWorld의 하단 원에 놓습니다.

- 그러면 BUTTON1을 HelloWorld의 하단에 붙게 됩니다.

- 다시 BUTTON1을 드래그해서 하단으로 이동 합니다.

- 수정 전

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.247"
        app:layout_constraintStart_toStartOf="parent"
        tools:layout_editor_absoluteY="458dp" />

- 수정 후

<Button
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="80dp"
    android:text="Button1"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.26"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/txtView" />

- BUTTON2도 동일하게 해서 위치 시킵니다.

- 수정 전

<Button
    android:id="@+id/button2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="40dp"
    android:text="Button2"
    app:layout_constraintStart_toEndOf="@+id/button1"
    tools:layout_editor_absoluteY="458dp" />

- 수정 후

<Button
    android:id="@+id/button2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="36dp"
    android:layout_marginTop="80dp"
    android:text="Button2"
    app:layout_constraintStart_toEndOf="@+id/button1"
    app:layout_constraintTop_toBottomOf="@+id/txtView" />

728x90