كتابة تطبيق Android لمشجعي الأفلام - الجزء الثاني (التصميم)

مرحبا يا هبر!

في هذه المقالة ، سننظر في عملية إنشاء شاشات استنادًا إلى التخطيطات من الجزء الأول .

تخطيط الشاشة

الشاشة الرئيسية

سوف تحتوي الشاشة الرئيسية على شظايا وقوائم الملاحة. دعنا نكتب القائمة ، بعد إنشاء الرموز. للقيام بذلك ، افتح المجلد القابل للدخول ، انقر فوق جديد وحدد Vector Assets . في النافذة التي تظهر ، انقر فوق Clip Art وحدد أيقونات الإعدادات والبحث والمحتوى . الحجم سوف يترك 24 في 24.

قم بإنشاء ملف سلاسل في مجلد القيم وإضافة الأسطر التالية:

<resources> <string name="title_home">Home</string> <string name="title_search">Search</string> <string name="title_settings">Settings</string> </resources> 

يؤدي وضع كل الخطوط في ملف واحد إلى تبسيط عملية ترجمة التطبيق.
إذا كنت ترغب في إضافة لغة أخرى ، على سبيل المثال ، اللغة الروسية ، فقم بإنشاء ملف باستخدام سمة اللغة ، وحدد اللغة المطلوبة من قائمة اللغة وأضف نفس الأسطر ، بعد ترجمتها.

الآن ننتقل مباشرة إلى إنشاء القائمة. في مجلد القائمة ، قم بإنشاء ملف resourse Menu ، وقم بتسميته " bottom_nav_menu " وأضف الكود التالي إليه:

 <?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@+id/navigation_home" android:icon="@drawable/ic_content_paste_black_24dp" android:title="@string/title_home"/> <item android:id="@+id/navigation_search" android:icon="@drawable/ic_search_black_24dp" android:title="@string/title_search"/> <item android:id="@+id/navigation_settings" android:icon="@drawable/ic_settings_black_24dp" android:title="@string/title_settings"/> </menu> 

قم بإنشاء ملف أنماط في مجلد القيم وإضافة التعليمة البرمجية التالية:

 <resources> <style name="MyLinearLayout"> <item name="android:layout_width">match_parent</item> <item name="android:layout_height">match_parent</item> <item name="android:orientation">vertical</item> </style> </resources> 

تُستخدم الأنماط التي تم إنشاؤها لطرق العرض لفصل ملفات الترميز وملفات الأنماط. أنها تحتوي على سمات التنسيق المسؤولة عن مظهر وسلوك العناصر. أولاً ، يمكنك كتابة جميع السمات في ملف العلامات ، ثم تصديرها إلى ملف الأنماط عن طريق النقر فوق المجموعة التالية: RMB -> Refactor -> Extract -> Style . سوف يكون النمط متاحًا فقط من خلال المشاهدات. اقرأ المزيد عن هذا هنا .

بعد ذلك ، يمكنك المتابعة مباشرةً لإنشاء تخطيط للنشاط. في مجلد " التخطيط" ، قم بإنشاء ملف Resourse Layout ، وقم بتسميته " activity_main " وقم بإضافة التعليمة البرمجية التالية:

 <?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" tools:context=".MainActivity" style="@style/MyLinearLayout"> <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/fragment_container" android:layout_marginBottom="?attr/actionBarSize" /> <android.support.design.widget.BottomNavigationView android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/nav_view" app:menu="@menu/bottom_nav_menu" android:background="#6986c2" android:layout_gravity="bottom"/> </FrameLayout> 

دعونا نرى ما حدث.

علامة تبويب الشاشة الرئيسية

افتح ملف الأنماط وأضف أنماطًا لشريط الأدوات باستخدام TextView و RecyclerView تابع:

  <style name="MyToolbar"> <item name="android:layout_width">match_parent</item> <item name="android:layout_height">wrap_content</item> <item name="android:background">#6986c2</item> </style> <style name="Toolbar_TextView"> <item name="android:layout_width">match_parent</item> <item name="android:layout_height">match_parent</item> <item name="android:gravity">center</item> </style> <style name="MyRecyclerView"> <item name="android:layout_width">match_parent</item> <item name="android:layout_height">match_parent</item> <item name="android:background">#fff</item> </style> 

أضف الأسطر التالية إلى ملف السلاسل :

  <string name="desc_home">Notification list</string> <string name="movie_title">Movie title</string> <string name="default_imdb_rating">IMDb rating: 7,4</string> 

