안드로이드 스튜디오 이미지버튼 이미지 변경 - andeuloideu seutyudio imijibeoteun imiji byeongyeong

이번엔 버튼 눌렀을 때(press) 누른 상태를 표현 하기 위해 이미지를 바꿔보는 예제입니다.

다른것도 그렇지만 특히 버튼은 눌렸음을 표현해 주지 않으면 이게 눌린건지 안눌린건지 ..

그런 불상사를 막기위해 평상시 버튼 이미지 외에 눌렸을 때 이미지를 따로 준비하여

press 상태일 때 눌렸을 때의 이미지, 보통은 보통이미지 이런식으로 등록을 해주면 눌렀을 때

이미지가 바뀌며 사용자는 아, 이게 눌렸구나 알게되죠 사소한거지만 완성도를 높히는 길입니다.

제가 이제 설명할 방법은 솔직히 말씀드려서 정석인지 꼼수인지 잘모르겠습니다..

더 좋은 방법있으면 댓글로 알려주세요 !

전체 적인 흐름은 이렇습니다. 보통 메인 액티비티의 레이아웃이 R.layout.main 이라 한다면

main.xml에는

보통 이런식으로 버튼이 있지요,  현재 버튼은 icon 이미지로 되어있습니다.

보통 때와 눌렸을 때를 나누려면 다른 xml이 필요한데요 res/drawable-hdpi 폴더 안에 xml파일을

하나 만듭니다. main_btn.xml 이라고 만든 후 그 안에

이렇게 등록을 해줍니다. 보시다시피 눌림/안눌림을 android:state_pressed = "true/false" 로

구분하며, 거기에 해당하는 이미지를 넣어 주시면 됩니다.

그리고 마지막으로 아까

main.xml에 아이콘 background 를 icon 으로 해놓은 것을

background를 아까 drawable안에 만든 xml인 main_btn 으로 넣어줍니다. 저는 처음에 저 자리에

이미지 파일 아닌 xml이 들어가 되게 신기했었다는... 무튼 저렇게 코딩을 하고 실행을 한다면

잘됩니다 !

추가로 press는 손가락으로 누르고 있을 때만 바뀌지만 누르고 이 후에도 계속 누른 상태로

유지를 하는 방법은 간단합니다.

이렇게 기본(drawable) , 눌렸을 때(pressed) , 누른 후(selected)로 구분하여 이미지를 등록해

주시면 됩니다. 다만 pressed와 다른점은 selected는 xml이 외에 코드 상에서도 손을 봐야 하는데요

위 와 같이 해당 버튼이 클릭 되었을 때 setSelected(true)로 바꾸어 주셔야 합니다.

반대로 이 버튼의 활성화 이미지를 다시 기본이미지로 바꾸고 싶을 때는 그 시점에서

setSelected(false) 로 주면 되겠죠 ,

이번 시간에는 StackView로

정렬된 이미지를 버튼을 통해서

이미지 변경하는 방법을 알아보겠습니다.

이전 시간에 했던 예제를 이어서 하니

먼저 보시고 오시면 됩니다.

2022.01.17 - [안드로이드] - [안드로이드] StackView 이미지(Image) 정렬하는 방법

[안드로이드] StackView 이미지(Image) 정렬하는 방법

이번 시간에는 StackView를 통해서 이미지 정렬하는 방법에 대하여 알아보겠습니다. 목차 1. 실행 화면 2. 아이템 화면 만들기 item.xml 3. 아이템 어뎁터 만들기 ItemAdapter.java 4. 메인 화면 구성 activit

aries574.tistory.com

목차

1. 실행 화면

2. 메인 화면 구성 activitiy_main.xml

3. 메인 코드 구현 MainActivity.java

1. 실행 화면

2. 메인 화면 구성 activitiy_main.xml

버튼 2개를 추가했습니다.

다음 이미지를 보여주는 next_btn과

이전 이미지를 보여주는 back_btn

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <StackView
        android:id="@+id/stack_view"
        android:layout_width="match_parent"
        android:layout_height="400dp"
        android:layout_centerHorizontal="true" />

    <Button
        android:id="@+id/back_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_marginLeft="80dp"
        android:layout_marginTop="450dp"
        android:text="back" />

    <Button
        android:id="@+id/next_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_marginTop="450dp"
        android:layout_marginRight="80dp"
        android:text="Next" />

</RelativeLayout>

3. 메인 코드 구현 MainActivity.java

1. position 변수를 하나 만들었습니다.

현재 위치를 파악해서 처음 이미지면

뒤로 가지 않게, 마지막 이미지면 앞으로

가지 않게 하기 위해 사용됩니다.

2. showPrevious() : 이전 뷰(View)로 이동합니다.

3. showNext() : 다음 뷰(Vie)로 이동합니다.

public class MainActivity extends AppCompatActivity {

    StackView stackView;

    int position = 0; //위치

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

        stackView = findViewById(R.id.stack_view);

        ItemAdapter itemAdapter = new ItemAdapter(createImage(), MainActivity.this
                , R.layout.item);

        stackView.setAdapter(itemAdapter);

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

                if(position > 0){
                    stackView.showPrevious();
                    position--;
                }else{
                    Toast.makeText(getApplicationContext(), "처음 입니다.", Toast.LENGTH_SHORT).show();
                }
            }
        });

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

                if( (createImage().size()-1) != position ){
                    stackView.showNext();
                    position++;
                }else{
                    Toast.makeText(getApplicationContext(), "마지막 입니다.", Toast.LENGTH_SHORT).show();
                }
            }
        });
    }


    private List<Integer> createImage(){

        List<Integer> images = new ArrayList<>();
        images.add(R.drawable.dog1);
        images.add(R.drawable.dog2);
        images.add(R.drawable.dog3);
        images.add(R.drawable.dog4);

        return images;
    }
}

2022.01.14 - [안드로이드] - [안드로이드] 선택한 사진 가져와서 이미지뷰(ImageView)에 보여주는 방법

[안드로이드] 선택한 사진 가져와서 이미지뷰(ImageView)에 보여주는 방법

이번 시간에는 휴대폰에 저장되어 있는 사진을 가져와서 이미지 뷰(ImageView)에 보여주는 방법을 알아보겠습니다. 목차 1. 실행 화면 2. 메인 화면 구성 activity_main.xml 3. 메인 코드 구현 MainActivity.jav

aries574.tistory.com

2022.01.15 - [안드로이드] - [안드로이드] 나만의 큐알코드(QR CODE) 만드는 방법

[안드로이드] 나만의 큐알코드(QR CODE) 만드는 방법

이번 시간에는 나만의 큐알코드(QR CODE)를 만드는 방법을 알아보겠습니다. 목차 1. 실행 화면 2. 라이브러리(Library) 등록 3. 메인 화면 구성 activity_main.xml 4. 메인 코드 구현 MainActivity.java 1. 실행..

aries574.tistory.com

2022.01.16 - [안드로이드] - [안드로이드] 큐알코드(QR CODE) 스캔 하는 방법

[안드로이드] 큐알코드(QR CODE) 스캔 하는 방법

이번 시간에는 큐알코드(QR CODE) 스캔하는 방법에 대해 알아보겠습니다. 목차 1. 실행 화면 2. 라이브러리 등록 3. 권한 등록 4. 스캔 액티비티 추가 ScannerActivity 5. 메인 화면 구성 activity_main.xml 6...

aries574.tistory.com