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