[ 📄 문 제 ]

두 개의 이미지뷰를 한 화면에 보여주고 하나의 이미지를 두 개의 이미지뷰에서 번갈아 보여주도록 만들어 보세요.

• 초급과정
  -이미지 보여주기 화면 구성
• 프로젝트 소스
  -DoitMission-03

[ 📚 설 명 ]

1. 화면을 위와 아래 두 영역으로 나누고 그 영역에 각각 이미지뷰를 배치합니다.
2. 각각의 이미지뷰는 스크롤이 생길 수 있도록 합니다.
3. 상단의 이미지뷰에 하나의 이미지를 보이도록 합니다.
4. 두 개의 이미지뷰 사이에 버튼을 하나 만들고 그 버튼을 누르면 상단의 이미지가 하단으로 옮겨져 보이고 다시 누르면 상단으로 다시 옮겨지는 기능을 추가합니다.

[ 💻 코 드 ]

[ activity_main.xml ]

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


    <LinearLayout
        android:layout_width="300dp"
        android:layout_height="300dp">

        <ScrollView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            tools:ignore="SpeakableTextPresentCheck">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="30dp"
                android:orientation="vertical">

                <ImageView
                    android:id="@+id/imgUp"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/img01" />
            </LinearLayout>
        </ScrollView>
    </LinearLayout>

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

        <Button
            android:id="@+id/btnChange1"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_margin="10dp"
            android:text="UP"/>
        <Button
            android:id="@+id/btnChange2"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_margin="10dp"
            android:text="DOWN"/>

    </LinearLayout>

    <LinearLayout
        android:layout_width="300dp"
        android:layout_height="300dp">

        <ScrollView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            tools:ignore="SpeakableTextPresentCheck">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="30dp"
                android:orientation="vertical">

                <ImageView
                    android:id="@+id/imgDown"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content" />
            </LinearLayout>
        </ScrollView>
    </LinearLayout>
</LinearLayout>

[ MainActivity.java ]

// MainActivity.java

package com.study.doit;

import androidx.appcompat.app.AppCompatActivity;

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

public class MainActivity extends AppCompatActivity {

    Button btn1, btn2;
    ImageView imgUp, imgDown;

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

        btn1 = findViewById(R.id.btnChange1);
        btn2 = findViewById(R.id.btnChange2);
        imgUp = findViewById(R.id.imgUp);
        imgDown = findViewById(R.id.imgDown);

        btn1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                imgUp.setImageResource(R.drawable.img01);
                imgDown.setImageResource(0);
                Toast.makeText(getApplicationContext(), "사진이 위로 이동했습니다.", Toast.LENGTH_SHORT).show();
            }
        });

        btn2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                imgDown.setImageResource(R.drawable.img01);
                imgUp.setImageResource(0);
                Toast.makeText(getApplicationContext(), "사진이 아래로 이동했습니다.", Toast.LENGTH_SHORT).show();
            }
        });

    }
}

[ 🖋 디자인 ]