安卓開發學習——day3

今天主要是修改了之前網格布局，因為那樣添加圖片不好控制比例

主要使用的控制元件：LinearLayout ImageButton

分析頁面： 頁面共3部分組成，由于我暫時沒有頂部圖片就用顏色代替，中間主要有影像按鈕組成，下部有三個按鈕

新建空白模板：(這個我使用自動生成那個)

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

【values/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>

【manifests】

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

模擬器運行：

總結：
之前做這個的時候還沒有是靠調整邊距來完成的，并且使用的是網格，網格的那兩個方法：layout_rowWeight layout_columnWeight也廢棄了，就改用線性布局，按比例分割，完成了這個，另一張相差不是很大，并且沒有素材，只稍微改了一點代碼，做了個樣式，