TShopping

 找回密碼
 註冊
搜索
查看: 373|回復: 1

[教學] Android 新專案Layout的布局與設計

[複製鏈接]
發表於 2016-1-15 22:15:53 | 顯示全部樓層 |閱讀模式
 
Push to Facebook Push to Plurk Push to Twitter 
一個Android手機程式中

一個畫面,包含可能程式化的內容,就可以稱為一個Activity

定義不重要,這只是我的解釋而已

至少一個Activity會抓一個Layout檔,來顯示版面

才能做之後的事情

-----------------------------------------------------------

而Android的版面Layout基本上都是用XML做定義的
XML概念跟HTML有那麼一點點相似,但不太一樣
XML自訂性較高,但也較嚴謹,只要出錯整的檔都會讀不出來
基本上原則就是

Node要成雙成對,沒有結束符號要加上 / 符號
Root Node素只能有一個
這部分就不再贅述


這是剛新建專案的Layout
layout.xml,路徑在res/layout/main.xml
新開的檔會以建立的Activity做名稱,一個Activity可以有一個Layout檔,也可以用人家的(自己沒有)
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:orientation="vertical"
  4.     android:layout_width="fill_parent"
  5.     android:layout_height="fill_parent"    >

  6. <TextView
  7.     android:layout_width="fill_parent"
  8.     android:layout_height="wrap_content"
  9.     android:text="@string/hello"    />

  10. </LinearLayout>
複製代碼


首先看看Layout檔
HelloWorld只會有二個控制項,也是首先會接觸到的
TextView
手機螢幕部分只要眼睛看的見的幾乎都是控制項,叫做View
有以下屬性

    android:layout_width  為控制項的寬度

    android:layout_height  為控制項的高度

單位可以填dip,也是最常用的,就是單位螢幕點(相對長度),依解析度和螢幕尺寸不同而會有不同
也可以填像素px啦 (這樣會失去自動調整的能力,官方不建議)
也可以填以下屬性:

  "fill_parent"    代表填滿父控制項,在這裡通常是指撐滿螢幕(寬度或是高度)

  "wrap_content" 就是指依照你內容有多少就給你多少(寬度或是高度)
   
android:text  就是要顯示的文字拉



怎麼沒有看到  Hello World, main!   呢?
原來文字存到string.xml裡了
"@string/hello" 這樣就是在指,去string.xml找到名為hello的字串,當然也可以直接打上去拉,只是不建議這樣做,以後有關多國語言會提到


這裡是string.xml,路徑在res/value/string.xml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <resources>
  3.     <string name="hello">Hello World, main!</string>
  4.     <string name="app_name">Hello World test</string>
  5. </resources>
複製代碼


之後會提到android:id的部分,這裡先不提


-----------------------------------------------------------

再來講
LinearLayout
這種Layout的家族統稱稱為ViewGroup
ViewGroup可以想成各種View的群組,有以下幾種

AbsoluteLayout
RelativeLayout
FrameLayout
LinearLayout

通常也最常用的就是LinearLayout,原因無他,只是方便好用
LinearLayout只會做一件事,指定一個方向(垂直或是水平)
然後不管控制項有多大,全部照樣往下(或往右)排排站


在這裡LinearLayout有以下屬性
xmlns:android="http://schemas.android.com/apk/res/android"   這句話絕對不能省略,放在最外層的那控制項即可
依據XML的特性,要去指定一些標籤的定義,就像法條才會有憑有據
android:orientation="vertical"   就是排列方向為垂直(由上而下)
android:orientation="horizontal"   就是排列方向為水平(由左而右)

-----------------------------------------------------------

講一下

RelativeLayout
好了
在Layout檔看起來如下:


  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.     android:layout_width="fill_parent"
  3.     android:layout_height="fill_parent"   >

  4. </RelativeLayout>
複製代碼


看起來跟LinearLayout沒啥不同
但多的特性就多了
首先,他沒有android:orientation可以用,因為他是用控制項的相對位置去編排的
如果控制項沒有設定那些多出來的參數,很有可能會發生二控制項重疊
裡面的控制項屬性會多出二種類型的屬性

邊框位置
跟另一個控制項的相對位置
屬性有以下:


android:layout_alignLeft

android:layout_toRightOf

android:layout_below

android:layout_above

android:layout_alignParentLeft

android:layout_alignParentTop

android:layout_alignParentRight

android:layout_alignParentBottom

android:layout_centerInParent


邊框位置
先有一個控制項位置做絕對位置,才能做相對位置的判定嘛
以word的文字編排方式可以很直覺的理解

android:layout_alignParentLeft  靠左對齊,(吸附邊框左邊)

android:layout_alignParentTop   靠上對齊,(吸附邊框上方)

android:layout_alignParentRight   靠右對齊,(吸附邊框右邊)

android:layout_alignParentBottom   靠下對齊,(吸附邊框下方)

android:layout_centerInParent    置中,(計算放在正中間)

這類型就是以RelativeLayout的邊框做位置,做對齊


而另一種就是以別人的控制項位置做為自己的控制項位置


android:layout_toLeftOf       這在(等下要寫的控制項的名)的左邊

android:layout_toRightOf        這在(等下要寫的控制項的名)的右邊

android:layout_below        這在(等下要寫的控制項名)的下面

android:layout_above       這在(等下要寫的控制項名)的上面


這個等下要寫控制項的名稱,很重要

控制項的順序也很重要

