스크롤뷰 / Android Studio / 안드로이드 앱만들기 공부10

포스팅 제목의 앞부분을 앞으로 어떤 내용을 담을건지 써야 할거 같아서 제목을 변경했다.

 

스크롤뷰는 추가된 뷰의 영역이 다 보이지 않을때 씀

단순하게 스크롤뷰를 추가한 후 안에 뷰를 넣으면 스크롤이 생김

 

** 이번엔 activity_main.xml에 이미지를 추가하는게 아니라 java코드에 직접 객체를 추가해서 이미지를 불러올 것

1. 스크롤뷰 안에 이미지를 넣고 이미지에 스크롤이 나타나는지 확인

2. SampleScrollView 프로젝트 생성

3. /app/res/drawable 폴더에 이미지 추가

(res/drawable 폴더 안에 이미지를 넣어도 XML 레이아웃 파일에서 사용가능)

 

- 이미지 파일 규칙

1) 소문자만 사용

2) 특수문자는 _ 기호만

3) 이미지 첫 글짜는 알파벳(숫자 X)

 

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">

    <!--
        버튼 클릭 시 XML 레이아웃 파일과 매칭되는 java파일에서
        onButton1Clicked라는 이름의 메서드를 찾아 자동으로 실행한다
    -->
    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="이미지 바꾸어 보여주기"
        android:onClick="onButton1Clicked"
    />
    <!--
        HorizontalScrollView 안에 ScrollView 를 추가하고 ImageView를 다시 추가 한 이유는
        이미지가 클 경우 화면 영역을 벗어나지 못하게 하고 수평과 수직에 모두 스크롤이 나타나도록 하려고
    -->
    <HorizontalScrollView
        android:id="@+id/horScrollView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >
        <ScrollView
            android:id="@+id/scrollView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            >
            <ImageView
                android:id="@+id/imageView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </ScrollView>
    </HorizontalScrollView>

    <!--
         ImageView 태그는 일반적으로 이미지를 화면에 보여줄 때 사용함
         XML 레이아웃에서 TextView나 Button 태그로 만들 수 있다.

         TextView Button은 자바에서 객채로 만들어서 XML 레이아웃에 객체로 추가할 수 있는데
         ex / new TextView(this)와 new Button(this)
         ImageView도 자바 소스코드에서 new ImageView(this)로 객체를 만들어서 사용 가능함

     -->



</LinearLayout>

- 주석 내용 참조

- LinearLayout 으로 변경

- Button 추가 onClick 으로 연결될 메서드명 추가

- HorizontalScrollView는 수평 스크롤이 가능하도록 한 것

- ScrollView는 기본 수직 스크롤이 가능함

- ImageView는 이미지를 보여줄 때 사용

- ImageView에 android:src (app:srcCompat) 속성을 쓰지 않고 java 파일에서 불러옴

 

 

MainActivity.java 파일 작성

public class MainActivity extends AppCompatActivity {

    ScrollView scrollView;
    ImageView imageView;
    BitmapDrawable bitmap;

	/*
        프로젝트 파일경로 res/drawable 추가된 이미지를
        getDrawable() 메서드는 Resources 객체에 정의 되어 있다
        activity에 정의된 getResources() 메서드를 이용하면 Resources  객체를 참조할 수 있다.
	*/

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

        // 레이아웃에 정의된 스크롤뷰 이미지뷰 객체 참조
        scrollView = findViewById(R.id.scrollView);
        imageView = findViewById(R.id.imageView);

        // 수평 스크롤바 사용 기능 설정 setHorizontalScrollBarEnabled
        scrollView.setHorizontalScrollBarEnabled(true);

        // Resource 이미지 참조 /res/drawable
        Resources res = getResources();
        bitmap = (BitmapDrawable) res.getDrawable(R.drawable.wheat_1);
        int bitmapWidth = bitmap.getIntrinsicWidth();
        int bitmapHeight = bitmap.getIntrinsicHeight();

