Hola Habr!
En este artículo, consideraremos el proceso de creación de pantallas basadas en los diseños de la
primera parte .
Diseño de pantalla
Pantalla de inicio
La pantalla principal contendrá fragmentos y menús de navegación. Escribamos el menú, después de crear los íconos. Para hacer esto, abra la carpeta
dibujable , haga clic en
Nuevo y seleccione
Activos vectoriales . En la ventana que aparece, haga clic en
Imágenes prediseñadas y seleccione los
iconos Configuración ,
Búsqueda y
Pegar contenido . El tamaño saldrá de 24 por 24.
Cree un archivo de
cadenas en la carpeta de
valores y agregue las siguientes líneas:
<resources> <string name="title_home">Home</string> <string name="title_search">Search</string> <string name="title_settings">Settings</string> </resources>
Poner todas las líneas en un archivo simplificará la localización posterior de la aplicación.
Si desea agregar otro idioma, por ejemplo, ruso, cree un archivo con el atributo
Locale , seleccione el idioma deseado de la lista de
idiomas y agregue las mismas líneas, después de traducirlas.
Ahora procedemos directamente a crear el menú. En la carpeta del
menú , cree el
archivo de recursos del
menú ,
asígnele el nombre "
bottom_nav_menu " y agréguele el siguiente código:
<?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>
Cree un archivo de
estilos en la carpeta de
valores y agregue el siguiente código:
<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>
Los estilos creados se utilizan para vistas para separar archivos de marcado y archivos de estilo. Contienen atributos de formato que son responsables de la apariencia y el comportamiento de los elementos. Primero, puede escribir todos los atributos en el archivo de marcado y luego exportarlos al archivo de estilos haciendo clic en la siguiente combinación: RMB ->
Refactor ->
Extraer ->
Estilo . El estilo solo estará disponible dentro de las vistas. Lea más sobre esto
aquí .
Después de eso, puede proceder directamente a crear un diseño para la Actividad. En la carpeta de
diseño , cree un
archivo de recursos de diseño, asígnele el nombre "
activity_main " y agregue el siguiente código:
<?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>
Veamos que pasó.
Pantalla de pestaña de inicio
Abra el archivo de
estilos y agregue estilos para la barra de herramientas con un TextView secundario y 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>
Agregue las siguientes líneas al archivo de
cadenas :
<string name="desc_home">Notification list</string> <string name="movie_title">Movie title</string> <string name="default_imdb_rating">IMDb rating: 7,4</string>
Ahora cree un
diseño llamado "
fragment_home " y agregue el siguiente código:
<?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>
Agregue los iconos de
Notificación y
Notificación ninguno a la carpeta
dibujable .
Pasemos a crear un elemento de lista. Agregue el archivo "
item_movie " a la carpeta de
diseño y escriba el siguiente código:
<?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>
Veamos el resultado:
Pantalla de pestaña de búsqueda
En el archivo de
cadenas , agregue el encabezado de la barra de herramientas:
<string name="desc_settings">Preferences</string>
Y cree un
diseño llamado "
fragment_search ", agregando simultáneamente el siguiente bloque de código:
<?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>
Veamos el resultado:
Pantalla para la pestaña Configuración
Esta pantalla resultó ser la más voluminosa, porque tiene pocos estilos repetitivos.
Agregue el código para TextView y CardView al archivo de
estilos :
<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>
Agregue también un par de líneas más al archivo de
cadenas :
<string name="imdb_rating">IMDb rating</string> <string name="default_rating">6</string> <string name="movie_genres">Movie genres</string>
También debe agregar el ícono del
borde Estrella a la carpeta
dibujable .
Cree un
diseño llamado "
fragment_settings " y agregue el siguiente código:
<?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>
Crea un artículo para la lista. Agregue el archivo "
item_genre " a la carpeta de
diseño y escriba el siguiente código:
<?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" />
Veamos el resultado:
Prueba de diseño
Veamos con qué frecuencia se vuelve a dibujar la misma sección de la pantalla, es decir, se está haciendo un trabajo adicional.
Color azul: redibuja una vez. Bueno
Color verde - redibuja dos veces. Se requiere optimización.
Color rojo claro: vuelve a dibujar
tres veces. Que mal.
Color rojo: vuelve a dibujar más de
4 veces. Algo salió mal.
Y si no se pinta nada, entonces la trama no se vuelve a dibujar. Buen trabajo
¿Por qué está todo rojo en la segunda captura de pantalla? Se agregó un fondo blanco a cada Diseño, RecyclerView y CardView, lo que provocó la superposición de capas. Este no es el caso en el diseño descrito anteriormente, el ejemplo solo demuestra la aplicación fallida de la estilización.
En la primera captura de pantalla, solo se usó un fondo en LinearLayout para el fragmento Home, cuya redibujo se canceló mediante programación mediante el siguiente método:
window.setBackgroundDrawable(null)
Veamos cuánto tiempo se tarda en renderizar marcos.
Cyan es responsable del tiempo utilizado para crear y actualizar la Vista.
La parte púrpura representa el tiempo necesario para transferir los recursos de representación de la secuencia.
El rojo es el momento de dibujar.
Un color naranja indica cuánto tiempo tardó el procesador en esperar a que la GPU completara su trabajo. Es una fuente de problemas con grandes cantidades. - Alexander Klimov
En nuestro caso, casi todas las pestañas se dibujan en menos de 16 ms, es decir, debajo de la barra verde. Si la barra es más grande que esta línea, el programa puede ralentizarse.
Conclusión
En el próximo artículo, consideraremos trabajar con el servidor, y mientras el autor lo escribe, puede evaluar el diseño actual en la encuesta a continuación.
Si algún punto no está claro, haga preguntas en los comentarios.
Si cree que el diseño (XML) puede simplificarse o mejorarse, escríbalo.