[Android] STUDY 7 - My05 ~ My06 ScrollLayout

 

 

 

1. Scroll Layout

1) Scroll View : 위 아래로 스크롤 할 때
2) Horizontal Scroll View : 좌우로 스크롤할 때

※ Scroll View는 어떤 요소든 간에 하나의 요소밖에 감쌀 수 없다.
그러므로 여러 요소를 감싸려면 Scroll View밑에 linear layout으로 여러 요소를 감싼 다음
Scroll View로 감싸야 한다.

 

---

1) Scroll View (위 아래로 스크롤)

 

● activity_main.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>

 

● MainActivity.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 button1;
    ImageView imageView;

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

        button1 = findViewById(R.id.button1);
        imageView = findViewById(R.id.imageView);

        button1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //imageView.setImageResource() : imageView의 src의 값을 바꾸는 함수
                imageView.setImageResource(R.drawable.image02);

            }//onClick()
        });//button1.setOnClickListener
    }//onCreate()
}//class

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

 

 

 

---

2) Horizontal Scroll View (좌우로 스크롤)

 

● activity_main.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="horizontal">

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

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

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

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

        </LinearLayout>
    </HorizontalScrollView>
</LinearLayout>

 

---

 

2. 레이아웃 복습(연습문제)

 

● activity_main.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="30">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="10"
        android:orientation="horizontal"
        android:weightSum="3">

        <Button
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@mipmap/ic_launcher_round">
        </Button>
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="vertical"
            android:weightSum="4">
            <Button
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1">
            </Button>
            <Button
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1">
            </Button>
            <Button
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1">
            </Button>
            <Button
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1">
            </Button>
        </LinearLayout>
        <Button
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1">
        </Button>
    </LinearLayout>
    <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="10"
        android:orientation="vertical">

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

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

            <ImageView
                android:id="@+id/imageView1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:src="@drawable/dream01"
                android:visibility="visible" />

            <ImageView
                android:id="@+id/imageView2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:src="@drawable/dream02"
                android:visibility="gone"/>

            <ImageView
                android:id="@+id/imageView3"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:src="@drawable/dream03"
                android:scaleType="centerCrop"
                android:visibility="gone"/>
        </FrameLayout>

    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="10"
        android:orientation="vertical">

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

        <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/imageView"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@drawable/image01"
                    android:scaleType="fitXY"/>

            </ScrollView>
        </HorizontalScrollView>
    </LinearLayout>
</LinearLayout>

 

● MainActivity.java

package com.example.my07_alllayout;

import androidx.appcompat.app.AppCompatActivity;

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

public class MainActivity extends AppCompatActivity {
    Button button1, button2;
    ImageView imageView, imageView1, imageView2, imageView3;
    int index = 2;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        button1 = findViewById(R.id.button1);
        button2 = findViewById(R.id.button2);
        imageView1 = findViewById(R.id.imageView1);
        imageView2 = findViewById(R.id.imageView2);
        imageView3 = findViewById(R.id.imageView3);
        imageView = findViewById(R.id.imageView);

        imageView1.setVisibility(View.VISIBLE);
        imageView2.setVisibility(View.GONE);
        imageView3.setVisibility(View.GONE);

        button1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if(index == 1) {
                    imageView1.setVisibility(View.VISIBLE);
                    imageView2.setVisibility(View.GONE);
                    imageView3.setVisibility(View.GONE);
                    index = 2;
                } else if(index == 2) {
                    imageView1.setVisibility(View.GONE);
                    imageView2.setVisibility(View.VISIBLE);
                    imageView3.setVisibility(View.GONE);
                    index = 3;
                } else if(index == 3) {
                    imageView1.setVisibility(View.GONE);
                    imageView2.setVisibility(View.GONE);
                    imageView3.setVisibility(View.VISIBLE);
                    index = 1;
                }
            }
        });//button1.setOnClickListener

        button2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                imageView.setImageResource(R.drawable.image02);
            }
        });//button2.setOnClickListener
    }
}