الآن قم بإنشاء تخطيط يسمى " fragment_home " وأضف الكود التالي إليه:

 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" style="@style/MyLinearLayout"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar_home" style="@style/MyToolbar"> <TextView android:text="@string/desc_home" style="@style/Toolbar_TextView"/> </android.support.v7.widget.Toolbar> <android.support.v7.widget.RecyclerView android:id="@+id/recView_home" style="@style/MyRecyclerView"/> </LinearLayout> 

أضف أيقونات الإعلام والإشعار بلا إلى المجلد القابل للدخول.

دعنا ننتقل إلى إنشاء عنصر قائمة. أضف الملف " item_movie " إلى مجلد التخطيط واكتب الكود التالي فيه:

 <?xml version="1.0" encoding="utf-8"?> <android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="120dp" app:cardCornerRadius="16dp" android:layout_marginLeft="16dp" android:layout_marginTop="8dp" android:layout_marginRight="16dp" android:layout_marginBottom="8dp" app:cardBackgroundColor="#00FFFFFF"> <ImageView android:layout_width="98dp" android:layout_height="98dp" app:srcCompat="@mipmap/ic_launcher" android:id="@+id/item_image" android:layout_gravity="center|start" android:layout_marginLeft="10dp"/> <TextView android:text="@string/movie_title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/item_title" android:layout_marginTop="18dp" android:layout_marginLeft="120dp" android:textStyle="bold" android:textColor="@android:color/black" android:ellipsize="end" android:maxLines="1" android:layout_marginRight="16dp"/> <TextView android:text="@string/default_imdb_rating" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/item_rating" android:layout_marginLeft="120dp" android:layout_marginTop="50dp"/> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" app:srcCompat="@drawable/ic_notifications_black_24dp" android:id="@+id/item_notification" android:layout_gravity="bottom|right" android:layout_marginRight="16dp" android:layout_marginBottom="16dp" tools:ignore="VectorDrawableCompat"/> </android.support.v7.widget.CardView> 

لنلقِ نظرة على النتيجة:

بحث علامة التبويب الشاشة

في ملف السلاسل ، أضف العنوان الخاص بشريط الأدوات:

 <string name="desc_settings">Preferences</string> 

وقم بإنشاء تخطيط يسمى " fragment_search " ، مع إضافة كتلة التعليمات البرمجية التالية في وقت واحد:

 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" style="@style/MyLinearLayout"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar_search" style="@style/MyToolbar"> <android.support.v7.widget.SearchView android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/border_search_view" android:layout_marginRight="15dp" android:id="@+id/search_view"/> </android.support.v7.widget.Toolbar> <android.support.v7.widget.RecyclerView android:id="@+id/recView_search" style="@style/MyRecyclerView"/> </LinearLayout> 

دعونا نرى النتيجة:

شاشة لعلامة التبويب إعدادات

تبين أن هذه الشاشة هي الأكثر كثافة ، لأنها تحتوي على عدد قليل من أنماط التكرار.

أضف رمز TextView و CardView إلى ملف الأنماط :

  <style name="MyTextView"> <item name="android:layout_width">wrap_content</item> <item name="android:layout_height">wrap_content</item> <item name="android:textStyle">bold</item> <item name="android:textColor">@android:color/black</item> <item name="android:layout_marginLeft">16dp</item> <item name="android:layout_marginTop">8dp</item> <item name="android:layout_marginBottom">8dp</item> <item name="android:typeface">normal</item> </style> <style name="MyCardView"> <item name="android:layout_width">match_parent</item> <item name="android:layout_height">wrap_content</item> <item name="android:layout_margin">16dp</item> </style> 

أضف أيضًا بضعة أسطر إلى ملف السلاسل :

 <string name="imdb_rating">IMDb rating</string> <string name="default_rating">6</string> <string name="movie_genres">Movie genres</string> 

تحتاج أيضًا إلى إضافة رمز الحدود النجمية إلى المجلد القابل للدوران .

