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