1일차 | 생성, 기본 개념, linearLayout

---

01. 안드로이드에서 화면을 그리는 방법

기본적으로 xml이라는 언어를 사용한다.
DSL -> (Domain Specific Language) 범주, 특화된 언어
:안드로이드 UI를 그리기 위한 특화된 언어다.

px과 dp란 무엇인가?

핸드폰마다 크기가 다른데 어떻게 화면을 그려야하나? --> dp라는 단위를 쓰면 된다.

dpi (px. dp)

dpi : dot per inch(1인치 안에서 픽셀이 얼마나 많이 있는가?)

    -1dpi : (1인치에 120px)
    -mdpi : (1인치에 160px)
    -hdpi : (1인치에 240px)
    -xhdpi : (1인치에 320px)
    -xxhdpi : (1인치에 480px)
    -xxxhdpi : (1인치에 640px)

    px = dp * (단말 DPI / 기본 160)
    dp = px * (기본 160 / 단말 DPI)


    //420 dpi
    //560 dpi

    핵심 결론 : dp 라는 단위를 사용하면 사용자 기기에 따라서 자동으로 적정한 px 변환되어
    화면을 그려준다.

---

1. xml에 직접 타이핑하는 방식
2. story board에서 드래그앤 드랍 방식으로 그려 볼 수 있다.(xml이 자동으로 코딩된다.)

view component란

화면을 그리는 각각의 요소
글, 이미지, 토글버튼, 텍스트 버튼, 이미지 버튼, 로딩 바

부모가 될 수 있는 view component
부모가 될 수 없는 view component

---

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="vertical"
    tools:context=".MainActivity">

    <!-- px 78.75 = 420 dpi   -->
    <!-- px 105 = 560 dpi   -->
    <Button
        android:text="hello android"
        android:layout_width="30dp"
        android:layout_height="30dp"/>

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

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

---

linear_layout01.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:background="@color/purple_500"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <!--ctrl alt L : 코드 자동 정렬-->

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:text="TEXT_1"
        android:gravity="center|left"
        android:background="@color/black"
        android:textColor="@color/purple_500"/>

    <!--가로 크기 200, 세로 크기 200 정렬, 왼쪽 하단-->
    <TextView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:text="TEXT_1"
        android:gravity="bottom|left"
        android:background="#ffffff"
        android:textColor="@color/purple_500"
        tools:ignore="RtlHardcoded" />

    <LinearLayout
        android:gravity="center"
        android:orientation="horizontal"
        android:background="#ffffff"
        android:layout_width="match_parent"
        android:layout_height="200dp">

        <TextView
            android:background="@color/black"
            android:layout_width="50dp"
            android:layout_height="50dp"/>

        <TextView
            android:background="@color/purple_200"
            android:layout_width="50dp"
            android:layout_height="50dp"/>

        <TextView
            android:layout_width="52dp"
            android:layout_height="50dp"
            android:background="@color/teal_700" />


    </LinearLayout>

</LinearLayout>

---

linear_layout02.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="텍스트뷰" />

    <TextView
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:background="#F3F3F3"
        android:gravity="center|right"
        android:text="컨텐츠" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:background="#BCEAAF"
        android:gravity="center|right"
        android:orientation="horizontal">

        <TextView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:background="#BD3E3E" />

        <TextView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:background="#E38C20" />

        <TextView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:background="#39A83A" />

        <TextView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:background="#1147D1" />

    </LinearLayout>

    <LinearLayout
        android:weightSum="5"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="#E4D4D4"
        android:orientation="horizontal">

        <TextView
            android:layout_weight="3"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:background="#FFC107"
            android:gravity="center"
            android:text="one"
            android:textSize="20dp" />

        <TextView
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:background="#00BCD4"
            android:gravity="center"
            android:text="two"
            android:textSize="20dp" />

        <TextView
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:background="#8BC34A"
            android:gravity="center"
            android:text="three"
            android:textSize="20dp" />
    </LinearLayout>

</LinearLayout>

---

linear_layout03.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@color/teal_700"
        android:gravity="center|left"
        android:text="<- simple tabs"
        android:textColor="#ffffff"
        android:textSize="30dp" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@color/teal_700"
        android:orientation="horizontal">

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="ONE"
            android:textColor="@color/white" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="TWO"
            android:textColor="@color/white" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="THREE"
            android:textColor="@color/white" />

    </LinearLayout>
</LinearLayout>

---

linear_layout04.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="297dp">

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@color/black" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@color/purple_700" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@color/teal_200" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="297dp">

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#C62424" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#7E56DA" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#9C27B0" />
    </LinearLayout>

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

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#15BBE4" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#F192F4" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#8120E1" />
    </LinearLayout>

</LinearLayout>