转Andriod之路第一个功能
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的路太漫长，只能把每一个东西都记录下来，巩固一下