user interface-ui (pamja e aplikacionit)naserkastrati.weebly.com/uploads/3/8/8/3/38831473/... ·...

User Interface-UI(Pamja e aplikacionit)

Ligjërata e pestë

Ligjerues Burim Avdiu

UPZ -Universiteti i Prizrenit

Agjenda

• Përdorimi i “basic views” në Android për dizajnimin e UI

• Përdorimi i “picker views” për paraçitjen itemave në listë

• Përdorimi i “list views” për paraçitjen itemave në listë

• Përdorimi i “specialized fragments”

Hyrje në UI➤ Basic views — Views të zakonshme si TextView, EditText, dhe

Button views

➤ Picker views — Views that enable users to select from a list,

such as the TimePicker and DatePicker views

➤ List views — Views that display a long list of items, such as the

ListView and the SpinnerView views

➤ Specialized fragments — Special fragments that perform

specifi c functions

Përdorimi i “Basic Views”Disa nga pamjet bazike(basic views)

➤ TextView

➤ EditText

➤ Button

➤ ImageButton

➤ CheckBox

➤ ToggleButton

➤ RadioButton

➤ RadioGroup

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

<TextView

android:layout_width=”fill_parent”

android:layout_height=”wrap_content”

android:text=”@string/hello” />

</LinearLayout>

Është një nga pamjet e cila përdorët për të paraqitur tekst për përdoruesit, në

platforma të tjera njihet si Label.

Button, ImageButton, EditText, CheckBox,ToggleButton, RadioButton, and RadioGroup Views

➤ Button — Reprezenton një buton që mund të klikohet

➤ ImageButton — Njët me butonin po ka dhe imazh

➤ EditText — Një subclass e TextView view që lejon me shënua tekst

➤ CheckBox — Një lloj special i butonit që ka dy gjendje : checked/unchecked

➤ RadioGroup and RadioButton —ka dy gjendje : checked/unchecked.

Një RadioGroup përdorët për të bashkuar një ose më shumë RadioButton views,

Vetëm një RadioButton mund të jetë i zgjedhur( checked) në RadioGroup.

➤ ToggleButton — Paraqet gjendjen e butonit si checked/unchecked duke

përdorur indikatorin r dritës.

Ushtrimi detajon këto llojeve të views

Button, ImageButton, EditText, CheckBox,ToggleButton, RadioButton, and RadioGroup Views

Kontrollimi i BasicView me programimPërdor BasicViews projektin e krijuar dhe modifiko klasën BasicViewsActivity.java për të mundësuar kontrollimin e basicviews:

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

btnSave.setOnClickListener(new View.OnClickListener(){

public void onClick(View v) {

DisplayToast(“You have clicked the Save button”);

}

});

RadioGroup radioGroup = (RadioGroup) findViewById(R.id.rdbGp1);

radioGroup.setOnCheckedChangeListener(new OnCheckedChangeListener(){

public void onCheckedChanged(RadioGroup group, int checkedId) {

RadioButton rb1 = (RadioButton) findViewById(R.id.rdb1);

if (rb1.isChecked()) {

DisplayToast(“Option 1 checked!”);

} else {

DisplayToast(“Option 2 checked!”);

}

}

});

Kontrollimi i BasicView me programimToggleButton toggleButton = (ToggleButton) findViewById(R.id.toggle1);

toggleButton.setOnClickListener(new View.OnClickListener()

{

public void onClick(View v) {

if (((ToggleButton)v).isChecked())

DisplayToast(“Toggle button is On”);

else

DisplayToast(“Toggle button is Off”);

}

});

private void DisplayToast(String msg)

{

Toast.makeText(getBaseContext(), msg,

Toast.LENGTH_SHORT).show();

}

ProgressBar ViewProgressBar view ofron informata për detyrat që janë duke u kryer, p.sh nëse jeni

duke bartur shënime nga web dhe ju duhet të jepni informata lidhur me statusin

e bartjes, ProgressBar view është zgjidhja e duhur për këto raste.

Ushtrimi në vijm detajon Progres Bar-in(Progres Dialog) - BasicViews2.

<ProgressBar android:id="@+id/progressbar"

android:layout_width="wrap_content"

android:layout_height="wrap_content" />

progressBar = (ProgressBar) findViewById(R.id.progressbar);

ProgressBar Viewnew Thread(new Runnable()

{

public void run()

{

while (progressStatus < 10)

{ progressStatus = doSomeWork();}

handler.post(new Runnable()

{

public void run()

{progressBar.setVisibility(View.GONE);}

}); //Gone e fshin nga aktiviteti dhe nuk merr hapsir

}

private int doSomeWork()

{

try {Thread.sleep(500);}

catch (InterruptedException e)

{e.printStackTrace();}

return ++progress;

}

}).start();

