1.首頁布局設計
布局思路：根據設計圖可以看出，這是一個明顯上下結構的布局
從圖中能夠發現上方布局的垃圾清理，必會存在多種狀態，未清理狀態，清理完成狀態
因此上方布局應該寫成動態的，考慮到這個布局可能會存在多個頁面，因此需要把上方部分單獨抽出
下方部分可以看出是一個2列的表格結構，整個表格懸浮在螢屏下方，表格整體有個背景白色，并且距離兩邊和
下方有個邊距，表格中的子內容是一個上下結構布局
代碼實作：
1.整體布局采用ConstraintLayout(約束布局)
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/home_background"//背景色填充漸變
漸變的xml res/drawable/xxx.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:angle="90"
android:endColor="#00DCD6"
android:startColor="#00B2D6"
android:type="linear"
android:useLevel="true" />
</shape>
2.下方使用一個RecyclerView去實作
android:layout_width="match_parent"
android:layout_height="wrap_content"//高度隨子內容的高度
android:layout_marginLeft="@dimen/dp_16"
android:layout_marginTop="@dimen/dp_16"
android:layout_marginRight="@dimen/dp_16"
android:layout_marginBottom="@dimen/dp_20"//設定邊距
android:background="@drawable/main_item_background"//填充背景色
android:overScrollMode="never"//消除RecyclerView上下滑動的陰影效果
app:layout_constraintBottom_toBottomOf="parent"//浮動在螢屏下方
3.上方引入一個布局
<include
android:id="@+id/main_clean_up_layout"
layout="@layout/main_clean_up_view"//具體的布局ID
app:layout_constraintBottom_toTopOf="@id/main_recycleview"//在recycleview上方
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"//垂直居中
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_percent="0.68" />//子view相對于父view百分比???
4.引入的具體布局
外層采用ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"//高度自適應，水平方向垂直
圖片1ImageView
android:id="@+id/main_clean_up_icon_iv"
android:layout_width="match_parent"
android:layout_height="odp"
app:layout_constraintDimensionRatio="h,1:1"//寬高1:1
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
圖片2
app:layout_constraintHeight_percent="0.7"
app:layout_constraintLeft_toLeftOf="@id/main_clean_up_icon_iv"
app:layout_constraintRight_toRightOf="@id/main_clean_up_icon_iv"
app:layout_constraintTop_toTopOf="@id/main_clean_up_icon_iv"
app:layout_constraintWidth_percent="0.7"
中間文字使用LinearLayout布局 方向垂直
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="@id/main_clean_up_icon_iv"
app:layout_constraintLeft_toLeftOf="@id/main_clean_up_icon_iv"
app:layout_constraintRight_toRightOf="@id/main_clean_up_icon_iv"
app:layout_constraintTop_toTopOf="@id/main_clean_up_icon_iv"
//因為上方文字是一個左右結構，所以還需要再嵌套一個水平布局，左右方向
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="@+id/main_clean_up_scanning_size"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="200"
android:textColor="@color/colorWhite"
android:textSize="@dimen/sp_40" />
<TextView
android:id="@+id/main_clean_up_scanning_unit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="MB"
android:textColor="@color/colorWhite"
android:textSize="@dimen/text_title_size" />
</LinearLayout>
<TextView
android:id="@+id/main_clean_up_scanning_desc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="查看垃圾詳情 >"
android:textColor="@color/colorWhite"
android:textSize="@dimen/text_content_size" />
最下方使用兩個文本，跟圖片1 圖片一個層級
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@id/main_clean_up_icon_iv"//在第一張大圖片的下方即可
按鈕
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"//垂直居中
app:layout_constraintTop_toBottomOf="@id/main_clean_up_desc_tv"//在上一個文案的下方
app:layout_constraintWidth_percent="0.67" //百分比？？？
android:background="@drawable/main_clean_up_btn_background"//圓角需要單獨寫
圓角
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#ffffffff" />//內部填充顏色 白色
<corners android:radius="25dp" />//圓角大小25dp
</shape>
學習Android的路太漫長，只能把每一個東西都記錄下來，鞏固一下
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/286125.html
標籤：Android
上一篇：實體 -自定義繪制滑動解鎖