2013.05.17 13:58


안드로이드 앱 개발자가 제안하는 디자인 방법론 - 2. 나인패치(Nine-patch) 실습



안드로이드 나인패치에 대한 두번째 시간으로 나인패치를 개발자가 어떻게 레이아웃을 잡아서 사용 하는지에 대해 알아보겠다.


나인패치에 대해 기억이 안난다면 이전 글을 다시 보고 이 글을 보도록 하자.

2013/02/28 - [개발관련/Android] - 안드로이드 앱 개발자가 제안하는 디자인 방법론 - 1. 나인패치(Nine-patch) 개념




저번 시간 마지막중에 4가지의 나인패치 이미지 예제를 주었다. 대표적으로 쓰이는 이미지 2가지만 어떤식으로 적용 되는지 하나하나씩 보자.



1. 




상단 타이틀이나 내용부분에 그라데이션을 주기 위해서 흔하게 쓰이는 이미지이다.

나인패치를 보면 상단좌측부분은 1px만큼 잡아 주었고, 하단우측부븐은 Full로 나인패치를 잡아 주었다. 



1
2
3
4
5
6
7
8
9
<!--
 
<Textview
android:layout_width="100dip"
android:layout_height="100dip"
android:text="Contents"
android:textcolor="@android:color/black">
 
-->


위의 이미지는 나인패치를 가로 세로 100dip으로 강제로 늘린 것이다. Padding영역을 모두 잡아 주었기 때문에 앞으로 상단위쪽부분으로 Content 가 붙어 있는것을 볼 수 있다.





1
2
3
4
5
6
7
8
9
<!--
 
<Textview
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Contents"
android:textcolor="@android:color/black">
 
-->


다음 이미지는 가로 세로 Content 크이게 맞게 늘어 나도록 적용되어 있다. 크기에 맞게끔 늘어 난것을 볼 수있다.  




1
2
3
4
5
6
7
8
9
<!--
 
<Textview
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Contents"
android:textcolor="@android:color/black">
 
-->


가장 중요한 부분이다. 흔히들 나인패치를 잡을때 하는 실수..

이 부분도 역시 가로세로 Content 사이즈에 맞게 늘어 나도록 적용하였다. 하지만 Content 를 세로로 길게 넣었다.

자세히 보면 가로로 Content 크기에 맞지 않게끔 늘어 난(빨강색 부분) 것을 볼 수 있다. 왜이렇게 되었을까?


정답은 상단 나인패치 부분에 있다. 현재 점으로 하나만 잡고 양 옆으로 영역이 남아 있다. 이 부분이으로 인해 좀 더 늘어 난것이다. 정확하게 맞추기 위해서는 나인패치를 Full로 잡거나 1px로 최대한 작게 변경 하면 된다.



여기까지만 이해 했다면 90% 정도 까지 이해한 것 이다.





2. 


다음 예제를 보자.






1
2
3
4
5
6
7
8
9
10
<!--
 
<Textview
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Contents"
android:gravity="center"
android:textcolor="@android:color/black"/>
 
-->

이 나인패치의 상단을 유심히 봐야 한다. 가로로 늘어 나는 부분의 하단 꺽쇠부분이 포함 되어 있지 않다. 그래서 Full로 늘리더라도 꺽쇠부분은 오른쪽으로 이동하게 된 것을 볼 수 있다. 






1
2
3
4
5
6
7
8
9
10
<!--
 
<Textview
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Contents"
android:gravity="center" //중앙정렬
android:textcolor="@android:color/black"/>
 
-->


다음으로 적용된 레이아웃은 가로세로가 Content 에 맞게 늘어 나도록 되어 있다. 그런데 이전 예제처럼 딱 붙지 않고 패딩 부분이 생긴 것을 볼수 있다. Padding영역의 나인패치를 보면 Full로 채워 져있지 않고 좌우 상하 여백이 있을 것을 볼 수 있다. 이런식으로 Content에 여백을주기 위해서 Padding부분을 잡아 주면 된다.



여기까지 나인패치에 대해 상세히 알아 보았다.



그리고 Android에서 제공하는 draw9patch 툴이 있는데, 이것을 사용하면 좀 더 편하게(미리보기 및 Bad Patches 영역 보여주는 기능 등) 나인패치를 잡을 수 있으니 참고하자.





다음 시간에는 안드로이드에서 쓰는 dip단위, sp단위, DPI, ARGB 등의 개념에 대해 상세히 알아 보겠으며, 

