android chapter06 selection widgets

8/2/2019 Android Chapter06 Selection Widgets

1/53

Android

Selection Widgets

Cc Widget cho php chnNotes are based on:

The Busy Coder's Guide to Android Development

by Mark L. Murphy

Copyright 2008-2009 CommonsWare, LLC.

ISBN: 978-0-9816780-0-9&

Android Developers

http://developer.android.com/index.html

6


2/53

2

6. Android UI Selection Widgets

Selection Widgets

2

RadioButton v CheckButton thch hp cho vic chn t mt st cc ty chn.

Khi s la chn ln hn, c th dng cc widget khc nh:listbox, combobox, drop-down list, picture gallery, v.v...

Android data adaptercung cp mt giao din chung cho ccselection list (cc danh sch cho php chn)t cc mng nhcho n cc ni dung t CSDL.

Selection viewcc widget hin th mt danh sch cc la chnm mt adapter cung cp ngi dng thc hin chn la tiy. ListView, Spinner, GridView, AutoCompleteTextView, Galery


3/53

3


Selection Widgets

3

ListView, Spinner, GridView, AutoCompleteTextView, Galery


4/53

4


Selection Widgets

4

Displaying/Selecting Options

DATA

DATA

ADAPTER

Raw data Formatted

& bound

data

Destination layout

Holding a ListView


5/53

5


Selection Widgets

5

Displaying/Selecting Options:

Thng thng, mt data adapterc gn vi mt ListViewy l mt UI widget

dnh ring cho vichin th danh sch

Destination layout

Holding a ListView


6/53

6


Using ArrayAdapter

6

Loi adapter n gin nht l ArrayAdapter. Ta ch bc mt i tng loi ny

ra ngoi mt mng Java hoc java.util.List instance t bn trng mt ListActivity(Ch : khng phi mt Activity).

String[] items={"this", "is", "a","really", "silly", "list"};

new ArrayAdapter(this,android.R.layout.simple_list_item_1,items);

Constructor caArrayAdapterly 3 tham s:

1. Context s dng (thng th thisl con tr n activity hin hnh)2. resource ID ca view s hin th danh sch ( thng l mt ListView ,

chng hn ci c nh ngha trong resource :android.R.layout.simple_list_item_1 trn)

3. Mng hoc list cha cc itemscn hin th trong danh sch


7/53

7


Selection Widgets

7

Example 1: A simple list (1 of 4)Instead ofActivitywe will use a ListActivitywhich is an Android class specializing in

the use of ListViews.


8/53

8


Selection Widgets

8

Example 1 : A simple list (2 of 4)package cis493.selectionwidgets;

import android.app.ListActivity;import android.os.Bundle;import android.view.View;import android.widget.ArrayAdapter;import android.widget.ListView;import android.widget.TextView;

publicclass ArrayAdapterDemo extends ListActivity {

TextView selection;

String[] items = { "this", "is", "a", "really",

"really2", "really3","really4",

"really5", "silly", "list" };

// next time try an empty list such as:

// String[] items = {};

Data source

NOTE: The ListActivityclass is implicitly bound to an object identified by @android:id/list


9/53


10/53

6 A d id UI S l ti Wid t


11/53

11


Selection Widgets

11

Observations on Example1.V d ny dng mt s component dng sn ca Android

1. Trong XML layout ta gi mt widget ListView dng sn vi idandroid:id/list

(includes: multiple lines, black /orange background, light-gray separator line, horiz/vert. scroll-bar)

2. Trong khi t cu hnh ca ArrayAdapter ta dngandroid.R.layout.simple_list_item_1

(indicates how to display a single line of data)

Android SDK c sn mt lot cc layout nh ngha trc, chng nm ti th mc:C:\Android\platforms\android-xx\data\res\layout

SeeAppendix Afor more on this issue.

6 Android UI Selection Widgets


12/53

12


Selection Widgets

12

A Variation on Example1.Ta c th dng Activity thng thng thay cho ListActivity. T nh ngha mt

ListView (thay cho @android:id/list). Gn adapter vi ListView mi.

publicclass Main extends Activity {ListView myListView;

@Override

publicvoidonCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.main);

myListView = (ListView) findViewById(R.id.ListView01);

final String[] items={"this", "is", "a","really", "really2",

"really3", "really4", "really5", "silly", "list"};

ArrayAdapter ad = new ArrayAdapter(this,android.R.layout.simple_list_item_1,

items);

myListView.setAdapter(ad);

}

}



13/53

13


Selection Widgets

13

