안드로이드 레이아웃 연습 및 예제 (유튜브)

핵심

 

Linear Layout

기본 레이아웃

 

Frame Layout

요소 겹치기가 가능

 

ScrollView

스크롤 효과가 가능

 

 

---

새로운 개념

dp -> density Independent Pixel
--> 픽셀에 독립적인 단위
--> dp라는 단위를 사용하면 다양한 해상도의 핸드폰에서 동일 크기로 보이게 된다.
--> 안드로이드에서 주로 사용하게 되는 단위

 

sp - > Scale-Independent Pixels

-->  텍스트의 크기를 지정하기 위해 사용하는 단위

-->  sp로 크기를 지정해 놓은 TextView는 시스템 설정에서 텍스트 크기를 최대 크게로 설정하게 되면 영향을 받아 커짐

but, dp일 경우 텍스트 크기가 영향을 받지 않고 일정한 크기로 고정됨.

 

---

코드 명령어 정리

---

orientation="vertical"

요소를 수직으로 정렬

 

orientation="horizontal"

요소를 수평으로 정렬

 

gravity : 자신의 뷰에서 포함하고 있는 데이터를 정렬

layout_gravity : 자신을 포함하고 있는 부모 위젯 레이아웃에서 옵션값에 따라 정렬

 

android:scrollbars="none" 

스크롤바 없애기

 

 

android:scaleType="centerCrop"

이미지의 가로/세로중 짧은 부분을 기준으로 레이아웃 영역을 채움.

레이아웃에서 벗어난 부분은 잘라냄(출력x)

---

실습 예제 및 코드

 

 

 

 

<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="80dp"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:layout_gravity="center"
            android:layout_margin="15dp"
            android:src="@drawable/youtube_logo" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="youtube"
            android:textColor="@color/white"
            android:textSize="25dp" />
    </LinearLayout>

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="10dp"
        android:background="#BEBEBE"
        android:scrollbars="none">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:orientation="vertical">

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

                <ImageView
                    android:layout_width="380dp"
                    android:layout_height="300dp"
                    android:scaleType="centerCrop"
                    android:src="@drawable/cat1"></ImageView>

                <TextView
                    android:layout_width="50dp"
                    android:layout_height="30dp"
                    android:layout_gravity="bottom|right"
                    android:layout_margin="15dp"
                    android:background="@color/black"
                    android:gravity="center"
                    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:layout_marginBottom="10dp"
                android:orientation="horizontal">

                <ImageView
                    android:layout_width="50dp"
                    android:layout_height="50dp"
                    android:src="@drawable/prof_image" />

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_marginLeft="10dp"
                    android:orientation="vertical">

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="제목입니다"
                        android:textSize="20dp"
                        android:textStyle="bold" />

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

    </ScrollView>

</LinearLayout>