학습목표 선언하여디자인을하는방법을이해하고, 실행할수있다. 시작화면을만드는방법과대체리소스를사용하는방법을이해하고실행할수있다. About 과같은상자를구현하고, 테마를적용하는법을이해하고실행할수있다.

Transcription

1 헬로, 안드로이드 3 주차 사용자인터페이스디자인하기 (1) 강대기동서대학교컴퓨터정보공학부

2 학습목표 선언하여디자인을하는방법을이해하고, 실행할수있다. 시작화면을만드는방법과대체리소스를사용하는방법을이해하고실행할수있다. About 과같은상자를구현하고, 테마를적용하는법을이해하고실행할수있다.

3 차례 스도쿠예제소개하기 선언하여디자인하기 시작화면만들기 대체리소스사용하기 About 상자구현하기 테마적용하기 요약 퀴즈 연습문제

4 스도쿠예제소개하기

5 선언하여디자인하기 사용자인터페이스를디자인하는방법 절차적방법 C 나 Java 프로그램코드로 선언적방법 HTML 언어를통해표현하여 안드로이드의경우, 둘다지원 절차적방법 Java 코드 선언적방법 XML 표현 추천하는방법은 XML 표현

6 시작화면만들기 Program name Sudoku Package name org.example.sudoku Activity name Sudoku Application name Sudoku 안드로이드에뮬레이터는항상열어놓음 게임의오프닝화면구성 액티비티 Sudoku.java 리소스 R.java 레이아웃 main.xml ADT 의레이아웃에디터는별로좋지않다

7 Sudoku.java package org.example.sudoku; import android.app.activity; import android.os.bundle; public class Sudoku extends Activity implements OnClickListener { /** Called when the activity is first created. public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); } }

8 R.java /* AUTO-GENERATED FILE. DO NOT MODIFY. * * This class was automatically generated by the * aapt tool from the resource data it found. It * should not be modified by hand. */ package org.example.sudoku; public final class R { public static final class attr { } public static final class drawable { public static final int icon=0x7f020000; } public static final class layout { public static final int main=0x7f030002; } public static final class string { public static final int app_name=0x7f090000; } }

9 레이아웃 상위객체테두리안에서하나이상의하위객체와이들의위치를화면에설정하는동작을포함하는컨테이너 ( 교재 32 쪽 ) FrameLayout LinearLayout RelativeLayout TableLayout 컨테이너 객체들을담는객체

10 @+id/resid 구문 리소스아이디를정의하여이를통해참조할수있음. "

11 main.xml <LinearLayout xmlns:android=" android:layout_height="fill_parent" android:layout_width="fill_parent" android:padding="30dip" android:orientation="horizontal"> <LinearLayout android:orientation="vertical" android:layout_height="wrap_content" android:layout_width="fill_parent" android:layout_gravity="center"> <TextView android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_gravity="center" android:layout_marginbottom="25dip" android:textsize="24.5sp" /> <Button android:layout_width="fill_parent" android:layout_height="wrap_content" /> <Button android:layout_width="fill_parent" android:layout_height="wrap_content" /> <Button android:layout_width="fill_parent" android:layout_height="wrap_content" /> <Button android:layout_width="fill_parent" android:layout_height="wrap_content" /> </LinearLayout> </LinearLayout>

12 시작화면

13 대체리소스사용하기 예를들어, 가로방향을위한레이아웃지정 res/layout-land/main.xml 이외에모든리소스의대체버전을명시하는데에도디렉터리이름에리소스접미사를사용함 언어, 지역, 화소밀도, 해상도, 입력방법등

14 dip 와 sp 단순히픽셀단위로거리를지정하면, 640x480 화면과 1920x1200 화면에서다르게보일것 안드로이드의단위지정 px pixel 픽셀 in inch 인치 mm millimeter 밀리미터 pt point ( 인치의 1/72) dp (density independent pixel) 밀도에독립적인화소, 1 인치당 160 개의점이있는디스플레이에서 1 dp 는 1 px 과같음 dip dip sp (scale independent pixel) 스케일에독립적인화소, dp 와유사하나사용자의글꼴크기설정에의해측정됨

15 res/layout-land/main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:layout_height="fill_parent" android:layout_width="fill_parent" android:padding="15dip" android:orientation="horizontal"> <LinearLayout android:orientation="vertical" android:layout_height="wrap_content" android:layout_width="fill_parent" android:layout_gravity="center" android:paddingleft="20dip" android:paddingright="20dip"> <TextView android:layout_height="wrap_content android:layout_width="wrap_content" android:layout_gravity="center" android:layout_marginbottom="20dip" android:textsize="24.5sp" /> <TableLayout android:layout_height="wrap_content" android:layout_gravity="center" android:layout_width="wrap_content" android:stretchcolumns="*"> <TableRow> <Button /> <Button /> </TableRow> <TableRow> <Button /> <Button /> </TableRow> </TableLayout> </LinearLayout> </LinearLayout>

16 가로방향레이아웃

17 About 상자구현하기 스도쿠에대한정보가있는창이나옴 구현방법 새액티비티를정의하고시작시킴 AlertDialog 클래스를사용해보여줌 하위클래스인 Dialog 클래스를새뷰로팽창시켜보여줌 새액티비티를정의함 About 액티비티 이를위해새레이아웃파일을정의 res/layout/about.xml

18 res/layout/about.xml <?xml version="1.0" encoding="utf-8"?> <ScrollView xmlns:android=" id" android:layout_width="fill_parent" android:layout_height="fill_parent" android:padding="10dip"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" /> </ScrollView>

19 res/values/strings.xml <string name="about_title">about Android Sudoku</string> <string name="about_text">\ Sudoku is a logic-based number placement puzzle. Starting with a partially completed 9x9 grid, the objective is to fill the grid so that each row, each column, and each of the 3x3 boxes (also called <i>blocks</i>) contains the digits 1 to 9 exactly once. </string>

20 About.java package org.example.sudoku; import android.app.activity; import android.os.bundle; public class About extends Activity protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.about); } }

