[Android] 7. ScrollView ① : 가로, 세로 스크롤/ScrollView ② : 가로 길게 스크롤/레이아웃 복습

https://github.com/upcake/Class_Examples

교육 중에 작성한 예제들은 깃허브에 올려두고 있습니다. 

gif 파일은 클릭해서 보는 것이 정확합니다.

---

 - ScrollView ① : 가로, 세로 스크롤 -

▲ScrollView ① 작동화면

▼ScrollView ① : 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:orientation="vertical">

    <Button
        android:id="@+id/btnChange"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="이미지 바꾸기"/>

    <!--가로 방향은 HorizontalScrollView를 사용한다.-->
    <!--가로 방향 스크롤-->
    <HorizontalScrollView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <!--세로 방향 스크롤-->
        <!--ScrollView의 기본값은 세로 방향-->
        <!--ScrollView 내부에 2개 이상의 요소를 배치하면 작동하지 않는다.-->
        <!--2개 이상의 요소를 배치할 때는 LinearLayout 등의 다른 레이아웃으로 묶어준다.-->
        <ScrollView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">

            <ImageView
                android:id="@+id/imageView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:src="@drawable/image01"/>
        </ScrollView>
    </HorizontalScrollView>
</LinearLayout>

 - <HorizontalScrollView> : 가로 방향 스크롤

 - <ScrollView> : 세로 방향 스크롤

 

▼ScrollView ① : Java

package com.example.my05_scrolllayout;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {
    //변수 선언
    Button btnChange;
    ImageView imageView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //변수 찾기
        btnChange = findViewById(R.id.btnChange);
        imageView = findViewById(R.id.imageView);

        //이벤트 생성
        btnChange.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                imageView.setImageResource(R.drawable.image02);
                //setImageResource(R.drawable.이미지이름) : drawable에 있는 이미지를 불러온다.
            }
        });

    }
}

 - setImageResource(R.drawable.이미지 이름) : drawable에 있는 이미지를 불러온다. ▶ android:src="" 값을 바꾼다.

 

 

 - ScrollView ② : 가로 길게 스크롤 -

▲ScrollView ② 작동화면

▼ScrollView ② : 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:orientation="vertical">

    <HorizontalScrollView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <ImageView
                android:layout_width="150dp"
                android:layout_height="100dp"
                android:src="@drawable/image01"/>

            <ImageView
                android:layout_width="150dp"
                android:layout_height="100dp"
                android:src="@drawable/image02"/>

            <ImageView
                android:layout_width="150dp"
                android:layout_height="100dp"
                android:src="@drawable/image01"/>

            <ImageView
                android:layout_width="150dp"
                android:layout_height="100dp"
                android:src="@drawable/image02"/>

            <ImageView
                android:layout_width="150dp"
                android:layout_height="100dp"
                android:src="@drawable/image01"/>

            <ImageView
                android:layout_width="150dp"
                android:layout_height="100dp"
                android:src="@drawable/image02"/>

            <ImageView
                android:layout_width="150dp"
                android:layout_height="100dp"
                android:src="@drawable/image01"/>

            <ImageView
                android:layout_width="150dp"
                android:layout_height="100dp"
                android:src="@drawable/image02"/>
        </LinearLayout>
    </HorizontalScrollView>
</LinearLayout>

 

 

 - 레이아웃 복습 -

▲레이아웃 복습 작동 화면

 

▼레이아웃 복습 : 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:orientation="vertical"
    android:weightSum="300">

    <!--상단-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="100"
        android:orientation="horizontal"
        android:weightSum="300">

        <Button
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="100"
            android:background="@mipmap/ic_launcher" />

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="100"
            android:orientation="vertical"
            android:weightSum="400">

            <Button
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="100" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="100" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="100" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="100" />
        </LinearLayout>

        <Button
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="100" />
    </LinearLayout>

    <!--중단-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="100"
        android:orientation="vertical">

        <Button
            android:id="@+id/btnChange01"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="이미지 바꾸기" />

        <ImageView
            android:id="@+id/frameImage01"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/dream01"
            android:layout_gravity="center"
            android:visibility="visible"/>

        <ImageView
            android:id="@+id/frameImage02"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/dream02"
            android:layout_gravity="center"
            android:visibility="gone"/>
    </LinearLayout>

    <!--하단-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="100"
        android:orientation="vertical">

        <Button
            android:id="@+id/btnChange02"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="이미지 바꾸어 보여주기" />
        
        <HorizontalScrollView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">

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

                <ImageView
                    android:id="@+id/scrollImage01"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/image01" />
            </ScrollView>
        </HorizontalScrollView>
    </LinearLayout>
</LinearLayout>

 

 

▼레이아웃 복습 : Java

package com.example.my07_alllayout;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {
    //변수 선언
    Button btnChange01, btnChange02;
    ImageView frameImage01, frameImage02, scrollImage01;
    int selIdx = 1;
    int selIdx2 = 1;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //변수 id 찾기
        btnChange01 = findViewById(R.id.btnChange01);
        btnChange02 = findViewById(R.id.btnChange02);
        frameImage01 = findViewById(R.id.frameImage01);
        frameImage02 = findViewById(R.id.frameImage02);
        scrollImage01 = findViewById(R.id.scrollImage01);

        //버튼에 기능 넣기
        btnChange01.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if(selIdx == 1) {
                    frameImage01.setVisibility(View.GONE);
                    frameImage02.setVisibility(View.VISIBLE);
                    selIdx = 2;
                } else if (selIdx == 2) {
                    frameImage01.setVisibility(View.VISIBLE);
                    frameImage02.setVisibility(View.GONE);
                    selIdx = 1;
                } // if else if
            } // onClick
        }); // btnChange01 setOnClickListener

        btnChange02.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if(selIdx2 == 1) {
                    scrollImage01.setImageResource(R.drawable.image02);
                    selIdx2 = 2;
                } else if (selIdx2 == 2) {
                    scrollImage01.setImageResource(R.drawable.image01);
                    selIdx2 = 1;
                } // if else if
            } // onClick
        }); // setOnClickListener
    } // onCreate
} // MainActivity