天气项目·页面布局

新知识检索：

（一）View

（二）HorizontalScrollView

（三）AutoCompleteTextView

---

一、activity_main.xml

整体布局RelativeLayout

添加背景图，图片文件都放在res-drawable文件夹下。

android:background="@drawable/background"

1.ImageView：refresh_img

height和width都采用wrap_content布局。把图片作为背景图添加上。

android:background="@drawable/refresh"

2.ImageView：search_img

height和width都采用wrap_content布局，图片作为背景图添加，用margin微调到Top和Left的距离。

android:layout_alignParentRight="true"//与父控件右对齐

android:background="@drawable/search"

3.LinearLayout：city_mp_layout

height和width都采用wrap_content布局，用Margin做微调。内部没有用“layout_toRightOf”等定位语句。因为是线性的，代码顺序就决定了上下顺序

android:layout_centerHorizontal="true"//在父控件中居中

android:gravity="center_horizontal"//内部子控件居中

android:orientation="vertical"//内部控件的排序方式：垂直排序

（1）TextView：city_tv “北京”

android:textColor="@android:color/white"

（2）TextView：pm_tv “pm:130 优"”

（3）View：pm_color_v

view：视图矩形，内部没有内容，所以所以wrap_content的值是0，要指定宽高。此处width用“fill_parent”，指定height“4dp”

（4）TextView：network_error_tv "网络异常请检查网络"

textView均采用wrap_content布局

4.RelativeLayout：weather_layout

height和width都采用wrap_content布局，用Margin做微调。定位在刷新图片之下

以下各View的height和width都采用wrap_content布局，用Margin做微调

android:layout_below="@+id/refresh_img"

（1）TextView：temperture_tv  “22℃”

（2）TextView：weather_tv “晴 南风4级”

android:layout_alignBottom="@+id/temperture_tv"//定位，底部和temperture对齐

android:layout_toRightOf="@+id/temperture_tv"

（3）TextView：date_tv “2016.7.25 Monday”

android:layout_alignLeft="@+id/temperture_tv"

android:layout_below="@+id/temperture_tv"

（4）HorizontalScrollView：futureday_weather_scro

横向滑动视图，用法同ScrollView

android:layout_alignParentBottom="true"//与父控件的底部对齐

          ①LinearLayout：futureday_weather_layout

        android:orientation="horizontal" // 内部排列选用水平。具体控件写在futureday_laout.xml文件中，在activity中地调用。

mainActivity.xml

二、futureday_layout.xml

整体布局：LinearLayout   最底层布局，没有id。

android:orientation="vertical"

android:gravity="center_horizontal"

1.TextView：future_week_tv “星期一”

2.TextView：future_weather_tv" “晴 南风 四级”

3.TextView：future_temperture_tv “23℃~25℃”

以上TextView的height和width都采用wrap_content布局，用Margin做微调，没有定位。

局部控件

三、activity_search_city_code.xml

整体布局：RelativeLayout

（一）ImageView：search_finish_img

右侧的放大镜，height和width都采用wrap_content布局，用Margin做微调。

android:layout_alignParentRight="true"

（二）AutoCompleteTextView：search_citycode_actv

AutoCompleteTextView是文字自动补全输入框，只要配置好检索的内容，就可以自动去根据输入内容检索，并把检索到的结果用listView的形式展示出来。它是一个适配器控件，需要通过适配器指定，需要检索的所有内容和展示结果的布局

android:layout_width="match_parent"//height用wrap_content,width用fill，填满

android:layout_toLeftOf="@+id/search_finish_img"//根据图片定位

android:hint="请输入城市名"

android:singleLine="true"//只能输入单行

效果图