柚子快報邀請碼778899分享：android 安卓app首頁

http://yzkb.51969.com/

安卓app首頁

一、實驗?zāi)繕?biāo)

做一個APP首頁，包括頂部圖片、頂部菜單欄、中部消息模塊、底部Tab按鈕。學(xué)習(xí) ScrollView, RelativeLayout，以及插件之間的穿插使用。

二、實驗步驟

創(chuàng)建的父布局

新建ScrollView，他內(nèi)部有且只能有一個組件

android:layout_width="match_parent"

android:orientation="horizontal"

android:layout_height="match_parent">

android:layout_width="match_parent"

android:layout_height="match_parent">

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

創(chuàng)建頂部首頁顯示欄

? 為頂部的首頁顯示欄設(shè)置樣式

android:layout_width="match_parent"

android:layout_height="80dp"

android:weightSum="4"

android:layout_marginTop="10dp">

android:layout_width="0dp"

android:layout_height="match_parent"

android:layout_weight="1">

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_below="@+id/shouye"

android:layout_centerHorizontal="true"

android:gravity="center"

android:text="首頁" />

創(chuàng)建頂部圖片

android:id="@+id/shouye"

android:layout_width="30dp"

android:layout_height="30dp"

android:layout_centerHorizontal="true"

android:layout_marginTop="15dp"

android:background="@mipmap/test_icon3" />

菜單欄模塊

? 先創(chuàng)建一個橫向的LinearLayout作為菜單欄的父布局，然后創(chuàng)建多個linearLayout作為每個按鈕的父布局。創(chuàng)建上邊的圖片按鈕，并設(shè)置屬性；設(shè)置按鈕底部文字并賦予屬性，創(chuàng)建四個小的按鈕

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_marginLeft="10dp"

android:layout_marginRight="10dp"

android:orientation="horizontal"

android:weightSum="4">

android:layout_width="0dp"

android:layout_height="100dp"

android:layout_weight="1"

android:orientation="vertical">

android:layout_width="50dp"

android:layout_height="50dp"

android:layout_gravity="center_horizontal"

android:layout_marginTop="10dp"

android:background="@mipmap/test_icon1" />

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_marginTop="10dp"

android:gravity="center"

android:text="驗房" />

消息模塊

? 先創(chuàng)建一個橫向的LinearLayout作為菜單欄的父布局，然后創(chuàng)建待辦和更多TextView

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_marginTop="20dp"

android:orientation="horizontal">

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginLeft="10dp"

android:layout_weight="1"

android:text="待辦(10)"

android:textColor="#333"

android:textSize="16dp"

android:text />

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginLeft="10dp"

android:layout_marginRight="10dp"

android:text="更多"

android:textColor="#666" />

底部tab模塊

? 先創(chuàng)建一個橫向的LinearLayout作為菜單欄的父布局，再創(chuàng)建一個RalativeLoyout作為單個按鈕的父布局

android:layout_width="match_parent"

android:layout_height="80dp"

android:weightSum="4"

android:layout_marginTop="10dp">

android:layout_width="0dp"

android:layout_height="match_parent"

android:layout_weight="1">

android:id="@+id/shouye"

android:layout_width="30dp"

android:layout_height="30dp"

android:layout_centerHorizontal="true"

android:layout_marginTop="15dp"

android:background="@mipmap/test_icon3" />

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_below="@+id/shouye"

android:layout_centerHorizontal="true"

android:gravity="center"

android:text="首頁" />

android:layout_width="0dp"

android:layout_height="match_parent"

android:layout_weight="1">

android:id="@+id/yanfang"

android:layout_width="30dp"

android:layout_height="30dp"

android:layout_centerHorizontal="true"

android:layout_marginTop="15dp"

android:background="@mipmap/daibanshixiang" />

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_below="@+id/yanfang"

android:layout_centerHorizontal="true"

android:layout_marginTop="5dp"

android:gravity="center"

android:text="驗房" />

android:layout_width="0dp"

android:layout_height="match_parent"

android:layout_weight="1">

android:id="@+id/tongji"

android:layout_width="30dp"

android:layout_height="30dp"

android:layout_centerHorizontal="true"

android:layout_marginTop="15dp"

android:background="@mipmap/baobiao" />

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_below="@+id/tongji"

android:layout_centerHorizontal="true"

android:layout_marginTop="5dp"

android:gravity="center"

android:text="統(tǒng)計" />

android:layout_width="0dp"

android:layout_height="match_parent"

android:layout_weight="1">

android:id="@+id/guanli"

android:layout_width="30dp"

android:layout_height="30dp"

android:layout_centerHorizontal="true"

android:layout_marginTop="15dp"

android:background="@mipmap/guanli" />

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_below="@+id/guanli"

android:layout_centerHorizontal="true"

android:layout_marginTop="5dp"

android:gravity="center"

android:text="設(shè)置" />

這樣就創(chuàng)建好了全部模塊

三、程序運(yùn)行結(jié)果

四、問題總結(jié)與體會

1.底部的tab欄會和整個屏幕一起滑動

? 在編寫完tab欄的代碼之后，發(fā)現(xiàn)底部的tab欄會跟著整個頁面一起滑動，思考其內(nèi)部邏輯，上方的整個可滑動的部分和底部tab欄是同等級的，都在最底層的LinearLayout中。原來是我將底部tab欄的模塊也放到了滑動模塊中，修改。

2.底部導(dǎo)航欄不顯示問題

ora-user-images\image-20220822172055271.png" alt=“image-20220822172055271” style=“zoom:67%;” />

四、問題總結(jié)與體會

1.底部的tab欄會和整個屏幕一起滑動

? 在編寫完tab欄的代碼之后，發(fā)現(xiàn)底部的tab欄會跟著整個頁面一起滑動，思考其內(nèi)部邏輯，上方的整個可滑動的部分和底部tab欄是同等級的，都在最底層的LinearLayout中。原來是我將底部tab欄的模塊也放到了滑動模塊中，修改。

2.底部導(dǎo)航欄不顯示問題

? 緊接上一個問題，在修改之后，底部的tab欄不顯示了。檢查代碼發(fā)現(xiàn)是滑動模塊的代碼高度設(shè)置成"match_parent"，將父布局完全覆蓋了，所以是被蓋住了，再次修改，將其高度設(shè)置為合適的數(shù)值，就可以顯示了。

柚子快報邀請碼778899分享：android 安卓app首頁

http://yzkb.51969.com/

推薦閱讀