酷派天气学习笔记（四）（编写天气界面）

新建一个title.xml作为头布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize">
    <Button
        android:id="@+id/nav_button"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_marginLeft="10dp"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        />
    <TextView
        android:id="@+id/title_city"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:textSize="20sp"
        android:textColor="#fff"
        android:layout_centerInParent="true"/>
    <TextView
        android:id="@+id/title_update_time"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_centerVertical="true"
        android:textSize="16sp"
        android:textColor="#fff"
        android:layout_alignParentRight="true"
        android:layout_marginRight="10dp"/>
</RelativeLayout>

然后新建一个now.xml当前天气信息布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_margin="15dp"  >
<TextView
    android:id="@+id/degree_text"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:textSize="60sp"
    android:textColor="#fff"
    android:layout_gravity="end" />
<TextView
    android:id="@+id/weather_info_text"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:textSize="20sp"
    android:textColor="#fff"
    android:layout_gravity="end" />
</LinearLayout>

然后新建forecast.xml作为未来几天天气信息的布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:background="#8000"
    android:layout_margin="15dp" >
    <TextView
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_marginTop="15dp"
        android:layout_marginLeft="15dp"
        android:textSize="20sp"
        android:textColor="#fff"
        android:text="预报" />
    
        <LinearLayout
            android:id="@+id/forecast_layout"
            android:orientation="vertical"
            android:layout_height="wrap_content"
            android:layout_width="match_parent" >
        </LinearLayout>
</LinearLayout>

然后需要定义一个未来天气信息的子项布局forecast_item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_margin="15dp"
android:layout_height="wrap_content"
android:layout_width="match_parent" >
<TextView
    android:id="@+id/date_text"
    android:layout_height="wrap_content"
    android:layout_width="0dp"
    android:textColor="#fff" android:layout_weight="2"
    android:layout_gravity="center_vertical" />
<TextView
    android:id="@+id/info_text"
    android:layout_height="wrap_content"
    android:layout_width="0dp"
    android:textColor="#fff"
    android:layout_weight="1"
    android:layout_gravity="center_vertical"
    android:gravity="center"/>
<TextView
    android:id="@+id/max_text"
    android:layout_height="wrap_content"
    android:layout_width="0dp" android:textColor="#fff"
    android:layout_weight="1"
    android:layout_gravity="center"
    android:gravity="right"/>
<TextView
    android:id="@+id/min_text"
    android:layout_height="wrap_content"
    android:layout_width="0dp"
    android:textColor="#fff"
    android:layout_weight="1"
    android:layout_gravity="center"
    android:gravity="right"/>
</LinearLayout>

然后新建aqi.xml作为空气质量的布局

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:orientation="vertical"
android:background="#8000"
android:layout_margin="15dp">
<TextView
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:layout_marginTop="15dp"
    android:layout_marginLeft="15dp"
    android:textSize="20sp"
    android:textColor="#fff"
    android:text="空气质量" />
<LinearLayout
    android:layout_margin="15dp"
    android:layout_height="wrap_content"
    android:layout_width="match_parent">
    <RelativeLayout
        android:layout_height="match_parent"
        android:layout_width="0dp"
        android:layout_weight="1">
        <LinearLayout
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            android:orientation="vertical"
            android:layout_centerInParent="true">
            <TextView
                android:id="@+id/aqi_text"
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:textSize="40sp"
                android:textColor="#fff"
                android:layout_gravity="center" />
            <TextView
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:layout_gravity="center"
                android:textColor="#fff"
                android:text="AQI指数" />
        </LinearLayout>
    </RelativeLayout>
    <RelativeLayout
        android:layout_height="match_parent"
        android:layout_width="0dp"
        android:layout_weight="1">
        <LinearLayout
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            android:orientation="vertical"
            android:layout_centerInParent="true">
            <TextView
                android:id="@+id/pm25_text"
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:layout_gravity="center"
                android:textSize="40sp"
                android:textColor="#fff"/>
            <TextView
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:layout_gravity="center"
                android:textColor="#fff"
                android:text="PM2.5指数"/>
        </LinearLayout>
    </RelativeLayout>
</LinearLayout>
</LinearLayout>

然后新建suggestion.xml作为生活建议的布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_margin="15dp"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:orientation="vertical"
android:background="#8000" >
<TextView
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:layout_marginTop="15dp"
    android:layout_marginLeft="15dp"
    android:textSize="20sp"
    android:textColor="#fff" android:text="生活建议" />
<TextView
    android:id="@+id/comfort_text"
    android:layout_margin="15dp"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:textColor="#fff" />
<TextView
    android:id="@+id/car_wash_text"
    android:layout_margin="15dp"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:textColor="#fff"/>
<TextView
    android:id="@+id/sport_text"
    android:layout_margin="15dp"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:textColor="#fff" />
</LinearLayout>

最后我们需要把它引入到activity_weather.xml中

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorPrimary"
    >

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/bing_pic_img"
        android:scaleType="centerCrop"
        />
    <android.support.v4.widget.DrawerLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/drwaer_layout"
        >
         <android.support.v4.widget.SwipeRefreshLayout 
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             android:id="@+id/swipe_refresh"
             >
             <ScrollView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:id="@+id/weather_layout"
                    android:scrollbars="none"
                    android:overScrollMode="never"
                     >
                    <LinearLayout
                         android:orientation="vertical"
                         android:layout_width="match_parent"
                         android:layout_height="wrap_content"
                         android:fitsSystemWindows="true"
                          >
                        <include layout="@layout/title"/>
                        <include layout="@layout/now"/>
                        <include layout="@layout/forecast"/>
                        <include layout="@layout/aqi"/>
                        <include layout="@layout/suggestion"/>

                    </LinearLayout>
            </ScrollView>
        </android.support.v4.widget.SwipeRefreshLayout>
        <fragment
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/choose_area_fragment"
            android:name="com.example.dong.myapplication.ChooseAreaFragment"
            android:layout_gravity="start"
            />
    </android.support.v4.widget.DrawerLayout>
</FrameLayout>