总结一下这一周关于智能农业APP项目的学习。
####一、布局
APP最重要的就是与用户的交互界面,布局很重要。在智能农业APP这个项目中,布局十分简单,用户不需要花费多少时间便能熟练使用。
######1、APP界面:
######2、重点、难点部分布局
在布局中,没有什么难度,只有在智能农业界面中把方形的图片设置成圆形时需要注意一下。
首先在gradle中添加依赖:
compile 'com.makeramen:roundedimageview:2.2.1'
然后布局中代码如下所示:
<com.makeramen.roundedimageview.RoundedImageView
app:riv_oval="true"
android:id="@+id/light_img"
android:layout_width="120dp"
android:layout_height="120dp"
android:src="@mipmap/guangzhao" />
如果没有app:riv_oval="true"
这句话,那么图片还是不会变成圆形的。
####二、Java代码
######1、添加依赖
由于需要gson解析、使用OKHttp快速访问网络,所以需要添加两个依赖:
compile 'com.google.code.gson:gson:2.8.2'
compile 'com.squareup.okhttp3:okhttp:3.10.0'
######2、从首页进入后的三个界面——智能农业界面、设置界面、帮助界面
- 创建三个fragment——HomePagerFragment、SettingFragment、HelpFragment。
在HomePagerFragment中把首页布局文件写好:
<TextView
android:id="@+id/home_page_top_lin"
android:layout_width="match_parent"
android:layout_height="50dp"
android:gravity="center_horizontal"
android:text="智能农业"
android:textColor="#24bd3b"
android:textSize="30dp" />
<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:layout_below="@+id/home_page_top_lin"
android:background="#b5b5b5"
/>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_below="@+id/home_page_top_lin"
android:overScrollMode="never"
android:scrollbars="none"
android:layout_marginTop="5dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.v4.view.ViewPager
android:id="@+id/home_page_vp"
android:layout_width="match_parent"
android:layout_height="150dp"
android:background="@mipmap/bana1">
</android.support.v4.view.ViewPager>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#716c6c"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
>
<com.makeramen.roundedimageview.RoundedImageView
app:riv_oval="true"
android:id="@+id/co2_img"
android:layout_width="120dp"
android:layout_height="120dp"
android:src="@mipmap/co2" />
<TextView
android:layout_toLeftOf="@+id/co2_warn_img"
android:id="@+id/co2_concentation_tv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignTop="@+id/co2_img"
android:layout_margin="5dp"
android:layout_toRightOf="@+id/co2_img"
android:text="CO2浓度"
android:textColor="#100909"
android:textSize="25sp" />
<RelativeLayout
android:layout_toLeftOf="@+id/co2_right_img"
android:id="@+id/co2_relative"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/co2_concentation_tv"
android:layout_margin="5dp"
android:layout_toRightOf="@+id/co2_img">
<TextView
android:id="@+id/co2_co2_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:text="CO2:"
android:textColor="#100909"
android:textSize="25sp" />
<TextView
android:id="@+id/co2_values_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:layout_toRightOf="@+id/co2_co2_tv"
android:gravity="center_vertical"
android:text="200"
android:textColor="#e80c0c"
android:textSize="25sp" />
</RelativeLayout>
<RelativeLayout
android:layout_toLeftOf="@+id/co2_right_img"
android:layout_alignBottom="@+id/co2_img"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/co2_relative"
android:layout_margin="5dp"
android:layout_toRightOf="@+id/co2_img">
<TextView
android:id="@+id/co2_set_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:text="设定值:"
android:textColor="#1fa433"
android:textSize="15sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:layout_toRightOf="@+id/co2_set_tv"
android:gravity="center_vertical"
android:text="200"
android:textColor="#605858"
android:textSize="15sp" />
</RelativeLayout>
<ImageView
android:id="@+id/co2_right_img"
android:layout_width="20dp"
android:src="@mipmap/right"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:layout_height="60dp" />
<ImageView
android:id="@+id/co2_warn_img"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:src="@mipmap/p2"
android:layout_width="50dp"
android:layout_height="20dp" />
</RelativeLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#716c6c"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#716c6c"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
>
<com.makeramen.roundedimageview.RoundedImageView
app:riv_oval="true"
android:id="@+id/light_img"
android:layout_width="120dp"
android:layout_height="120dp"
android:src="@mipmap/guangzhao" />
<TextView
android:id="@+id/light_intension_tv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignTop="@+id/light_img"
android:layout_margin="5dp"
android:layout_toLeftOf="@+id/light_warn_img"
android:layout_toRightOf="@+id/light_img"
android:text="光照强度"
android:textColor="#100909"
android:textSize="25sp" />
<RelativeLayout
android:id="@+id/light_relative"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/light_intension_tv"
android:layout_margin="5dp"
android:layout_toLeftOf="@+id/light_right_img"
android:layout_toRightOf="@+id/light_img">
<TextView
android:id="@+id/light_light_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:text="光照"
android:textColor="#100909"
android:textSize="25sp" />
<TextView
android:id="@+id/light_values_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:layout_toRightOf="@+id/light_light_tv"
android:gravity="center_vertical"
android:text="200"
android:textColor="#e80c0c"
android:textSize="25sp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="@+id/light_img"
android:layout_below="@+id/light_relative"
android:l