随笔-64  评论-420  文章-12 

10天学安卓-第三天

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

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

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

QQ截图20140921162822

理论知识

总体来说,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指定布局内部元素的排列方式,如果没有此项设置,默认为水平排列。

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

QQ截图20140921164824QQ截图20140921165036

 

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>

 

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

QQ截图20140921165837

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>

 

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

QQ截图20140921170506

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,

QQ截图20140921172116

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>

 

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

QQ截图20140921172904

 

其他布局

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

小结

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

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

 

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

 

天气界面

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

QQ截图20140921185030

 

然后切换到代码模式,确认一下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,在弹出框中按照下图所示进行填写,

QQ截图20140921203413

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

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

QQ截图20140921204537

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

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

 

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

QQ截图20140921205841

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

<?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

posted on 2015-01-19 19:29 Game_over 阅读(...) 评论(...) 编辑 收藏