user interface-ui (pamja e aplikacionit)naserkastrati.weebly.com/uploads/3/8/8/3/38831473/... ·...
TRANSCRIPT
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?