Android(6) - 이미지 Visible / Invisible

이번에는 Main화면에서 버튼을 클릭했을 때에 이미지가 다른 이미지로 전환되거나, 나타났다가, 사라졌다가 하는 기능을 구현해보겠습니다.

(* 저의 테스트에서는 대표적으로 해 / 구름 의 이미지를 추가로 첨부하셔야 합니다.)

[MainActivity.class]

public class MainActivity extends Activity{

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        Button sunbtn = (Button)findViewById(R.id.btnSunshine);

        Button cloudbtn = (Button)findViewById(R.id.btnCloudy);

        Button invibtn = (Button)findViewById(R.id.invi);

        View.OnClickListener listener = new View.OnClickListener() {

            ImageView imgsun = (ImageView)findViewById(R.id.imageSun);

            ImageView imgcloud = (ImageView)findViewById(R.id.imageCloud);

            @Override

            public void onClick(View v) {

                if(v.getId() == R.id.btnSunshine) {

 //btnSunshine을 클릭하게 되면, 해당 ImageView의 이미지는 VISIBLE로 set함으로써 보이게 되고, cloud의 이미지는 INVISIBLE로 설정되어 안보이게 됩니다.      

                    imgsun.setVisibility(View.VISIBLE);

                    imgcloud.setVisibility(View.INVISIBLE);

                } else if(v.getId() == R.id.btnCloudy) {

//btnCloudy 버튼을 눌렀을 때에는, 위와 반대가 됩니다. sun이미지는 안보이고, cloud이미지만 보이게 됩니다.

                    imgcloud.setVisibility(View.VISIBLE);

                    imgsun.setVisibility(View.INVISIBLE);

                } else if(v.getId() == R.id.invi) {

//만약 둘다 안보이게 하려면, 둘 다 INVISIBLE로 설정해주면 됩니다.

                    imgcloud.setVisibility(View.INVISIBLE);

                    imgsun.setVisibility(View.INVISIBLE);

                }

            }

        };

        sunbtn.setOnClickListener(listener);           

        cloudbtn.setOnClickListener(listener);

        invibtn.setOnClickListener(listener);

    }

}

///////////////////////////////////////////////////////////////////////////////////////////

[activity_main.xml]

    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:layout_weight="1"

        android:orientation="horizontal">

<!-- 아래의 id가 btnSunshine, btnCloudy, invi 인 사용자로부터 클릭할 수 있게 하는 총 세 개의 버튼을 만들어 줍니다. -->

    <Button

        android:id="@+id/btnSunshine"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="Sun"/>

    <Button

        android:id="@+id/btnCloudy"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="Cloud"/>

<!-- 아래의 버튼은 두 이미지 다 안보이도록 하는 버튼입니다. -->

        <Button

            android:id="@+id/invi"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="INVISIBLE"/>

    </LinearLayout>

    <FrameLayout

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:layout_weight="3">

<!-- ImageView를 이용하여 이미지 두 개를 전환하거나 보이거나, 안보이도록 해보는 테스트입니다. drawable에 sunshine, cloudy라는 이름으로 이미지파일을 두 개 아무거나 받으셔서 넣어주면 됩니다. -->

        <ImageView

            android:id="@+id/imageSun"

            android:layout_width="match_parent"

            android:layout_height="match_parent"

            android:src="@drawable/sunshine"/>

           <!-- android:visibility="invisible"-->

        <ImageView

            android:id="@+id/imageCloud"

            android:layout_width="match_parent"

            android:layout_height="match_parent"

            android:src="@drawable/cloudy"

            android:visibility="invisible"/>

    </FrameLayout>

(** 바로 위의 ImageView에서 가장 밑에 줄의 android:visibility="invisible" 을 설정하면, 기본적으로 이미지가 안보이는 상태가 됩니다. 보기와 같이 위의 imageSun 이라는 id 를 가지고 있는 image가 invisible이 주석처리 되어있으므로, 처음 애플리케이션을 실행하면 해당 ImageView의 이미지만 보이고, imageCloud는 숨겨진 상태가 됩니다.)