<4D F736F F F696E74202D20446F E64726F69645F F30335FB4D9BEE7C7D1C0A7C1ACB0FAC0CCBAA5C6AEC8B0BFEBC7CFB1E25F52657

Transcription

1 Do It! 안드로이드앱프로그래밍 PART 0 Chapter 03 다양한위젯과이벤트활용하기 Sep. 0 이지스퍼블리싱 ( 주 ) 제공강의교안저자 : 정재곤 이번장에서는무엇을다룰까요? 이번장에서는무엇을다룰까요? 화면을좀더다양하게만들수있는방법을알고싶어요. 손가락을터치할때이벤트처리하기 탭위젯사용하기 웹브라우저포함하기 메뉴추가하기 화면을손가락으로눌렀을때어떻게처리하는지알아볼까요? 탭모양위젯을화면안에넣어볼까요? 웹브라우저를화면안에넣어볼까요? 간단한애니메이션을넣는방법을알아볼까요? 메뉴를추가하는방법을알아볼까요? 입력상자를터치했을때뜨는키패드형태를다르게만들어볼까요? 필요할때애니메이션으로보여지는슬라이딩위젯을알아볼까요? 여러화면을손가락으로드래그하여넘기는뷰플리퍼를알아볼까요? 프로그레스바에대해다시한번살펴볼까요? 원하는위치를탐색할수있는시크바를알아볼까요? 3 메뉴 메뉴 페이지슬라이딩사용하기 뷰플리퍼사용하기 프로그레스바사용하기 시크바사용하기 슬라이딩위젯 사용하기 6. 다양한위젯과이벤트활용 4

2 강의주제및목차 PART CH3. 다양한위젯과이벤트활용하기 강의주제 다양한위젯의사용방법과이벤트처리에대한이해 이벤트처리 6 입력형식설정하기 목차 탭위젯사용하기 7 페이지슬라이딩사용하기 3 웹브라우저포함하기 8 뷰플리퍼사용하기 4 간단한애니메이션사용하기 9 프로그레스바사용하기 5 메뉴추가하기 0 시크바사용하기 5 뷰의이벤트처리하기 대표적인이벤트 이벤트를각각의뷰가처리하는방식 : Delegation 패턴 뷰객체를사용할때는리스너를설정하고뷰를상속할때는이벤트처리를위한메소드를재정의뷰를상속할때이벤트처리를위한메소드재정의 boolean ontouchevent (MotionEvent event) boolean onkeydown (int keycode, KeyEvent event) boolean onkeyup (int keycode, KeyEvent event) [ 버튼에 OnClickListener를설정할때의패턴 ] 뷰객체에전달되는이벤트를처리하기위한리스너설정 View.OnTouchListener : boolean ontouch (View v, MotionEvent event) View.OnKeyListener : boolean onkey (View v, int keycode, KeyEvent event) View.OnClickListener : void onclick (View v) View.OnFocusChangeListener : void onfocuschange (View v, boolean hasfocus) 터치이벤트 - 화면을손가락으로누를때발생하는이벤트 키이벤트 - 키패드나하드웨어버튼을누를때발생하는이벤트 제스처이벤트 - 터치이벤트중에서일정패턴을만들어내는이벤트 포커스 - 뷰마다순서대로주어지는포커스 화면방향변경 - 화면의방향이가로 / 세로로바뀜에따라발생하는이벤트 7 8

