[Do it!안드로이드앱 프로그래밍] 도전미션_03

두 개의 이미지뷰를 한 화면에 보여주고

하나의 이미지를 두 개의 이미지뷰에서

번갈아 보여주도록 만들어 보세요

① 화면을 위와 아래 두 영역으로 나누고 그 영역에 각각 이미지뷰를 배치합니다

② 각각의 이미지뷰는 스크롤이 생길 수 있도록 합니다

③ 상단의 이미지뷰에 하나의 이미지를 보이도록 합니다

④ 두 개의 이미지뷰 사이에 버튼을 하나 만들고 그 버튼을 누르면 상단의 이미지가 하단으로 옮겨져

     보이고 다시 누르면 상단으로 다시 옮겨지는 기능을 추가합니다.

 

※참고할 점

이미지를 화면에 보여주기 위해서는 이미지뷰를 사용하며, 태그는 <ImageView>를 사용합니다.

스크롤을 만들고 싶다면 뷰를 <ScrollView>로 감싸줍니다.

 

 

<activity_main.xml>

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context=".MainActivity" >

    <HorizontalScrollView
        android:id="@+id/scrollView01"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/buttonLayout"
        android:layout_alignParentTop="true">

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

            <ImageView
                android:id="@+id/imageView01"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:scaleType="matrix" />
        </ScrollView>
    </HorizontalScrollView>

    <LinearLayout
        android:id="@+id/buttonLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:orientation="vertical">

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

            <Button
                android:id="@+id/button01"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:text="▲"
                android:textSize="18sp" />

            <Button
                android:id="@+id/button02"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:text="▼"
                android:textSize="18sp" />
        </LinearLayout>
    </LinearLayout>

    <HorizontalScrollView
        android:id="@+id/scrollView02"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/buttonLayout"
        android:layout_alignParentBottom="true">

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

            <ImageView
                android:id="@+id/imageView02"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:scaleType="matrix" />

        </ScrollView>

    </HorizontalScrollView>
</RelativeLayout>

 

<<MainActivity.java>

package com.example.mission_03;

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 {

    ImageView imageView01;
    ImageView imageView02;

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

        imageView01 = findViewById(R.id.imageView01);
        imageView02 = findViewById(R.id.imageView02);

        Button button01 = findViewById(R.id.button01);
        button01.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                moveImageUp();
            }
        });

        Button button02 = findViewById(R.id.button02);
        button02.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                moveImageDown();
            }
        });

        moveImageUp();
    }

    private void moveImageDown() {
        imageView01.setImageResource(0);
        imageView02.setImageResource(R.drawable.maldives2);

        imageView01.invalidate();
        imageView02.invalidate();
    }

    private void moveImageUp() {
        imageView01.setImageResource(R.drawable.maldives2);
        imageView02.setImageResource(0);

        imageView01.invalidate();
        imageView02.invalidate();

    }
}

---

 

D1

 

<실행화면>

---

 

D2