美文网首页
天气项目·页面布局

天气项目·页面布局

作者: _人间客 | 来源:发表于2016-07-26 19:00 被阅读65次

    新知识检索:

    (一)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"//只能输入单行

    效果图

    相关文章

      网友评论

          本文标题:天气项目·页面布局

          本文链接:https://www.haomeiwen.com/subject/saonjttx.html