[도전과제] 도전과제 1. 한 화면에 두 개의 이미지 뷰 배치하기

도전과제 1

Do it! 안드로이드 프로그래밍(정재곤) 참조

미션: 두 개의 이미지 뷰 사이에 버튼을 두 개 만들고 오른쪽 버튼을 누르면 상단의 이미지가 하단으로 옮겨져 보이고 왼쪽 버튼을 누르면 상단으로 다시 옮겨지는 기능의 애플리케이션. 각각의 이미지는 스크롤 기능이 있어야함.

아래의 그림은 아직 이미지를 띄우지 않은 실행화면의 예제이다.

위와 같은 화면을 만들기 위해 필요한 일들에 대해 천천히 알아보도록 하겠다.
전체 소스코드는 Github 참조 (안드로이드 스튜디오 2.2)

한 화면에 두 개의 이미지 뷰 배치하기

한 화면에 두개의 이미지 뷰를 배치하는 일은 매우 쉬운 일이다. 지금까지 공부해왔던 방식대로 추가하면 된다.
기본 root 레이아웃은 원하는 레이아웃을 선택한 뒤, 두 개의 ImageView를 XML코드에 추가하면 된다.
다만 내가 레이아웃을 짤 때는 위의 예시 그림과 같이 깔끔한것을 원해서 LinearLayout을 선택하였다.

레이아웃 선택

안드로이드 스튜디오(2.0이상)을 통해서 프로젝트를 생성한 뒤 기본 빈 화면을 선택할 경우, RelativeLayout으로 설정되어있다.
이러한 상황에서 ImageView를 두개를 넣게 되면, ImageView의 크기 조절을 강제로 하지 않는 이상 RelativeLayou의 특성으로 인해 깔끔하게 반으로 나뉘어 지지 않는 문제가 있다.
중간에 버튼 2개까지 넣어서 3개의 수직구조로 쪼개야 하는데 이를 간단하게 하기 위해서 LinearLayout을 선택하였다.

LinearLayout을 선택한 가장 큰 이유는 layout_weight 속성 때문이다. 이 속성을 이용할 경우 매우 편리하게 뷰들의 구조를 배치할 수 있다.
android:layout_weight 속성은 이름 그대로 레이아웃 내의 각 뷰 혹은 레이아웃에 무게를 주는 것인데, 레이아웃에 뷰들을 배치 후 빈공간이 남을경우 어떤 뷰에 빈공간을 얼마나 할당할것인지를 정한다.
간단히 예를 들어 버튼1, 버튼2, 버튼3 3개가 있고 각각에 4, 1, 4의 무게를 부여할 경우 해당 버튼의 크기 자체가 4:1:4의 비율로 나뉘게 된다.
또한 중간의 Button을 2개로 두기 위하여 RelativeLayout을 혼합하였다.

<LinearLayout 
    android:layout_weight=9>
    <!-- layout_height 매우 중요 -->
    <ImageView
        android:layout_height="0dp" 
        android:layout_weight="4"/>
    <RelativeLayout
        android:layout_weight="1">
        <Button />
        <Button />
    </RelativeLayout>
    <ImageView
        android:layout_height="0dp" 
        android:layout_weight="4"/>
</LinearLayout>

이미지뷰에 스크롤 추가하기

이미지의 크기가 화면의 크기보다 큰 경우에 이미지를 자르거나 사이즈 조정을 하고싶지 않다면 스크롤을 을 추가해야 한다.
수직 스크롤은 ScrollView를 이용하고 수평 스크롤은 HorizontalScrollView를 이용하면 된다. 이전 블로깅에서 소개했듯이 원하는 뷰를 각각의 스크롤뷰로 감싸면 된다.

<!-- 기존 코드 -->
    <ScrollView>
        <HorizontalScrollView>
            <ImageView />
        </HorizontalScrollView>
    </ScrollView>
<!-- 기존 코드 -->

이미지를 띄우고 버튼을 통해 이동시키기

이제 남은 일은 이미지 뷰에 실제로 이미를 보이도록 한 뒤 버튼들을 통해서 이미지를 이동시키는 일이다.

이미지 띄우기

이미지를 띄우는 방법은 2가지로 분류할 수 있다. XML코드를 통해 기본 이미지를 띄우거나, JAVA코드를 통해 원할 때 이미지를 띄우거나.
나는 보통 java를 선호하므로 java코드를 통해 이미지를 보여주도록 하였다. 미션의 3번이 상단의 이미지뷰에 하나의 이미지가 보이도록 함 이므로 onCreate에서 바로 실행하였다.

void onCreate(...){
    ImageView iv = (ImageView) findViewById(R.id.imageview1);
    iv.setImageResource(R.drawable.pic1);
}

버튼을 통해 이동시키기

실제로 특정한 이미지뷰에 있는 이미지를 다른 이미지뷰로 이동시키는 메소드가 존재하는지는 검색하지 않았다.
내가 택한 방법은 UP 버튼이 클릭되면 위의 이미지뷰에 이미지를 띄우고, 아래의 이미지뷰의 이미지를 삭제하도록 하는 것이다. Down 버튼에도 마찬가지로 적용 하였다.
이미지를 이동 시킬 때에는 곧 바로 R.drawable.pic1을 사용할 수 있지만, 최대한 하드코딩을 피하고 싶어서 setImageResource를 사용하지 않았다. 또한 미션의 내용인 “이미지를 옮긴다” 에 걸맞도록 코드를 짜고 싶었다.

// iv1은 상단 이미지뷰, iv2는 하단 이미지뷰를 의미한다. 
// buttonUp과 buttonDown의 setOnClickListener를 통해 틍록한다. 
private class myOnClick implements View.OnClickListener {
    public void onClick(View v) {
        if (v.getId() == R.id.buttonUp) { // UP 버튼인 경우 
            if (iv2.getDrawable() != null) // 처음 앱 실행시 하단 이미지뷰에는 아무것도 없다. 
                iv1.setImageDrawable(iv2.getDrawable());
            iv2.setImageDrawable(null);
        } else {
            if (iv1.getDrawable() != null) // 무결성 
                iv2.setImageDrawable(iv1.getDrawable()); 
            iv1.setImageDrawable(null);
        }
    }
}

최종 결과

이번 도전과제에 필요한 내용은 이미지뷰, 버튼위젯, 스크롤뷰, 리니어레이아웃을 참조하기 바란다.
전체 소스코드는 Github 참조.
실제 수행화면은 아래의 이미지와 같다.