(안드로이드 미션) 이미지 이동하기

이미지 이동하기

안녕하세요 초이 입니다.

이론만으로는 실전에 적용하기 힘든 점이있으니 문제를 풀어보는 시간을 가져 보려고합니다

오늘은 이미지뷰(ImageView)를 활용한 이미지 이동하는 문제를 풀어 보려고 합니다.

문제의 해답은 가장 하단에 적어 놓았으니 참고 하시길 바랍니다.

문제 내용

1. ImageView를 화면 위, 아래에 한개 씩 총 두개를 배치합니다.

2. 각각의 이미지는 수평 스크롤이 되도록 합니다.

3. 최초 기동 시 상단의 ImageView에만 이미지가 보이도록 합니다.

4. 가운데 버튼을 누르면 상단의 ImageView 감추고, 하단의 ImageView로 표시되도록 합니다.

5. 다시 버튼을 누르면 하단의 ImageView를 감추고, 상단의 ImageView를 표시합니다.

 (layout 구성 예시 그림)

문제의 정답

[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"
    tools:context=".MainActivity">
    
    <HorizontalScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical" >

            <ImageView
                android:id="@+id/topImageView"
                android:layout_width="500dp"
                android:layout_height="match_parent"
                app:srcCompat="?attr/actionModeCutDrawable" />
        </LinearLayout>
    </HorizontalScrollView>

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

        <Button
            android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="button" />

    </LinearLayout>

    <HorizontalScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical" >

            <ImageView
                android:id="@+id/bottomImageView"
                android:layout_width="500dp"
                android:layout_height="match_parent" />
        </LinearLayout>
    </HorizontalScrollView>
</LinearLayout>

[MainActivity.java] 작성 소스

public class MainActivity extends AppCompatActivity {
    ImageView topImage; //상단 이미지 뷰
    ImageView bottomImage; //하단 이미지 뷰
    Button button; //이미지를 바꿔서 표시할 버튼

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        /**
         * View들의 findViewById
         * */
        topImage = (ImageView) findViewById(R.id.topImageView);
        bottomImage = (ImageView) findViewById(R.id.bottomImageView);
        button= (Button) findViewById(R.id.button);

        /**
         * button 클릭 리스너
         * */
        button.setOnClickListener(new View.OnClickListener(){
            @Override
            public void onClick(View v) {
               if(topImage.getVisibility() == View.VISIBLE){   //상단 이미지뷰의 보여주기 속성이 만약 VISIBLE이라면 실행해라
                   Drawable dra = topImage.getDrawable();  //상단 이미지 뷰에서 이미지 가져오기
                   topImage.setImageDrawable(null);        //상단 이미지 뷰에 이미지 없애기
                   topImage.setVisibility(View.INVISIBLE); //상단 이미지 뷰 감추기
                   bottomImage.setVisibility(View.VISIBLE);//하단 이미지 뷰 노출하기
                   bottomImage.setImageDrawable(dra);      //하단 이미지 뷰에 가져온 이미지 셋팅하기
               }else if(bottomImage.getVisibility() == View.VISIBLE){ //하단 이미지뷰의 보여주기 속성이 만약 VISIBLE이라면 실행해라
                   Drawable dra = bottomImage.getDrawable();
                   bottomImage.setImageDrawable(null);
                   bottomImage.setVisibility(View.INVISIBLE);
                   topImage.setVisibility(View.VISIBLE);
                   topImage.setImageDrawable(dra);
               }else{
                   Log.d("test","두 이미지 모두 표시되고 있지 않습니다.");
               }
            }
        });
    }
}