본문 바로가기
코리아 IT아카데미/android

2일차 | relativeLayout, margin,padding, image, scroll

by Sharon kim 2022. 2. 16.

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

    <!--    상대 레이아웃
            1. 부모 뷰 기준 정렬 -> parent
            2. 특정 뷰 기준 -> center   -->
    <TextView
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_centerInParent="true"
        android:background="@color/purple_200" />

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

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

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

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

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

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

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

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


</RelativeLayout>

b_activity_main_2.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">

    <!--  특정 뷰 기준으로 배치하는 방법
      to_, of 가 들어가는 속성을 사용한다.
      식별자 id -->

    <TextView
        android:id="@+id/view1"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_centerInParent="true"
        android:background="@color/purple_200" />

    <TextView
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_centerInParent="true"
        android:layout_toLeftOf="@+id/view1"
        android:background="@color/purple_500" />

    <TextView
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_centerInParent="true"
        android:layout_toRightOf="@id/view1"
        android:background="@color/purple_700" />

    <TextView
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_above="@id/view1"
        android:layout_centerInParent="true"
        android:background="#B949F4" />

    <TextView
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_above="@id/view1"
        android:layout_centerInParent="true"
        android:layout_alignParentLeft="true"
        android:background="#E91E63" />

    <TextView
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_above="@id/view1"
        android:layout_centerInParent="true"
        android:layout_alignParentRight="true"
        android:background="#E91E63" />

    <TextView
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_centerInParent="true"
        android:layout_below="@id/view1"
        android:background="#892DBA" />

    <TextView
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_below="@id/view1"
        android:layout_alignParentRight="true"
        android:layout_centerInParent="true"
        android:background="#F44336" />

    <TextView
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_below="@id/view1"
        android:layout_alignParentLeft="true"
        android:layout_centerInParent="true"
        android:background="#F44336" />


</RelativeLayout>

c_activity_main_3.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">

    <!--  특정 뷰 기준으로 배치하는 방법
      to_, of 가 들어가는 속성을 사용한다.
      식별자 id -->

    <TextView
        android:id="@+id/view1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_centerInParent="true"
        android:background="#8BC34A" />

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_alignParentLeft="true"
        android:background="#F44336" />

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentBottom="true"
        android:background="#F44336" />

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_alignParentRight="true"
        android:background="#F44336" />

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:background="#F44336" />

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_centerInParent="true"
        android:layout_toLeftOf="@id/view1"
        android:background="#E91E1E" />

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_above="@id/view1"
        android:layout_toLeftOf="@id/view1"
        android:background="#FFBDBD" />

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_centerInParent="true"
        android:layout_toRightOf="@id/view1"
        android:background="#BD2E4B" />
    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_below="@id/view1"
        android:layout_toRightOf="@id/view1"
        android:background="#FFEB3B" />
    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_below="@id/view1"
        android:layout_toLeftOf="@id/view1"
        android:background="#FFEB3B" />
    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_above="@id/view1"
        android:layout_toRightOf="@id/view1"
        android:background="#FFADBD" />

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_above="@id/view1"
        android:layout_centerInParent="true"
        android:background="#E84949" />

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_below="@id/view1"
        android:layout_centerInParent="true"
        android:background="#FA7D56" />


</RelativeLayout>

d_padding_margin.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="100dp"
        android:layout_height="100dp"
        android:layout_marginBottom="30dp"
        android:background="@color/purple_700"
        android:paddingLeft="30dp"
        android:paddingTop="30dp"
        android:text="A" />

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginBottom="30dp"
        android:background="@color/purple_200"
        android:paddingLeft="30dp"
        android:paddingTop="30dp"
        android:text="A" />

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginBottom="30dp"
        android:background="@color/teal_700"
        android:paddingLeft="30dp"
        android:paddingTop="30dp"
        android:text="A" />

</LinearLayout>

e_frame_layout_01.xml

 

<?xml version="1.0" encoding="utf-8"?>
<!--
    Frame : 화면을 겹칠 때 사용한다.
    z-index
-->
<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"
    tools:context=".MainActivity">

    <FrameLayout
        android:padding="50dp"
        android:background="@color/black"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <TextView
            android:background="@color/teal_200"
            android:layout_width="150dp"
            android:layout_height="150dp"/>

        <TextView
            android:background="@color/purple_700"
            android:layout_width="100dp"
            android:layout_height="100dp"/>

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

f_frame_layout_02.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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">

<!--    자식 뷰 입장에서 부모 뷰 기준으로 정렬을 요청할 수 있다.
        layout_ 부모 뷰 기준으로 정렬을 해 주는 속성
        차이점 확인하기
        layout_gravity
        gravity
-->
    <FrameLayout
        android:background="@color/purple_700"
        android:layout_gravity="center"
        android:padding="50dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <TextView
            android:background="@color/black"
            android:layout_gravity="center"
            android:layout_width="150dp"
            android:layout_height="150dp"/>

        <TextView
            android:background="@color/teal_200"
            android:layout_gravity="center"
            android:layout_width="50dp"
            android:layout_height="50dp"/>
    </FrameLayout>
</FrameLayout>

g_image_view_01.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:background="@color/black"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
<!--    C:\android_workspace\class_v2\app\src\main\res\drawable
        @drawable/이미지명-->
    <ImageView
        android:src="@drawable/ic_launcher_background"
        android:layout_width="300dp"
        android:layout_height="300dp"/>

    <ImageView

        android:scaleType="centerCrop"
        android:src="@drawable/youtube2"
        android:layout_width="300dp"
        android:layout_height="300dp"/>
    <!-- 원본 이미지의 비율 1 : 1 , 2 : 1, 16 : 9 ...
        scaleType="centerCrop" -> 이미지를 공간에 꽉 채워라
                                  이미지 잘림
    -->
