ECWM511 MOBILE APPLICATION DEVELOPMENT Lecture 2: Designing the User Interface

flosssnailsΚινητά – Ασύρματες Τεχνολογίες

10 Δεκ 2013 (πριν από 3 χρόνια και 8 μήνες)

82 εμφανίσεις

ECWM511MOBILEAPPLICATIONDEVELOPMENT
Lecture2:DesigningtheUserInterface
DrDimitrisC.Dracopoulos
1
DesigningaSudokuUserInterface
Sudokupuzzle:
Agridofeighty-onetiles(9x9)
Trytofilltheminwithnumberssothateachcolumn,eachrow,andeachofthethree-by-three
boxescontainsthenumbers1through9onlyonce
Whenthegamestarts,someofthenumbers(thegivens)arealreadyfilledin.Alltheplayerhas
todoissupplytherest
AtrueSudokupuzzlehasonlyoneuniquesolution
2/36
DesigningaSudokuUserInterface(cont’ed)
3/36
2
CreatingtheInitialProgram
TheSudoku.javafile:
packageorg.example.sudoku;
importandroid.app.Activity;
importandroid.os.Bundle;
publicclassSudokuextendsActivity{
/**Calledwhentheactivityisfirstcreated.*/
@Override
publicvoidonCreate(BundlesavedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
}
4/36
Themain.xmlfile
Insidetheres→layoutdirectorythemain.xml:
<?xmlversion="1.0"encoding="utf-8"?>
<LinearLayoutxmlns:android="http://schemas.android.com
/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello"
/>
</LinearLayout>
5/36
3
AndroidLayouts
Somecommonlayouts:
LinearLayout:Arrangesitschildreninasinglecolumnorrow.
FrameLayout:Arrangesitschildrensotheyallstartatthetopleftofthescreen.Thisisusedfor
tabbedviewsandimageswitchers
RelativeLayout:Arrangesitschildreninrelationtoeachotherortotheparent.Thisisoften
usedinforms
TableLayout:Arrangesitschildreninrowsandcolumns,similartoanHTMLtable
6/36
LayoutParameters
Someparametersarecommontoalllayouts:
xmlns:android="http://schemas.android.com/apk/res/android":DefinestheXML
namespaceforAndroid.Youshoulddefinethisonce,onthefirstXMLtaginthefile
android:layout
width="fill
parent",android:layout
height="fill
parent":Takes
uptheentirewidthandheightoftheparent(inthiscase,thewindow)
Possiblevalues:
fill
parent
wrap
content
7/36
4
CreatingtheOpeningScreen
Modifymain.xmlasfollows:
<?xmlversion="1.0"encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/main_title"/>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/continue_label"/>
8/36
CreatingtheOpeningScreen(cont’ed)
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/new_game_label"/>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/about_label"/>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/exit_label"/>
</LinearLayout>
9/36
5
StringswithintheXMLfile
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/new_game_label"/>
The@string/residsyntaxreferstostringsintheres/values/strings.xmlfile.
10/36
Thestrings.xmlfileforSudoku
Foundinsidetheres/valuesdirectory:
<?xmlversion="1.0"encoding="utf-8"?>
<resources>
<stringname="app_name">Sudoku</string>
<stringname="main_title">AndroidSudoku</string>
<stringname="continue_label">Continue</string>
<stringname="new_game_label">NewGame</string>
<stringname="about_label">About</string>
<stringname="exit_label">Exit</string>
</resources>
11/36
6
InitialOpeningScreen
12/36
RevisingtheInitialScreen
Somecosmeticchanges:
Titletextlargerandcentered
Buttonssmaller
Differentbackgroundcolor
13/36
7
DefiningtheBackgroundColour
Createfileres/values/colors.xml:
<?xmlversion="1.0"encoding="utf-8"?>
<resources>
<colorname="background">#3500ffff</color>
</resources>
14/36
Newmain.xmlforRevisedOpeningScreen
<?xmlversion="1.0"encoding="utf-8"?>
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
android:background="@color/background"
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:text="@string/main_title"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
15/36
8
Newmain.xmlforRevisedOpeningScreen(cont’ed)
android:layout_gravity="center"
android:layout_marginBottom="25dip"
android:textSize="24.5sp"/>
<Button
android:id="@+id/continue_button"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/continue_label"/>
<Button
android:id="@+id/new_button"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/new_game_label"/>
16/36
Newmain.xmlforRevisedOpeningScreen(cont’ed)
<Button
android:id="@+id/about_button"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/about_label"/>
<Button
android:id="@+id/exit_button"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/exit_label"/>
</LinearLayout>
</LinearLayout>
17/36
9
UnitsandCreatingResourceIDs
Thesyntax@+id/residcreatesanewresourceIDwhichothercodecanuseit.E.g.
@+id/about
buttondefinestheIDfortheAboutbutton,whichcanbeusedtomakesomething
happenwhentheuserpressesthatbutton.
Thefollowingcanbeusedasunitsfordefiningspacing:
px(pixels):Dotsonthescreen.
in(inches):Sizeasmeasuredbyaruler.
mm(millimeters):Sizeasmeasuredbyaruler.
pt(points):1/72ofaninch.
dp(density-independentpixels):Anabstractunitbasedonthedensityofthescreen.Ona
displaywith160dotsperinch,1dp=1px.
18/36
UnitsandCreatingResourceIDs(cont’ed)
dip:Synonymfordp,usedmoreofteninGoogleexamples.
sp(scale-independentpixels):Similartodpbutalsoscaledbytheusersfontsizepreference.
Usespunitfortextsizes;dipunitforeverythingelse.
19/36
10
RevisedOpeningScreen
20/36
UsingAlternateResources
PressingCTRL-F11toswitchtolandscapemodecausestheExitbuttontogooffthebottomofthe
screen!
Solution:
Createadifferentlayoutforlandscapemode.
21/36
11
CreatingaResourceforLandscapeMode
Createthefileres/layout-land/main.xml:
<?xmlversion="1.0"encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:background="@color/background"
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">
22/36
CreatingaResourceforLandscapeMode(cont’ed)
<TextView
android:text="@string/main_title"
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_width="wrap_content"
android:layout_gravity="center"
android:stretchColumns="*">
<TableRow>
<Button
android:id="@+id/continue_button"
android:text="@string/continue_label"/>
23/36
12
CreatingaResourceforLandscapeMode(cont’ed)
<Button
android:id="@+id/new_button"
android:text="@string/new_game_label"/>
</TableRow>
<TableRow>
<Button
android:id="@+id/about_button"
android:text="@string/about_label"/>
<Button
android:id="@+id/exit_button"
android:text="@string/exit_label"/>
</TableRow>
</TableLayout>
</LinearLayout>
</LinearLayout>
24/36
RevisedOpeningScreeninLandscapeMode
25/36
13
ImplementinganAboutBox
Canbeaccomplishedindifferentways:
DefineanewActivity,andstartit.
UsetheAlertDialogclass,andshowit.
SubclassAndroidsDialogclass,andshowthat.
26/36
CreatinganewActivityfortheAboutBox
Createfileres/layout/about.xml:
<?xmlversion="1.0"encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/
res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="10dip">
<TextView
android:id="@+id/about_content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/about_text"/>
</ScrollView>
27/36
14
CreatinganewActivityfortheAboutBox(cont’ed)
AddstringsforthetitleoftheAboutdialogboxandthetextitcontainsto
res/values/strings.xml:
<stringname="about_text">\
Sudokuisalogic-basednumberplacementpuzzle.
Startingwithapartiallycompleted9x9grid,the
objectiveistofillthegridsothateach
row,eachcolumn,andeachofthe3x3boxes
(alsocalled<i>blocks</i>)containsthedigits
1to9exactlyonce.
</string>
HTMLformattingisallowed!
28/36
TheAboutActivityCode
TheAboutactivityshouldbedefinedinafileAbout.java:
packageorg.example.sudoku;
importandroid.app.Activity;
importandroid.os.Bundle;
publicclassAboutextendsActivity{
@Override
protectedvoidonCreate(BundlesavedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.about);
}
}
29/36
15
TheAboutActivityCode(cont’ed)
TheAboutactivityneedstobelinkedintheSudokuclasscreatedinfileSudoku.java.
Thefollowingimportshavetobeadded:
importandroid.content.Intent;
importandroid.view.View;
importandroid.view.View.OnClickListener;
30/36
TheAboutActivityCode(cont’ed)
andmethodonCreateshouldbeextendedas:
@Override
publicvoidonCreate(BundlesavedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
//Setupclicklistenersforallthebuttons
ViewcontinueButton=findViewById(R.id.continue_button);
continueButton.setOnClickListener(this);
ViewnewButton=findViewById(R.id.new_button);
newButton.setOnClickListener(this);
ViewaboutButton=findViewById(R.id.about_button);
aboutButton.setOnClickListener(this);
ViewexitButton=findViewById(R.id.exit_button);
exitButton.setOnClickListener(this);
}
31/36
16
TheAboutActivityCode(cont’ed)
ThefollowingmethodshouldalsobedefinedintheSudokuclassasitshouldnowbeimplementing
theOnClickListenerinterface:
publicclassSudokuextendsActivity
implementsOnClickListener{
//...
publicvoidonClick(Viewv){
switch(v.getId()){
caseR.id.about_button:
Intenti=newIntent(this,About.class);
startActivity(i);
break;
//Morebuttonsgohere(ifany)...
}
}
}
32/36
TheAboutActivityCode(cont’ed)
Finally,aseveryotheractivity,theAboutactivityshouldbedeclaredintheAndroidManifest.xml
fileatthebottom:
<activityandroid:name=".About"
android:label="@string/about_title">
</activity>
33/36
17
TheAboutScreen
34/36
ApplyingaTheme
AthemeisacollectionofstylesthatoverridethelookandfeelofAndroidwidgets.
Androidispackagedwithseveralthemesthatyoucanreferencebyname,oryoucanmakeup
yourownthemebysubclassingexistingonesandoverridingtheirdefaultvalues.
Tochangethetheme,opentheAndroidManifest.xmlagain,andchangethedefinitionoftheAbout
activitysoithasathemeproperty:
<activityandroid:name=".About"
android:label="@string/about_title"
android:theme="@android:style/Theme.Dialog">
</activity>
35/36
18
TheRevisedAboutScreenwithaTheme
36/36
19