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>
同样,上面高度为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