Android interface component layout design

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

The above xml code represents a component. If there are multiple components, copy multiple pieces of code and put the code in <merge </merge>.

1. The overall framework of the component

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

  We generally set the two attributes of layout_width and layout_height to wrap_content or match_parent. What do these two attributes mean?
(1).match_parent: The layout of the set component follows the parent layout. That is, 'width of parent layout'='width of control', 'height of parent layout'='height of control'
(2).wrap_content: The layout of the component will change with the length and height of the input content. If there is no input, it is a point.

  Orientation represents the arrangement of components. Generally, it is set in two forms: horizontal and vertical. What do they mean?
(1).horizontal: Specify the arrangement of controls in the layout as "horizontal arrangement".
(2).vertical: Specify the arrangement of controls in the layout as "vertical arrangement".
(3) Do not set android:orientation, the default is "horizontal arrangement".

  android:layout_marginStart="65dp", sometimes there will be this parameter in component layout, which represents the distance between the current component and the previous component. If not set, the two components will be next to each other.

2. Component Text Framework

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

  This module represents the text information in the component, including text id, text height, text width, text position in the component, text information, text color, text size

3. Component Background Framework

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

  This module represents the background information in the component, including background id, background height, background width, and background color.
  android:visibility="gone", sometimes there is this attribute line, which represents whether the defined control is visible to the user, and has three forms: visible, invisible, and gone.
android:visibility="visible" //Visible
android:visibility="invisible" //Invisible, but the position occupied in the layout is still
android:visibility="gone" //Invisible, completely disappeared from the layout

4. Code and effect

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

insert image description here

Guess you like

Origin blog.csdn.net/weixin_43202123/article/details/125744561