«   2024/05   »
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Archives
Today
Total
관리 메뉴

[위미르 개발팀] Android, iOS , Web 제작

[안드로이드 레이아웃]ImageView 높이 이미지 비율에 맞게 설정하기 본문

개발자료/Android

[안드로이드 레이아웃]ImageView 높이 이미지 비율에 맞게 설정하기

위미르개발팀 2017. 9. 13. 09:49

ImageView를 사용할때 너비는 match_parent나 wrap_content로 하면 맞추는게 쉽지만,  높이도 그렇게 한다면 부모 레이아웃의 설정에 따라서 이미지의 비율이 깨질수가 있고, 바로 밑에 다른 뷰가 붙어야 한다면 쓸데없는 공간을 차지할수 있습니다.


이러한 문제를 해결하기 위해서는 ImageView의 src로 넣어준 drawable 이미지의 원래 비율에 맞게 높이를 설정해주면 됩니다.


자바코드로 비트맵을 생성해서 이미지의 비율을 구할수도 있겠지만, xml에서 훨씬 간단하게 해결 가능합니다.


ImageView의 속성에 android:adjustViewBounds="true" 한줄 추가 해주시고 높이를 wrap_content로 설정해주세요


이렇게하면 ImageView의 너비와 이미지의 원래 비율로 계산을 해서 ImageView의 높이가 결정됩니다.


주의할점은 ImageView에 이미지를 넣을때 background가 아닌 src로 넣어야 한다는점입니다.


background와 src의 차이에 대해서는 따로 글을 작성하도록 하겠습니다.






실험에 사용할 넝쿨 아이콘입니다.



넝쿨



실행 화면입니다.


adjustViewBounds 미적용


이미지뷰



adjustViewBounds를 적용하지 않은 상태입니다. 

최상위 레이아웃의 배경은 색상코드 #AEF로 파란 배경이 있고

이미지가 보이는 부분말고도 ImageView가 높이를 더 차지하고있어서 background값인 #EEE색상이 보여지는 부분이 있는것을 확인 하실수 있습니다.


위의 레이아웃 코드입니다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?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:background="#AEF">
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#EEE"
        android:src="@drawable/image" />
</LinearLayout>






adjustViewBounds 적용


이미지뷰



adjustViewBounds를 적용했더니 이미지 만큼만 높이를 차지하도록 바뀌었습니다.


위의 레이아웃 코드입니다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?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:background="#AEF">
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:background="#EEE"
        android:src="@drawable/image" />
</LinearLayout>
 








저희 위미르에서는 모바일 어플리케이션(Android/iOS), Web 개발을 해드리고 있습니다.


문의 전화 : 070-4177-3962


Comments