Android / ScrollView

ScrollView는 인스타그램이나 페이스북과 같은 SNS앱에서 많이 접할 수 있다.

예제를 통해 ScrollView를 사용해보자. 예제는 다음과 같다.

 

 

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:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


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

        <TextView
            android:id="@+id/textView3"
            android:gravity="center"
            android:textStyle="bold"
            android:textSize="25sp"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="TimeLine" />

        <TextView
            android:id="@+id/textView2"
            android:textStyle="bold"
            android:gravity="center"
            android:textSize="25sp"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="Untitled" />

    </LinearLayout>

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

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

            <include layout="@layout/layout_content"/>
            <include layout="@layout/layout_content"/>
            <include layout="@layout/layout_content"/>
            <include layout="@layout/layout_content"/>
            <include layout="@layout/layout_content"/>

        </LinearLayout>
    </ScrollView>



</LinearLayout>

 

layout_content.xml

<?xml version="1.0" encoding="utf-8"?>
<merge
    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">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="match_parent"
            android:layout_height="400dp"
            android:scaleType="centerCrop"
            app:srcCompat="@drawable/propic1" />

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="60dp">

            <ImageView
                android:id="@+id/img_love"
                android:layout_marginLeft="10dp"
                android:layout_centerVertical="true"
                android:layout_alignParentLeft="true"
                android:layout_width="50dp"
                android:layout_height="50dp"
                app:srcCompat="@drawable/ic_favorite" />

            <TextView
                android:id="@+id/tv_count"
                android:layout_marginLeft="10dp"
                android:layout_centerVertical="true"
                android:textSize="25sp"
                android:layout_toRightOf="@id/img_love"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="5,387" />

            <ImageView
                android:id="@+id/img_more"
                android:layout_marginRight="10dp"
                android:layout_centerVertical="true"
                android:layout_alignParentRight="true"
                android:layout_width="50dp"
                android:layout_height="50dp"
                app:srcCompat="@drawable/ic_more" />
        </RelativeLayout>

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

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="60dp">

            <TextView
                android:id="@+id/tv_username"
                android:layout_marginLeft="10dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:text="instaUser"
                android:textStyle="bold"
                android:textSize="25sp" />

            <TextView
                android:id="@+id/tv_comment"
                android:layout_marginLeft="5dp"
                android:layout_toRightOf="@+id/tv_username"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:text="프로필 사진 찍었어요!"
                android:textSize="25sp" />

        </RelativeLayout>

    </LinearLayout>

</merge>

 

ScrollView는 include를 활용해 뷰를 구성하고 ScrollView 사용시 주의할 점은 ScrollView는 내부에 레이아웃을 하나밖에 두지못한다는 것이다. 그러니 뎁스 또한 당연 허용되지 않는다.