[Buttom UP] Image View를 이용한 이미지 처리

학교 공모전 준비를 위해 오늘 안드로이드 공부를 시작했다. 각각의 필요한 기능을 검색하고 정리해가며 간단히 기본 화면을 구현해보았다. 많은 글을 참고하여 기록용으로 남기는 글이니 참고하길 바란다.

 

1. 배경색 바꾸기

 

프로젝트를 초기에 만들면 Andriod>res>values에 가면 기본적으로 세가지 xml 파일이 존재하게 된다.

colors, string, style.xml 파일이 이렇게 있다. 그 중에 colors에 들어가서 아래와 같은 예시로 코드를 추가한다.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#008577</color>
    <color name="colorPrimaryDark">#00574B</color>
    <color name="colorAccent">#D81B60</color>
    <color name ="colorPurple">#7E57C2</color> //Background color 1
    <color name = "colorBlue">#3F51B5</color> //Background color 2
</resources>

이 방법은 단순히 단색으로만 배경을 처리하는 방법이고, 내가 진행할 프로젝트의 바탕화면 색은 그라데이션 처리를 필요했으므로 다른 방법을 찾아보았다. 저렇게 선언하는 방법만으로는 부족해서, 따로 background.xml이라는 파일을 drawable 폴더 안에 생성을 해 주었다.

 

[background.xml]

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android">
        <gradient
            android:angle="270"
            android:startColor="#3F51B5"
            android:endColor="#7E57C2"
            />
    </shape>
 

<shape>태그 사이에 <gradient>를 사용하여 startColor와 endColor 두가지를 지정해주었다. 

그다음에 main xml에 가서 background컬러를 이 파일을 이용하여 설정해주어야 한다. 코드는 아래와 같다.

 android:background="@drawable/background"

결과는 아래의 사진과 같다. 그라데이션이 원하는 대로 잘 나왔다.

 

2. 타이틀 바 없애기

다음은 타이틀 바를 없애고싶었다. 위의 결과 화면에서는 보이지 않지만 처음에는 프로젝트 명이 써있는 타이틀바가 위의 화면을 가리고 있었다. 이 부분에 대해서 아래 링크의 글을 참고했다. 

http://progtrend.blogspot.com/2017/09/android-titlebar.html

Android에서 타이틀바(TitleBar) 없애기

많은 방법이 있었다. 이 글에서 우선 첫번째 방법을 시도해보았다.

 

첫번쨰 방법은 AndroidMainfest에 가서 코드를 수정하는 방식이었다.

android:theme="@android:style/Theme.NoTitleBar">
android:theme="@style/Theme.AppCompat"

하지만 이 방법은 어느정도 개발 진행중이라면 기존에 지정되어있던 테마값을 바꿔서 전체에 영향을 주기 때문에 앱이 죽거나 배경색이 바뀌는 등의 문제가 있다고 써있었는데, 현재 나는 개발 상황이 완전히 초기였으므로 신경쓰지 않고 코드를 수정했다. 하지만 앱이 실행이 되지 않는 문제에 부딪혀 제일 추천하는 마지막 방법을 사용하였다.

 

<기본테마에 style을 추가>하는 방법이었다. 이외의 방법들은 편법정도이고, 이 방법이 가장 안전한 방법이라고 하였다.

방법은 아래와 같다.

 

기본 생성된 style.xml 파일을 열어서 <item>태그를 하나 추가한다( <item name = "windowNoTitle">true</item>)

<resources>
 
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name = "windowNoTitle">true</item> <!-- No see Title Bar-->
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
 
</resources>
 

이 <item>태그가 @andriod:style/Theme.NoTitleBar 테마가 가진 전부이다. 따라서 이 태그만 작성해주면 모든 style은 그대로이고 타이틀바 제거 속성만 enable을 시키게 된다. 그래서 결과가 잘 나오게 되었다.

또한 이 태그를 사용한 방법은 그 외 색상, 스타일은 그대로 유지가 되며 최신 SDK에서도 문제가 없다고 한다.

 

3. 이미지 삽입하기

 

이미지를 삽입하는 방법은 ImageView를 이용한 방법이다.

이미지를 앱 화면에 넣기 위해서는 우선 drawable에 추가할 파일을 삽입한다. 그리고 나서 코드로 추가하는 방식이 두 가지가 있는데 java,xml 이 두가지이지만 나는 xml을 사용하여 추가를 하였다. activity_main.xml에 아래의 코드를 추가하였다.

<ImageView
            android:id="@+id/imageView2"
            android:layout_width="190dp"
            android:layout_height="350dp"
            android:layout_marginTop="30dp"
            android:layout_gravity="center"
            android:layout_marginBottom="180dp"
            android:src="@drawable/doctor_o" />
        <!-- show o doctor image-->

여기서 간단하게 이미지 크기 조절을 위한 단위에 대해 살펴보겠다.

 

우선 px는 화면을 구성하는 최소 단위이다. 이 단위는 전체화면 크기와 상관없이 지정한 수치만큼 표시되는 절대적 표시 단위이다. 그다음 dpi는 px와 달리 1인치에 들어가는 픽셀을 나타내는 단위이다. 예를 들어 100dpi는 1인치당 픽셀이 100개 포함된다는 것을 의미한다. 

 

아래는 주요 dpi 기본단위 목록이다.

ldpi : 120dpi

mdpi : 160dpi (기본)

hdpi : 240dpi

xhdpi : 320dpi

xxhdpi : 480dpi

xxxhdpi : 640dpi

 

이에 따라 변환 공식은 아래와 같다.

px = dp * 단말 DPI/기본 160

dp = px * 기본 160/단말 DPI

 

단위에 대한 설명은 기본적인 것만 끝냈으니 다음은 간단하게 코드 분석을 해보겠다.

 

1. 우선 이미지 크키를 기기에 따라 유동성있게 조절하기 위해서 dp를 사용하여 크기를 설정하였다.(width, height) 

2. margin에 관한 것은 레이아웃을 기준으로 이미지가 어떻게 배치될것인지, Top을 기준으로 얼만큼 간격을 띄울것

인지 설정하는 코드이다. 이역시 기기별로 다르므로 dp 단위로 설정해주었다.

3. layout_gravity="center"는 직관적으로 이미지를 레이아웃의 가운데에 배치하겠다는 뜻이다. 

4. src는 아까 drawable 파일에 넣었던 png 이미지파일을 불러오는 과정이다. 이외의 방법으로 background 코드도 있다.

 

전체 코드의 모습이다. 위와 같이 하여 두 기기에서 모두 정상적인 비율로 작동하는 모습을 볼 수 있다.

 

다음에는 버튼과 도형을 만들어 한 화면을 완성시켜보겠다. 그 전에 안드로이드의 기본에 대해 공부해야겠다. 

 

[안드로이드 공부할것]
- 레이아웃
- 생명주기
- 구조분할법
- weight
- 리스너
- 커스텀뷰