Desarrollo y aprendizaje de Android-day3

Hoy es principalmente para modificar el diseño de la cuadrícula anterior, porque agregar imágenes de esa manera no es fácil de controlar la proporción

Controles utilizados principalmente: LinearLayout ImageButton

Página de análisis: la página se compone de 3 partes. Como no tengo la imagen superior por el momento, utilizo el color. El medio está compuesto principalmente por botones de imagen, y hay tres botones en la parte inferior para

crear una nueva plantilla en blanco: (yo uso la generada automáticamente)

【Layout / activity_main】

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="11"
        android:background=" #0a0943" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="25"
        android:background="@color/basic"
        android:orientation="vertical"
        android:padding="5dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:orientation="horizontal">

            <ImageButton
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_margin="1dp"
                android:layout_weight="2"
                android:background="@drawable/custom_border"
                android:padding="5dp"
                android:scaleType="centerInside"
                android:src="@drawable/logo_duty_today" />

            <ImageButton
                style="@style/grid_imgae"
                android:src="@drawable/logo_manager" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1">

            <ImageButton
                style="@style/grid_imgae"
                android:src="@drawable/logo_pending_send" />

            <ImageButton
                style="@style/grid_imgae"
                android:src="@drawable/logo_pended_send" />

            <ImageButton
                style="@style/grid_imgae"
                android:src="@drawable/logo_cars_outside" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1">

            <ImageButton
                style="@style/grid_imgae"
                android:src="@drawable/logo_pending_leave" />

            <ImageButton
                style="@style/grid_imgae"
                android:src="@drawable/logo_pended_leave" />

            <ImageButton
                style="@style/grid_imgae"
                android:src="@drawable/logo_leave_staff" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1">

            <ImageButton
                style="@style/grid_imgae"
                android:src="@drawable/logo_pending_travel" />

            <ImageButton
                style="@style/grid_imgae"
                android:src="@drawable/logo_pended_travel" />

            <ImageButton
                style="@style/grid_imgae"
                android:src="@drawable/logo_staff_outside" />
        </LinearLayout>

    </LinearLayout>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="3"
        android:orientation="horizontal"
        android:padding="10dp">

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="首页"
            android:textSize="23dp" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="消息"
            android:textSize="23dp" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="个人中心"
            android:textSize="23dp" />
    </LinearLayout>
</LinearLayout>

【Valores / style.xml】

<style name="grid_imgae">
        <item name="android:layout_width">0dp</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_weight">1</item>
        <item name="android:padding">16dp</item>
        <item name="android:background">@drawable/custom_border</item>
        <item name="android:layout_margin">2dp</item>
        <item name="android:scaleType">centerInside</item>
    </style>

【Drawable / custom_border.xml】

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="10dp"/>
    <solid android:color="@color/white"/>
    <stroke
        android:width="1dp"
        android:color="#555555"/>
</shape>

【Manifiesta】

<activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

El simulador se ejecuta:

Inserte la descripción de la imagen aquí


Resumen: Cuando
hice esto antes, no se hizo ajustando los márgenes y se usó la cuadrícula.Los dos métodos de la cuadrícula: layout_rowWeight y layout_columnWeight también están en desuso. Cambié a un diseño lineal y me dividí proporcionalmente para completar esto. El otro no es muy diferente, y no hay material, solo se modificó ligeramente el código. Hizo un estilo.
Inserte la descripción de la imagen aquí

Supongo que te gusta

Origin blog.csdn.net/weixin_45936162/article/details/112491757
Recomendado
Clasificación