10天学安卓-第三天

经过第二天的学习，我们正确的调用了百度天气API，将天气信息显示到了界面上，做到这一步，我们的工作就算是完成1%了，剩下99%的工作就需要不断的润色这个未成形的APP了。

最首要的就是，我们要把那么一大堆字符转换为普通用户可以轻松理解的界面，那么我们来学习一下Android里面的界面布局。

打开res/layout/activity_main.xml文件，切换到Layouts选项卡，可以看到里面有许多项目，GridLayout、LinearLayout、RelativeLayout等，这些都代表什么类型的布局呢？

理论知识

总体来说，Android界面布局分为5中，分别为LinearLayout（线性布局）、RelativeLayout（相对布局）、FrameLayout（框架布局）、TableLayout（表格布局）、GridLayout（网格布局），下面逐一简单介绍一下。

LinearLayout（线性布局）

LinearLayout使得布局内部的元素以水平（horizontal）或者垂直（vertical）的方式排成一行，

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" 
    android:orientation="horizontal" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="第一个文本" />
    
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="第二个文本" />

</LinearLayout>

 

其中，android:orientation指定布局内部元素的排列方式，如果没有此项设置，默认为水平排列。

设置好排列方式之后的效果分别如下：

 

RelativeLayout（相对布局）

RelativeLayout使得布局内部的元素以相对于容器、其他元素的位置排列，

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <TextView
        android:id="@+id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:text="第一个文本" />

    <TextView
        android:id="@+id/text2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/text1"
        android:layout_toRightOf="@id/text1"
        android:text="第二个文本" />

</RelativeLayout>

 

这个布局定义了第一个文本位于布局的左上角，第二个文本在第一个文本的右下。

FrameLayout（框架布局）

FrameLayout使得布局内部的元素按照层次堆叠在左上角，后添加的元素会覆盖前面的元素。

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <TextView
        android:id="@+id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="60sp"
        android:background="#00ff00"
        android:text="第一个文本" />

    <TextView
        android:id="@+id/text2"
        android:layout_width="wrap_content"
        android:textSize="40sp"
        android:layout_height="wrap_content"
        android:background="#ff00ff"
        android:text="第二个文本" />

</FrameLayout>

 

这样第二个文本会覆盖在第一个文本的上面，

TableLayout（表格布局）

TableLayout使得布局内部的元素以行和列的形式排列，每一行都是一个TableRow或者一个普通的View，

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" 
    android:stretchColumns="1">

    <TableRow>
        <TextView
            android:layout_column="1"
            android:text="Open..."
            android:padding="3dip" />
        <TextView
            android:text="Ctrl-O"
            android:gravity="right"
            android:padding="3dip" />
    </TableRow>

    <TableRow>
        <TextView
            android:layout_column="1"
            android:text="Save..."
            android:padding="3dip" />
        <TextView
            android:text="Ctrl-S"
            android:gravity="right"
            android:padding="3dip" />
    </TableRow>

    <View
        android:layout_height="2dip"
        android:background="#FF909090" />

    <TableRow>
        <TextView
            android:layout_column="1"
            android:text="Quit"
            android:padding="3dip" />
    </TableRow>

</TableLayout>

 

这个布局有四行，1、2、4行是TableRow，各有数目不同的文本，第3行是一个普通的View，

GridLayout（网格布局）

GridLayout使得布局内部的元素以行、列、单元格的形式排列，

<?xml version="1.0" encoding="utf-8"?>  
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:layout_width="wrap_content"  
    android:layout_height="wrap_content"  
    android:orientation="horizontal"  
    android:rowCount="5"  
    android:columnCount="4" >  
　　<Button  
        android:text="1"/>  
　　<Button  
        android:text="2"/>  
　　<Button  
        android:text="3"/>  
　　<Button  
        android:text="/"/>  
　　<Button  
        android:text="4"/>  
　　<Button  
        android:text="5"/>  
　　<Button  
        android:text="6"/>  
　　<Button  
        android:text="×"/>  
　　<Button  
        android:text="7"/>  
　　<Button  
        android:text="8"/>  
