10天學安卓-第三天

時間  2019-11-09
標籤 10天 第三天 欄目 Android 简体版
原文   原文鏈接

通過次日的學習，咱們正確的調用了百度天氣API，將天氣信息顯示到了界面上，作到這一步，咱們的工做就算是完成1%了，剩下99%的工做就須要不斷的潤色這個未成形的APP了。android

最首要的就是，咱們要把那麼一大堆字符轉換爲普通用戶能夠輕鬆理解的界面，那麼咱們來學習一下Android裏面的界面佈局。json

打開res/layout/activity_main.xml文件，切換到Layouts選項卡，能夠看到裏面有許多項目，GridLayout、LinearLayout、RelativeLayout等，這些都表明什麼類型的佈局呢？api

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使得佈局內部的元素以相對於容器、其餘元素的位置排列，ui

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

 

這個佈局定義了第一個文本位於佈局的左上角，第二個文本在第一個文本的右下。spa

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>

 

這個佈局有四行，一、二、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

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程