A Variation on Example1 (cont.) cung cp mt listener cho ListView, thm on m sau vo phng thc

onCreate.

myListView.setOnItemClickListener(new OnItemClickListener() {@Override

publicvoidonItemClick(AdapterView av, View v, int position, long id){

String text = "\n av: " + av.toString()

+ "\n v: " + v.toString()

+ "\n pos:" + position

+ "\n id: " + id+ "\n data:" + items[position];;

Toast.makeText(getApplicationContext(), text, 1).show();

}

});



14/53

14


Selection Widgets

14

Spin Control

Trong Android, Spinnerl widget chn dng drop-down.

Spinner c cng chc nng vi ListView nhng chim t khng

gian hn. Cng nh vi ListView, ta dng adapter lin kt d liu vi

Spinner, dng hm setAdapter()

Thm mt i tng listener nhn chn la t danh sch

(hm setOnItemSelectedListener()).

Dng setDropDownViewResource() cung cp resource IDca multi-line selection list view cn dng.



15/53

15


Selection Widgets

15

Example 2. Using the Spinner

1. Click here

2. Select this option

3. Selected

value



16/53

16


Selection Widgets

16

Example 2. Using the Spinner

You choose the name


17/53



18/53

18

g

Selection Widgets

18

Example 2. Using the Spinner@OverridepublicvoidonCreate(Bundle icicle) {super.onCreate(icicle);

setContentView(R.layout.main);

selection = (TextView) findViewById(R.id.selection);

Spinner spin = (Spinner) findViewById(R.id.spinner);

spin.setOnItemSelectedListener(this);// bind array to UI control to show one-line

ArrayAdapter aa = new ArrayAdapter(this, android.R.layout.simple_spinner_item, items);

// showing the drop-down multi-line window

aa.setDropDownViewResource(

android.R.layout.simple_spinner_dropdown_item);

// associate GUI spinner and adapter

spin.setAdapter(aa);

}

// ////////////////////////////////////////////////////////////////////

publicvoidonItemSelected(AdapterView parent, View v, int position, long id) {

selection.setText(items[position]);

}

publicvoidonNothingSelected(AdapterView parent) {selection.setText("");

}}



19/53

19

g

Selection Widgets

19

GridView

GridView l mt ViewGroup hin th cc phnt trong mt li 2 chiu, c thanh cun.

Cc item c chn t ng vo li bng mtListAdapter.



20/53

20

g

Selection Widgets

20

GridViewSome properties used to determine the number of columns and their sizes:

android:numColumns spells out how many columns there are, or, if you supply a

value of auto_fit, Android will compute the number of columns based on available

space and the properties listed below.

android:verticalSpacing and its counterpart android:horizontalSpacing indicate how

much whitespace there should be between items in the grid.

android:columnWidth indicates how many pixels wide each column should be.

android:stretchMode indicates, for grids with auto_fitfor android:numColumns, whatshould happen for any available space not taken up by columns or spacing .



21/53

21

Selection Widgets

21

GridView

Example: Fitting the View

Suppose the screen is 320 (dip) pixels wide, and we have

android:columnWidth set to 100dip and

android:horizontalSpacing set to 5dip.

Three columns would use 310 pixels (three columns of 100 pixels and two whitespaces of

5 pixels).

With android:stretchMode set to columnWidth, the three columns will each expand by

3-4 pixels to use up the remaining 10 pixels.

With android:stretchMode set to spacingWidth, the two internal whitespaces will each

grow by 5 pixels to consume the remaining 10 pixels.



22/53

22

Selection Widgets

22

Example 3. GridView


23/53

23

Selection Widgets

23

Example 3. GridViewpackage cis493.selectionwidgets;// using a gridview

import android.app.Activity;import android.os.Bundle;import android.view.View;import android.widget.AdapterView;import android.widget.ArrayAdapter;import android.widget.GridView;import android.widget.TextView;

publicclass ArrayAdapterDemo3 extends Activityimplements AdapterView.OnItemClickListener {

TextView selection;

String[] items = { "this", "is", "a","really", "really2", "really3",

"really4", "really5", "silly", "list" };



24/53

24

Selection Widgets

24

Example 3. GridView@OverridepublicvoidonCreate(Bundle icicle) {

super.onCreate(icicle);setContentView(R.layout.main);


GridView gv = (GridView) findViewById(R.id.grid);

ArrayAdapter aa = new ArrayAdapter(this,android.R.layout.simple_list_item_1,

items );

gv.setAdapter(aa);

gv.setOnItemClickListener(this);}

publicvoidonItemClick(AdapterView parent, View v,int position, long id) {

selection.setText(items[position]);

}

}// class



