Diseño de diseño de componentes de interfaz de Android

<?xml version="1.0" encoding="utf-8"?>
<merge
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <TextView
            android:id="@+id/tv_mute_user"
            android:layout_width="wrap_content"
            android:layout_height="54dp"
            android:layout_gravity="center_horizontal"
            android:gravity="center"
            android:text="@string/live_mute_user"
            android:textColor="@color/live_link_mic_main_color"
            android:textSize="15dp"
            tools:textColor="#99FFFFFF" />

        <View
            android:id="@+id/view_mute_user_selected"
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="#4DAAF8" />

    </LinearLayout>
</merge>

El código xml anterior representa un componente. Si hay varios componentes, copie varios fragmentos de código y coloque el código en <merge </merge>.

1. El marco general del componente

        android:layout_width="wrap_content" //代表组件的宽度
        android:layout_height="wrap_content" //代表组件的高度
        android:orientation="vertical"> //代表组件的排列方式

  Por lo general, establecemos los dos atributos de layout_width y layout_height en wrap_content o match_parent. ¿Qué significan estos dos atributos?
(1).match_parent: el diseño del componente del conjunto sigue el diseño principal. Es decir, 'ancho del diseño principal'='ancho del control', 'altura del diseño principal'='altura del control' (
2).wrap_content: El diseño del componente cambiará con la longitud y la altura del contenido de entrada. Si no hay entrada, es un punto.

  La orientación representa la disposición de los componentes, generalmente se establece en dos formas: horizontal y vertical, ¿qué significan?
(1).horizontal: especifique la disposición de los controles en el diseño como "disposición horizontal".
(2).vertical: especifique la disposición de los controles en el diseño como "disposición vertical".
(3) No configure Android: orientación, el valor predeterminado es "disposición horizontal".

  android:layout_marginStart="65dp", a veces habrá este parámetro en el diseño del componente, que representa la distancia entre el componente actual y el componente anterior. Si no se establece, los dos componentes estarán uno al lado del otro.

2. Marco de texto del componente

        <TextView
            android:id="@+id/tv_mute_user"
            android:layout_width="wrap_content"
            android:layout_height="54dp"
            android:layout_gravity="center_horizontal"
            android:gravity="center"
            android:text="@string/live_mute_user"
            android:textColor="@color/live_link_mic_main_color"
            android:textSize="15dp"
            tools:textColor="#99FFFFFF" />

  Este módulo representa la información de texto en el componente, incluida la identificación del texto, la altura del texto, el ancho del texto, la posición del texto en el componente, la información del texto, el color del texto, el tamaño del texto

3. Marco de antecedentes del componente

        <View
            android:id="@+id/view_mute_user_selected"
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="#4DAAF8" />

  Este módulo representa la información de fondo en el componente, incluida la identificación del fondo, la altura del fondo, el ancho del fondo y el color del fondo.
  android:visibility="gone", a veces existe esta línea de atributo, que representa si el control definido es visible para el usuario y tiene tres formas: visible, invisible y desaparecido.
android:visibility="visible" //Visible
android:visibility="invisible" //Invisible, pero la posición ocupada en el diseño sigue siendo
android:visibility="gone" //Invisible, completamente desaparecido del diseño

4. Código y efecto

<?xml version="1.0" encoding="utf-8"?>
<merge
    xmlns:android="http:xxxxxxx"
    xmlns:tools="http:xxxxxxx"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:background="#@color/xxxxxxx"
    tools:parentTag="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <TextView
            android:id="@+id/tv_mute_user"
            android:layout_width="wrap_content"
            android:layout_height="54dp"
            android:layout_gravity="center_horizontal"
            android:gravity="center"
            android:text="@string/live_mute_user"
            android:textColor="@color/live_link_mic_main_color"
            android:textSize="15dp"
            tools:textColor="#99FFFFFF" />

        <View
            android:id="@+id/view_mute_user_selected"
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="#4DAAF8" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="65dp"
        android:orientation="vertical">

        <TextView
            android:id="@+id/tv_kick_user"
            android:layout_width="wrap_content"
            android:layout_height="54dp"
            android:layout_gravity="center_horizontal"
            android:gravity="center"
            android:text="@string/live_kick_user"
            android:textSize="15dp"
            android:textColor="@color/live_link_mic_gray_color"
            tools:textColor="#99FFFFFF" />

        <View
            android:visibility="gone"
            android:id="@+id/view_kick_user_selected"
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="#4DAAF8" />

    </LinearLayout>


    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="65dp"
        android:orientation="vertical">

        <TextView
            android:id="@+id/tv_black_user"
            android:layout_width="wrap_content"
            android:layout_height="54dp"
            android:layout_gravity="center_horizontal"
            android:gravity="center"
            android:text="@string/live_black_user"
            android:textColor="@color/live_link_mic_main_color"
            android:textSize="15dp"
            tools:textColor="#99FFFFFF" />

        <View
            android:id="@+id/view_black_user_selected"
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="#4DAAF8" />

    </LinearLayout>

</merge>

inserte la descripción de la imagen aquí

Supongo que te gusta

Origin blog.csdn.net/weixin_43202123/article/details/125744561
Recomendado
Clasificación