3 제스처를통해처리할수있는이벤트 대표적인이벤트처리예제 메소드 이벤트유형 ondown() onshowpress() onsingletapup() onsingletapconfirmed() ondoubletap() ondoubletapevent() onscroll() onfling() onlongpress() - 화면이눌렸을경우 - 화면이눌렸다떼어지는경우 - 화면이한손가락으로눌렸다떼어지는경우 - 화면이한손가락으로눌려지는경우 - 화면이두손가락으로눌려지는경우 - 화면이두손가락으로눌려진상태에서떼거나이동하는등세부적인액션을취하는경우 - 화면이눌린채일정한속도화방향으로움직였다떼는경우 - 화면이눌린채가속도를붙여손가락을움직였다떼는경우 - 화면을손가락으로오래누르는경우 대표적인이벤트처리예제 -손가락으로화면터치시의이벤트처리 -텍스트뷰의이벤트를받아처리 메인액티비티의 XML 레이아웃 메인액티비티코드작성 - 간단한레이아웃코드작성 - 이벤트처리코드작성 9 0 메인액티비티코드만들기 메인액티비티코드만들기 ( 계속 ) public boolean ontouchevent(motionevent event) { if (mgestures!= null) { return mgestures.ontouchevent(event); else { return super.ontouchevent(event); 터치이벤트를제스처와구분하여처리 public boolean onfling(motionevent e, MotionEvent e, float velocityx, float velocityy) { TextView0.append("\nonFling \n\tx = " + velocityx + "\n\ty=" + velocityy); return super.onfling(e, e, velocityx, velocityy); 3 Fling 이벤트처리 public void oncreate(bundle savedinstancestate) { GestureDetector 객체정의 mgestures = new GestureDetector(new GestureDetector.SimpleOnGestureListener() { public boolean onscroll(motionevent e, MotionEvent e, float distancex, float distancey) { TextView0.append("\nonScroll \n\tx = " + distancex + "\n\ty = " + distancey); return super.onscroll(e, e, distancex, distancey); ); 4 Scroll 이벤트처리

4 메인액티비티코드만들기 ( 계속 ) 실행화면 TextView0.setOnLongClickListener(new View.OnLongClickListener() { public boolean onlongclick(view v) { TextView0.append("\nonLongClick: " + v.tostring()); return true; ); 6 LongClick 이벤트처리 TextView0.setOnFocusChangeListener(new View.OnFocusChangeListener() { public void onfocuschange(view v, boolean hasfocus) { if (hasfocus) { TextView0.append("\nonFocusChange, hasfocus : " + hasfocus); else { TextView0.append("\nonFocusChange, hasfocus : " + hasfocus); ); 7 FocusChange 이벤트처리 3 4 키입력이벤트처리하기 BACK 버튼과포커스이벤트처리예제 [ 키를눌렀을때전달되는대표적인키값 ] 키코드 KEYCODE_DPAD_LEFT 설명 - 왼쪽화살표 BACK 버튼과포커스예제 뷰를상속할때키이벤트처리를위한메소드재정의 KEYCODE_DPAD_RIGHT KEYCODE_DPAD_UP KEYCODE_DPAD_DOWN - 오른쪽화살표 - 위쪽화살표 - 아래쪽화살표 -BACK 버튼을눌렀을때의이벤트처리 -입력상자가포커스를받았을때의이벤트처리 boolean onkeydown (int keycode, KeyEvent event) boolean onkey (View v, int keycode, KeyEvent event) KEYCODE_DPAD_CENTER KEYCODE_CALL KEYCODE_ENDCALL - [ 중앙 ] 버튼 - [ 통화 ] 버튼 - [ 통화종료 ] 버튼 메인액티비티의코드수정 KEYCODE_HOME KEYCODE_BACK KEYCODE_VOLUME_UP - [ 홈 ] 버튼 - [ 뒤로가기 ] 버튼 - [ 소리크기증가 ] 버튼 -BACK 버튼이벤트처리하도록수정 KEYCODE_VOLUME_DOWN KEYCODE_0 ~ KEYCODE_9 - [ 소리크기감소 ] 버튼 - 숫자 0 부터 9 까지의키값 포커스처리 XML 로정의 EditText 의속성설정 KEYCODE_A ~ KEYCODE_Z - 알파벳 A 부터 Z 까지의키값 - 포커스처리를위한 XML 정의 - 입력상자의속성으로설정 5 6

5 BACK 버튼처리를위한액티비티코드만들기 포커스이벤트처리를위한 XML 레이아웃 public boolean onkeydown(int keycode, KeyEvent event) { if(keycode == KeyEvent.KEYCODE_BACK) { close(); return true; return false; 하드웨어 [BACK] 버튼이눌렸을경우새로정의한 close() 메소드호출 <EditText android:id="@+id/edit0" android:hint=" 텍스트를입력하세요." android:textsize="0dp" android:background="@drawable/button_selector" 입력상자정의 private void close() { Intent resultintent = new Intent(); resultintent.putextra("name", "mike"); setresult(, resultintent); finish(); 3 액티비티없애기 호출한액티비티로결과값전송 <Button android:id="@+id/btnshow" android:layout_width="60dp" android:text=" 보여주기 " android:textsize="0dp" android:textstyle="bold" </LinearLayout> 7 8 포커스처리를위한 XML 정의 단말방향전환이벤트처리예제 <?xml version=".0" encoding="utf-8"?> <selector xmlns:android=" <item android:state_focused="true" android:state_pressed="true" android:drawable="@drawable/red" <item android:state_focused="false" android:state_pressed="true" android:drawable="@drawable/green" <item android:drawable="@drawable/blue" </selector> 단말방향전환이벤트예제 -단말방향이가로와세로로바뀌었을때이벤트처리매니페스트속성추가메인액티비티코드작성 -매니페스트의액티비티속성 -가로와세로방향으로바뀌었을추가때처리코드작성 9 0

6 매니페스트파일에속성추가 메인액티비티코드만들기 <?xml version=".0" encoding="utf-8"?> <manifest xmlns:android=" package="org.androidtown.orientation" android:versioncode="" android:versionname=".0"> <application <activity android:name=".sampleorientationactivity" android:configchanges="orientation" > <intent-filter> <action android:name="android.intent.action.main" <category android:name="android.intent.category.launcher" </intent-filter> </activity> </application> <uses-sdk android:minsdkversion="7" </manifest> 방향전환을알수있도록 configchanges 속성설정 public void onconfigurationchanged(configuration newconfig) { super.onconfigurationchanged(newconfig); if (newconfig.orientation == Configuration.ORIENTATION_LANDSCAPE) { Toast.makeText(getApplicationContext(), "Orientation : ORIENTATION_LANDSCAPE", 000).show(); 4 가로방향전환시처리 else if (newconfig.orientation == Configuration.ORIENTATION_PORTRAIT) { Toast.makeText(getApplicationContext(), "Orientation : ORIENTATION_PORTRAIT", 000).show(); 5 세로방향전환시처리 액티비티를가로또는세로방향으로고정 PART CH3. 다양한위젯과이벤트활용하기 [Code] <activity android:name=".imagevieweractivity" android:theme="@android:style/theme.notitlebar" android:screenorientation="landscape" android:configchanges="orientation" > </activity>. 탭위젯사용하기 3

7 탭을이용한화면구성 탭액티비티사용 API 탭위젯은여러개의뷰를조합하여만든복합위젯 프레임레이아웃을중첩하는등의방법으로직접구성하는방식과유사한구성 [Reference] TabHost gettabhost () [Reference] void addtab (TabHost.TabSpec tabspec) TabHost.TabSpec newtabspec (String tag) [Reference] TabHost.TabSpec setlndicator (CharSequence label [. Drawable icon]) TabHost.TabSpec setcontent (int viewld) TabHost.TabSpec setcontent (TabHost.TabContentFactory contentfactory) TabHost.TabSpec setcontent (lntent intent). 탭위젯사용하기 5. 탭위젯사용하기 6 탭화면만들기예제 메인액티비티의레이아웃만들기 탭화면만들기예제 -탭위젯을이용한화면구성 -탭위젯의각탭에내용추가 메인액티비티의 XML 레이아웃정의 -메인액티비티를위한레이아웃정의 메인액티비티코드작성 각탭의화면구성 XML 레이아웃정의 -각탭에들어가는화면의레이아웃정의 <?xml version=".0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:orientation="vertical" android:layout_height="fill_parent" > <TabHost android:id="@android:id/tabhost" android:layout_height="fill_parent" > <LinearLayout android:layout_height="fill_parent" android:orientation="vertical" > 탭호스트정의 -탭위젯을초기화하고각탭의내용을설정하는코드작성. 탭위젯사용하기 7. 탭위젯사용하기 8

8 메인액티비티의레이아웃만들기 ( 계속 ) 각탭의 XML 레이아웃정의 <TabWidget android:id="@android:id/tabs" <FrameLayout android:id="@android:id/tabcontent" android:layout_height="fill_parent" > </FrameLayout> </LinearLayout> </TabHost> </LinearLayout> 3 탭호스트안에탭위젯정의 탭호스트안에프레임레이아웃정의 <?xml version=".0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:orientation="vertical" android:layout_height="fill_parent" > <TextView android:id="@+id/text0" android:background="#ff0000cc" android:text=" 첫번째페이지 " android:textsize="0dp" android:focusable="true" 텍스트뷰정의. 탭위젯사용하기 9. 탭위젯사용하기 30 메인액티비티코드만들기 메인액티비티코드만들기 ( 계속 ) public class SampleTabActivity extends TabActivity { public void oncreate(bundle savedinstancestate) { setuptabs(); 탭액티비티클래스정의 탭위젯설정메소드호출 intent = new Intent(this, SubPage0Activity.class); intent.putextra("mode", "new"); intent.putextra("initialize", true); intent.putextra("request", true); intent.addflags(intent.flag_activity_single_top); 5 첫번째탭에들어갈액티비티를인텐트로지정 private void setuptabs() { spec.setcontent(intent); 6 첫번째탭의내용으로인텐트객체설정 TabHost tabs = gettabhost(); TabHost.TabSpec spec = null; Intent intent = null; spec = tabs.newtabspec("tab0"); 3 4 탭호스트객체참조 새로운탭스펙객체생성 spec.setindicator("subpage0"); tabs.addtab(spec); tabs.setcurrenttab(0); 첫번째탭의타이틀설정 첫번째탭을탭호스트에추가 선택된탭인덱스지정. 탭위젯사용하기 3. 탭위젯사용하기 3

9 실행화면 PART CH3. 다양한위젯과이벤트활용하기 3. 웹브라우저사용하기. 탭위젯사용하기 33 웹브라우저사용하기 웹브라우저포함하기예제 <WebView <uses-permission android:name="android.permission.internet" 웹브라우저포함하기예제 -웹뷰위젯을이용한화면구성 -이벤트처리추가 웹브라우저는안드로이드에서미리제공하는웹킷 (WebKit) 엔진을사용 플래시 (Flash) 도지원할수있는브라우저가장착되어있으므로모바일단말에서대부분의웹페이지를 PC에서보는것처럼볼수있음 웹브라우저를애플리케이션안에넣고싶은경우에는웹뷰 (WebView) 를사용하면되는데 XML 레이아웃에서는 <WebView> 태그로정의함 메인액티비티의 XML 레이아웃정의 -메인액티비티를위한레이아웃정의 메인액티비티코드작성 웹페이지와자바스크립트코드작성 -보여줄웹페이지작성 -자바스크립트액션정의 - 웹뷰설정과이벤트처리 3. 웹브라우저사용하기 웹브라우저사용하기 36

10 메인액티비티코드만들기 메인액티비티코드만들기 ( 계속 ) webview = (WebView) findviewbyid(r.id.webview); WebSettings websettings = webview.getsettings(); websettings.setsavepassword(false); websettings.setsaveformdata(false); websettings.setjavascriptenabled(true); websettings.setsupportzoom(false); webview.setwebchromeclient(new WebBrowserClient()); webview.addjavascriptinterface(new JavaScriptMethods(), "sample"); webview.loadurl("file:///android_asset/sample.html"); 4 웹뷰객체참조 웹뷰에 WebSettings 설정 3 웹뷰에클라이언트객체지정 웹뷰에자바스크립트인터페이스객체지정 loadbtn.setonclicklistener(new OnClickListener() { public void onclick(view v) { webview.loadurl(urlinput.gettext().tostring()); ); final class JavaScriptMethods { JavaScriptMethods() { public void clickonface() { mhandler.post(new Runnable() { public void run() { loadbtn.settext(" 클릭후열기 "); 사용자가직접입력한일반웹페이지로딩 애플리케이션에서정의한메소드로웹페이지에서호출할대상 애플리케이션화면의버튼글자변경 3. 웹브라우저사용하기 웹브라우저사용하기 38 메인액티비티코드만들기 ( 계속 ) 자바스크립트함수정의 webview.loadurl("javascript:changeface()"); ); 웹페이지의자바스크립트함수호출 final class WebBrowserClient extends WebChromeClient { public boolean onjsalert(webview view, String url, String message, JsResult result) { 웹브라우저클라이언트 result.confirm(); 클래스정의 return true; 0 <html> <script language="javascript"> function changeface() { document.getelementbyid("face").src="face_angry.png"; </script> <body> <a onclick="window.sample.clickonface()"> <div style="width:0px; margin:0px auto; padding:0px; text-align:center; border:px solid #000;" > <img id="face" src="face_normal.png" <br> </div> </a> </body> </html> 3 웹페이지의이미지 ID 를 face" 로지정 자바스크립트함수정의한것으로애플리케이션에서호출할대상 웹페이지에서보이는그림을눌렀을때 clickonface() 메소드호출 3. 웹브라우저사용하기 웹브라우저사용하기 40

11 실행화면 PART CH3. 다양한위젯과이벤트활용하기 4. 간단한애니메이션사용하기 3. 웹브라우저사용하기 4 애니메이션사용방식 간단한애니메이션예제 전형적인애니메이션사용방식은애니메이션액션정보를 XML 로정의한후사용 Animation 객체로만든후뷰의 startanimation() 메소드를사용하면간단하게애니메이션동작 간단한애니메이션예제 - 텍스트뷰가들어가는화면구성 자바소스 리소스 - 텍스트뷰이동애니메이션적용 /res/anim 메인액티비티의 XML 레이아웃정의 애니메이션액션 XML 정의 startanimation( ) loadanimation( ) - 메인액티비티를위한레이아 - 애니메이션을 XML 로정의 View 객체 Animation 객체 flow.xml 웃정의 메인액티비티코드작성 - 애니메이션처리 4. 간단한애니메이션사용하기 간단한애니메이션사용하기 44

12 애니메이션액션 XML 정의 메인액티비티코드만들기 <?xml version=".0" encoding="utf-8"?> <set xmlns:android=" <translate android:fromxdelta="00%p" android:toxdelta="0%p" android:duration="6000" android:repeatcount="3" <alpha android:fromalpha="0.5" android:toalpha="" android:duration="6000" android:repeatcount="3" </set> 위치이동을위한애니메이션액션정의 투명도변경을위한애니메이션액션정의 package org.androidtown.ui.anim;... public class SampleButtonAnimationActivity extends Activity { Animation flowanim; TextView text0; public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); flowanim = AnimationUtils.loadAnimation(this, R.anim.flow); text0 = (TextView) findviewbyid(r.id.text0); Button startbtn = (Button) findviewbyid(r.id.startbtn); startbtn.setonclicklistener(new OnClickListener() { public void onclick(view v) { 애니메이션객체선언 XML 에정의한애니메이션액션정보로딩 4. 간단한애니메이션사용하기 간단한애니메이션사용하기 46 메인액티비티코드만들기 ( 계속 ) 실행화면 flowanim.setanimationlistener(new FlowAnimationListener()); 3 애니메이션리스너설정 4 텍스트뷰객체의 text0.startanimation(flowanim); 애니메이션시작 ); private final class FlowAnimationListener implements Animation.AnimationListener { public void onanimationend(animation animation) { 5 Toast.makeText(getApplicationContext(), " 애니메이션종료됨.", 000).show(); public void onanimationrepeat(animation animation) { public void onanimationstart(animation animation) { 애니메이션종료시토스트메시지표시 4. 간단한애니메이션사용하기 간단한애니메이션사용하기 48

13 PART CH3. 다양한위젯과이벤트활용하기 안드로이드의메뉴 [ 메뉴 ] 버튼은안드로이드가아이폰과다른특징을보여주는것중의하나 [ 메뉴 ] 버튼을누르면숨어있던메뉴가보이게되는데이메뉴를애플리케이션에서구현할때는옵션메뉴 (Option Menu) 라고부름 옵션메뉴를비롯해안드로이드에서제공하는메뉴는크게두가지임 5. 메뉴추가하기 옵션메뉴 - 하드웨어 [ 메뉴 ] 버튼을눌렀을때나타나는메뉴로각각의화면마다설정된주요메뉴임 - 옵션메뉴는최대 6개까지의메뉴아이템을포함할수있으며, 그이상의메뉴아이템을추가하면 "More" 라는메뉴아이템으로표시됨 컨텍스트메뉴 - 화면을길게누르면나타나는메뉴로텍스트뷰의편집상태를바꾸거나할때사용하는메뉴임 - 뷰에설정하여나타나게할수있음 5. 메뉴추가하기 50 메뉴사용하기 메뉴추가하기예제 oncreateoptionsmenu() 와 oncreatecontextmenu() 메소드재정의 메뉴선택시의이벤트처리 컨텍스트메뉴의아이템선택 : oncontextitemselected() 호출 onoptionsitemselected() 메소드와 oncontextitemselected() 메소드는모두 applymenuchoice() public boolean onoptionsitemselected(menuitem item) { return (applymenuchoice(item) public boolean oncontextitemselected(menuitem item) { return (applymenuchoice(item) super.oncontextitemselected(item)); [Reference] 메뉴추가하기예제 -로그인화면에메뉴추가하기 -메뉴이벤트처리하기메인액티비티코드작성 -메인액티비티코드에서메뉴추가 메인액티비티코드작성 -메인액티비티코드에서메뉴이벤트처리코드추가 void Activity.registerForContextMenu (View view) 5. 메뉴추가하기 5 5. 메뉴추가하기 5

14 메인액티비티코드만들기 메인액티비티코드만들기 ( 계속 ) public boolean oncreateoptionsmenu(menu menu) { super.oncreateoptionsmenu(menu); addoptionmenuitems(menu); return true; 옵션메뉴가만들어질때자동호출되는메소드 옵션메뉴에메뉴아이템 private void addoptionmenuitems(menu menu) { 추가 int base = Menu.FIRST; MenuItem item0 = menu.add(base, base, Menu.NONE,"Settings"); MenuItem item0 = menu.add(base, base+, Menu.NONE,"About"); item0.seticon(r.drawable.settings_icon); item0.seticon(r.drawable.about_icon); public boolean onoptionsitemselected(menuitem item) { 4 if (item.getitemid() == ) { Intent intent = new Intent(getBaseContext(), SettingsActivity.class); startactivityforresult(intent, REQUEST_CODE_SETTINGS); 5 else if (item.getitemid() == ) { Intent intent = new Intent(getBaseContext(), AboutDialog.class); startactivityforresult(intent, REQUEST_CODE_ABOUT); 6 return true; 옵션메뉴를눌렀을때의이벤트처리 설정화면띄우기 정보화면띄우기 5. 메뉴추가하기 메뉴추가하기 54 실행화면 컨텍스트메뉴사용하기 메뉴 XML <?xml version=".0" encoding="utf-8"?> <menu xmlns:android=" <item android:id="@+id/settingsmenu" android:title="settings" android:orderincategory="0" android:icon="@drawable/settings_icon" 첫번째메뉴아이템 <item android:id="@+id/aboutmenu" android:title="about" android:orderincategory="" android:icon="@drawable/about_icon" </menu> 두번째메뉴아이템 5. 메뉴추가하기 메뉴추가하기 56

15 컨텍스트메뉴사용하기 인플레이션 PART CH3. 다양한위젯과이벤트활용하기 메뉴를구성하는메뉴아이템들은 XML 로저장한후로딩하여사용할수있음 MenuInflater 객체는 XML 로만들어져있는메뉴아이템들의정보를메뉴객체로만들어줌... public boolean oncreateoptionsmenu(menu menu) { new MenuInflater(getApplicationContext()).inflate(R.menu.sample, menu); return(super.oncreateoptionsmenu(menu)); 6. 입력형식설정하기 메뉴추가하기 57 하드웨어키보드와소프트키보드 키패드설정하기 IMF(Input Method Framework) 입력도구프레임워크 - 기본개념 : 현재사용자가선택한입력방법과애플리케이션간의상호작용을 IMF가조절 - 프레임워크의기본목적 : 안드로이드가다양한하드웨어단말과소프트웨어에사용되면서사용자애플리케이션에필요한좀더좋은입력기술제공 -적용예 실제키보드와버추얼키보드 음성인식 필기인식 등등 키패드와관련된기능은 InputMethodManager 객체를이용해사용가능함 이객체는시스템서비스이므로 getsystemservice() 메소드를이용해참조한후다음과같은메소드를이용해키패드를열거나닫을수있음 boolean showsoftinput(view view, int flags) boolean hidesoftinputfromwindow(ibinder windowtoken, int flags [, ResultReceiver resultreceiver ]) 6. 입력형식설정하기 입력형식설정하기 60

16 입력될데이터의타입지정 숫자 / 패스워드 / 이메일로입력설정 텍스트뷰에입력되는데이터의타입지정방법 -XML 과자바코드에서아래와같은속성과메소드사용가능 android:inputtype=... edittextbox.setrawinputtype(int) 아래는첫글자가대문자입력으로되도록설정한예 <EditText android:id="@+id/edittextbox" android:padding="0px" android:textsize="8sp" android:inputtype="text textcapwords" android:inputtype="number numbersigned numberdecimal". 키보드는숫자만입력할수있도록설정됨. 일반적으로다른숫자이외의키들은보이긴하지만사용할수없음 3. 사용가능한키만입력됨 4. number numbersigned 는숫자만입력됨 5. numberdecimal 는실수만입력됨 패스워드로입력설정 android:inputtype= textpassword" 이메일로입력설정 android:inputtype= text address" 6. 입력형식설정하기 6 6. 입력형식설정하기 6 대표적인 inputtype 속성값 PART CH3. 다양한위젯과이벤트활용하기 inputtype 속성값 설명 number - 숫자 numbersigned -0 보다큰숫자 numberdecimal text textpassword - 정수 - 텍스트 - 패스워드로표시 7. 페이지슬라이딩사용하기 text address - 이메일로표시 phone - 전화번호로표시 time - 시간 date - 날짜 [inputtype 을 textpassword, number, text address 로지정한경우 ] 6. 입력형식설정하기 63

17 페이지슬라이딩 페이지슬라이딩사용하기 뷰의중첩과애니메이션을접목한방식 하나의뷰위에다른뷰를올라가있을때보이거나보이지않는과정을애니메이션으로적용 아래쪽뷰 아래쪽뷰 페이지슬라이딩사용하기예제 - 페이지슬라이딩을이용해뷰보여주기 위쪽뷰 위쪽뷰 메인액티비티의 XML 레이아웃정의 메인액티비티코드작성 열기 Animation 객체적용 닫기 Animation 객체적용 - 메인액티비티레이아웃정의 - 슬라이딩기능넣기 왼쪽방향으로 Translate 오른쪽방향으로 Translate 7. 페이지슬라이딩사용하기 페이지슬라이딩사용하기 66 레이아웃만들기 레이아웃만들기 ( 계속 ) <LinearLayout <LinearLayout android:orientation="vertical" android:layout_height="fill_parent" android:background="#ff5555ff"> <TextView android:layout_width="wrap_content" android:text="base Area" android:textcolor="#ffffffff" </LinearLayout> 첫번째레이아웃 : 바탕레이아웃 android:id="@+id/slidingpage0" android:orientation="vertical" android:layout_width="00dp" android:layout_height="fill_parent" android:layout_gravity="right" android:background="#ffffff66" android:visibility="gone"> <TextView android:layout_width="wrap_content" android:layout_weight="" android:text="area #" android:textcolor="#ff000000" 두번째레이아웃 : 슬라이딩으로보일레이아웃 7. 페이지슬라이딩사용하기 페이지슬라이딩사용하기 68

18 레이아웃만들기 ( 계속 ) 메인액티비티코드만들기 <TextView android:layout_width="wrap_content" android:layout_weight="" android:text="area #" android:textcolor="#ff000000" </LinearLayout> package org.androidtown.ui.sliding;... public class SamplePageSlidingActivity extends Activity { boolean ispageopen = false; 슬라이딩페이지가보이는지여부 <LinearLayout android:orientation="vertical" android:layout_width="wrap_content" android:layout_gravity="right center_vertical" android:background="# "> <Button android:id="@+id/openbtn0" android:layout_width="wrap_content" android:text="open" </LinearLayout> </FrameLayout> 7. 페이지슬라이딩사용하기 69 3 세번째레이아웃 : 버튼이들어있는레이아웃 Animation translateleftanim; Animation translaterightanim; 왼쪽으로이동애니메이션객체 LinearLayout slidingpage0; Button openbtn0; public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); slidingpage0 = (LinearLayout) findviewbyid(r.id.slidingpage0); translateleftanim = AnimationUtils.loadAnimation(this, R.anim.translate_left); translaterightanim = AnimationUtils.loadAnimation(this, R.anim.translate_right); 7. 페이지슬라이딩사용하기 3 오른쪽으로이동애니메이션객체 70 4 슬라이딩으로보여줄페이지와애니메이션객체참조 메인액티비티코드만들기 ( 계속 ) 메인액티비티코드만들기 ( 계속 ) SlidingPageAnimationListener animlistener = new SlidingPageAnimationListener(); 5 translateleftanim.setanimationlistener(animlistener); translaterightanim.setanimationlistener(animlistener); openbtn0 = (Button) findviewbyid(r.id.openbtn0); openbtn0.setonclicklistener(new OnClickListener() { public void onclick(view v) { if (ispageopen) { 6 페이지가열려있으면 slidingpage0.startanimation(translaterightanim); 오른쪽으로애니메이션 else { slidingpage0.setvisibility(view.visible); slidingpage0.startanimation(translateleftanim); ); 7 슬라이딩애니메이션을감시할리스너 페이지가닫혀있으면보이도록한후왼쪽으로애니메이션 private class SlidingPageAnimationListener implements AnimationListener { public void onanimationend(animation animation) { if (ispageopen) { slidingpage0.setvisibility(view.invisible); openbtn0.settext("open"); ispageopen = false; else { openbtn0.settext("close"); ispageopen = true; public void onanimationrepeat(animation animation) { public void onanimationstart(animation animation) { 9 8 페이지가열려있으면안보이도록하고버튼의텍스트를 Open" 으로변경 페이지가닫혀있으면버튼의텍스트를 Close" 로변경 7. 페이지슬라이딩사용하기 7 7. 페이지슬라이딩사용하기 7

19 실행화면 PART CH3. 다양한위젯과이벤트활용하기 8. 뷰플리퍼사용하기 7. 페이지슬라이딩사용하기 73 뷰플리퍼사용하기 뷰플리퍼사용하기예제 하나의화면에서여러개의뷰가전환되며보이는대표적인위젯임 ViewFlipper라는클래스를별도로만들어제공한다는점에서훨씬더많이사용하는방식임 뷰플리퍼와같은형태로구현한대표적인화면이바로애플리케이션런처화면임 뷰플리퍼사용하기예제 - 뷰플리퍼를이용해뷰보여주기 메인액티비티의 XML 레이아웃정의 새로운클래스정의 -메인액티비티레이아웃정의 -뷰플리퍼기능을위한새로운클래스정의 메인액티비티코드작성 [ 삼성갤럭시 S 단말에서뷰플리퍼방식의화면전환 ] - 뷰플리퍼사용코드넣기 8. 뷰플리퍼사용하기 뷰플리퍼사용하기 76

20 레이아웃만들기 뷰플리퍼화면을위한클래스정의 <?xml version=".0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:orientation="vertical" android:layout_height="fill_parent" > <LinearLayout android:orientation="horizontal" android:layout_width="wrap_content" > </LinearLayout> <ViewFlipper android:layout_height="fill_parent" > </ViewFlipper> </LinearLayout> 뷰플리퍼정의 현재페이지를표시할상단의버튼들이들어갈레이아웃 public class ScreenViewFlipper extends LinearLayout implements OnTouchListener { LayoutInflater inflater = (LayoutInflater) 뷰플리퍼화면을위한레이아웃인플레이션 context.getsystemservice(context.layout_inflater_service); inflater.inflate(r.layout.screenview, this, true); buttonlayout = (LinearLayout) findviewbyid(r.id.buttonlayout); flipper = (ViewFlipper) findviewbyid(r.id.flipper); flipper.setontouchlistener(this); LinearLayout.LayoutParams params = new LinearLayout.LayoutParams( LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT); params.leftmargin = 50; indexbuttons = new ImageView[countIndexes]; 3 상단의버튼들객체생성 뷰플리퍼객체에터치이벤트리스너설정 8. 뷰플리퍼사용하기 뷰플리퍼사용하기 78 뷰플리퍼화면을위한클래스정의 ( 계속 ) 뷰플리퍼화면을위한클래스정의 ( 계속 ) views = new TextView[countIndexes]; for(int i= 0; i< countindexes; i++) { indexbuttons[i] = new ImageView(context); if (i == currentindex) { indexbuttons[i].setimageresource(r.drawable.green); else { indexbuttons[i].setimageresource(r.drawable.white); indexbuttons[i].setpadding(0, 0, 0, 0); buttonlayout.addview(indexbuttons[i], params); TextView curview = new TextView(context); curview.settext("view #" + i); curview.settextcolor(color.red); curview.settextsize(3); views[i] = curview; 8. 뷰플리퍼사용하기 79 4 각화면의텍스트뷰들객체생성 flipper.addview(views[i]); private void updateindexes() { for(int i= 0; i< countindexes; i++) { if (i == currentindex) { indexbuttons[i].setimageresource(r.drawable.green); else { indexbuttons[i].setimageresource(r.drawable.white); public boolean ontouch(view v, MotionEvent event) { if(v!= flipper) return false; if(event.getaction() == MotionEvent.ACTION_DOWN) { downx = event.getx(); else if(event.getaction() == MotionEvent.ACTION_UP){ upx = event.getx(); if( upx < downx ) { 8. 뷰플리퍼사용하기 80 5 플리퍼에뷰추가

21 뷰플리퍼화면을위한클래스정의 ( 계속 ) 뷰플리퍼화면을위한클래스정의 ( 계속 ) flipper.setinanimation(animationutils.loadanimation(getcontext(), R.anim.wallpaper_open_enter)); flipper.setoutanimation(animationutils.loadanimation(getcontext(), R.anim.wallpaper_open_exit)); if (currentindex < (countindexes-)) { flipper.shownext(); currentindex++; updateindexes(); else if (upx > downx){ flipper.setinanimation(animationutils.loadanimation(getcontext(), R.anim.push_right_in)); flipper.setoutanimation(animationutils.loadanimation(getcontext(), R.anim.push_right_out)); if (currentindex > 0) { 6 뷰플리퍼에애니메이션설정 7 다음화면을보기위한 shownext() 메소드호출 flipper.showprevious(); currentindex--; updateindexes(); return true; 8 이전화면을보기위한 showprevious() 메소드호출 8. 뷰플리퍼사용하기 8 8. 뷰플리퍼사용하기 8 메인액티비티만들기 실행화면... public class SampleViewFlipperActivity extends Activity { ScreenViewFlipper flipper; public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); ViewGroup.LayoutParams params = new ViewGroup.LayoutParams( ViewGroup.LayoutParams.FILL_PARENT, ViewGroup.LayoutParams.FILL_PARENT); flipper = new ScreenViewFlipper(this); setcontentview(flipper, params); [ 뷰플리퍼로전환되는화면의인덱스를상단의버튼으로표시하는경우 ] 8. 뷰플리퍼사용하기 뷰플리퍼사용하기 84

22 PART CH3. 다양한위젯과이벤트활용하기 프로그레스바사용하기 여러가지화면을구성하고그안에다양한위젯을사용하는데있어서대화상자처럼중간중간상태정보를보여주는가장좋은방법중하나임 9. 프로그레스바사용하기 막대모양 - 작업의진행정도를알려줄수있도록막대모양으로표시함 - style 속성의값을?android:attr/progressBarStyleHorizontal" 로설정함 원모양 - 작업이진행중임을알려줌 - 원모양으로된프로그레스바가반복적으로표시됨 9. 프로그레스바사용하기 86 프로그레스바사용메소드 프로그레스바사용하기예제 [Code] void setprogress (int progress) void incrementprogressby (int diff) 진행률이변경되면 progress 속성으로설정되었던값을바꾸면되는데, 자바코드상에서프로그레스바의현재값을바꾸는대표적인메소드들은다음과같음 프로그레스바사용하기예제 - 프로그레스바로진행상태보여주기 메인액티비티의 XML 레이아웃정의 메인액티비티코드작성 [Code] - 메인액티비티레이아웃정의 - 프로그레스바사용코드넣기 requestwindowfeature(window.feature_progress); 9. 프로그레스바사용하기 프로그레스바사용하기 88

23 레이아웃만들기 메인액티비티만들기 public static final int PROGRESS_DIALOG = 00; <ProgressBar style="?android:attr/progressbarstylehorizontal" android:id="@+id/progressbar0" ProgressDialog progressdialog; public void oncreate(bundle savedinstancestate) { 프로그레스대화상자객체선언 ProgressBar probar = (ProgressBar) findviewbyid(r.id.progressbar0); android:indeterminateonly="false" android:minheight="0dp" android:maxheight="0dp" android:max="00" 프로그레스바정의 probar.setindeterminate(false); probar.setmax(00); probar.setprogress(80); btnshow.setonclicklistener(new OnClickListener() { public void onclick(view v) { 프로그레스바객체참조후최대값과현재값설정 showdialog(progress_dialog); 9. 프로그레스바사용하기 89 ); 9. 프로그레스바사용하기 90 메인액티비티만들기 ( 계속 ) 실행화면 btnclose.setonclicklistener(new OnClickListener() { public void onclick(view v) { if (progressdialog!= null) { 3 프로그레스대화상자없애기 progressdialog.dismiss(); ); public Dialog oncreatedialog(int id) { switch (id) { case (PROGRESS_DIALOG): 4 대화상자생성시호출되는메소드 progressdialog = new ProgressDialog(this); progressdialog.setprogressstyle(progressdialog.style_spinner); progressdialog.setmessage(" 데이터를확인하는중입니다."); return progressdialog; return null; 5 프로그레스대화상자객체생성 9. 프로그레스바사용하기 9 9. 프로그레스바사용하기 9

24 PART CH3. 다양한위젯과이벤트활용하기 시크바사용하기 시크바 (SeekBar) 는프로그레스바를확장하여만들어진것임 프로그레스바의속성을가지고있으면서도사용자가값을조정할수있도록해줌 0. 시크바사용하기 [Code] void onstarttrackingtouch (SeekBar seekbar) void onstoptrackingtouch (SeekBar seekbar) void onprogresschanged (SeekBar seekbar, int progress, boolean fromuser) 0. 시크바사용하기 94 시크바사용하기예제 레이아웃만들기 시크바사용하기예제 - 시크바로화면밝기조절기능구현 메인액티비티의 XML 레이아웃정의 - 메인액티비티레이아웃정의 메인액티비티코드작성 - 시크바사용코드넣기 <LinearLayout android:id="@+id/panel0" android:orientation="vertical" android:padding="0dp" android:gravity="center_horizontal" android:visibility="gone" > <SeekBar android:id="@+id/seekbar0" android:progress="00" android:max="00" 시크바가들어있는레이아웃 시크바정의 0. 시크바사용하기 시크바사용하기 96

25 메인액티비티만들기 메인액티비티만들기 ( 계속 ) public class SampleSeekBarActivity extends Activity { private View panel; private SeekBar seekbar; private TextView text0; private int brightness = 50; public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); panel = findviewbyid(r.id.panel0); text0 = (TextView) findviewbyid(r.id.text0); seekbar = (SeekBar) findviewbyid(r.id.seekbar0); Button showbtn = (Button) findviewbyid(r.id.showbtn); showbtn.setonclicklistener(new View.OnClickListener() { public void onclick(view v) { showpanel(); ); 3 시크바객체기본밝기값시크바보이기메소드호출 seekbar.setonseekbarchangelistener(new MyOnSeekBarChangeListener()); private void showpanel() { Animation animation = AnimationUtils.loadAnimation(this, R.anim.translate_left); seekbar.setprogress(this.brightness); panel.setvisibility(view.visible); panel.startanimation(animation); 5 레이아웃에애니메이션설정 private void setbrightness(int value) { if (value < 0) { value = 0; else if (value > 00) { value = 00; brightness = value; 6 화면밝기설정메소드 4 시크바에리스너설정 0. 시크바사용하기 시크바사용하기 98 메인액티비티만들기 ( 계속 ) 메인액티비티만들기 ( 계속 ) WindowManager.LayoutParams params = getwindow().getattributes(); params.screenbrightness = (float) value / 00; getwindow().setattributes(params); private void hidepanel() { Animation animation = AnimationUtils.loadAnimation(this, R.anim.translate_right); panel.startanimation(animation); 8 패널감추기 panel.setvisibility(view.gone); class MyOnSeekBarChangeListener implements OnSeekBarChangeListener { public void onprogresschanged(seekbar seekbar, int progress, boolean fromuser) { setbrightness(progress); 7 윈도우매니저를이용해밝기설정 text0.settext(" 밝기수준 : " + progress); public void onstarttrackingtouch(seekbar seekbar) { public void onstoptrackingtouch(seekbar seekbar) { hidepanel(); 9 텍스트에표시 0. 시크바사용하기 시크바사용하기 00

26 실행화면 참고문헌 [ References] 기본서적 0, 정재곤, Do it! 안드로이드앱프로그래밍, 이지스퍼블리싱 ( 주 ) Android Website Google Developer s Conference Android SDK Documentation 0. 시크바사용하기 0 References 0