그 다음으로 단말특성(해상도 가변)에 맞는 상대적으로 배치를 위한 디자인 가이드라인 작성법을 알아 보겠다.  

신고


Posted by injunech
2013.05.17 13:57


안드로이드 앱 개발자가 제안하는 디자인 방법론 - 1. 나인패치(Nine-patch) 개념



디자이너들이 웹에서 모바일(안드로이드 플렛폼) 환경으로 넘어 오면서 꼭 알아 두었으면 하는 내용을 정리하는 목적으로 연제글을 올리게 되었다. 


그 첫번째 시간으로 안드로이드에서 가장 중요한 나인패치(?)에 대해 설명 하겠다.

나인패치 하나만 잘 알아도 안드로이드 앱 개발자에게 무한 신뢰와 최고의 감각을 가진 디자이너로 인정받을 수 있으니 필히 정독 하자! 



나인패치에 대해 간단하게 설명 하자면, png 이미지로 되어 있는 Stretchable(늘어나는) 영역을 정의 할 수 있다.

Stretchable영역 외에도 Padding영역을 선택 할 수 있다.



그렇다면 왜 이런 나인패치라는 개념을 도입 했을까?

안드로이드는 제조사 마다 모두 다른 해상도의 device를 출시 한다. IOS iPhone의 경우 가로 해상도가 고정이기때문에 고정된 길이의 이미지를 사용해도 문제가 없을 것이다. 하지만 안드로이드의 경우 해상도는 다양하기 때문에 static한 이미지를 사용하게 된다면 늘어 날경우 아래와 같이 뭉게지게 된다. 

 

 

반면 나인패치를 적용 한경우 아무리 늘어나도 원본과 같은 이미지를 얻을 수 있다.


    
 

원본이미지 

 48 x48px

  
 

강제로 늘린 이미지

 160 x 96px

  
 

나인패치가 적용된 늘린 이미지

 160 x 96px

  
    



그러면 "해상도에 따른 이미지를 각각 가지고 있으면 되지 않을까?" 라는 의문이 들수도 있다.

물론된다. 하지만 해상도에 맞는 적어도 10개가 되는 이미지를 만든다고 생각 해보라. 같은 이미지를 크기에 따라 10개를 만들어야 된다면 누가 디자인을 하려 하겠는가. 

또한 앱 용량이 10배이상 늘어나게 되며 리소스를 관리도 무척이나 힘들다. 스마트폰의 어플리케이션의 특성상 한번의 개발로 끝이 아니라 지속 적인 유지 보수가 필요 한데 이러한 환경에서는 더더욱 힘들다.


이런 저런 생각으로 구글 안드로이드 플렛폼 개발자들은 "나인패치라"는 개념을 만들었다. 

하나의 이미지를 다양한 해상도를 가진 device에서 dynamic하게 보여 준다. 구글 개발자들은 매일 자전거타고 수영하고 놀고 있지않다는 증거이다.



그럼 어떻게 Stretchable영역이 늘어나는지 원리에 대해 자세히 설명 해보자.



윗 부분에 검은색선으로 가이드 라인을 잡았다. 그 검은색 선을 기준으로 이미지는 위와 같이 분해 된다.



검은색으로 선택했던 부분은 반복하는 패턴으로 인식 되어 늘어 나거나 줄어 들게되어 뭉게 지지 않는다. 늘어 나는게 아니라 패턴으로 반복되는 구조이다.

흑백으로 된 부분의 이미지는 늘어날 부분의 영역에 대해 아무런 영향을 미치지 않는다. 즉, 통이미지를 유지 한다.




그래서 나인패치된 이미지를 늘릴 경우 뭉게지는게 아니라 사용자가 선택했던 부분만 패턴으로 인식 되어 자연스럽게 늘어 나는것을 확인 할 수 있다.



    
 

원본 이미지


초록색의 가이드라인사이에 

나인패치를 그으면 된다. 
  
  나인패치를 적용한 이미지 


원본이미지의 바깥쪽을 1px씩 

늘린다음 왼쪽과 상단 부분에 

검은색으로 늘어날 부분의 영역을 잡는다.  

  
    



단순히 원본 이미지에 1px만큼의 테두리에 검은색으로 늘어 나는 역영을 정의하면 된다. Nine-patch이미지는 .9.png 라는 확장자로 되어 있어야 안드로이드에서 Nine-patch이미지로 인식 하며, 이런 확장자를 붙여 주게 된다면 개발자들이 좋아 한다.



