Paraqitja e Menyve, Imazheve me View (Meny,...

16
Paraqitja e Menyve, Imazheve me View (Meny, Imazhe) Ligjërata e gjashtë Ligjerues Burim Avdiu UPZ -Universiteti i Prizrenit

Transcript of Paraqitja e Menyve, Imazheve me View (Meny,...

Page 1: Paraqitja e Menyve, Imazheve me View (Meny, Imazhe)naserkastrati.weebly.com/uploads/3/8/8/3/38831473/l7-mb-paraqitja… · mundësua krijimin e shpejtë dhe komplete të aplikacioneve.

Paraqitja e Menyve, Imazheve me View

(Meny, Imazhe)Ligjërata e gjashtë

Ligjerues Burim Avdiu

UPZ -Universiteti i Prizrenit

Page 2: Paraqitja e Menyve, Imazheve me View (Meny, Imazhe)naserkastrati.weebly.com/uploads/3/8/8/3/38831473/l7-mb-paraqitja… · mundësua krijimin e shpejtë dhe komplete të aplikacioneve.

Agjenda

• Përdorimi i Gallery, ImageSwitcher, GridView, dhe ImageView

pamjeve(views) për paraqitjen e imazheve

• Si të paraqesim menynë për opsione dhe përmbajtje

• Paraqitja e kohës me AnalogClock dhe DigitalClock

pamjet(views)

• Si të paraqesim ueb përmbajtje me WebView

Page 3: Paraqitja e Menyve, Imazheve me View (Meny, Imazhe)naserkastrati.weebly.com/uploads/3/8/8/3/38831473/l7-mb-paraqitja… · mundësua krijimin e shpejtë dhe komplete të aplikacioneve.

Hyrje në MI me View• Çka mësuam dy orët e fundit?.

• Në këtë kapitull do të vazhdojmë disa views të tjera për me

mundësua krijimin e shpejtë dhe komplete të aplikacioneve.

• Do të mësojmë si të paraqesim imazhet, pastaj krijimi i

menyve, e në fund do të mësojmë si të paraqesim kohën

aktuale dhe përmbajtjeje nga uebi.

Page 4: Paraqitja e Menyve, Imazheve me View (Meny, Imazhe)naserkastrati.weebly.com/uploads/3/8/8/3/38831473/l7-mb-paraqitja… · mundësua krijimin e shpejtë dhe komplete të aplikacioneve.

Gallery View

Galeria është një view që paraqet itemave (si imazhe) në qendër , listë horizontale.

Fig. tregon si duket, galeria kur paraqiten disa imazhe.

Ushtrimi në vijim tregon detaje të paraqitjes

së imazheve në Gallery View

Së pari kemi pamjet në xml GalleryView për paraqitjen e list itemave në mën. horiz.

<Gallery android:id=”@+id/gallery1”

android:layout_width=”fill_parent”

android:layout_height=”wrap_content” />

<ImageView android:id=”@+id/image1”

android:layout_width=”320dp”

android:layout_height=”250dp”

android:scaleType=”fitXY” />

Integer [] imageIDs ={

R.drawable.pic1,R.drawable.pic2,R.drawable.pic3,R.drawable.pic4,

R.drawable.pic5,R.drawable.pic6,R.drawable.pic7};

Page 5: Paraqitja e Menyve, Imazheve me View (Meny, Imazhe)naserkastrati.weebly.com/uploads/3/8/8/3/38831473/l7-mb-paraqitja… · mundësua krijimin e shpejtë dhe komplete të aplikacioneve.

Gallery View

public class ImageAdapter extends BaseAdapter {

public ImageAdapter(Context c) { ... }

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

ImageView imageView;

if (convertView == null) {

imageView = new ImageView(context);

imageView.setImageResource(imageIDs[position]);

imageView.setScaleType(ImageView.ScaleType.FIT_XY);

imageView.setLayoutParams(new Gallery.LayoutParams(100, 70));

}

else { imageView = (ImageView) convertView;}

imageView.setBackgroundResource(itemBackground);

return imageView;

}

}

Page 6: Paraqitja e Menyve, Imazheve me View (Meny, Imazhe)naserkastrati.weebly.com/uploads/3/8/8/3/38831473/l7-mb-paraqitja… · mundësua krijimin e shpejtë dhe komplete të aplikacioneve.

ImageSwitcher-IS

Shpesh na duhet që imazhet mos të paraqiten thjesht, kur zgjidhet ai në Gallery view —mund të nevojitet të kemi anomacione kur kalojmë nga një imazh në tjetrin. Për këtë përdorim IS së bashku me Gallery view.

Ushtrimi në vijim tregon detaje të paraqitjes së imazheve në IS dhe Gallery View

ISActivity zgjeron Activity klasën bazë, gjithashtu implementon ViewFactory.

Për përdorimin e IS, duhet të implementohet ViewFactory interface, e cila krijon një views për të përdorur IS view. Për këtë na duhet të krijojm metodën makeView() :

public View makeView()

{

ImageView imageView = new ImageView(this);

imageView.setBackgroundColor(0xFF000000);

imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);

imageView.setLayoutParams(new ImageSwitcher.LayoutParams(

LayoutParams.FILL_PARENT,

LayoutParams.FILL_PARENT));

return imageView;

}

