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

天气项目·页面布局

作者: _人间客 | 来源:发表于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"//只能输入单行

效果图

相关文章

  • 天气项目·页面布局

    新知识检索:(一)View(二)HorizontalScrollView(三)AutoCompleteTextVi...

  • 基础篇

    项目初步规划: 对页面布局的巩固 页面设计 设计项目logo

  • 了解vue-cli3

    why 快速构建项目使用前后端分离搭建 前台,后台 前台 : 以html,css这种页面布局开发 [ 页面布局 ...

  • 2018-12-03-2

    一、SMS项目 项目描述: 工作内容: 1.HTML结合css完成静态页面编写,页面布局,高度还原设计图; 2.J...

  • CoordinatorLayout嵌套CoordinatorLa

    页面布局:一级页面布局: 二级页面布局(即在一级页面ViewPager中的Fragment下): 这样布局的目的是...

  • IOS 代码添加约束

    项目中页面代码布局使用的一般都是Masonry,修改以前的项目是发现有的页面是用OC原生的NSLayoutCons...

  • React 16.4 开发简书项目[9]

    第9章 项目实战:详情页面和登录功能开发 9-1 详情页面布局 src——pages————detail—————...

  • Android生成pdf

    本文使用Android原生的PdfDocument来实现把页面布局生成pdf,支持分页。最近项目中需要实现把页面内...

  • Android APP在后台被杀问题修复

    目前项目采用单 Activity 模式,页面采用 Jetpack Navigation 导航布局如下:Splash...

  • 前端

    前端页面布局前端页面布局——三栏布局 - magi的博客 - CSDN博客 页面高度,位置简述前端页面内的高度、位...

网友评论

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

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