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，然後注意圖中紅框部分，我們將在這裡設定它的屬性，包括寬度、位置、字型等，大家練習一下吧，試著設定一下各個項目，看看都會有什麼反應。

 

嗯，先來看看我調整後的介面吧。

說不上好看，也算是比較標準的清單項目了。分享一下My Code吧：

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

10天學安卓-第三天