Android实践之简易天气（二）
上一篇 Android实践之简易天气（一）已经拿到了服务器端的数据并进行了解析。按照计划，这次就是设计界面并把拿到的数据更新到界面。
界面设计
设计天气状态界面的设计
都是一些比较基础的，就不需要讲解什么了，相信有点界面基础的一看就懂了，就直接粘贴代码吧。作者：fnhfire_7030
<?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.SwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/swipe" android:layout_width="match_parent" android:layout_height="wrap_content"> <ScrollView android:id="@+id/scrollView" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" tools:context=".MainActivity" tools:showIn="@layout/activity_main"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:paddingLeft="5dp" android:paddingRight="5dp" android:paddingTop="5dp" tools:context="com.wf.myndkdemo.MainActivity"> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <RadioButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:button="@null" android:drawableLeft="@mipmap/ic_location_normal" android:text="@string/location" android:textColor="@color/white"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentEnd="true" android:layout_alignParentRight="true" android:text="@string/srcfrom" android:textColor="@color/gray"/> </RelativeLayout> <com.baidu.apistore.sdk.customfont.CustomFontsTextView android:id="@+id/tmp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:paddingLeft="40dp" android:paddingTop="100dp" android:text="@string/tmp" android:textColor="@color/white" android:textSize="80sp"/> <com.baidu.apistore.sdk.customfont.CustomFontsTextView android:id="@+id/wea" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:paddingTop="5dp" android:text="@string/weather" android:textColor="@color/white" android:textSize="24sp"/> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/shape_bg" android:text="@string/pm" android:textColor="@color/center" android:textSize="15sp"/> <TextView android:id="@+id/pm" android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingLeft="5dp" android:text="50" android:textColor="@color/white" android:textSize="16sp"/> </LinearLayout> <ImageView android:layout_width="match_parent" android:layout_height="1dp" android:layout_marginTop="10dp" android:background="@color/gray"/> <include layout="@layout/layoutweekweather"/> <include layout="@layout/layout_txt"/> </LinearLayout> </ScrollView> </android.support.v4.widget.SwipeRefreshLayout>
大家一定发现了SwipeRefreshLayout 了吧，对，这里用到了下拉刷新，我这里用的是系统自带的下拉刷新，当然你也可以选择比较有名的第三方控件PullToRefresh这个控件里面的功能就比较多了，里面具体的功能你可以自己去发现。
你们一定也发现了上面的布局中包含了include了吧！就是下面这些
<include layout="@layout/layoutweekweather"/> <include layout="@layout/layout_txt"/>
聪明的你，一定知道这是在这个布局里面又添加了另外的两个布局，这两个布局分别是，一周的天气数据和今天的体感指数。作者：fnhfire_7030
一周的天气数据布局
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:paddingTop="10dp" > <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="5dp" android:layout_marginTop="5dp" android:orientation="horizontal"> <TextView android:id="@+id/today" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/today" android:textColor="@color/white" android:textSize="16sp" /> <TextView android:id="@+id/today_tmp1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignBaseline="@+id/today" android:layout_marginLeft="5dp" android:layout_toRightOf="@+id/today" android:text="@string/today" android:textColor="@color/gray" android:textSize="14sp" /> <ImageView android:id="@+id/weather_image1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:src="@mipmap/ic_weather_default"/> <TextView android:id="@+id/wind_det1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginRight="5dp" android:layout_toLeftOf="@+id/wind_sd1" android:text="@string/today" android:textColor="@color/white" android:textSize="16sp" /> <TextView android:id="@+id/wind_sd1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignBaseline="@+id/wind_det1" android:layout_alignParentEnd="true" android:layout_alignParentRight="true" android:layout_alignParentTop="true" android:text="@string/today" android:textColor="@color/gray" android:textSize="14sp"/> </RelativeLayout> <ImageView android:layout_width="match_parent" android:layout_height="1dp" android:background="@color/gray"/> </LinearLayout>
上面的在LinearLayout 布局内的ImageView 是用来进行作者：fnhfire_7030布局分割的。
体感指数布局
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingTop="5dp"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/combrf" android:textColor="@color/white" android:textSize="18sp"/> <TextView android:id="@+id/combrt" android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingLeft="10dp" android:text="@string/combrf" android:textColor="@color/white" android:textSize="18sp"/> </LinearLayout> <TextView android:id="@+id/comContent" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/combrf" android:textColor="@color/gray" android:textSize="14sp"/> <ImageView android:layout_width="match_parent" android:layout_height="1dp" android:layout_marginBottom="5dp" android:layout_marginTop="5dp" android:background="@color/gray"/> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/cwbrf" android:textColor="@color/white" android:textSize="18sp"/> <TextView android:id="@+id/cwbrf" android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingLeft="10dp" android:text="@string/combrf" android:textColor="@color/white" android:textSize="18sp"/> </LinearLayout> <TextView android:id="@+id/cwContent" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/cwbrf" android:textColor="@color/gray" android:textSize="14sp"/> <ImageView android:layout_width="match_parent" android:layout_height="1dp" android:layout_marginBottom="5dp" android:layout_marginTop="5dp" android:background="@color/gray"/> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/dress_brf" android:textColor="@color/white" android:textSize="18sp"/> <TextView android:id="@+id/dress_brf" android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingLeft="10dp" android:text="@string/dress_brf" android:textColor="@color/white" android:textSize="18sp"/> </LinearLayout> <TextView android:id="@+id/dressContent" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/dress_brf" android:textColor="@color/gray" android:textSize="14sp"/> <ImageView android:layout_width="match_parent" android:layout_height="1dp" android:layout_marginBottom="5dp" android:layout_marginTop="5dp" android:background="@color/gray"/> </LinearLayout> 38
同样，上面高度为1dp的ImageView 也是分界线。
这里我又增加了一个布局，把这几个布局都包含了进去，具体如下：
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/content_layout" android:background="@drawable/content_bg" android:clipToPadding="true" android:fitsSystemWindows="true" > <include layout="@layout/content_main"></include> </LinearLayout>
因为content_main 里面已经包含了其他的布局，这里直接把content_main 包含进来就可以了。上面的布局中的这两个属性是实现沉浸式状态栏需要的。如下：
android:clipToPadding="true" android:fitsSystemWindows="true"
布局效果图
好了，到这里布局就已经完成了。下面就让大家看看效果吧！
看到这个效果图有没有很熟悉呢！我不会告诉你，我是仿yun os天气界面进行布局设置的，当然里面的图片资源也是来自yun os天气的，毕竟没有专门的UI设计嘛！
本来想把数据更新到界面都放在这里讲的，但是呢，再说的话篇幅就有点长了，就下次吧！作者：fnhfire_7030
这里附上源码地址：GitHub
