Comprensión del diseño de materiales

1. Acerca del diseño de materiales (MD)

1. Introducción

Introducido a partir de Android 5.0 es un nuevo lenguaje de diseño (traducido como "diseño de materiales"), que en realidad es un estilo, concepto y principio de diseño defendido por Google.
Una experiencia combinada de diseño cuasi-físico y diseño plano. También absorbió algunos de los últimos conceptos científicos y tecnológicos. Capas: Ver eje Z
PD: Los enlaces a sitios web oficiales son los siguientes:
1. Sitio web oficial
2. Sitios web de traducción nacional

2. Siga

1. Para el arte: siga el diseño de interfaz y la colección de iconos de MD.
2. Para gerentes de producto: siga el diseño de interfaz MD, saltos de página y efectos de animación, diseño de interacción.
3. Para desarrolladores: participar en el diseño de prototipos y ayudar en la preparación de materiales para el diseño de prototipos de arte.
Desarrollar e implementar diseño MD ---- interfaz, animación, animación de transición, etc.

2. El uso y desarrollo de MD

Google ha abierto y recopilado algunos de los últimos proyectos de código abierto (muchos de los cuales fueron desarrollados por él mismo) y los reunió en el último paquete de soporte compatible y la última API 5.X.
Por ejemplo, preferencia, PreferenceActivity (recomendado combinado con PreferenceFragment) para lograr archivos de configuración para crear la interfaz de configuración común de la aplicación.

1. Paquetes de compatibilidad comunes
  • android-support-v4: Compatible con al menos el sistema Android 1.6, que tiene controles como ViewPager.
  • android-support-v7: al menos compatible con el sistema Android 2.1, appcompat. (Compatible con 3.0 al menos) y así sucesivamente. Este proyecto permite a los desarrolladores unificar los estándares de desarrollo y garantizar la compatibilidad con cualquier versión del sistema. (Por ejemplo: tema, valor, diseño, nuevos controles, nueva implementación de efectos especiales de animación) Entonces, ahora, AndrodStudio generalmente te ayuda a crear una nueva dependencia o introducir una dependencia llamada appcompat (paquete de compatibilidad para controles comunes) cuando creas un proyecto directamente.

(1) Resumen de la relación:

1. El paquete android-support-v4: Contiene ViewPager y otros controles, generalmente usamos viewpager.
2. android-support-v7: contiene controles compatibles con series comunes de appcompatXxx (como se muestra en la siguiente figura)
3. com.android.support:design:xxx: dependencia del paquete de diseño, contiene algunos controles de diseño de materiales:

0, recyclingview
1, CoordinatorLayout
2, CollapsingToolbarLayout
3, AppBarLayout
4, TabLayout
5, CardView
6, FloatingActionButton
7, NestedScrollView
8, NavigationView
9, BottomNavigationView
10, TextInputLayout
11 y más. . . . Ligera
referencia: introducción al control del paquete de soporte de Android Design.
Ps: Estos controles también son paquetes compatibles con el tipo V7 (por ejemplo: android.support.v7.widget.CardView), no solo con características de diseño de materiales, sino también con características de compatibilidad con versiones anteriores.

4. Dependencias introducidas por separado: de hecho, también podemos agregar dependencias por separado para los controles en soporte: diseño, como recyclerview, cardview, etc.

Inserte la descripción de la imagen aquí

Diagrama de control compatible común del paquete v7

(2) Explicación detallada de los componentes del paquete v4 y v7

Artículo de referencia: Aclare a fondo la biblioteca de soporte y el problema de dependencia repetida v4 v7
. Es un buen artículo de referencia, puede leerlo. . . .

2. Utilice el paquete de compatibilidad support-v7 para el control de estilo global

Para los principiantes, a veces veo carpetas como valores-v11, valores-v14, valores-v19 en el proyecto, que contienen dimensiones, estilos, etc. ¿Que representa?

(1) Significado representativo

values-v11 significa en dispositivos API 11+, use styles.xml en este directorio en lugar de res / values ​​/ styles.xml
values-v14 significa en dispositivos API 14+, use styles.xml en este directorio en lugar de res /values/styles.xml
values-v19 significa que en dispositivos API 19+ , reemplace res / values ​​/ styles.xml con styles.xml en este directorio

Por lo tanto, al ejecutar proyectos en diferentes versiones de teléfonos móviles, se cargarán diferentes estilos. Por ejemplo, el color de fondo del control de puntuación es diferente.

(2) En el administrador sdk, puede ver la relación entre la versión sdk de Android y la API hasta ahora

26 -> Android 8.0
25 -> Android 7.1.1
24 -> Android 7.0
23 -> Android 6.0
22 -> Android 5.1
21 -> Android 5.0
20 -> Android 4.4w
19 -> Android 4.4

(3) Introducción al control de estilo global del paquete de compatibilidad
Abra el archivo de estilo de valores

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>

    </style>

</resources>

1. colorPrimary: el color principal
2. colorPrimaryDark: el color principal oscuro, generalmente se puede usar para el color de la barra de estado, barra de navegación inferior
3. colorAccent: representa el color básico de cada control-CheckBox, RadioButton, ProgressBar, etc.

Hay muchas cosas que podemos cambiar fuera del valor predeterminado anterior:

Inserte la descripción de la imagen aquí

Podemos personalizar muchas configuraciones. Hay demasiadas, así que comprendamos brevemente. . .

3. Controles compatibles comunes

1. android.support.v7.app.AlertDialog
2. Style = "@ style / Widget.AppCompat.ProgressBar.Horizontal" configuración de ProgressBar
3. Actualización desplegable SwipeRefreshLayout (en el paquete v4)
4. android.support.v7.widget. LinearLayoutCompat (controles de la serie Compat)
5, PopupWindow
6, ListPopupWindow
7, PopupMenu

(1) Castaño LinearLayoutCompat con línea divisoria

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.LinearLayoutCompat
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:divider="@drawable/abc_list_divider_mtrl_alpha"
        app:showDividers="beginning|middle"
        android:orientation="vertical"
        >

    <TextView
            android:gravity="center"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Hello World!"/>
    <TextView
            android:gravity="center"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Hello World!"/>
    <TextView
            android:gravity="center"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Hello World!"/>

</android.support.v7.widget.LinearLayoutCompat>

Efecto: el control del contenedor tiene su propia línea divisoria, que actúa sobre la vista secundaria.
Es muy simple de usar. Simplemente agregue el atributo app: divider para especificar la línea divisoria y luego use app: showDividers para mostrar dónde aparecen los puntos.
Referencia: LinearLayoutCompat de la serie Material Design

fin

Supongo que te gusta

Origin blog.csdn.net/qq_38350635/article/details/100520276
Recomendado
Clasificación