ListView - 15 קרפ · :(ListView ה תא ונרצי ובש יטיביטקאה) MainActivity ב .6...

ListView - 15 פרק layout יורכב מאותו ListView הוא אובייקט המורכב מתאים זהים. כל תא ב ListView

בסיסי:נוכל לראות בדוגמה שלנו שכל תא מורכב מתמונה ושלושה טקסטים (כולל המספר):

בשביל לבנות ListView נעקוב אחר השלבים הבאים:

1.ניצור layout נעצבו כרצוננו את layout זה.בהמשך נדחוף layout זה לכל שורה.

ListView - שמכיל את התכונות שעל כל תא ב java class 2.ניצור

ArrayAdapter<class > שיורש מ MyAdapter משלנו בשם כלשהו לדוגמא class adapter 3.ניצור

constructor 1.נממש

getView 2.נממש את הפונקציה

4.ניצור מבנה נתונים בהתאם לרצוננו ב- ב - MainActivity לדוגמה ArrayList ונוסיף לו נתונים.

5.ניצור מופע של ArrayAdapter ונעביר לו את מבנה הנתונים.

6.נפעיל את הפונקציה setAdapter של ה-ListView ונעביר לה את ה-ArrayAdapter כפרמטר

נריץ

Copyright © 2019 appSchool. Powered by appSchool.co.il

http://www.appschool.co.il/

ListView הוא אובייקט חשוב מאוד וניתן לראות אותו כמעט בכל אתר ואפליקציה.

לדוגמה: כשאנחנו נמצאים באימייל אנחנו רואים ListView של כל המיילים שלנו.

האפליקציה שנבנה תיראה כך:

כל custom cell (תא) ב ListView יראה כך:

נוכל לערוך כל custom cell ולמחוק תאים שאנחנו לא רוצים.

:layout שלב 1 - עריכת

נעצב Layout שיהיה תבנית לכל שורה.

.custom_layout וניתן לו שם כלשהו. לדוגמה Layout ניצור Layout נעמוד על תיקיית



ה- layout בדוגמה שלנו יכיל תמונה, 2 שדות טקסט לכותרת המוצר ומחיר המוצר.<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="horizontal"

android:layout_width="match_parent"

android:layout_height="match_parent">

<ImageView

android:layout_width="50dp"

android:layout_height="50dp"

android:id="@+id/ivProduct" />

<LinearLayout

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:orientation="vertical">

<TextView



android:id="@+id/tvTitle"

android:textSize="20dp"

android:text="title"

android:layout_marginTop="5dp"



android:layout_marginLeft="10dp"

android:textColor="#0e82f5" />

<TextView



android:id="@+id/tvSubTitle"

android:textSize="20dp"

android:text="subtitle"

android:layout_marginTop="5dp"

android:layout_marginLeft="10dp"

android:textColor="#6ef50e" />

</LinearLayout>

<TextView

android:layout_width="match_parent"


android:id="@+id/tvPrice"

android:textColor="#dc130c"

android:textSize="30sp"

android:text="50$"

android:gravity="right"

android:layout_marginRight="20dp"

android:layout_marginTop="20dp" />



<LinearLayout/>

שלב 2 - בניית class שמתאר את התא.



ArrayAdapter שלב 3 - בניית

.BaseAdapter שיורש מ ClassAdapter בשלב הזה נבנה

?Adapter מה תפקיד ה תפקיד ה Adapter הוא הוא לקחת רשימה של Toy (הקלאס שמתאר כל תא) ולשים

אותם לתוך ה ListView, כלומר לשים אותם תא אחרי תא במסודר.

:Toy גנרי של BaseAdapter נבנה קודם כל קלאס שיורש מ

לקלאס שיהיו שתי תכונות:

נבנה גם constructor מתאים:

:BaseAdapter נממש מספר פונקציות של



.getView היא הפונקציה Adapter הפונקציה האחרונה שנממש ב



ברגע שנבנה את ה ListView הפונקציה הזו תרוץ n פעמים (n גודל הרשימה).



MainActivity - 4 שלב

.ListView בשלב הזה נראה איך להשתמש בכל הקלאסים שבנינו ולחבר אותם ל :ListView נבנה XML בקובץ ה



נוסיף תמונות מהמחשב לאפליקציה:

:drawable תוכלו לגרור את התמונות לתיקיה

ניצור bitmap לכל תמונה:



ניצור מופעים של Toy שנוסיף בהמשך לרשימה:

ניצר רשימה מסוג Toy ונוסיף את המופעים של Toy שיצרנו לרשימה:

ניצור Adapter וניתן לו את הרשימה:



ניתן הפניות והאזנה לכפתור (בהמשך נשתמש בכפתור):

תוכלו להריץ עכשיו את האפליקציה ולראות את ה ListView שבניתם :)