Kostumizimi i ProgressBar Viewstyle=”@android:style/Widget.ProgressBar.Horizontal” />

// Paraqite horizontalisht progressbarin

handler.post(new Runnable() {

public void run() {

progressBar.setProgress(progressStatus);

}

});// Modifikoje progresbarrin

progressBar.setMax(200);// Me caktu rangun e progressbar-it

AutoCompleteTextView ViewAutoCompleteTextView është e njëjtë me EditText (subclass e EditText) për dallim

nga EditText që parnon vetëm shënime, këtu paraqitet lista që përmban

kombinime që shënohen nga përdoruesi.

Ushtrimi detajon AutoCompleteTextView

<AutoCompleteTextView android:id="@+id/txtShtetet"

android:layout_width="fill_parent"

android:layout_height="wrap_content" />

String [] presidentet={"Ibrahim Rugova","Bujar Sejdiu", "Atifete Jahjaga","Salih

Berish","Bamir Topi","Bujar Elshani"};

ArrayAdapter<String> adapter=new ArrayAdapter<String>(this,

android.R.layout.simple_dropdown_item_1line, presidentet);

AutoCompleteTextView

textView=(AutoCompleteTextView)findViewById(R.id.txtShtetet);

textView.setThreshold(3);

textView.setAdapter(adapter);

PICKER VIEWS - TimePicker ViewZgjedhja e dates dhe kohës që zakonisht kërkohet në app, në Android kemi

TimePicker dhe DatePicker views.

TimePicker view mundëson zgjedhjen e kohës të ditës 24-hour ose AM/PM

Ushtrimi për detajon TimePicker view.

<TimePicker android:id="@+id/timePicker"

android:layout_width="wrap_content"

android:layout_height="wrap_content" />

timePicker=(TimePicker)findViewById(R.id.timePicker);

timePicker.setIs24HourView(true);

public void onClick(View view)

{

Toast.makeText(getBaseContext(), "Koha e zgjedhur është " +

timePicker.getCurrentHour() + ":" + timePicker.getCurrentMinute(),

Toast.LENGTH_SHORT).show();

}

Dialog për paraqitjen e TimePicker ViewSi TimePicker edhe DatePicker i ofron përdoruesit të mund të zgjedh datën.

//Kur thirret show Dialog metoda thirr onCreateDialog

protected Dialog onCreateDialog(int id)

{ switch (id) {

case TIME_DIALOG_ID:

return new TimePickerDialog(this, mTimeSetListener,

hour, minute, false);}

return null;

}

Kur zgjedhim butonin Set

private TimePickerDialog.OnTimeSetListener mTimeSetListener =

new TimePickerDialog.OnTimeSetListener()

{

public void onTimeSet(TimePicker view, int hourOfDay, int minuteOfHour)

{

hour = hourOfDay; minute = minuteOfHour;

SimpleDateFormat timeFormat = new SimpleDateFormat(“hh:mm aa”);

Date date = new Date(0,0,0, hour, minute);

String strDate = timeFormat.format(date);

DatePicker ViewParaqitja e TimePicker View si Dialog Dritare.

Ushtrimi për detajon DatePicker view.

"Data e zgjedhur është " + datePicker.getDayOfMonth()

+ "/" + (datePicker.getMonth()+1) + "/" + datePicker.getYear()

Në dialog dritare

Calendar today = Calendar.getInstance();

yr = today.get(Calendar.YEAR);

month = today.get(Calendar.MONTH);

day = today.get(Calendar.DAY_OF_MONTH);

public void onDateSet(DatePicker view, int year, int monthOfYear, int dayOfMonth)

{yr = year; month = monthOfYear; day = dayOfMonth;

Toast.makeText(getBaseContext(),

“You have selected : “ + (month + 1) +

“/” + day + “/” + year,

Toast.LENGTH_SHORT).show();

}

LIST VIEWS për paraqitjen e item në listList views janë pamje(views) që mundësojn paraqitjen e itemave në listë.

Në Android, kemi : ListView and SpinnerView.

ListView View - ListView paraqet një listë të itemave vertikalisht në scrolling list.

Ushtrimi për detajon ListView.

setListAdapter(new ArrayAdapter<String>(this,

android.R.layout.simple_list_item_1, presidents));//mbushe listen me

public void onListItemClick( ListView parent, View v, int position, long id)

{

Toast.makeText(this, “You have selected “ + presidents[position],Toast.LENGTH_SHORT).show();

}

Kostumizimi the ListViewNë ushtrimin në vijim do të tregojmë se si mund të zgjedhën shumë itema në

ListView dhe si mundësohet filtrimi.

ListView lstView = getListView();

//lstView.setChoiceMode(ListView.CHOICE_MODE_NONE);

//lstView.setChoiceMode(ListView.CHOICE_MODE_SINGLE);

lstView.setChoiceMode(ListView.CHOICE_MODE_MULTIPLE);

lstView.setTextFilterEnabled(true);

Ruajtja e Itemave në strings.xml FileNë ushtrimin në vijim do të tregojmë se si mund të ruajmë shënimet në xml pastaj të i

përdorim në aktivitet për mbushjen e listës.

<string-array name="presidentet_array">

<item>Ibrahim Rugova</item>

<item>Bujar Sejdiu</item>

<item>Atifete Jahjaga</item>

<item>Salih Berish</item>

<item>Bamir Topi</item>

<item>Bujar Elshani</item>

</string-array>

presidentet=getResources().getStringArray(R.array.presidentet_array);

Kontrollimi i Itemave që janë të zgjedhur<Button android:id="@+id/btn"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="Trego Itemat e zgjedhur"

android:onClick="onClick"/>

<ListView android:id="@+id/android:list"

android:layout_width="fill_parent"

android:layout_height="wrap_content" />

public void onClick(View view)

{ ListView lstView = getListView();

String itemsSelected = "Itemat e zgjedhur: \n";

for (int i=0; i<lstView.getCount(); i++)

{

if (lstView.isItemChecked(i)) {

itemsSelected += lstView.getItemAtPosition(i) + "\n";

}

}

Toast.makeText(this, itemsSelected, Toast.LENGTH_LONG).show();

}

Përdorimi i SpinnerViewListView paraqet list të itemave në një aktivitet , por shpesh ju duhet hapësirë për

të vendosur view të tjera në dritare, për këtë nuk mund të përdorim ListView. Në

kësi raste përdorim SpinnerView.

Ushtrimi për detajon SpinnerView.

<Spinner

android:id="@+id/spinner1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:drawSelectorOnTop="true"

/>

Spinner s1 = (Spinner) findViewById(R.id.spinner1);

ArrayAdapter<String> adapter = new ArrayAdapter<String>

(this, android.R.layout.simple_spinner_item, presidents);

s1.setAdapter(adapter);

s1.setOnItemSelectedListener(new OnItemSelectedListener()

Kuptimi i fragmenteve të spec.Si kemi përmendur fragmentet janë “mini-activitiete” që kanë jetën e vetë, nevoitet

të kenë një class që zgjeron klasën bazë Fragment.

Përveç klasës bazë të Fragmenteve, mund të zgjerohen të tjera subclasses për të

krijuar fragmente të specializuara.

Në vijim do të përshkruajm tre subclasses të Fragment:

• ListFragment, DialogFragment, and PreferenceFragment.

ListFragment.

Një list fragment është një fragment që përmban një ListView, bënë paraqitjen e një

liste të itemave nga data source si array, xml fajl,etj.

Një list fragment është i përdorshme si : Fragmenti i parë përmban list të itemave

pasi të zgjidhet një item atëhet në fragmentin tjeter na hapet detajet rrefh itemit që

kemi zgjedhur.

Ushtrimi për detajon ListFragment.

ListFragmnet<?xml version=”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”>

<ListView android:id=”@id/android:list”

android:layout_width=”match_parent”

android:layout_height=”match_parent”

android:layout_weight=”1”

android:drawSelectorOnTop=”false”/>

</LinearLayout>

public class Fragment1 extends ListFragment {

<fragment

android:name=”net.learn2develop.ListFragmentExample.Fragment1”

android:id=”@+id/fragment1”

android:layout_weight=”0.5”

android:layout_width=”0dp”

android:layout_height=”200dp” />

DialogFragmentLloj tjeter i fragmenteve është dialog fragment. Një dialog fragment hapet lartë në

aktivitetit dhe paraqet shënimet. Përdorët kur dëshirojmë që përdoruesit ti ofrohet

mundësi shënimi/zgjedhje para se të ekzekutohet kodi.

Për krijimi e dialog fragment, duhet të zgjerohet klasa bazë DialogFragment.

Ushtrimi për detajon DialogFragment.

PreferenceFragmentLloj tjeter i fragmenteve është dialog fragment. Një dialog fragment hapet lartë në

aktivitetit dhe paraqet shënimet. Përdorët kur dëshirojmë që përdoruesit ti ofrohet

mundësi shënimi/zgjedhje para se të ekzekutohet kodi.

Për krijimi e dialog fragment, duhet të zgjerohet klasa bazë DialogFragment.

Ushtrimi për detajon DialogFragment.

Pyetje

• Si të kemi rezultatin në programim nëse RadioButton është

zgjedhur?

• Hsi të qasemi në string resource në strings.xml fajll?

• Shëno kodin që ka datën aktuale.

• Trego tre fragmentet e spec. dhe përshkruaj secilin prej tyre

Fundi

• Pyetje?