25/53

25

Selection Widgets

25

AutoCompleteTextView

Vi auto-completion, trong khi ngi dng g, phn text nhp cdng lm tit u t lc d liu, so snh phn text nhp vi mt danhsch cc la chn c th.

Matches are shown in a selection listthat, like with Spinner, folds down fromthe field.

The user can either type out a new entry(e.g., something not in the list) or

choose an entry from the listto be the value of the field.

AutoCompleteTextView subclasses EditText, so you can configure all the

standard look-and-feel aspects, such as font face and color.

AutoCompleteTextView has a android:completionThresholdproperty, to

indicate the minimum number of characters a user must enter before the

list filtering begins.



26/53

26

Selection Widgets

26

AutoCompleteTextView

Select this



27/53

27

Selection Widgets

27

Example 4. AutoCompleteTextView

Min. 3 chars to work



28/53

28

Selection Widgets

28

Example 4. AutoCompleteTextViewpackage cis493.selectionwidgets;

import android.app.Activity;import android.os.Bundle;import android.text.Editable;

import android.text.TextWatcher;import android.widget.ArrayAdapter;import android.widget.AutoCompleteTextView;import android.widget.TextView;

publicclass AndDemoUI1 extends Activity implementsTextWatcher {

TextView selection;

AutoCompleteTextView edit;

String[] items = { "this", "is", "a",

"really", "really2", "really3",

"really4", "really5", "silly", "list" };



29/53

29

Selection Widgets

29

Example 4. AutoCompleteTextView@OverridepublicvoidonCreate(Bundle icicle) {

super.onCreate(icicle);setContentView(R.layout.main);


edit = (AutoCompleteTextView) findViewById(R.id.edit);

edit.addTextChangedListener(this);

edit.setAdapter(new ArrayAdapter(this,android.R.layout.simple_dropdown_item_1line, items));

}

publicvoidonTextChanged(CharSequence s, int start, int before, int count) {selection.setText(edit.getText());

}

publicvoidbeforeTextChanged(CharSequence s, int start,int count, int after) {

// needed for interface, but not used

}

publicvoidafterTextChanged(Editable s) {// needed for interface, but not used

}

}



30/53

30

Selection Widgets

30

Gallery Widget

Widget Gallery hin th ccla chn di dng cc

hnh nh.

Image choices are offered

on a contiguous horizontal

mode, you may scrollacross the image-set.



31/53

31

Selection Widgets

31

Gallery Widget - Example



32/53

32

Selection Widgets

32


package cis493.selectionwidgets;

import android.app.Activity;

import android.content.Context;

import android.os.Bundle;

import android.view.View;

import android.view.ViewGroup;import android.widget.AdapterView;

import android.widget.BaseAdapter;

import android.widget.Gallery;

import android.widget.ImageView;

import android.widget.TextView;

import android.widget.AdapterView.OnItemSelectedListener;

public class AndDemoUI1 extends Activity {

// Using Gallery widget. G1 phone resolution: HVGA 320x480 px

// code adapted from:

// C:\Android\platforms\android-1.5\samples\ApiDemos\

// src\com\example\android\apis\view\Galler1.java

TextView mySelection;

Gallery myGallery;



33/53

@Override

public void onCreate(Bundle icicle) {

super.onCreate(icicle);


mySelection = (TextView) findViewById(R.id.mySelection);

// Bind the gallery defined in the main.xml

// Apply a new (customized) ImageAdapter to it.

myGallery = (Gallery) findViewById(R.id.myGallery);

myGallery.setAdapter(new ImageAdapter(this));

myGallery.setOnItemSelectedListener(new OnItemSelectedListener() {

@Override

public void onItemSelected(AdapterView arg0, View arg1,

int arg2, long arg3) {mySelection.setText(" selected option: " + arg2 );

}

@Override

public void onNothingSelected(AdapterView arg0) {

mySelection.setText("Nothing selected");

}

});

}// onCreate 33

Selection Widgets

33




34/53

34

Selection Widgets

34

Gallery Widget - Examplepublicclass ImageAdapter extends BaseAdapter {

/** The parent context */

private ContextmyContext;// Put some images to project-folder: /res/drawable/// format: jpg, gif, png, bmp, ...

privateint[]myImageIds = { R.drawable.image1, R.drawable.image2,

R.drawable.image3, R.drawable.image4 };

/** Simple Constructor saving the 'parent' context. */public ImageAdapter(Context c) {

this.myContext = c;}

// inherited abstract methods - must be implemented

// Returns count of images, and individual IDs

publicint getCount() {returnthis.myImageIds.length;

}

public Object getItem(int position) {return position;

}

publiclong getItemId(int position) {return position;

}



35/53

35

Selection Widgets

35


// Returns a new ImageView to be displayed,

public View getView(int position, View convertView,ViewGroup parent) {

// Get a View to display image data

ImageView iv = new ImageView(this.myContext);iv.setImageResource(this.myImageIds[position]);

// Image should be scaled somehow

//iv.setScaleType(ImageView.ScaleType.CENTER);

//iv.setScaleType(ImageView.ScaleType.CENTER_CROP);

//iv.setScaleType(ImageView.ScaleType.CENTER_INSIDE);

//iv.setScaleType(ImageView.ScaleType.FIT_CENTER);

//iv.setScaleType(ImageView.ScaleType.FIT_XY);

iv.setScaleType(ImageView.ScaleType. FIT_END);

// Set the Width & Height of the individual images

iv.setLayoutParams(new Gallery.LayoutParams(95, 70));

return iv;}

}// ImageAdapter

}// class



