android開發------編寫用戶界面之線性布局

一個好的應用程序離不開人性化的用戶界面。在學習其他東西之前。理應先學習編寫程序的布局（外觀）

今天，我們就來學習android的UI布局----LinearLayout。

LinearLayout，即線性布局。從名字我們就可以知道，它的元素是線型排列的。

注意：在以后的部分代碼編寫當中，我們采用硬編碼的方式將字符串值寫入android：text等標簽中，

不會另外在strings.xml文件中定義字符串值，這個時候eclipse IDE會出現黃色的下划線警告，我們忽略就可以了

主要知識點：

　　android:layout_width

　　android:layout_height

　　android:orientation

　　android:id

我們先創建一個名叫Layouts的項目，項目名稱首字母記得大寫，雖然不是必須，但這是一個最佳實踐。

我們依然用layouts目錄下的activity_main.xml文件作為示范，不多說，直接上代碼

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    xmlns:android="http://schemas.android.com/apk/res/android">
    
    <TextView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="請輸入登錄信息"
        android:textSize="20sp"
        android:layout_gravity="center"/>
    
    <EditText 
        android:id="@+id/userName"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:hint="輸入你的用戶名"/>

    <EditText
        android:id="@+id/passwd"
        android:password="true"  
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="18dp"
        android:hint="輸入你的密碼" />
    
    <Button
        android:id="@+id/btnLogin"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="登錄"
        android:layout_gravity="center" />
</LinearLayout>

 看一下運行效果

　　　　

 接下來我們解釋一下代碼的結構和原理

　　我們編寫了一個LinearLayout的布局，需要注意的是，LinearLayout標簽必須是一個根元素，它的外面不能出現任何元素。但是里面能嵌套任何布局元素。即，最外層的布局不能有兄弟元素（同級元素）

因此，下面的情況不能出現

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    xmlns:android="http://schemas.android.com/apk/res/android">
    
   <!-- 其他元素 -->
    
</LinearLayout>

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">
    
    <!-- 其他元素 -->
    
</LinearLayout>

 

現在知道什么是線性布局了吧　  

　　它們一個跟在另一個的后面排列，就像一條線一樣。

認識新標簽：

<TextView />：我們昨天說過，不再重復

<EditText />：文本框，用於接收用戶的輸入

<Button />：按鈕，當用戶點擊的時候處理相應的事件

設置元素屬性：

我們主要簡單說一下下面的幾個屬性，其他的可以自己研究一下。

      android:layout_width="fill_parent" 

　　　　layout_width: 設置元素長度，值可以是fill_parent（填充父元素，最外層的父元素就是Activity窗體）、wrap_content（根據內容的長度自適應）、或者用單位控制，如10dp，20dp，100dp等等

      android:layout_height="fill_parent"

　　　　layout_height: 設置元素高度，layout_width的設置同樣適用於layout_height

      android:orientation="vertical"

　　　　orientation:布局的排列方向，值可以是vertical（垂直）和horizontal（水平），如果忽略這個屬性，默認是horizontal

　　android:layout_gravity="center"

　　　　layout_gravity:元素的對齊方向，常用的有right，left，center等，有多個值可以選擇，這里就自己測試吧，多動手，學得快。

　　android:id="@+id/idName"

　　　　android:id: 為元素添加一個獨一無二的身份標識。@符號的作用我們說過了。那么+號的作用又是什么呢？

             當我們第一次為一個元素添加一個身份標識的時候，就需要用到+號，這樣，程序編譯的時候，就會在gen目錄下的R.java文件中生成一個資源ID，

　　　　以后我們就可以通過這個ID引用這個標簽中的內容。

　　　　除了添加自己的ID名稱之外，我們還可以使用android內置的ID。這個時候+號就不需要了，如：

　　　　@android:id/list、@android:id/empty

　　　　這樣，我們定義的元素就會使用android.R類中預先定義的ID值

　　　　上面的使用方法，以后會說到，這里不進一步解釋。

 

那么，第二個文本框中的效果又是怎樣實現的呢

 　　很簡單，就是android:password="true"，這樣，我們看到的就是一個個黑點，而不是我們輸入的字母和數字等

 

 上面的代碼中，android:orientation的值是vertical，現在我們將它換成horizontal，看又是什么情況

 

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal"
    xmlns:android="http://schemas.android.com/apk/res/android">
    
   
    <EditText 
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:hint="send message"/>
    
    <Button 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="發送"/>
    
</LinearLayout>

 

　　

沒有錯，元素現在向水平方向排列，我們再添加多幾個元素看看

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal"
    xmlns:android="http://schemas.android.com/apk/res/android">
    
   
    <TextView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="信息標題:"/>
    
    <EditText 
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:hint="message title here"/>
    
    <TextView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="message content"/>
    
    <EditText 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="message title here"/>
    <Button 
        android:id="@+id/btnSend"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="發送"/>
    
</LinearLayout>

 運行效果：

　　　　

 

亂套了，為什么

　　當水平排列的時候，如果元素的長度超過activity本身的長度的時候，元素就會溢出，導致部分元素無法顯示。

我們先不管android:layout_weight="1"是什么，也不管為什么要將android:layout_width的值設置為0dp。后面會說。

現在，我們應該對LinearLayout有所了解了。代碼最好自己敲一次，這樣學習才有意思

 

那么我就布置一道簡單的練習題吧

　 請用LinearLayout完成下圖中的布局