android天气时钟设计报告,做一款自己的安卓天气闹钟（1）——首页界面布局

写在前面

这一次是要结合前面做的一堆爬虫，语音之类的做一个终端的东西，是一款可以显示天气的闹钟APP，自己也是一边做一边学，如果有什么不对的地方欢迎大家指正

先看设计界面

首页界面

中间时间贼丑的字体真的是醉了

开发工具

Android Studio

知识点

LinearLayout(线性布局)

线性布局就是里面的UI组件会按照顺序一个一个堆上去，连成一条或者横，或者竖的线，可以为里面的UI组件设置权重(就是每个组件占整条线的几分之几)，这个APP中的大部分都是靠线性布局完成的，线性布局可以很好的适配响应式

RelativeLayout(相对布局)

相对布局就是里面的UI组件是相对父元素的位置放置的，比如我们的设计界面上左边，上面的日期是在父元素的上方，时间是在父元素的中间，下面的闹钟是在父元素的下方

TextView(文本组件)

文本组件是用来显示文本的

ImageView(图像视图)

见名知意，就是用来显示图像的一个View或者说控件

目录结构

目录结构

将最上面点成安卓你就能看到我这样的目录结构了，每个目录具体作用我用到什么讲什么，只需要知道接下来的代码写在哪儿就可以了

动手写代码

整体布局

这是切割好的布局，按照这个布局就可以很轻松的往上磊代码了，接下来的代码写在content_main.xml文件中，如果你创建了一个默认的项目，可以轻松的找到这个文件在哪儿

先分左右，线性布局要按比例分配空间的话，就要把按比例分配的方向的大小设置为0dp，然后为其设置权重值layout_weight，这里左右比为8:5

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/home"

android:layout_width="match_parent"

android:layout_height="match_parent"

app:layout_behavior="@string/appbar_scrolling_view_behavior"

tools:context="love.xzjs.t_android.MainActivity"

tools:showIn="@layout/activity_main">

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="#000"

android:orientation="horizontal">

android:layout_width="0dp"

android:layout_height="match_parent"

android:layout_weight="8">

android:layout_width="0dp"

android:layout_height="match_parent"

android:layout_weight="5"

android:orientation="vertical">

左边分上中下，此处第一次使用了图片，将下载好的图片粘贴到mipmap文件夹就可以了，Android Studio会自动加载图片供你引用

android:layout_width="0dp"

android:layout_height="match_parent"

android:layout_weight="8">

android:layout_width="wrap_content"

android:layout_height="wrap_content">

android:id="@+id/date"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginRight="8sp"

android:text="2017年10月23日"

android:textColor="#fff"

android:textSize="18sp" />

android:id="@+id/week"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="周一"

android:textColor="#fff"

android:textSize="18sp" />

android:id="@+id/time_label"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_centerVertical="true"

android:gravity="center"

android:text="09:08"

android:textColor="#fff"

android:textSize="150sp" />

android:layout_width="match_parent"

android:layout_height="28dp"

android:layout_alignParentBottom="true">

android:layout_width="0dp"

android:layout_height="match_parent"

android:layout_weight="1">

android:layout_width="0dp"

android:layout_height="wrap_content"

android:layout_weight="1"

app:srcCompat="@mipmap/clock" />

android:layout_width="0dp"

android:layout_height="wrap_content"

android:layout_weight="2"

android:gravity="left"

android:text="12:00"

android:textColor="#fff" />

android:layout_width="0dp"

android:layout_height="match_parent"

android:layout_weight="1">

android:layout_width="0dp"

android:layout_height="wrap_content"

android:layout_weight="1"

app:srcCompat="@mipmap/clock" />

android:layout_width="0dp"

android:layout_height="wrap_content"

android:layout_weight="2"

android:gravity="left"

android:text="12:00"

android:textColor="#fff" />

android:layout_width="0dp"

android:layout_height="match_parent"

android:layout_weight="1">

android:layout_width="0dp"

android:layout_height="wrap_content"

android:layout_weight="1"

app:srcCompat="@mipmap/clock" />

android:layout_width="0dp"

android:layout_height="wrap_content"

android:layout_weight="2"

android:gravity="left"

android:text="12:00"

android:textColor="#fff" />

右边也是类似的布局，只不过用LinearLayout布局而已

android:layout_width="0dp"

android:layout_height="match_parent"

android:layout_weight="5"

android:orientation="vertical">

android:layout_width="match_parent"

android:layout_height="0dp"

android:layout_weight="5"

android:orientation="vertical">

android:layout_width="match_parent"

android:layout_height="0dp"

android:layout_weight="5">

android:layout_width="0dp"

android:layout_height="match_parent"

android:layout_weight="5"

app:srcCompat="@mipmap/yu" />

android:layout_width="0dp"

android:layout_height="match_parent"

android:layout_weight="2">

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentBottom="true"

android:gravity="center"

android:text="阵雨 27℃"

android:textColor="#fff"

android:textSize="18sp" />

android:layout_width="match_parent"

android:layout_height="0dp"

android:layout_weight="2">

android:layout_width="match_parent"

android:layout_height="match_parent"

android:gravity="center"

android:text="阴转阵雨 北风4-5级 14-27℃"

android:textColor="#fff"

android:textSize="18sp" />

android:layout_width="match_parent"

android:layout_height="0dp"

android:layout_weight="2">

android:layout_width="0dp"

android:layout_height="match_parent"

android:layout_weight="1"

android:orientation="vertical">

android:layout_width="match_parent"

android:layout_height="0dp"

android:layout_weight="5"

app:srcCompat="@mipmap/qing" />

android:layout_width="match_parent"

android:layout_height="0dp"

android:layout_weight="2"

android:gravity="center"

android:text="明天 晴 19-29℃"

android:textColor="#fff" />

android:layout_width="0dp"

android:layout_height="match_parent"

android:layout_weight="1"

android:orientation="vertical">

android:layout_width="match_parent"

android:layout_height="0dp"

android:layout_weight="5"

app:srcCompat="@mipmap/leizhenyu" />

android:layout_width="match_parent"

android:layout_height="0dp"

android:layout_weight="2"

android:gravity="center"

android:text="后天 雷雨 19-29℃"

android:textColor="#fff" />