첫 부분에 Stretchable영역 외에도 Padding영역을 잡을 수 있다고 언급 했다. Padding영역잡는 것도 Stretchable영역 잡는 것과 비슷한 원리니 한번 알아 보자.

Stretchable영역: 왼쪽, 상단 

Padding영역: 오른쪽, 하단



Padding영역은 텍스트 또는 아이콘을 표시하는 등 컨텐츠에 사용되는 패딩을 지정 할 수 있다. 위 이미지 처럼(노랑색 테두리) 페딩역역이 잡히게 된다.



Nine-patch의 불편한 진실 

반복적인 패턴이 아닌 위 처럼 질감을 가진 이미지라면 Nine-patch를 피하라. 필요한 정적이미지 즉, 통이미지를 써야 한다.

이런 부분만 뺀다면 Nine-patch는 그럭저럭 쓸만 하다?



이상 나인패치에 대해 알아 보았다. 다음 시간에는 좀 더 다양한 예제들을 가지고 실제 상황에서 어떤식으로 나타는지, 영역을 잡는지에 대해 알아 보겠다.

그리고 Nine-patch Tool에 대해서도 간단히 언급 하겠다.

 


 

아래 실제 사용중인 Nine-patch 예제를 몇개 모아 두었으니, 늘어 나거나 Padding부분이 어떻게 될지 미리 한번 생각 해보길 바란다.


            


신고


Posted by injunech
2013.05.17 13:45


ImageView

 

안드로이드에서 이미지도 많이 표시해주기 때문에 좀 중요하다 

이미지를 불러오는 방법은 여러가지가 있는데, 아래에는 6가지로 불러오는 소스이다. 

첫번째는 xml에서 그냥 보여주는 방식 

2번째는 xml에는 iamgeView만 추가하고 Activity에서 보여주는 방식 

3번째는 리소스에 있는 이미지를 Activity로 보여주는 방식 

4번째는 비트맵을 사용해서 Activity에서 보여주는 방식 (다양한 작업을 위해) 

5번째는 sdcard를 사용해서 Activity에서 보여주는 방식 

6번째는 server을 사용해서 Activity에서 보여주는 방식이다.






-------------------------------------------------------------------------------------------------------------



신고


Posted by injunech
2013.03.03 22:39


OpenCV_source.rar

prws2009.pdf



=============================================================================================================



NVIDIA 에서 제공하는 tegra-devpack 을 이용하여 설치하면 거의 모든필요 파일들을 통합적으로 설치하여 사용할수 있다.


https://developer.nvidia.com/tegra-android-development-pack


=============================================================================================================





1. android-opencv 포팅을 위한 사전 준비

- android-sdk : 기본으로 설치 되어있어야 함

- android-ndk : crystax ndk 이용

  down : http://www.crystax.net/android/ndk-r4.php

- cygwin

  windows에서 가상 리눅스 환경을 만들어 준다.

  down : http://www.cygwin.com/