36/53

36

Selection Widgets

36

GridView (again)

C th dng GridViewvi la chn l cc hnh nh thay v text.

Cn dng mt ImageAdapter quy nh nhim v cn thchin mi khi mt hnh nh c chn (selected/clicked).

The following example illustrates how to use this control.


l d


37/53

37

Selection Widgets

37

GridView (again)

Aperhaps-- more interesting version ofthe GridView control uses images instead

of text.

The programmer must supply a modified

BaseAdapter to indicate what to do when

an individual image is selected/clicked.

The following example illustrates how to

use this control.


l d


38/53

38

Selection Widgets

38

GridView (again)

main.xml


l i id


39/53

39

Selection Widgets

39

GridView (again)

solo_picture.xml


40/53

40

Selection Widgets

40

GridView (again)package cis493.matos;/* --------------------------------------------------------------------------

References:

Website on which you could make free thumbnails:

http: www.makeathumbnail.com/thumbnail.php

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

GOAL: displaying a number of pictures in a GridView. Example taken from:

http: developer.android.com/guide/tutorials/views/hello-gridview.html

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

Reference: http://developer.android.com/guide/practices/screens_support.html

px Pixels - corresponds to actual pixels on the screen.

dp Density-independent Pixels (dip) - an abstract unit that is based on the

physical density of the screen. These units are relative to a

160 dpi screen, so one dp is one pixel on a 160 dpi screen.

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

*/import android.app.Activity;import android.content.Context;import android.os.Bundle;

import android.view.View;import android.view.ViewGroup;import android.view.View.OnClickListener;import android.widget.AdapterView;import android.widget.BaseAdapter;import android.widget.Button;import android.widget.GridView;import android.widget.ImageView;import android.widget.TextView;import android.widget.Toast;

import android.widget.AdapterView.OnItemClickListener;


S l i Wid


41/53

41

Selection Widgets

41

GridView (again)publicclass GridViewAct1 extends Activity implements OnItemClickListener {

TextView tvMsg;

GridView gridview;

TextView tvSoloMsg;

Integer[] mThumbIds;

ImageView ivSoloPicture;

Button btnBack;

Bundle myMemoryBundle;

@OverridepublicvoidonCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

myMemoryBundle = savedInstanceState;


tvMsg = (TextView )findViewById(R.id.tvMsg);

//initialize array of images with a few pictures

mThumbIds = new Integer[] {

R.drawable.gallery_photo_1, R.drawable.gallery_photo_2,R.drawable.gallery_photo_3, R.drawable.gallery_photo_4,

R.drawable.gallery_photo_5, R.drawable.gallery_photo_6,

R.drawable.gallery_photo_7, R.drawable.gallery_photo_8

};

gridview = (GridView) findViewById(R.id.gridview);

gridview.setAdapter(new ImageAdapter(this));gridview.setOnItemClickListener(this);

}//onCreate


S l i Wid


42/53

42

Selection Widgets

42

GridView (again)// this nested class could also be placed as a separated class

