Android :: 안드로이드 버튼을 이용해서 이미지 전환하기

버튼과 Frame Layout 만들기

버튼을 만들어 버튼을 눌렀을 때, 프레임 아웃에 있는 이미지가 전환되는 것처럼 보이게 만들어봅니다.

 

 

버튼을 생성합니다. 버튼의 Text 내용은 원하시는 내용으로 하시면 됩니다.

그리고 onClick 속서에 "onButton1Clicked"라고 입력합니다. 이 이름은 원하시는 이름으로 설정하시면 됩니다.

추후에 MainActivity.java 에서 코드를 입력할 때 이용합니다.

 

버튼을 생성하고 Frame Layout을 생성합니다.

알아 둘 것.

프레임 레이아웃은 뷰 또는 뷰 그룹 하나만 들어갈 수 있습니다.

 

사용할 사진 2개 추가

사용할 사진 2개를 복사한 뒤, "drawable" 폴더에 붙여넣기를 합니다.

 

 

 

이미지 뷰(ImageView) 넣기

프레임 레이아웃에 이미지 뷰를 넣습니다.

이미지 뷰를 프레임 아웃 밑에 넣으면 위와 같은 창이 나옵니다.

아까 사용할 사진을 넣었던 폴더에서 사진을 가져옵니다.

 

두번째, 이미지 뷰를 넣습니다. 버튼을 눌렀을때, 위 2개의 이미지가 계속해서 전환되면서 실행 될 것입니다.

 

메인 코드는 위와 같습니다.

 

뷰의 이미지는 위와 같습니다.

 

결과확인

 

 

 

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="이미지 바꾸기"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.054"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.034" />

    <FrameLayout
        android:layout_width="368dp"
        android:layout_height="431dp"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button2">

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:visibility="visible"
            app:srcCompat="@drawable/image2" />

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:srcCompat="@drawable/iamge1" />
    </FrameLayout>
</android.support.constraint.ConstraintLayout>​

 

MainActivity.java

package com.tistory.hongku.myframelayout;

import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {

    ImageView imageView;
    ImageView imageView2;

    int index = 0;

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

        imageView = (ImageView) findViewById(R.id.imageView);
        imageView2 = (ImageView) findViewById(R.id.imageView2);
    }

    public void onButton1Clicked(View view){
        index += 1;
        if (index > 1){
            index = 0;
        }

        if(index == 0){
            imageView.setVisibility(View.VISIBLE);
            imageView2.setVisibility(View.INVISIBLE);
        }else{
            imageView.setVisibility(View.INVISIBLE);
            imageView2.setVisibility(View.VISIBLE);
        }// end if
    }

}​

 

관련 글

2018/06/12 - [Android] - Android :: 안드로이드 버튼을 눌러 토스트 메세지 띄우기

2018/06/12 - [Android] - Android :: 안드로이드 버튼을 눌러 웹 페이지 띄우기

2018/06/12 - [Android] - Android :: 안드로이드 다른 뷰 화면 띄어주기