- android-opencv source

  SVN을 이용하여 checkout받는다. (http://android-opencv.googlecode.com/svn/trunk/)

  현재 이 svn을 이용하면 사용자 계정을 물어서 들어가보질 못한다. 따로 파일을 올리니 그 파일을 사

  용할 것


2. cygwin을 설치할때 필요한것

Devel : gcc-core, gcc-g++, make, swig

Editor : vim

이것들이 중요하고 나머지 필요하다고 생각하는 것들은 알아서 설치할것


3. crystax ndk r4

사이트에서 다운받은 후 편한곳에 압축만 풀면 된다.

그 후 cygwin이 설치 된 /home/[user]/아래 복사 한다.

cygwin 환경에서 빌드를 진행하기 위해서


4. android-opencv source

올려놓은 파일을 받아서 압축을 푼 후

cygwin이 설치된 /home/[user]/아래에 복사한다.


5. android-opencv build

환경 변수 설정하는 곳에 들어가서 path에 경로를 추가한다.

C:\cygwin\home\[user]\android-ndk-r4-crystax; C:\cygwin\bin;을 추가한다.

제 경로는 C:\cygwin\home\suelgi\android-ndk-r4-crystax; C:\cygwin\bin;


5.1cygwin실행 후 bash환경 파일 수정

vi ~/.bashrc 실행

맨 밑으로 내려서

export PATH=$PATH:/home/[user]/android-ndk-r4-crystax

export ANDROID_NDK_ROOT=/home/[user]/android-ndk-r4-crystax

입력 후 저장한다음 

나가서 source ~/.bashrc를 입력한다.


5.2 android-opencv build

- cygwin 실행후 /home/[user]/android-opencv/opencv로 이동

- sh build.sh 빌드는 시간이 오래걸린다 만약 시간이 짧았다면 설정을 잘못한거니 다시한번 살펴본다

- 빌드가 완료되면 libopencv.so파일이 생성된다.


6. android-opencv test

6.1 CVCamera Smaple build

- 테스트는 samples 안에 있는 CVCamera Project를 이용한다.

- cygwin 실행후 /home/[user]/android-opencv/samples/CVCamera로 경로를 이동한다.

- sh build.sh를 실행하면 빌드된다.


6.2 Eclipse Project Create & Test

- Eclipse에 안드로이드 프로젝트를 생성하고 cygwin에서 빌드한 CVCamera를 import한다.

- 빌드 한 android-opencv 밑에 가면 android로 빌드하면서 생성 된 폴더가 있는데 안의 jni 밑의 java파일들도 import한다. 그리고 당연히 libandroid-opencv.so파일도 프로젝트의 libcvcamera.so가 있는 위치에 복사 한다.

- 프로젝트를 폰이나 에뮬레이터에서 테스트 하면 된다.

- 카메라 뷰가 보이며, 뷰에 보이는 영상이 메뉴에서 선택한 알고리즘에 따라 특징 점 들이 추출되어 보이게 된다.







신고

'Programming > openCV' 카테고리의 다른 글

안드로이드에 OpenCV 포팅하기  (0) 2013.03.03


Posted by injunech
2013.03.02 00:03


[자바] 평년/윤년 구하기

import java.util.*;
GregorianCalendar cal02 = new GregorianCalendar();
if(cal02.isLeapYear(cal02.get(Calendar.YEAR))) {
// 윤년
}
else {
// 평년
}

신고

'Programming > JAVA' 카테고리의 다른 글

JNA (Java Native Access)  (0) 2015.03.14
[JAVA] 자바 실행파일 만들기  (0) 2015.03.01
JGoodies JAVA Swing API  (0) 2015.02.07
클래스 java.io.File  (0) 2013.05.29
평년/윤년 구하기  (0) 2013.03.02
날짜  (0) 2013.03.02


Posted by injunech
2013.03.02 00:00


[자바] 날짜(Date)

import java.util.*;
import java.sql.Timestamp;
import java.text.SimpleDateFormat;
public class DateTest {
/**
 * @param args
 */
public static void main(String[] args) {
// TODO Auto-generated method stub
Date d = new Date();
System.out.println(d);
//SimpleDateFormat sd = new SimpleDateFormat(“yyyy-MM-dd HH:mm:ss E”);
SimpleDateFormat sd = new SimpleDateFormat(“yyyy년 MM월 dd일  HH시 mm분 ss초 E요일”);
System.out.println(sd.format(d));
Timestamp ts = new Timestamp(System.currentTimeMillis());
System.out.println(ts);
SimpleDateFormat sd2 = new SimpleDateFormat(“yyyy년 MM월 dd일  HH시 mm분 ss초 E요일”);
System.out.println(sd2.format(ts));
Calendar cal = Calendar.getInstance();
Calendar cal01 = new GregorianCalendar(); //업케스트
//cal.YEAR;
//Calendar.YEAR;
System.out.println(cal.get(Calendar.YEAR));
System.out.println(cal.get(Calendar.MONTH)+1);
System.out.println(cal.get(Calendar.DATE));
System.out.println(cal.get(Calendar.HOUR));
System.out.println(cal.get(Calendar.MINUTE));
System.out.println(cal.get(Calendar.SECOND));
String a[] = {“일”, “월”, “화”, “수”, “목”, “금”, “토”};
int w = cal.get(Calendar.DAY_OF_WEEK);
System.out.println(a[w-1]);
}
}

신고

'Programming > JAVA' 카테고리의 다른 글

JNA (Java Native Access)  (0) 2015.03.14
[JAVA] 자바 실행파일 만들기  (0) 2015.03.01
JGoodies JAVA Swing API  (0) 2015.02.07
클래스 java.io.File  (0) 2013.05.29
평년/윤년 구하기  (0) 2013.03.02
날짜  (0) 2013.03.02


Posted by injunech

티스토리 툴바