　　<Button  
        android:text="9"/>  
   <Button  
        android:text="-"/>  
   <Button  
        android:layout_columnSpan="2"  
        android:layout_gravity="fill"  
        android:text="0"/>  
　　 <Button  
        android:text="."/>  
   <Button  
        android:layout_rowSpan="2"  
        android:layout_gravity="fill"  
        android:text="+"/>  
   <Button  
        android:layout_columnSpan="3"  
        android:layout_gravity="fill"  
        android:text="="/>   
</GridLayout>

 

这里定义了一个简单的计算器布局，

 

其他布局

除了以上5种主要的布局，还有一些第三方的布局，可以让你方便的实现一些比较酷炫的效果，例如DrawerLayout（左滑弹出菜单）、SwipeBackLayout（左滑返回）等，这些知识需要有一定的开发经验之后慢慢摸索。

小结

以上是简单介绍了一下各种布局的使用方式，具体各个布局还有很多的属性，活用这些属性才会制作出实用的界面，这些属性要靠大家在不断的学习中慢慢掌握。

在所有的布局里面，我这里推荐大家使用RelativeLayout。如果使用其他布局，可能需要嵌套比较多的层级才可以实现的界面，通常使用RelativeLayout会比较方便，而如果层级较多，对于界面的展示会需要耗费比较多的内存，所有我这里推荐使用RelativeLayout。

 

好了，大家辛苦了，先休息一下吧，下面我们就要使用RelativeLayout来做我们的第一个界面了。

 

天气界面

让我们回到我们的项目，打开res/layout/activity_main.xml文件，删掉TextView，添加一个新的控件-ListView。

 

然后切换到代码模式，确认一下ListView的属性，

    <ListView
        android:id="@+id/weather_list"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true" >
    </ListView>

 

这里的属性说明的是这个ListView宽度撑满界面，高度自适应，水平居中并且垂直居中，它的id是weather_list，大家还记得id的作用吧，它使得这个控件在代码中可以被找到并使用。

话说这个ListView是干什么用的？

当然是显示天气了。还以北京的天气为例，http://api.map.baidu.com/telematics/v3/weather?location=%E5%8C%97%E4%BA%AC&output=json&ak=YknGmxIoPugT7YrNrG955YLS， 这个链接返回的数据是：

 

{
error: 0,
status: "success",
date: "2015-01-19",
results: [
{
currentCity: "北京",
pm25: "80",
index: [
{
title: "穿衣",
zs: "冷",
tipt: "穿衣指数",
des: "天气冷，建议着棉服、羽绒服、皮夹克加羊毛衫等冬季服装。年老体弱者宜着厚棉衣、冬大衣或厚羽绒服。"
},
{
title: "洗车",
zs: "较适宜",
tipt: "洗车指数",
des: "较适宜洗车，未来一天无雨，风力较小，擦洗一新的汽车至少能保持一天。"
},
{
title: "旅游",
zs: "适宜",
tipt: "旅游指数",
des: "天气较好，同时又有微风伴您一路同行。虽会让人感觉有点凉，但仍适宜旅游，可不要错过机会呦！"
},
{
title: "感冒",
zs: "少发",
tipt: "感冒指数",
des: "各项气象条件适宜，无明显降温过程，发生感冒机率较低。"
},
{
title: "运动",
zs: "较适宜",
tipt: "运动指数",
des: "天气较好，但考虑气温较低，推荐您进行室内运动，若户外适当增减衣物并注意防晒。"
},
{
title: "紫外线强度",
zs: "最弱",
tipt: "紫外线强度指数",
des: "属弱紫外线辐射天气，无需特别防护。若长期在户外，建议涂擦SPF在8-12之间的防晒护肤品。"
}
],
weather_data: [
{
date: "周一 01月19日 (实时：3℃)",
dayPictureUrl: "http://api.map.baidu.com/images/weather/day/qing.png",
nightPictureUrl: "http://api.map.baidu.com/images/weather/night/qing.png",
weather: "晴",
wind: "微风",
temperature: "-5℃"
},
{
date: "周二",
dayPictureUrl: "http://api.map.baidu.com/images/weather/day/duoyun.png",
nightPictureUrl: "http://api.map.baidu.com/images/weather/night/duoyun.png",
weather: "多云",
wind: "微风",
temperature: "5 ~ -2℃"
},
{
date: "周三",
dayPictureUrl: "http://api.map.baidu.com/images/weather/day/qing.png",
nightPictureUrl: "http://api.map.baidu.com/images/weather/night/qing.png",
weather: "晴",
wind: "北风3-4级",
temperature: "5 ~ -6℃"
},
{
date: "周四",
dayPictureUrl: "http://api.map.baidu.com/images/weather/day/qing.png",
nightPictureUrl: "http://api.map.baidu.com/images/weather/night/qing.png",
weather: "晴",
wind: "微风",
temperature: "6 ~ -5℃"
}
]
}
]
}

 

