7. Layout ImageView (레이아웃 이미지뷰) - Android Studio(안드로이드)

ImageView 

이번에는 이미지 뷰를 추가해 보도록 합시다.

palette 에서 common 에 있는 ImageView 를 클릭하여 아래 ComponentTree 로 드래그&드롭 하면 됩니다.

이때 Drop 하는 위치는 이전에 만든 name_text 밑으로 합니다. 현재 Layout 이 LinearLayout이고 속성이 Vertical 이라 순서에 따라 세로 정렬이 됩니다.

ImageView 추가

ImageView 를 추가하면 바로 Resource 창이 뜹니다.

우선은 저는 별을 하나 추가해 보도록 하겠습니다. 

Drawable 에서 android 를 확장 하면 btn_star_big_on 이라는 그림이 있습니다.

Resource Edit

OK 를 눌러서 추가 합니다.

PreView 화면에 별이 추가 되었습니다.

LinearLayout의 속성(android:orientation="vertical") 에 영향을 받아 모든뷰는 세로 정렬이 되었습니다.

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:srcCompat="@android:drawable/btn_star_big_on" />

Text edit 창에도 역시 ImageView 가 추가되어 있습니다.

 

id 가 imageView 로 대충 지어져 있습니다.

이번에는 그냥 수정 하는것이 아니라 참조된 모든 곳에서 자동 수정이 이뤄지는 Refactor 기능을 이용해 보도록 하겠습니다.

android:id="@+id/imageView"  여기에서 마우스 우클릭 하면 메뉴가 나옵니다.

(볼드글자... 에디터 이미지에선 녹색글자)

Refactor -> Rename

Refactor 버튼으로 적용

이렇게 Refactor 를 통해 변경을 한다면 기존에 사용했던 ID : ImageView 를 참조하던 모든 곳에서 ID 변경이 자동으로 진행 됩니다. (ImageView -> star_image 로 변경이 됩니다.)

지금이야 프로그램이 간단하지만 복잡한곳에서 이 기능을 잘 활용 하지 못하면 사용하는 모든 곳을 직접 찾아 다니면서 변경을 해 줘야 할 것입니다.

ID 변경시에는 Refactor 를 통해서 진행해야 혼란을 막을 수 있을 것 입니다.

 

 

ID도 발급해 줬는데도 여전히 Warning 이 있네요

Warning 이 있더라도 실행은 됩니다.

그렇지만 언제 어느때 이 Warning 때문에 프로그램이 망가질지 모릅니다.

그땐 아주 많은 Warning 이 있을테니 원인을 찾는것도 괜장히 힘들어 질 것입니다.

그러므로 미리 모든 warning 을 제거 하는 습관을 가지는 것은 괭장히 중요 합니다.

그래야 나중에 문제가 생겨도 쉽게 해결을 해 나갈 수 있습니다.

아직 Warning 이 있다.

내용을 보면 이미지 attribute 에서 contentDescription 이 없다고 되어 있습니다.

확인 해 보도록 합시다.

attribute 에서 돋보기 클릭!

attribute 검색 준비

contentDescription

역시나 contentDescription 이 비어 있네요

대충 text 를 써도 되지만 그렇다면 이전에 발생했던 Hardcoing Warning 이 발생 하겠죠?

그러니 Resource Pick 에서 새로 만들어 주도록 합니다.

Resource Pick 클릭

Add new resource

String value 추가 합시다.

추가하고 나니 이제 Warning 이 사라 졌습니다.

 

이번에는 TextView 에도 적용 했던 Top Margin 값을 적용 해 보도록 하겠습니다.

attribute 에 있는 layout_margin 을 찾아 보도록 합니다

layout_margin 을 확장(앞에 있는 삼각형 클릭) 해보면 layout_marginTop 이 있습니다.

Top margin 적용

이미 만들어둔 layout_margin 값 적용 하겠습니다.

프리뷰에는 잘 적용이 되어 TextView 와 추가된 별표 사이에 간격이 생겼습니다.

별에도 top margin 적용

이제 한번 실행 해 보도록 하겠습니다.

실행화면

이쁘게 잘 배치가 되었습니다.

Layout에는 코드가 적지만 이것저것 할게 많네요

다음에도 다른 view를 추가 해 보도록 하겠습니다.