[Android/Java] Do it 도전 03 문제

도전 03 문제. 두 개의 이미지뷰에 이미지 번갈아 보여주기

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

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

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

4. 두 개의 이미지뷰 사이에 버튼을 하나 만들고 그 버튼을 누르면 상단의 이미지가 하단으로 옮겨져 보이고 다시 누르면 상단으로 다시 옮겨지는 기능을 추가합니다.

 

알고가기 !

findViewByID()
xml 에 정의된 뷰와 java 코드 연결하여 상호작용할 수 있도록 하는 메서드이다.

setVisibility(View.INVISIBLE)
뷰의 가시성을 설정하는 메서드
뷰를 화면에서 보이지 않도록 하지만, 해당 뷰가 차지하는 공간은 유지된다.

setVisibility(View.VISIBLE)
뷰의 가시성을 설정하는 메서드
뷰를 화면에서 보이도록 설정한다.

 

---

03. 프로젝트

트리 사진은 제가 작년에 찍은 사진입니다 ㅎㅎ

xml file >

<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"
    tools:context=".MainActivity">

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

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:layout_marginTop="10sp"
            app:srcCompat="@drawable/tree"
            android:visibility="invisible" />

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

            <Button
                android:id="@+id/btn_up"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="▲" />

            <Button
                android:id="@+id/btn_down"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="▼" />
        </LinearLayout>

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:layout_gravity="center"
            app:srcCompat="@drawable/tree"
            android:visibility="invisible" />
    </LinearLayout>

</LinearLayout>​

java file >

package org.techtown.doit_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 imageView;
    ImageView imageView2;
    Button btn_up;
    Button btn_down;

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

        // 이미지뷰 2개와 버튼 2개 찾기
        imageView = findViewById(R.id.imageView);
        imageView2 = findViewById(R.id.imageView2);

        btn_up = findViewById(R.id.btn_up);
        btn_down = findViewById(R.id.btn_down);

        // 처음 이미지를 숨기게 하는 작업
        imageView.setVisibility(View.INVISIBLE);
        imageView2.setVisibility(View.INVISIBLE);

        // 좌측 버튼 클릭 시 상단 이미지 띄우기 + 하단 이미지 숨기기
        btn_up.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                imageView.setVisibility(View.VISIBLE);
                imageView2.setVisibility(View.INVISIBLE);

            }
        });

        // 우측 버튼 클릭 시 상단 이미지 숨기기 + 하단 이미지 띄우기
        btn_down.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                imageView.setVisibility(View.INVISIBLE);
                imageView2.setVisibility(View.VISIBLE);
            }
        });
    }
}​