قم بإنشاء تخطيط باسم " fragment_settings " وأضف الكود التالي:

 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" style="@style/MyLinearLayout" android:background="#fff"> <android.support.v7.widget.Toolbar style="@style/MyToolbar" android:id="@+id/toolbar_home" app:title="@string/desc_home"> <TextView android:text="@string/desc_settings" style="@style/Toolbar_TextView"/> </android.support.v7.widget.Toolbar> <android.support.v7.widget.CardView app:cardCornerRadius="16dp" app:cardBackgroundColor="#00FFFFFF" style="@style/MyCardView"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" app:srcCompat="@drawable/ic_star_border_black_24dp" android:layout_gravity="right" android:layout_marginRight="50dp" android:layout_marginTop="8dp" tools:ignore="VectorDrawableCompat"/> <TextView android:text="@string/default_rating" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/rating_value" android:layout_gravity="right" android:layout_marginRight="40dp" android:layout_marginTop="8dp" android:textColor="#666666"/> <TextView android:text="@string/imdb_rating" android:id="@+id/textView" style="@style/MyTextView"/> <SeekBar style="@style/Widget.AppCompat.SeekBar.Discrete" android:layout_width="match_parent" android:layout_height="wrap_content" android:max="10" android:progress="6" android:id="@+id/seek_bar" android:layout_marginLeft="16dp" android:layout_marginTop="50dp" android:layout_marginBottom="20dp" android:layout_marginRight="16dp"/> </android.support.v7.widget.CardView> <android.support.v7.widget.CardView app:cardCornerRadius="16dp" app:cardBackgroundColor="#00FFFFFF" style="@style/MyCardView"> <TextView android:text="@string/movie_genres" style="@style/MyTextView"/> <android.support.v7.widget.RecyclerView android:layout_width="match_parent" android:layout_height="match_parent" android:background="#00FFFFFF" android:layout_marginLeft="16dp" android:layout_marginTop="36dp" android:layout_marginBottom="16dp" android:layout_marginRight="16dp" android:id="@+id/recView_settings"/> </android.support.v7.widget.CardView> </LinearLayout> 

إنشاء عنصر للقائمة. أضف الملف " item_genre " إلى مجلد التخطيط واكتب الكود التالي:

 <?xml version="1.0" encoding="utf-8"?> <CheckBox xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" tools:text="@string/movie_genres" android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/item_check_box" /> 

لنلقِ نظرة على النتيجة:

اختبار التصميم

دعونا نرى عدد مرات إعادة رسم نفس القسم من الشاشة ، أي أنه يتم عمل إضافي.


اللون الأزرق - يعيد رسم مرة واحدة. حسنا.
اللون الأخضر - يعيد رسم مرتين. التحسين المطلوب.
ضوء أحمر اللون - يعيد رسم ثلاث مرات. سيء للغاية
اللون الأحمر - يعيد رسم أكثر من 4 مرات. حدث خطأ ما.
وإذا لم يتم رسم أي شيء ، فلا يتم إعادة رسم المؤامرة. عمل رائع

لماذا كل شيء أحمر في لقطة الثانية؟ تمت إضافة خلفية بيضاء إلى كل من Layout و RecyclerView و CardView ، مما تسبب في تداخل الطبقات. في التصميم الموضح أعلاه ، هذا ليس كذلك ، يوضح المثال فقط التطبيق غير الناجح للأسلوب.

في لقطة الشاشة الأولى ، تم استخدام خلفية واحدة فقط على LinearLayout للجزء الرئيسي ، والذي تم إلغاء إعادة رسمه برمجيًا باستخدام الطريقة التالية:

 window.setBackgroundDrawable(null) 

دعونا نرى كم من الوقت يستغرق لتقديم الإطارات.

Cyan مسؤولة عن الوقت المستخدم لإنشاء وتحديث طريقة العرض.
يمثل الجزء الأرجواني الوقت المستغرق لنقل موارد العرض للتيار.
الأحمر هو الوقت المناسب للرسم.
يشير اللون البرتقالي إلى المدة التي استغرقها المعالج في انتظار GPU لإكمال عمله. إنه مصدر مشاكل الكميات الكبيرة. - الكسندر كليموف

في حالتنا ، يتم رسم جميع علامات التبويب تقريبًا في أقل من 16 مللي ثانية ، أي أسفل الشريط الأخضر. إذا كان الشريط أكبر من هذا الخط ، فقد يتباطأ البرنامج.

استنتاج

في المقالة التالية ، سننظر في العمل مع الخادم ، وبينما يكتب المؤلف ، يمكنك تقييم التصميم الحالي في الاستطلاع أدناه.

إذا بقيت أي نقاط غير واضحة ، اطرح الأسئلة في التعليقات.

إذا كنت تعتقد أن التصميم (XML) يمكن تبسيطه أو تحسينه ، فيرجى الكتابة عنه.