Android 9 patch

요번 포스트는 안드로이드를 

좀 더 아이폰 스타일의 텍스트뷰(에디터뷰)를 만들어보겠습니다.

위에서는 아이폰의 "X" 버튼을 만들어보았는데, 

나인패치를 이용하여 전 포스트를 아이폰과 비슷한 아래의 모양 처럼 만들어보겠습니다. 

나인패치란 쉽게 말해서 기존의 이미지 PNG 파일에 1px의 테두리를 두고, 

늘어나는 곳와 내용이 출력되도록 하는 것입니다. 

즉, 뷰의 크기에 따라 이미지의 크기가 자동으로 조절 되는 것을 말합니다.. 

파일 이름은 반드시 *.9.png 로 해야. 나인패치를 적용할 수 있습니다. 

나인패치를 하기 위해

두개의 이미지를 준비를 했습니다. 

ic_btn_serach_selected.png

  

 

ic_btn_serach_selected.png

  

 

나인패치프로그램은 안드로이드sdk 설치된 곳에 

tools폴더에 보면 draw9patch.bat를 실행 시키면 검은 cmd창이 뜨는데, 종료를 하시면 프로그램이 꺼져버리니 그냥둡니다. 

cmd창이 자동으로 종료가 될 경우 아래의 파일을 안드로이드sdk폴더 안에 tools 폴더에 있는 lib 폴더에 넣어줍니다. 

tools/lib

swing-worker-1.1.jar

이제 위에서 받은 이미지를 드래그해서 창위에 올려 놓아 이미지를 불러옵니다. 

이미지를 불러오면 위에와 같이 원본 파일 테두리에 1px의 여백이 나타나는데, 이곳에 표시를 하여, 

늘어나는 곳을 정해주면됩니다. 

왼쪽과 상단은 stretchable area를, 오른쪽과 하단은 padding box의 위치를 정해줍니다. 

다음과 같이 검은색으로 표시된 곳이 나인패치를 정해준 곳입니다. 

상하의 모양을 유지하기 위해서 왼쪽 여백은 다 칠했고, 

좌우는 view의 모양에 따라 크기가 자동으로 변하게 하기 위하여 늘어나는 공간을 표시했습니다. 

하단과 우측의 경우 view의 크기에 따른 글씨의 크기 텍스트가 표시될 위치(?)를 나타냅니다. 

이렇게 ic_btn_serach_selected.png와 ic_btn_serach_unselected.png 파일을 동일하게 편집하고 9.png파일로 저장을 합니다. 

저장한 파일을 drawable 폴더에 넣고, xml파일을 수정하면 됩니다. 

main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/hello" />

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="horizontal"
        android:paddingTop="0px" >

        <EditText
            android:id="@+id/address"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/ic_btn_serach_unselected"
            android:hint="Search"
            android:inputType="textUri"
            android:maxLength="14"
            android:singleLine="true" />

        <ImageButton
            android:id="@+id/clear_btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_marginRight="10dip"
            android:layout_marginTop="10dip"
            android:background="@drawable/ic_btn_serach_selected"
            android:visibility="invisible" />
    </RelativeLayout>

</LinearLayout>

NinePatchActivity.java

package com.gusfree.nine;

import android.app.Activity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.widget.EditText;
import android.widget.ImageButton;

public class NinePatchActivity extends Activity {

	EditText et;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		et=(EditText) findViewById(R.id.address);
		
		
		et.setOnTouchListener(new OnTouchListener() {

			@Override
			public boolean onTouch(View v, MotionEvent event) {
				
				if(event.getAction()== MotionEvent.ACTION_DOWN){
				et.setBackgroundDrawable(getResources().
						getDrawable(R.drawable.ic_btn_serach_selected));

			}
			else if(event.getAction() == MotionEvent.ACTION_UP){
				et.setBackgroundDrawable(getResources().
						getDrawable(R.drawable.ic_btn_serach_unselected));

			}
			return false;
			}

		});
	}
}