21 Sudoku.java import android.content.intent; import android.view.view; import android.view.view.onclicklistener;... /** Called when the activity is first created. public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); // Set up click listeners for all the buttons View continuebutton = findviewbyid(r.id.continue_button); continuebutton.setonclicklistener(this); View newbutton = findviewbyid(r.id.new_button); newbutton.setonclicklistener(this); View aboutbutton = findviewbyid(r.id.about_button); aboutbutton.setonclicklistener(this); View exitbutton = findviewbyid(r.id.exit_button); exitbutton.setonclicklistener(this); }

22 Sudoku.java public class Sudoku extends Activity implements OnClickListener {... public void onclick(view v) { switch (v.getid()) { case R.id.continue_button: startgame(game.difficulty_continue); break; //... } } case R.id.about_button: Intent i = new Intent(this, About.class); startactivity(i); break; // More buttons go here (if any)... case R.id.new_button: opennewgamedialog(); break; case R.id.exit_button: finish(); break;

23 AndroidManifest.xml 에다음을추가 <activity android:name=".about" > </activity>

24 테마적용하기 <activity android:name=".about" > </activity>

25 요약 선언하여디자인을하는방법을설명하고, 실제예를보였다. 시작화면을만드는방법과대체리소스를사용하는방법을설명하고, 실제예를보였다. About 과같은상자를구현하고, 테마를적용하는법을설명하고, 실제예를보였다.

26 퀴즈 사용자인터페이스를디자인하는방법들은무엇이있는가? 자동으로생성되며리소스와관련이있는클래스는무엇인가? 레이아웃은무엇인가? 컨테이너란무엇인가? 리소스아이디는어떻게정의되는가? 대체리소스를사용해야하는경우는언제인가? 새로운액티비티는어디에등록해야하는가?

27 연습문제 프로그램을실행했을때, 초기화면을선언해보자. 이를위해 xml 파일을정의하고, 액티비티의메서드를수정하자. 선언한초기화면에대해, 가로로회전했을때를위한레이아웃을정의해보자. 새로운액티비티를만들어보자. 어떠한일들을해야하는가?