안드로이드 공부 0731 (유튜브 UI)

1.

<LinearLayout 에서는 android:layout_gravity="center" 이게 없더라

<LinearLayout android:gravity="center" 이것만 있음

 

근데 <TextView 에서는 layout_gravity가 있음

 

2.

안드로이드 유튜브 UI 만들기

1. 상단 바를 만든다

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:background="#000000"
        android:padding="8dp">

        <ImageView
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:src="@drawable/youtube"
            android:layout_marginRight="8dp"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="MyTube"
            android:textColor="#ffffff"
            android:textSize="20dp"
            android:layout_gravity="center_vertical"
            android:textStyle="bold" />

    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

match_parent 화면 꽉차게

horizontal 가로로

layout_marginRight 오른쪽 간격 주기

 

2. 스크롤바 만들기

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

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

                <FrameLayout
                </FrameLayout>

            </LinearLayout>

        </LinearLayout>

    </ScrollView>

scrollView는 자식을 하나밖에 못 가지니까 LinearLayout으로 자식은 전체 묶어준다

그 안의 LinearLayout은 각 영상 이미지를 가진 FrameLayout들을 묶는 역할이다

 

3. 영상 썸네일 넣기

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

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

                <FrameLayout
                    android:layout_width="match_parent"
                    android:layout_height="250dp"
                    android:padding="10dp">

                    <ImageView
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:src="@drawable/dog"
                        android:scaleType="centerCrop"
                        >
                    </ImageView>
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="13:05"
                        android:layout_gravity="bottom|right"
                        android:layout_margin="10dp"
                        android:textColor="#ffffff"
                        android:textStyle="bold"
                        android:background="#000000"
                        android:padding="2dp"
                        />

                </FrameLayout>

            </LinearLayout>

        </LinearLayout>

    </ScrollView>

한 영상 쎔네일 하나 당 가로는 꽉 차게 세로는 250dp

양 옆에 공백을 주기 위해 margin

 

이미지는 가로 세로 꽉 차게, 중앙 기준 확대

 

텍스트는 오른쪽 아래 붙이고 text를 임의로 넣음

오른쪽과 바닥에서 좀 띄우기 위해 layout_margin="10dp" 줬고

검정 배경과 글씨가 너무 붙어 있어서 padding="2dp" 줬다

 

4. 유튜버와 제목 넣기

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal"
                    android:padding="8dp"
                    android:gravity="center_vertical">

                    <ImageView
                        android:layout_width="30dp"
                        android:layout_height="30dp"
                        android:src="@drawable/person"
                        android:layout_marginRight="13dp"/>
                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:orientation="vertical">
                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:textStyle="bold"
                            android:text="짱 귀여운 스피츠"
                            android:textSize="14dp"
                            android:textColor="#000000"/>
                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:textStyle="bold"
                            android:text="부제: 스피츠 최고야"
                            android:textSize="10dp"
                            android:textColor="#000000"/>
                    </LinearLayout>
                </LinearLayout>

LinearLayout으로 크게 하나 감싸줌

그리고 padding 넣어서 영상 썸네일이랑 살짝 띄어준다

gravity로 중앙 정렬

 

이미지 뷰로 유튜버 이미지 하나 넣어줌

 

오른쪽 제목과 부제를 넣어주기 위해 LinearLayout으로 한 번 더 묶는다

그 안에 TextView로 텍스트 두 개 잘 넣어준다

 

5. 복붙하고 에뮬레이터 작동

<FrameLayout 과 <LinearLayout 을 전체 복붙 세 번

메인액티비티 바꿔주고 실행

스크롤도 잘 내려간다