Page 7: Paraqitja e Menyve, Imazheve me View (Meny, Imazhe)naserkastrati.weebly.com/uploads/3/8/8/3/38831473/l7-mb-paraqitja… · mundësua krijimin e shpejtë dhe komplete të aplikacioneve.

GridView

GridView paraqet itemat në dy dimensione. Mund të përdorim së bashku me

ImageView e imazheve.

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

gridView.setAdapter(new ImageAdapter(this));

gridView.setOnItemClickListener(new OnItemClickListener()

{

public void onItemClick(AdapterView parent,

View v, int position, long id)

{

Toast.makeText(getBaseContext(),

“pic” + (position + 1) + “ selected”,

Toast.LENGTH_SHORT).show();

}

}

Page 8: Paraqitja e Menyve, Imazheve me View (Meny, Imazhe)naserkastrati.weebly.com/uploads/3/8/8/3/38831473/l7-mb-paraqitja… · mundësua krijimin e shpejtë dhe komplete të aplikacioneve.

Përdorimi i Menu View

Menytë përdorën shumë për paraqitjen e opsioneve shtesë, ato nuk janë të

paraqitura në main UI të aplikacionit

Janë dy lloje të menyve në Android:

➤ Options menu — Për paraqitjen e informatave lidhur me aktivitetin e tanishëm .

Thirret kur shtypim butonin MENU.

➤ Context menu — Për paraqitjen e informatave lidhura me view e paraqitur në një

aktivitet. Thirret kur mbajmë shtypur top butonin.

Page 9: Paraqitja e Menyve, Imazheve me View (Meny, Imazhe)naserkastrati.weebly.com/uploads/3/8/8/3/38831473/l7-mb-paraqitja… · mundësua krijimin e shpejtë dhe komplete të aplikacioneve.

Krijimi i Helper Metodave

Para se të krijojmë options and context menus, fillimisht na duhet të krijojmë dy helper

metoda.

Fillimisht krijohet një list e itemave për paraqitjen e menzve brenda, pastaj tjetra ka

eventin që thirret kur përdoruesi zgjedh një item brenda menysë.

App në vijim krijon dy metoda : CreateMenu() dhe MenuChoice().

Metoda CreateMenu() merr një meny argument dhe shton itema e menys në të

Për shtimin e itemave në meny krijohet instanca e klasës MenuItem dhe përdorët

metoda add() e Menu objektit:

MenuItem mnu1 = menu.add(0, 0, 0, “Item 1”);

{

mnu1.setAlphabeticShortcut(‘a’);//shortcut key

mnu1.setIcon(R.drawable.ic_launcher);//imazhi

}

Argumentet janë

groupId — Identifikimi i grup që itemat që duhet të jenë pjesë e menysë. 0 - kur nuk

kemi gr. itemId — Një ID unike, order — Renditja, title — Titulli që duhet të paraqitet.

Page 10: Paraqitja e Menyve, Imazheve me View (Meny, Imazhe)naserkastrati.weebly.com/uploads/3/8/8/3/38831473/l7-mb-paraqitja… · mundësua krijimin e shpejtë dhe komplete të aplikacioneve.

Context Menu

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

Button btn = (Button) findViewById(R.id.button1);

btn.setOnCreateContextMenuListener(this);

}