publicclass ImageAdapter extends BaseAdapter {

private ContextmContext;public ImageAdapter(Context c) {

mContext = c;

}publicint getCount() {

returnmThumbIds.length;}

public Object getItem(int position) {Toast.makeText(getApplicationContext(), "Pos: " + position, 1).show();returnnull;}

publiclong getItemId(int position) {return 0;}

// create a new ImageView for each item referenced by the Adapterpublic View getView(int position, View convertView, ViewGroup parent) {

ImageView imageView;

if (convertView == null) {

// if it's not recycled, initialize some attributesimageView = new ImageView(mContext);imageView.setLayoutParams(new GridView.LayoutParams(85, 85));imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);

imageView.setPadding(8, 8, 8, 8); }else {

imageView = (ImageView) convertView;

}

imageView.setImageResource(mThumbIds[position]);

return imageView;}

}// ImageAdapter


S l i Wid


43/53

43

Selection Widgets

43

GridView (again)// a picture in the gallery view has been clicked

@OverridepublicvoidonItemClick(AdapterView parent, View v, int position, longid) {

tvMsg.setText("Position: " + position +

" R.drawable.gallery_photo_" + (position+1) );

// show selected picture in an individual view

showScreen2(position);

}

//////////////////////////////////////////////////////////////////////////privatevoidshowScreen2(int position){

// show the selected picture as a single framesetContentView(R.layout.solo_picture);

tvSoloMsg = (TextView) findViewById(R.id.tvSoloMsg);

ivSoloPicture = (ImageView) findViewById(R.id.imgSoloPhoto);

tvSoloMsg.setText("image " + position);

ivSoloPicture.setImageResource(mThumbIds[position]);

btnBack = (Button) findViewById(R.id.btnBack);

btnBack.setOnClickListener(new OnClickListener() {

@Override

publicvoidonClick(View v) {// redraw the main screen beginning the whole app.

onCreate(myMemoryBundle);

}

});

}//showScreen2

//////////////////////////////////////////////////////////////////////////

}// GridViewAct1


S l ti Wid t


44/53

44

Selection Widgets

44

Customized Lists

Android provides predefined row layouts for displaying simple

lists. However, you may want more control in situations such as:

1. Not every row uses the same layout (e.g., some have one line of text,

others have two)

2. You need to configure the widgets in the rows (e.g., different icons for

different cases)

In those cases, the better option is to create your own subclass

of your desired Adapter.


S l ti Wid t


45/53

45

Selection Widgets

45

Customized Listst to danh sch

to subclass ca Adapter mong mun, ta cn1.override getView(), v

2.T to cc dng trong list.

Phng thc getView()c nhim v tr v mt View i dincho dng v tr cho trc ca adapter.

Example: Sa getView() ta c th c cc icon khc nhau chocc dng trong mt list, y ta mun mt icon cho cc tngn v 1 icon cho cc t di.


S l ti Wid t


46/53

46

Selection Widgets

46

Customized Lists Example: main.xml


S l ti Wid t


47/53

47

Selection Widgets

47

Customized Lists Example: myrow.xml


48/53


S l ti Wid t


49/53

class IconicAdapter extends ArrayAdapter {Activity context;IconicAdapter(Activity context) {

super(context, R.layout.myrow, items);this.context = context;

}

public View getView(int position, View convertView, ViewGroup parent) {LayoutInflater inflater = context.getLayoutInflater();

View row = inflater.inflate(R.layout.myrow, null);TextView label = (TextView) row.findViewById(R.id.label);

ImageView icon = (ImageView) row.findViewById(R.id.icon);

label.setText(items[position]);

if (items[position].length() > 4)icon.setImageResource(R.drawable.delete);else

icon.setImageResource(R.drawable.ok);return (row);

}//getView

}//IconicAdapter

}//AndDemoUI 49

Selection Widgets

49

Customized Lists


S l ti Wid t


50/53

50

Selection Widgets

50

Customized ListsLayoutInflater()

In this case, inflation means the act of converting an XML layoutspecification into the actual tree of View objects the XML

represents.

AnArrayAdapterrequires three arguments: current context, layout

to show the output row, source data items (data to place in the

rows).

The overridden getView() method inflates the layout by custom

allocating icons and texttaken from data source in the user

designed row. Once assembled the View (row) is returned.


S l ti Wid t


51/53

51

Selection Widgets

51

Questions ?


Selection Widgets


52/53

52

Selection Widgets

52

Appendix A. Androids Predefined LayoutsThis is the definition of: simple_list_item_1 . It is just a TextView field namedtext1 centered, large font, and some padding.


Selection Widgets


53/53

Selection Widgets

Appendix A. Androids Predefined LayoutsThis is the definition of: simple_spinner_dropdown_item. Other possible built-in spinner layout is: simple_spinner_item.

android chapter06 selection widgets

Documents