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的路太漫长，只能把每一个东西都记录下来，巩固一下
文章来源: 博客园
- 还没有人评论，欢迎说说您的想法！
客服
