Menulis Aplikasi Android untuk Penggemar Film - Bagian 2 (Desain)

Halo, Habr!

Pada artikel ini, kami akan mempertimbangkan proses pembuatan layar berdasarkan tata letak dari bagian pertama .

Tata letak layar

Layar beranda

Layar utama akan berisi fragmen dan menu navigasi. Mari menulis menu, setelah membuat ikon. Untuk melakukan ini, buka folder yang dapat digambar , klik Baru dan pilih Aset Vektor . Di jendela yang muncul, klik Clip Art dan pilih ikon Pengaturan , Pencarian dan pasta Konten . Ukurannya akan meninggalkan 24 oleh 24.

Buat file string di folder nilai dan tambahkan baris berikut:

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

Menempatkan semua baris dalam satu file akan menyederhanakan lokalisasi aplikasi lebih lanjut.
Jika Anda ingin menambahkan bahasa lain, misalnya, Rusia, buat file dengan atribut Lokal , pilih bahasa yang diinginkan dalam daftar Bahasa dan tambahkan baris yang sama, setelah menerjemahkannya.

Sekarang kita lanjutkan langsung membuat menu. Di folder menu , buat file resourse Menu , beri nama " bottom_nav_menu " dan tambahkan kode berikut ke dalamnya:

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

Buat file gaya di folder nilai dan tambahkan kode berikut:

 <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> 

Gaya yang dibuat digunakan untuk tampilan untuk memisahkan file markup dan file gaya. Mereka mengandung atribut format yang bertanggung jawab untuk penampilan dan perilaku elemen. Pertama, Anda dapat menulis semua atribut dalam file markup, dan kemudian mengekspornya ke file gaya dengan mengklik kombinasi berikut: RMB -> Refactor -> Extract -> Style . Gaya hanya akan tersedia di dalam tampilan. Baca lebih lanjut tentang ini di sini .

Setelah itu, Anda dapat melanjutkan langsung ke membuat tata letak untuk Aktivitas. Di folder tata letak , buat file tata letak Layout , beri nama " activity_main " dan tambahkan kode berikut:

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

Mari kita lihat apa yang terjadi.

Layar tab beranda

Buka file gaya dan tambahkan gaya untuk Bilah Alat dengan TextView dan RecyclerView anak:

  <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> 

Tambahkan baris berikut ke file string :

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

Sekarang buat tata letak yang disebut " fragment_home " dan tambahkan kode berikut ke dalamnya:

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

Tambahkan ikon Notification and Notification none ke folder yang dapat digambar .

Mari beralih ke membuat item daftar. Tambahkan file " item_movie " ke folder tata letak dan tulis kode berikut di dalamnya:

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

Mari kita lihat hasilnya:

Layar tab pencarian

Di file string , tambahkan header untuk Toolbar:

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

Dan buat tata letak yang disebut " fragment_search ", secara bersamaan menambahkan blok kode berikut:

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

Mari kita lihat hasilnya:

Layar untuk tab Pengaturan

Layar ini ternyata menjadi yang paling banyak, karena memiliki beberapa gaya yang berulang.

Tambahkan kode untuk TextView dan CardView ke file gaya :

  <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> 

Juga tambahkan beberapa baris lagi ke file string :

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

Anda juga perlu menambahkan ikon batas Bintang ke folder yang dapat digambar .

Buat tata letak bernama " fragment_settings " dan tambahkan kode berikut:

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

Buat item untuk daftar. Tambahkan file " item_genre " ke folder tata letak dan tulis kode berikut:

 <?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" /> 

Mari kita lihat hasilnya:

Pengujian desain

Mari kita lihat seberapa sering bagian layar yang sama digambar ulang, yaitu, pekerjaan ekstra sedang dilakukan.


Warna biru - digambar ulang satu kali. Bagus
Warna hijau - digambar ulang dua kali. Diperlukan pengoptimalan.
Warna merah terang - menggambar ulang tiga kali. Terlalu buruk
Warna merah - menggambar ulang lebih dari 4 kali. Ada yang salah.
Dan jika tidak ada yang dilukis, maka plotnya tidak digambar ulang. Kerja bagus.

Mengapa semuanya merah pada tangkapan layar kedua? Latar belakang putih ditambahkan ke setiap Layout, RecyclerView, dan CardView, yang menyebabkan lapisan tumpang tindih. Dalam desain yang diuraikan di atas, ini bukan, contohnya hanya menunjukkan aplikasi stilisasi yang tidak berhasil.

Di tangkapan layar pertama, hanya satu latar belakang yang digunakan di LinearLayout untuk fragmen Home, yang menggambar ulang dibatalkan secara terprogram menggunakan metode berikut:

 window.setBackgroundDrawable(null) 

Mari kita lihat berapa lama untuk membuat frame.

Cyan bertanggung jawab atas waktu yang digunakan untuk membuat dan memperbarui Tampilan.
Bagian ungu mewakili waktu yang diperlukan untuk mentransfer sumber daya render aliran.
Merah adalah waktu untuk menggambar.
Warna oranye menunjukkan berapa lama prosesor menunggu GPU menyelesaikan pekerjaannya. Ini adalah sumber masalah dengan jumlah besar. - Alexander Klimov

Dalam kasus kami, hampir semua tab digambar dalam waktu kurang dari 16ms, yaitu di bawah bilah hijau. Jika bilah lebih besar dari garis ini, program mungkin melambat.

Kesimpulan

Pada artikel selanjutnya kami akan mempertimbangkan bekerja dengan server, dan sementara penulis menulisnya, Anda dapat mengevaluasi desain saat ini dalam survei di bawah ini.

Jika ada poin yang masih belum jelas, ajukan pertanyaan di komentar.

Jika Anda berpikir bahwa desain (XML) dapat disederhanakan atau dibuat lebih baik, silakan tulis tentang itu.