8. Layout ScrollView (레이아웃 스크롤뷰) - Android Studio (안드로이드)

ScrollView

이번에 추가해볼 View 는 ScrollView 입니다.

ScrollView 는 영역이 너무커서 한 화면에 다 보여주지 못 할때 사용이 됩니다.

한개의 ScrollView는 오직 한개의 뷰만을 가질 수 있습니다.

보통은 아래 그림처럼 LinearLayout View 를 포함 시키고 LinearLayout 의 자식으로 여러 View 들을 등록 하는 방식으로 많이 사용 합니다. (Layout 또한 View 입니다.)

이처럼 많은 View 들을 보여 줄 필요 없이 하나의 뷰만 보여줄 계획이라면 LinearLayout 필요 없이 바로 TextView 등을 추가 하셔서 사용 하셔도 됩니다. (성능향상)

ScrollView는 하나의 뷰만을 가질 수 있다.

스크롤 뷰 추가

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

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

생성된 ScrollView 는 남은 여유 공간 모두를 차지하게 됩니다.

스크롤뷰 안에 자동으로 LinerLayout 이 생성됩니다.

 

이제 ScrollView 속성을 주도록 합시다.

제일 먼저 ID 를 입력해 주도록 합니다.

ID 입력

그리고 ScrollView Text 영역에서 LinearLayout 을 제거 해 주도록 합니다.

지금은 복잡한 뷰를 구성하진 않을꺼라 LinearLayout 은 사치 입니다.

    <ScrollView
        android:id="@+id/bio_scroll"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </ScrollView>

그리고 ScrollView 에 TextView 를 추가 하도록 합니다.

TextView 추가

이전에 name_text(textView) 나 star_image 추가할때 보다 탭간격이 하나 더  들어간 것으로 보입니다.

이 탭간격이 자식을 나타 냅니다.

LinearLayout 의 자식 리스트 : name_text, star_image, bio_scroll

bio_scroll 의 자식 리스트 : 새로추가한 textView 

새로추가한 textView 에게 LinearLayout 은 할아버지 뻘이네요

 

새로 추가한 textView 에게 bio_text 라는 id 를 주도록 합니다.

그리고 style 은 이전에 만들어둔 nameStyle 을 적용 해 보도록 합니다.

모두 attribute 에서 추가 하시면 됩니다.

style 적용(NameStyle)

bio_text 에 적용된 string 을 하드코딩 제거를 위해 string.xml 을 직접 편집해서 string 리소스를 추가 해 보도록 하겠습니다.

<resources>
    <string name="app_name">AboutMe</string>
    <string name="name">Arvigoes</string>
    <string name="Yellow_star" >Yellow Star</string>
    <string name="bio" >질문하신 자기소개서 예시에 대해 도움을 드리고자 합니다.
\n많은 취준생분들이 자유양식 자기소개서 작성을 어렵게 생각합니다.
\n각 기업에서 제공하는 자소서 문항이 정해진 양식을 오히려 편하게 느낄 수 있습니다. 
\n그저 그 질문 문항에 맞는 내용을 작성하면 되니까 말입니다. 
\n여기서 자유자기소개서함은 특정한 형식에 구애받지 않고 자신이 원하는 자기소개서의 서식을 골라서 작성하라는 의미로 생각하면 되겠습니다.
\n개성은 살려주되, 자유자기소개서의 일반적인 트렌드는 따라가 준다면 자율성과 대중성을 모두 만족시켜 줄 수 있을 것입니다.
\n자유양식 자기소개서를 골랐다면 작성또한 아주 중요합니다. 
\n기본적으로 성장과정, 성격의 장단점, 지원동기, 입사후포부 등의 내용이 자연스레 이어지게 들어가야 합니다. 
\n본인을 가장 잘 어필 할 수 있도록 제목과 소제목을 넣어가며 수많은 자기소개서를 읽는 인사담당자의 눈에 띌 수 있도록 해야 합니다. 
\n합격하는 자기소개서는 분명 따로 있습니다.
\n마지막으로 자유자기소개서 작성을 위해 실제로 합격한 각 기업/직무별 합격자기소개서 남겨드리니 참고하시어 본인만의 명품 자기소개서를 만들어 보시기 바랍니다 :)\n\n</string>
</resources>

마지막에 추가한 bio 라는 이름의 여러줄 문장을 추가 해 보았습니다.(인터넷에서 대충 긁어온 글이니...)

attribute 에 적용 해 보도록 합니다.

string value 적용

preview

이제 글자가 보이는데 좀 보기가 그러네요

좀 더 깔끔하게 보이도록 설정해 보도록 합시다.

attribute 에서 padding start 값을 추가 해 보도록 하겠습니다.

padding 값 dimens 에 추가

Start 와 End 에 동일하게 적용

 

 

padding start end 값 적용

        <TextView
            android:id="@+id/bio_text"
            style="@style/NameStyle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingStart="@dimen/padding"
            android:paddingEnd="@dimen/padding"
            android:text="@string/bio"
            android:lineSpacingMultiplier="1.2"/>

lineSpacingMultiplier 옵션값으로 1.2 로 주어 줄간격에 여유를 좀 더 줘 보도록 합니다.

한결 읽기가 편하네요

ReformatCode 

대충 작업이 끝났으니 Reformat Code 를 통해 소스를 자동 정렬 시켜 봅니다.

이거 작업 중간중간에 해 주시면 나중에 편해져요

    <ScrollView
        android:id="@+id/bio_scroll"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/bio_text"
            style="@style/NameStyle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:lineSpacingMultiplier="1.2"
            android:paddingStart="@dimen/padding"
            android:paddingEnd="@dimen/padding"
            android:text="@string/bio" />
    </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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:id="@+id/name_text"
        style="@style/NameStyle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/name"
        android:textAlignment="center" />

    <ImageView
        android:id="@+id/star_image"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/layout_margin"
        android:contentDescription="@string/Yellow_star"
        app:srcCompat="@android:drawable/btn_star_big_on" />

    <ScrollView
        android:id="@+id/bio_scroll"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/bio_text"
            style="@style/NameStyle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:lineSpacingMultiplier="1.2"
            android:paddingStart="@dimen/padding"
            android:paddingEnd="@dimen/padding"
            android:text="@string/bio" />
    </ScrollView>
</LinearLayout>

MainActivity.kt 는 처음 만든 그대로 변함이 없네요

화면 꾸미고 UI 적용 하는게 엄청 귀찮은 작업이라 생각해서 항상 어떻게든 안하려고 했었는데

이렇게 하나씩 해 보니 이것도 재밌기는 하네요

그렇지만 귀찮은건 어쩔 수 없네요

언능 Layout을 끝내고 싶지만 앱을 만들려면 (혼자서) 필수이니 꼭 해보도록 합니다.