안드로이드 이미지뷰 위치 지정 - andeuloideu imijibyu wichi jijeong

안드로이드 이미지뷰(ImageView)를 사용하면 화면에 이미지 파일을 출력할 수 있습니다. 안드로이드 앱에서는 TextView와 더불어 그 활용도가 높은 뷰(View)입니다. 

1. Drawable 리소스에 이미지 등록하기

ImageView에 이미지 파일을 출력하기 위해서는 먼저 안드로이드 프로젝트 안에 Drawable 리소스에 이미지 리소스가 등록되어 있어야 합니다. Drawable 리소스 등록 방법은 여러 가지가 있지만, 이미지 파일을 복사(Ctl + C) 후에 app\src\main\res\drawable 경로에 복사해주는 방법이 가장 간단합니다.

▼ 파일을 복사하기를 하면 이름을 지정하라고 합니다. 이때 지정하는 이름은 확장자를 제외한 이름이 리소스 ID로 지정되며 특수문자나 대문자 사용을 피해서 적절한 Image 이름을 지정해줍니다. 

2. ImageView로 이미지 보여주기

위에서 이미지 파일 리소스 추가가 끝났다면 ImageView를 통해 이미지를 출력해보겠습니다. 

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/myimage" />

▼ ImageView의 src 속성값을 drawavble 리소스 ID 값을 지정해줍니다. 

▼ 원본 이미지는 1920x1080 으로 ImageView가 화면상에서 차지하는 영역보다 훨씬 큽니다. 다만, 원본이미지가 ImageView 크기에 맞게끔 너비와 높이가 적절한 비율로 축소되기 때문에 이미지가 깨지지 않고 화면에 출력됩니다. 

3. ImageView 속성 - baseLine 속성

baseLine 속성은 화면상에서 ImageView의 정렬 기준선을 지정하는 속성입니다. 보통 TextView와 이쁘게 정렬하기 위해 사용됩니다. 

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Hello World" />

        <ImageView
            ...
            android:baseline="100dp"
            ... />

▼ LinearLayout 밑에 TextView와 ImageView를 나란히 배치하고 ImageView의 baseline 속성값을 100dp로 지정합니다. ImageView의 상단 기준으로 100dp 떨어진 위치에 정렬 기준선이 생성되고 TextView의 Text 하단이 정렬 기준선에 맞춰서 배치 되는것을 확인할 수 있습니다. 만약 Text를 ImageView 하단에 딱 맞춰서 정렬하고 싶은 경우 ImageView의 속성 중 baseLineAlignBottom 속성을 true로 지정하시면 됩니다.

4. 자바 소스에서 ImageView의 이미지 변경하기

예제 소스를 위해 변경되는 이미지 파일을 drawable 리소스에 등록합니다.

 <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        tools:layout_editor_absoluteX="8dp"
        tools:layout_editor_absoluteY="8dp">

        <Button
            android:id="@+id/btn1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:onClick="btn_Click"
            android:text="변경" />

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="253dp"
            android:layout_height="124dp"
            android:adjustViewBounds="true"
            android:src="@drawable/myimage"
            tools:layout_editor_absoluteX="8dp"
            tools:layout_editor_absoluteY="8dp" />
    </LinearLayout>

▼ 최상단에 수직 LinearLayout을 배치하고 그 밑에 Button과 ImageView를 배치합니다. Button을 클릭하였을 때 ImageView의 이미지를 변경하기 위해 onClick 속성값을 지정합니다.

public class MainActivity extends AppCompatActivity{
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    public void btn_Click(View view)
    {
        ImageView imageView = (ImageView)findViewById(R.id.imageView);

        imageView.setImageResource(R.drawable.hello);
    }
}

▼ Button이 클릭되었을 때 Layout 리소스상의 ImageView 참조 객체를 먼저 받아옵니다. 그런다음 변경하고자 하는 이미지의 리소스 ID를 사용하여 setImageResource() Method를 통해 이미지를 변경합니다.

▼ Button을 클릭하면 이미지가 변경되는 것을 확인할 수 있습니다.

[안드로이드 스튜디오] #2-3 이미지뷰(ImageView) 사용법

2020. 4. 6. 4:21

첨부파일 (3)

본 포스팅은 국비지원으로 모바일앱을 수강하며

배웠던 수업 내용을 기록한 포스팅입니다.

언어를 배우고 있는 학생이라 잘못된 부분이 있을 수 있으니 참고바랍니다.

오늘은 어플에 이미지를 띄워주는 이미지(ImageView)에 대해서 배워보도록 하겠습니다!

오늘 만들 어플은 이거예요.

사용자로부터 키와 몸무게를 입력받고, 버튼을 누르면

비만도를 검사해서 그에 맞는 이미지를 띄워주는 어플입니다!

먼저 이미지를 사용하려면 파일을 넣어줘야겠죠?

app - res - drawable 경로에 사진파일을 넣어줍시다.

저 폴더가 어플에서 사용할 이미지파일을 모아두는 곳이에요.

(제가 사용한 사진파일은 첨부파일에 올려둘게요!)

TextView, EditText, Button은 이전에 알려드린 내용이므로 생략하고

저랑 비슷하게 만들어주세요!

그리고 ImageView도 넣어주실건데요, 마찬가지로 드래그 앤 드롭을 해볼까요?

그러면 이렇게 창이 하나 뜨게되는데요.

현재 Drawable 탭이 선택되어있죠?

여기서 저희가 넣어주었던 사진을 하나 찾아서 OK눌러줍시다.

Mip Map은 아이콘 이미지를 보관해놓는 곳이에요.

저곳에 파일을 넣어서 사용해도 상관은 없지만

용도에따라 구별하는게 좋겠죠?

이미지의 크기를 변경할때는 위 사진처럼 구석에 있는 파란네모를 끌어 당겨서 조절하거나

xml 코드를 직접 변경해주셔도 됩니다.

<MainActivity.kt>

그리고 어플을 실행해보시면 알겠지만 값을 아직 입력하기도전에 이미지가 떠있을거예요.

이미지를 화면에서 안보이게 해주기 위해

visibility를 사용하고 값을 View.INVISIBLE로 넣어줬습니다.

img는 레이아웃에서 제가 지정한 ImageView의 ID에요.

여러분은 여러분이 정하신 ID가 있겠죠? (xml코드 가시면 확인가능)

13:

그리고 저번시간에 배운 버튼 클릭이벤트를 처리해줄거예요.

BIMCheck 메소드 입니다.

3:

editText에 입력한 값을 가져올때 예전에는 getText를 썼었는데 코틀린은 text를 사용하네요.

그리고 그 값을 String형으로 바꾸었다가 Double형으로 바꿔줬어요.

editText형을 바로 Double형으로 바꿀수 있을줄 알았는데 안되더라구요 ㅠㅠ

10:

화면에서 감췄던 이미지를 이제 다시 보여주게 할차례입니다.

안보이게 할때는 View.INVISIBLE을 넣어줬었죠?

보이게 할때는 View.VISIBLE을 넣어주면 됩니다.

13:

결과에 따라 텍스트를 변경해줄겁니다.

저번에 배웠던 setText를 이용해주세요

14:

결과에 따라 이미지도 변경해줄건데요

setImageResource를 이용하면 되고, 괄호안에는 원하는 이미지의 위치를 넣어주면 됩니다.

R.drawable.파일이름 이렇게요~

신서유기 인물퀴즈 아시죠??

그거랑 비슷한 어플을 만들어보는게 오늘 숙제입니다! 동영상처럼 만들어보세요~!

인물퀴즈 어플 만들기 게시물 링크