מונה נקודות — אפליקציית Android ראשונה

פותחים את העורך. בחרו Design בפינה הימנית העליונה של העורך. ב־Palette נמצאים הרכיבים שאפשר לגרור. Component Tree מציג מה נמצא בתוך כל מכל ובאיזה סדר. ב־Attributes משנים את המאפיינים של הרכיב המסומן. אם אחת החלוניות מקופלת, לחצו על הלשונית שלה.

מחליפים את המכל הפנימי. ב־Component Tree לחצו לחיצה ימנית על ConstraintLayout, בחרו Convert view…, סמנו LinearLayout ולחצו Apply. ההמרה משאירה את הרכיבים הקיימים, כולל Next, בתוך המכל. ל־NestedScrollView יש מקום למכל אחד ישיר, וההמרה משתמשת במכל שכבר נמצא שם.

סמנו את ה־LinearLayout. חפשו ב־Attributes את orientation ובחרו vertical. השאירו את layout_width על match_parent ושנו את layout_height ל־wrap_content. חפשו gravity, פתחו את קבוצת האפשרויות בשם הזה וסמנו center_horizontal כדי למרכז את הרכיבים לרוחב.

גוררים תווית לניקוד. סמנו בעץ את textview_first שמציג את הטקסט לדוגמה, ומחקו אותו עם Delete. מתוך Palette > Common גררו TextView אל שורת ה־LinearLayout בעץ. אם התווית מופיעה אחרי button_first, גררו את שורת התווית בעץ אל קו ההכנסה שמעל הכפתור.

סמנו את התווית החדשה וקבעו לה את המאפיינים הבאים. בשדה id הקלידו את השם בדיוק כפי שמופיע בטבלה, הקישו Enter ואשרו Refactor אם מופיע.

התווית ריקה בשלב הזה. בשלב 3 קוד ה־Java יציג בה את ה־0.

אפשר להוסיף מעט רווח לפני Next. סמנו את button_first, חפשו layout_marginTop וקבעו 16dp. עם wrap_content רוחב הכפתור נקבע לפי התוכן שלו. חזו מה יקרה אם תשנו את layout_width ל־match_parent, בדקו בתצוגה והחזירו ל־wrap_content.

משנים את כותרת המסך. פתחו app > res > values > strings.xml ולחצו Open editor כדי לפתוח את Translations Editor. בשורת first_fragment_label לחצו פעמיים על התא בעמודת Default Value, הקלידו מונה נקודות והקישו Enter.

בחרו Split כדי לראות את ה־XML ואת התצוגה המקדימה יחד.

ערכו רק את המכל הפנימי לפי ההשוואה. שורות עם + הן שורות להוספה, ושורות עם - הן שורות להסרה. הסימנים עצמם שייכים להשוואה.

     tools:context=".FirstFragment">

-    <androidx.constraintlayout.widget.ConstraintLayout
+    <LinearLayout
         android:layout_width="match_parent"
-        android:layout_height="match_parent"
+        android:layout_height="wrap_content"
+        android:gravity="center_horizontal"
+        android:orientation="vertical"
         android:padding="16dp">
+
+        <TextView
+            android:id="@+id/textview_score"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:textSize="32sp"
+            tools:text="0" />

         <Button
             android:id="@+id/button_first"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
-            android:text="@string/next"
-            app:layout_constraintBottom_toTopOf="@id/textview_first"
-            app:layout_constraintEnd_toEndOf="parent"
-            app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintTop_toTopOf="parent" />
-
-        <TextView
-            android:id="@+id/textview_first"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
             android:layout_marginTop="16dp"
-            android:text="@string/lorem_ipsum"
-            app:layout_constraintBottom_toBottomOf="parent"
-            app:layout_constraintEnd_toEndOf="parent"
-            app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintTop_toBottomOf="@id/button_first" />
-    </androidx.constraintlayout.widget.ConstraintLayout>
+            android:text="@string/next" />
+    </LinearLayout>
 </androidx.core.widget.NestedScrollView>

מצאו ב־Split את textview_score ואת button_first. wrap_content נותן לפקד רוחב לפי התוכן שלו. match_parent נותן לו את הרוחב שהמכל מעמיד לרשותו. נבאו מה יקרה לרוחב הכפתור Next בשינוי הבא, ואז בדקו ב־Split.