:ListView סיכום כל השלבים שעשינו לבניית

.ListView ב (custom cell) שיהיה העיצוב לכל תא custom_layout 1.בנינו 2. בנינו class Toy שישמור את הערכים שבהמשך נכניס לכל תא.

3. בנינו ToyAdapter שמקבל שתי תכונות: Context שהוא הפניה לאקטיביטי שבו ניצור.objects בשם Toy ורשימה של ListView את ה

4. ה ToyAdapter יירש מ BaseAdapter ויממש את הפונקציות:● GetList ● GetItemId ● Count ● This ● GetView

: GetView 5. בפונקציה ●.Inflater לאקטיביטי על מנת להשתמש ב context המרנו את ה ●.View של כל תא ל XML שבנינו לכל תא וכך הפכנו את ה XML ניפחנו" את ה" נתנו הפניות לכל האובייקטים שעל כל תא.● נתנו את הערכים המתאימים לכל אובייקט בתא.●

:(ListView האקטיביטי שבו יצרנו את ה) MainActivity 6. ב העלנו תמונות●●Toy יצרנו מופעים של הוספנו את המופעים לרשימה●●MainActivity כהפניה ל context את הרשימה ו Adapter העברנו ל ●XML שב ListView שיצרנו הפניה ל ListView נתנו ל הוספנו את ה Adapter ל ListView שיצרנו●



:ListView עריכת הנתונים ב בשביל לערוך את הנתונים באחד התאים שב ListView נעקוב אחרי השלבים הבאים:

בדוגמה שלנו לחיצה על אחד התאים תיקח אותנו למסך Edit שבו נוכל לערוך את הערכים שבתא.

שלב 1 - יצירת מסך EditActivity ריק ועיצובו: (אל תשכחו לקשר בין ה XML לקלאס באמצעות

SetContentView()

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView



android:layout_width="100dp" android:layout_height="100dp" android:id="@+id/ivProduct" /> <EditText android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/etTitle" android:textSize="20dp" android:hint="title" android:layout_marginTop="5dp" android:layout_marginLeft="10dp" android:textColor="#0e82f5" /> <EditText android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/etSubTitle" android:textSize="20dp" android:hint="subtitle" android:layout_marginTop="5dp" android:layout_marginLeft="10dp" android:textColor="#6ef50e" /> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/etPrice" android:textColor="#dc130c" android:textSize="30sp" android:hint="50" android:gravity="left" android:layout_marginRight="20dp" android:layout_marginTop="20dp" /> <Button android:layout_width="200dp" android:layout_height="wrap_content" android:id="@+id/btnAddPic" android:textColor="#dc130c" android:textSize="30sp"



android:text="add picture" android:gravity="left" android:layout_marginRight="20dp" android:layout_marginTop="20dp" />

<Button android:layout_width="200dp" android:layout_height="wrap_content" android:id="@+id/btnSave" android:textColor="#dc130c" android:textSize="30sp" android:text="save" android:gravity="left" android:layout_marginRight="20dp" android:layout_marginTop="20dp" /> </LinearLayout>

:ListView שלב 2 - נבנה פונקציית האזנה ללחיצה על תא ב

לשם כך נממש את הממשק ונממש את הפונקציה

ניתן לListView האזנה ללחיצה



EditActivity שלב 3 - עריכת מסך



Edit למקרה שהמשתמש לחץ על לקיחת תמונה ב OnClick שלב 5 - מימוש פונקציה



שלב 6 - הוספת OnActivityResult ב EditActivity לחזרה מהמצלמה

btnSave להאזנה לכפתור השמירה OnClick שלב 7 - הוספת



NotifyDataSetChanged - 8 שלב

תוכלו להריץ עכשיו את האפליקציה ולשנות את הנתונים ב ListView שלכם :)

:ListView הוספת איבר ל

:MainActivity נוסיף כפתור להוספה ב

נצהיר על הכפתור:

ניתן לכפתור הפניה והאזנה ללחיצה:



נממש את פונקציית ההאזנה:

עכשיו כשהמשתמש ילחץ על הכפתור, הוא יעבור ל EditActivity, והגדרנו כבר שבמקרה

ולא העברנו position ה default יהיה -1 וככה המשתמש יוכל להוסיף איבר. נוכל להריץ ולראות את האיבר שהוספנו:



:ListView מחיקת איבר מ לחיצה ארוכה על איבר ב ListView תמחק אותו.

לא לשכוח לממש את הממשק :

ניתן ל ListView האזנה ללחיצה ארוכה:

נממש את הפונקציה:



ListView - 15 קרפ · :(ListView ה תא ונרצי ובש יטיביטקאה) MainActivity ב .6...

Documents

Transcript of ListView - 15 קרפ · :(ListView ה תא ונרצי ובש יטיביטקאה) MainActivity ב .6...