        // 이미지 리소스와 이미지 크기 설정
        imageView.setImageDrawable(bitmap); // bitmap = (BitmapDrawable) res.getDrawable(R.drawable.wheat_1);
        imageView.getLayoutParams().width = bitmapWidth;
        imageView.getLayoutParams().height = bitmapHeight;
    }

    public void onButton1Clicked(View v){
        changeImage();
        // XML 에 버튼 클릭하면 onButton1Clicked 함수 실행
    }

    public void changeImage() {
        Resources res = getResources();
        bitmap = (BitmapDrawable) res.getDrawable(R.drawable.dog_1);
        int bitmapWidth = bitmap.getIntrinsicWidth();
        int bitmapHeight = bitmap.getIntrinsicHeight();

        imageView.setImageDrawable(bitmap);
        imageView.getLayoutParams().width = bitmapWidth;
        imageView.getLayoutParams().height = bitmapHeight;
    }

}

- 책의 내용에서는 버튼(onVutton1Clicked를 하면 이미지가 한번 바뀌고 바뀌지 않게 되어있음

- 자세한 내용은 주석 참고

- Resources프로젝트 파일경로 res/drawable 추가된 이미지를
  getDrawable() 메서드는 Resources 객체에 정의 되어 있다
  activity에 정의된 getResources() 메서드를 이용하면 Resources  객체를 참조할 수 있다.

- 수평 스크롤바 사용 기능 설정 setHorizontalScrollBarEnabled
  scrollView.setHorizontalScrollBarEnabled(true);

 

 

- 이전 시간에 작성한 코드에 ImageIndex 를 활용해서 누르면 계속 바뀌도록 재코딩

수정한 MainActivity.java

public class MainActivity extends AppCompatActivity {

    ScrollView scrollView;
    ImageView imageView;
    BitmapDrawable bitmap;
    int imageIndex = 0;
    /*
        프로젝트 파일경로 res/drawable 추가된 이미지를
        getDrawable() 메서드는 Resources 객체에 정의 되어 있다
        activity에 정의된 getResources() 메서드를 이용하면 Resources  객체를 참조할 수 있다.
    */
    //Resources res = getResources();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // 레이아웃에 정의된 스크롤뷰 이미지뷰 객체 참조
        scrollView = findViewById(R.id.scrollView);
        imageView = findViewById(R.id.imageView);

        // 수평 스크롤바 사용 기능 설정 setHorizontalScrollBarEnabled
        scrollView.setHorizontalScrollBarEnabled(true);

        // Resource 이미지 참조 /res/drawable
        Resources res = getResources();
        bitmap = (BitmapDrawable) res.getDrawable(R.drawable.wheat_1);
        int bitmapWidth = bitmap.getIntrinsicWidth();
        int bitmapHeight = bitmap.getIntrinsicHeight();

        // 이미지 리소스와 이미지 크기 설정
        imageView.setImageDrawable(bitmap); //
        imageView.getLayoutParams().width = bitmapWidth;
        imageView.getLayoutParams().height = bitmapHeight;
    }

    public void onButton1Clicked(View v){
        changeImage();
        // XML 에 버튼 클릭하면 onButton1Clicked 함수 실행
    }

    public void changeImage() {
        Resources res = getResources();
        if (imageIndex == 0) {

            bitmap = (BitmapDrawable) res.getDrawable(R.drawable.dog_1);
            int bitmapWidth = bitmap.getIntrinsicWidth();
            int bitmapHeight = bitmap.getIntrinsicHeight();

            imageView.setImageDrawable(bitmap);
            imageView.getLayoutParams().width = bitmapWidth;
            imageView.getLayoutParams().height = bitmapHeight;

            imageIndex = 1;
        } else if (imageIndex == 1) {
            bitmap = (BitmapDrawable) res.getDrawable(R.drawable.wheat_1);
            int bitmapWidth = bitmap.getIntrinsicWidth();
            int bitmapHeight = bitmap.getIntrinsicHeight();

            // 이미지 리소스와 이미지 크기 설정
            imageView.setImageDrawable(bitmap); // bitmap = (BitmapDrawable) res.getDrawable(R.drawable.wheat_1);
            imageView.getLayoutParams().width = bitmapWidth;
            imageView.getLayoutParams().height = bitmapHeight;

            imageIndex = 0;
        }

    }


}