</LinearLayout>

h_scroll_view_01.xml

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

    <!--
        java 같은 경우 문법 오류를 잘 잡아준다.
        xml의 특징 : 문법 체크에 느슨하다.

        !! 스크롤 뷰를 사용할 때 꼭 기억하기
        :스크롤 뷰는 오직 하나의 자식 뷰를 가질 수 있다.

        !tip: 알 수 없는 오류를 만날 수 있다.
        ScrollView를 쓸 때는 fillViewport="true"를 반드시 써라

    -->

    <ScrollView
        android:fillViewport="true"
        android:scrollbars="none"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <TextView
                android:layout_width="200dp"
                android:layout_height="200dp"
                android:background="@color/teal_200" />

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

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

            <TextView
                android:layout_width="200dp"
                android:layout_height="200dp"
                android:background="@color/purple_700" />

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


    </ScrollView>



</LinearLayout>

i_mytube_layout_01.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:background="@color/black"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_marginStart="16dp"
        android:gravity="center|left"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="60dp"
            android:layout_height="wrap_content"
            android:src="@drawable/youtube2" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="MyTube"
            android:textColor="@color/white"
            android:textSize="20dp" />

    </LinearLayout>

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true"
        android:scrollbars="none">

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

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


                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="#C9E6EA"
                    android:orientation="vertical"
                    android:padding="16dp">

                    <FrameLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content">

                        <ImageView
                            android:layout_width="match_parent"
                            android:layout_height="250dp"
                            android:scaleType="centerCrop"
                            android:src="@drawable/house" />

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="bottom|right"
                            android:layout_margin="10dp"
                            android:background="@color/black"
                            android:padding="4dp"
                            android:text="10:35"
                            android:textColor="@color/white" />


                    </FrameLayout>

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="10dp"
                        android:orientation="horizontal">

                        <de.hdodenhof.circleimageview.CircleImageView 
                        xmlns:app="http://schemas.android.com/apk/res-auto"
                            android:layout_width="50dp"
                            android:layout_height="50dp"
                            android:src="@mipmap/ic_launcher"
                            app:civ_border_color="#E13131"
                            app:civ_border_width="1dp" />


                        <LinearLayout
                            android:layout_width="wrap_content"
                            android:layout_height="match_parent"
                            android:layout_marginStart="8dp"
                            android:gravity="center|left"
                            android:orientation="vertical">

                            <TextView
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:text="영상에 제목입니다."
                                android:textSize="18dp" />

                            <TextView
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:text="부제목입니다." />


                        </LinearLayout>


                    </LinearLayout>


                </LinearLayout>


            </LinearLayout>

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


                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="#C9E6EA"
                    android:orientation="vertical"
                    android:padding="16dp">

                    <FrameLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content">

                        <ImageView
                            android:layout_width="match_parent"
                            android:layout_height="250dp"
                            android:scaleType="centerCrop"
                            android:src="@drawable/house" />

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="bottom|right"
                            android:layout_margin="10dp"
                            android:background="@color/black"
                            android:padding="4dp"
                            android:text="10:35"
                            android:textColor="@color/white"/>


                    </FrameLayout>

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="10dp"
                        android:orientation="horizontal">

                        <de.hdodenhof.circleimageview.CircleImageView 
                        xmlns:app="http://schemas.android.com/apk/res-auto"
                            android:layout_width="50dp"
                            android:layout_height="50dp"
                            android:src="@mipmap/ic_launcher"
                            app:civ_border_color="#E13131"
                            app:civ_border_width="1dp" />


                        <LinearLayout
                            android:layout_width="wrap_content"
                            android:layout_height="match_parent"
                            android:layout_marginStart="8dp"
                            android:gravity="center|left"
                            android:orientation="vertical">

                            <TextView
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:text="영상에 제목입니다."
                                android:textSize="18dp" />

                            <TextView
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:text="부제목입니다." />


                        </LinearLayout>


                    </LinearLayout>


                </LinearLayout>


            </LinearLayout>

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


                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="#C9E6EA"
                    android:orientation="vertical"
                    android:padding="16dp">

                    <FrameLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content">

                        <ImageView
                            android:layout_width="match_parent"
                            android:layout_height="250dp"
                            android:scaleType="centerCrop"
                            android:src="@drawable/house" />

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="bottom|right"
                            android:layout_margin="10dp"
                            android:background="@color/black"
                            android:padding="4dp"
                            android:text="10:35"
                            android:textColor="@color/white" />


                    </FrameLayout>

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="10dp"
                        android:orientation="horizontal">

                        <de.hdodenhof.circleimageview.CircleImageView 
                        xmlns:app="http://schemas.android.com/apk/res-auto"
                            android:layout_width="50dp"
                            android:layout_height="50dp"
                            android:src="@mipmap/ic_launcher"
                            app:civ_border_color="#E13131"
                            app:civ_border_width="1dp" />


                        <LinearLayout
                            android:layout_width="wrap_content"
                            android:layout_height="match_parent"
                            android:layout_marginStart="8dp"
                            android:gravity="center|left"
                            android:orientation="vertical">

                            <TextView
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:text="영상에 제목입니다."
                                android:textSize="18dp" />

                            <TextView
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:text="부제목입니다." />


                        </LinearLayout>


                    </LinearLayout>


                </LinearLayout>


            </LinearLayout>

        </LinearLayout>
    </ScrollView>

</LinearLayout>