<Button
    android:id="@+id/button_first"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"

<Button
    android:id="@+id/button_first"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"

החזירו את הרוחב ל־wrap_content לפני שממשיכים.

tools:text="0" מיועד לתצוגה המקדימה בעורך. כדי שה־0 יופיע גם באמולטור, נציג את ערכו של המשתנה מתוך Java.

ב־app > res > values > strings.xml שנו את הערך של first_fragment_label. זו הכותרת שמופיעה בסרגל העליון של המסך הראשון.

<!-- Strings used for fragments for navigation -->
<string name="first_fragment_label">First Fragment</string>
<string name="second_fragment_label">Second Fragment</string>

<!-- Strings used for fragments for navigation -->
<string name="first_fragment_label">מונה נקודות</string>
<string name="second_fragment_label">Second Fragment</string>

1. ב־Design גררו Button מ־Palette > Common אל קו ההכנסה שבין textview_score ל־button_first ב־Component Tree. בדקו שהכפתור החדש מופיע בתוך ה־LinearLayout, לפני Next.
2. סמנו את הכפתור החדש. ב־Attributes הגדירו id לערך button_plus ואת layout_width ו־layout_height ל־wrap_content.

3. ליד המאפיין text לחצו על סמל בחירת המשאב. בחלון Pick a Resource לחצו + > String Value.

   

4. בשדה Resource name הקלידו score_add, ובשדה Resource value הקלידו הוספת נקודה. השאירו את strings.xml ואת values כפי שהם. לחצו OK כדי ליצור את המחרוזת, ואז OK בחלון הבחירה כדי לשייך אותה לכפתור.

   

המחרוזת נשמרת ב־strings.xml בשם score_add. הכפתור מפנה אליה, כך שאפשר לשנות את הכיתוב במקום אחד.

ב־strings.xml הוסיפו את מחרוזת הכפתור לפני </resources>.

+    <string name="score_add">הוספת נקודה</string>
 </resources>

ב־fragment_first.xml הוסיפו כפתור בתוך ה־LinearLayout, בין הטקסט של הניקוד לכפתור Next.

+        <Button
+            android:id="@+id/button_plus"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:text="@string/score_add" />
+
         <Button
             android:id="@+id/button_first"

גררו Button אל קו ההכנסה שבין button_plus ל־button_first. הגדירו id לערך button_minus ורוחב וגובה של wrap_content. דרך בורר המשאבים של text צרו ובחרו מחרוזת בשם score_subtract עם הטקסט הפחתת נקודה, כמו בשלב 4.

בדקו את סדר הרכיבים בעץ. התווית, שני כפתורי הניקוד ו־Next נמצאים כולם באותה רמת הזחה בתוך ה־LinearLayout.

+        binding.buttonMinus.setOnClickListener(v -> {
+            score--;
+            showScore();
+        });
         binding.buttonFirst.setOnClickListener(v ->

אחרי רצף הלחיצות הראשון יופיע ‎−1. ההוספה הבאה תחזיר את התצוגה ל־0. שני המאזינים משנים את אותו השדה וקוראים לאותה מתודת תצוגה.

גררו Button בין button_minus ל־button_first, קבעו id לערך button_reset ורוחב וגובה של wrap_content. צרו ובחרו משאב טקסט בשם score_reset עם הערך איפוס.

ב־strings.xml הוסיפו לפני </resources>.

<string name="score_reset">איפוס</string>

ב־fragment_first.xml הוסיפו את הכפתור אחרי כפתור ההפחתה ולפני Next.

<Button
    android:id="@+id/button_reset"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/score_reset" />

ב־onViewCreated הוסיפו את המאזין לפני המאזין של Next.

binding.buttonReset.setOnClickListener(v -> {
    score = 0;
    showScore();
});

אחרי שתי לחיצות על הפחתה עדיין מוצג 0, אבל score כבר שווה ‎−2. ההוספה הבאה משנה אותו ל־‎−1 וקוראת ל־showScore(), ולכן עכשיו המסך מציג ‎−1.