@Override

public void onCreateContextMenu(ContextMenu menu, View view,

ContextMenuInfo menuInfo)

{

super.onCreateContextMenu(menu, view, menuInfo);

CreateMenu(menu);

}

Page 11: Paraqitja e Menyve, Imazheve me View (Meny, Imazhe)naserkastrati.weebly.com/uploads/3/8/8/3/38831473/l7-mb-paraqitja… · mundësua krijimin e shpejtë dhe komplete të aplikacioneve.

Options Menu

Metoda MenuChoice() merr një MenuItem argument dhe shikon ID për të caktuar

itemin e zgjedhur në menymenu për paraqitjen e mesazhit.

public boolean onCreateOptionsMenu(Menu menu) {

super.onCreateOptionsMenu(menu);

CreateMenu(menu);return true;

}

public boolean onOptionsItemSelected(MenuItem item)

{return MenuChoice(item);}

<uses-sdk android:

minSdkVersion=”10” />

Page 12: Paraqitja e Menyve, Imazheve me View (Meny, Imazhe)naserkastrati.weebly.com/uploads/3/8/8/3/38831473/l7-mb-paraqitja… · mundësua krijimin e shpejtë dhe komplete të aplikacioneve.

Ora digjitale dhe analoge

<?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” >

<AnalogClock

android:layout_width=”wrap_content”

android:layout_height=”wrap_content” />

<DigitalClock

android:layout_width=”wrap_content”

android:layout_height=”wrap_content” />

</LinearLayout>

Page 13: Paraqitja e Menyve, Imazheve me View (Meny, Imazhe)naserkastrati.weebly.com/uploads/3/8/8/3/38831473/l7-mb-paraqitja… · mundësua krijimin e shpejtë dhe komplete të aplikacioneve.

WebView

WebView lejon bashkangjitjen e një web browser në aktivitetin tuaj.

Shpesh na duhet që aplikacioni i jonë të ketë disa përmbajtje nga webi, si harta ose

shërbime të tjera .

Në vijim po paraqesim shembullin:

wv.loadUrl(

“http://chart.apis.google.com/chart”+

“?chs=300x225”+

“&cht=v”+

“&chco=FF6342,ADDE63,63C6DE” +

“&chd=t:100,80,60,30,30,30,10” +

“&chdl=A|B|C”);

Metoda setBuiltInZoomControls() :

WebSettings webSettings = wv.getSettings();

webSettings.setBuiltInZoomControls(true);

Page 14: Paraqitja e Menyve, Imazheve me View (Meny, Imazhe)naserkastrati.weebly.com/uploads/3/8/8/3/38831473/l7-mb-paraqitja… · mundësua krijimin e shpejtë dhe komplete të aplikacioneve.

WebView

WebView wv = (WebView) findViewById(R.id.webview1);

final String mimeType = “text/html”;

final String encoding = “UTF-8”;

String html = “<H1>A simple HTML page</H1><body>” +

“<p>The quick brown fox jumps over the lazy dog</p>” +

“</body>”;

wv.loadDataWithBaseURL(“”, html, mimeType, encoding, “”);

WebView wv = (WebView) findViewById(R.id.webview1);

wv.loadUrl(“file:///android_asset/Index.html”);

Page 15: Paraqitja e Menyve, Imazheve me View (Meny, Imazhe)naserkastrati.weebly.com/uploads/3/8/8/3/38831473/l7-mb-paraqitja… · mundësua krijimin e shpejtë dhe komplete të aplikacioneve.

Pyetje• Çka është qëllimi i ImageSwitcher?

• Përmend dy metodat që duhet të mbishkruhen për të implementuar njëoptions menu në aktivitet.

• Përmend dy metodat që duhet të mbishkruhen për të implementuar njëcontext menu në aktivitet.

• Cilat janë mënyrat e hapjes së app me web boriwser përmes Android?

• Çka është Gallery View, ImageView, GridViw, Analog/Digital Clock

Page 16: Paraqitja e Menyve, Imazheve me View (Meny, Imazhe)naserkastrati.weebly.com/uploads/3/8/8/3/38831473/l7-mb-paraqitja… · mundësua krijimin e shpejtë dhe komplete të aplikacioneve.

Fundi

• Pyetje?