[FRONTEND]리액트_ 레이아웃

* 중요 : 뷰 클래스(소스 코드) = 위젯(화면에 보이는거 : 화면 구성 요소)

화면에서는 버튼을 버튼 위젯이라고 부르고,
실제 코드에서는 버튼 클래스라고 부르는 식입니다!
그리고 다른 위젯을 담을 수 있는 위젯을 특별히 레이아웃이라고 하며,
레이아웃은 ViewGroup이라는 클래스 아래에 존재합니다.
(레이아웃도 크게 보면 위젯에 포함됩니다)

==================================================================

안드로이드 화면에서 실제로 사용되는 것들은 모두 View라는
클래스의 상속을 받습니다. 즉 버튼, 라디오버튼, 이미지 등은
모두 View 클래스의 서브 클래스입니다.
뷰 클래스는 '위젯'이라고도 하는데, 쉽게 말해 화면에서는
버튼을 버튼 위젯, 실제 코드에서는 버튼 클래스라고 부르는 식입니다.

그리고 다른 위젯을 담을 수 있는 위젯을 특별히 레이아웃이라고 하며,
레이아웃은 ViewGroup이라는 클래스 아래에 존재합니다.
(레이아웃도 크게 보면 위젯에 포함됩니다)

다른 프로그래밍 언어에서 컨트롤(control)이라고 부르는
버튼(Button), 텍스트뷰(TextView), 에디트텍스트(EditText),
라디오버튼(RadioButton), 이미지뷰(ImageView) 등을
안드로이드에서는 위젯이라고 부릅니다.

그런데, 위젯은 단독으로 존재하지 않으며, 위젯을 담아 배치하는 틀이 바로 레이아웃입니다.
레이아웃은 위젯을 포함하는 컨테이너 역할을 하므로 눈에 보이는 개념이 아닙니다.
우리는 버튼, 텍스트뷰, 체크박스 등 눈에 보이는 요소(클래스)를 '위젯'이라고 부르며,
위젯을 담는 틀을 '레이아웃'으로 구분하여 부를것입니다.

==================================================================

 

레이아웃

 

https://developer.android.com/guide/topics/ui/declaring-layout?hl=ko

레이아웃  |  Android 개발자  |  Android Developers

 

 LinearLayout  -  Android Developers

https://developer.android.com/reference/android/widget/LinearLayout

LinearLayout  |  Android Developers

상대적 레이아웃

https://developer.android.com/guide/topics/ui/layout/relative?hl=ko

상대적 레이아웃  |  Android 개발자  |  Android Developers

ConstraintLayout으로 반응형 UI 빌드

https://developer.android.com/training/constraint-layout?hl=ko

ConstraintLayout으로 반응형 UI 빌드  |  Android 개발자  |  Android Developers

TableLayout_표 

https://developer.android.com/guide/topics/ui/layout/grid?hl=ko

표  |  Android 개발자  |  Android Developers

---

프로젝트 생성

버전 변경

레이아웃 화면 꽉채우기

<?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">

    <LinearLayout
        android:id="@+id/linearLayout"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello World!" />

        <Button
            android:id="@+id/button"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Button" />

        <CheckBox
            android:id="@+id/checkBox"
            android:layout_width="422dp"
            android:layout_height="wrap_content"
            android:text="CheckBox" />

        <RadioButton
            android:id="@+id/radioButton"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="RadioButton" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal">

            <Switch
                android:id="@+id/switch1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Switch" />

            <Button
                android:id="@+id/button2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Button" />
        </LinearLayout>
    </LinearLayout>


</androidx.constraintlayout.widget.ConstraintLayout>

construct 레이아웃 : 반응형 레이아웃

package com.cookandroidappstudy.mylayout_example;

import androidx.appcompat.app.AppCompatActivity;

import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Button btn = new Button(this);
        btn.setText("버튼입니다!");
        btn.setBackgroundColor(Color.MAGENTA);


        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
                LinearLayout.LayoutParams.MATCH_PARENT,
                LinearLayout.LayoutParams.MATCH_PARENT);

        LinearLayout baseLayout = new LinearLayout(this);
        baseLayout.setOrientation(LinearLayout.VERTICAL);
        baseLayout.setBackgroundColor(Color.rgb(0,255,0));
        baseLayout.addView(btn);
        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(getApplicationContext(),
                        "코드로 생성한 버튼입니다!", Toast.LENGTH_SHORT).show();
            }
        });
        setContentView(baseLayout, params);
    }
}

버튼을 누르면 팝업이 뜬다!