基本上,這個名子一定要再你的Layout上有提及

還有這個控制項名稱要在XML敘述上比現在這個控制項還要早出現

XML的Layout檔上基本上可以先寫靠左或靠右對齊的控制項敘述

才寫這種相對敘述



控制項在XML裡寫的順序很重要

-----------------------------------------------------



補充:FrameLayout

FrameLayout可以想成是RelativeLayout的功能閹割版


RelativeLayout的部份


1. 能對齊View的框邊

例如:

android:layout_alignParentLeft  靠左對齊,(吸附邊框左邊)

或是

2. 設定二格View之間的排列關係

例如:

android:layout_toLeftOf       這在(等下要寫的控制項的名)的左邊

上面都提過了


而FrameLayout只剩下


對齊View的框邊的功能

用android:layout_gravity  來指定

如果在其中的View有二個設定成一樣的話呢

就會「依序」重疊上去



注意一點,只有RelativeLayout和FrameLayout

才會發生控制項有重疊的現象

如果版面看似調不出來,可以檢查一下是否為二個控制項重疊

或是版面出界了


版面出界的狀況在初期很容易發生


像是LinearLayout 裡面有二個控制項



第一個控制項是  android:layout_width="fill_parent"    android:layout_height="fill_parent"

填滿全螢幕

第二個  android:layout_width="wrap_content"    android:layout_height="wrap_content"

這樣第二個一定出界的

設定上要小心


-----------------------------------------------------

所有的View和ViewGroup都可能需要android:id這東西

他會在Compile專案時會產生一個R檔,就是gen/你的package名稱/R.java

這個R檔會包含你的所有Layout上的所有id和string.xml上的名稱....等等內容,沒事別去動他

寫法如下

    android:id="@+id/tv01"

這裡的@就是叫程式去R檔裡面找到代稱叫做tv01的id名稱

這裡的+號不能省略,代表的是我需要在R檔裡新增一個id名稱叫做

這個所有的Layout檔都適用,不同Layout裡的控制項id最好是要不一樣

在一個Layout檔中,控制項的id一定要不同

到時候程式可以用findViewById去依照這個id抓取其控制項

-----------------------------------------------------

底下寫一個LinearLayout的範例,改用RelativeLayout會怎麼寫

現在用LinearLayout來撰寫Layout


  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:orientation="vertical"
  4.     android:layout_width="fill_parent"
  5.     android:layout_height="fill_parent"    >

  6. <TextView
  7.     android:id="@+id/tv01"
  8.     android:layout_width="wrap_content"
  9.     android:layout_height="wrap_content"
  10.     android:text="Text01"    />

  11.     <TextView
  12.     android:id="@+id/tv02"
  13.     android:layout_width="wrap_content"
  14.     android:layout_height="wrap_content"
  15.     android:text="Text02"    />

  16.     <TextView
  17.     android:id="@+id/tv03"
  18.     android:layout_width="wrap_content"
  19.     android:layout_height="wrap_content"
  20.     android:text="Text03"    />

  21.     <TextView
  22.     android:id="@+id/tv04"
  23.     android:layout_width="wrap_content"
  24.     android:layout_height="wrap_content"
  25.     android:text="Text04"    />

  26.     <TextView
  27.     android:id="@+id/tv05"
  28.     android:layout_width="wrap_content"
  29.     android:layout_height="wrap_content"
  30.     android:text="Text05"    />
  31. </LinearLayout>
複製代碼






-----------------------------------------------------

改用RelativeLayout會變成

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout
  3.     android:layout_width="fill_parent"
  4.     android:layout_height="fill_parent" >

  5. <TextView
  6.     android:id="@+id/tv01"
  7.     android:layout_alignParentTop="true"
  8.     android:layout_alignParentLeft="true"
  9.     android:layout_width="wrap_content"
  10.     android:layout_height="wrap_content"
  11.     android:text="Text01" />

  12.     <TextView
  13.     android:id="@+id/tv02"
  14.     android:layout_below="@id/tv01"
  15.     android:layout_width="wrap_content"
  16.     android:layout_height="wrap_content"
  17.     android:text="Text02" />

  18.     <TextView
  19.     android:id="@+id/tv03"
  20.     android:layout_below="@id/tv02"
  21.     android:layout_width="wrap_content"
  22.     android:layout_height="wrap_content"
  23.     android:text="Text03" />

  24.     <TextView
  25.     android:id="@+id/tv04"
  26.     android:layout_below="@id/tv03"
  27.     android:layout_width="wrap_content"
  28.     android:layout_height="wrap_content"
  29.     android:text="Text04" />

  30.     <TextView
  31.     android:id="@+id/tv05"
  32.     android:layout_below="@id/tv04"
  33.     android:layout_width="wrap_content"
  34.     android:layout_height="wrap_content"
  35.     android:text="Text05" />

  36. </RelativeLayout>
複製代碼


文章來源

 

臉書網友討論
發表於 2016-2-18 04:51:52 | 顯示全部樓層
不错,看看。












网站支付接口架设

版主招募中

您需要登錄後才可以回帖 登錄 | 註冊 |

本版積分規則



Archiver|手機版|小黑屋|免責聲明|TShopping

GMT+8, 2016-12-7 06:22 , Processed in 0.060672 second(s), 22 queries .

本論壇言論純屬發表者個人意見,與 TShopping綜合論壇 立場無關 如有意見侵犯了您的權益 請寫信聯絡我們。

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表