这是json格式的数据，其中[weather_data]这个节点就是当前以及接下来4天的天气，一共是5条数据，这样标准的列表数据当然是使用ListView控件来显示了。

那么，如何进行呢？

赵本山老师教过我们，总共分三步，

1. 取得数据

2. 做成界面

3. 把数据显示到界面上

那么，数据已经取得了，下面就进行第二步，做成界面。

ListView

如何使用ListView？在Android的设计中，这里就是一个标准的代码分离的方案，ListView作为一个容器使用，而其中的每一项单独使用另外的View来实现，那么，具体来说我们需要做些什么？

不要着急，慢慢来。

邮件点击res/layout目录，选择New > Android XML File，在弹出框中按照下图所示进行填写，

然后点击Finish，就切换到了我们新建的这个视图了，这个视图将定义ListView中每一项都显示什么内容。根据百度的数据，我们的这个天气预报APP可以显示日期、天气、风、温度以及两个分别代表白天晚上的天气图片，那么我们就可以开始行动了，先添加4个TextView和1个ImageView，位置可以随便放置。需要注意的是在添加ImageView的时候，会弹出选择图片资源的对话框，我们就选中默认的ic_launcher就好了。

这些做好之后，看看我们的界面是什么样子。不管怎么说，我的是这样子的：

很那看是不是，还是那句话，不着急，我们来调整一下。

选中左上角的TextView，然后注意图中红框部分，我们将在这里设置它的属性，包括宽度、位置、字体等，大家练习一下吧，试着设置一下各个项目，看看都会有什么反应。

 

嗯，先来看看我调整后的界面吧。

说不上好看，也算是比较标准的列表项目了。分享一下我的代码吧：

<?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="wrap_content"
    android:padding="10dp" >

    <TextView
        android:id="@+id/item_date"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="日期"
        android:textColor="#000000"
        android:textSize="18sp" />

    <TextView
        android:id="@+id/item_weather"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/item_date"
        android:layout_marginTop="5dp"
        android:text="天气"
        android:textColor="#000000"
        android:textSize="14sp" />

    <TextView
        android:id="@+id/item_wind"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/item_date"
        android:layout_marginLeft="5dp"
        android:layout_marginTop="5dp"
        android:layout_toRightOf="@id/item_weather"
        android:text="风"
        android:textColor="#000000"
        android:textSize="14sp" />

    <TextView
        android:id="@+id/item_temperature"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/item_date"
        android:layout_marginLeft="5dp"
        android:layout_marginTop="5dp"
        android:layout_toRightOf="@id/item_wind"
        android:text="温度"
        android:textColor="#000000"
        android:textSize="14sp" />

    <ImageView
        android:id="@+id/item_picture"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:src="@drawable/ic_launcher" />

</RelativeLayout>

 

你可以直接使用我的设置，这样很方便。   ^_^

嗯，到这里，三步里面的第二步也完成了，好辛苦啊，休息休息。

通过今天的折腾，我们的界面又变成不显示任何内容的了，不要担心，我们明天继续。

 

附件是本次的工程文件，点击下载。

 

此系列文章系本人原创，如需转载，请注明出处 www.liuzhibang.cn