1. 程式人生 > >android的線性佈局和幀佈局的入門

android的線性佈局和幀佈局的入門

  1. 什麼是佈局
    就是把介面中的控制元件按照某種規律擺放到指定的位置

  2. 佈局的二種實現
    程式碼
    xml配置檔案:res/layout目錄下
    注:也可以同時使用xml和程式碼

  3. 佈局的基本屬性
    取值範圍
    { //效果是一樣的
    fill_parent//過時
    match_parent//不過時
    }

    固定值
    {
    dp 控制元件大小
    sp 文字大小
    }

    padding 內補丁
    margin 外補丁

    android:gravity和android:layout_gravity
    用一個TextView、文字、背景檢視效果最方便
    android:gravity:控制元件內部的元素
    android:layout_gravity:控制元件所在父元素的位置
    但父元素的水平和垂直設定的優先度更高

  4. 常見佈局
    線性佈局(重點) LinearLayout
    表格佈局(幾乎不用)
    幀佈局

    絕對佈局
    相對佈局 RelativeLayout
    網格佈局
    RTL(幾乎不用)

  5. 案例1:padding內補丁、margin外補丁的區別,以及與內容
    match_parent/fill_parent
    padding/margin
    background
    wrap_content

  6. 案例2:線性佈局(重點)
    orientation=“vertical|horizontal”
    android:gravity:控制元件內部的元素(對內有效)

  7. 案例3:android:gravity和android:layout_gravity的區別
    7.1 android:gravity:控制元件內部的元素(對內有效)
    android:layout_gravity:控制元件所在父元素的位置(對外生效)
    7.2 特殊情況
    父元素的android:orientation=“vertical”,layout_gravity 水平設定的相關屬性有效
    父元素的android:orientation=“horizontal”,layout_gravity 垂直設定的相關屬性有效

  8. 案例4:LinearLayout佈局中Layout_weight屬性的作用
    8.1 首先宣告只有在Linearlayout中,layout_weight屬性才有效。
    8.2 它是用來指定(剩餘空閒空間)的分割比例,而非按比例分配整個空間。
    8.3 另外android:layout_weight會引起爭議,是因為在設定該屬性的同時,
    設定android:layout_width為wrap_content和match_parent會造成兩種截然相反的效果。
    8.4 如果想用layout_weight平均分配空間,正確方式是將layout_width(或layout_height)設定為0dp,
    再通過layout_weight按比例分配空間
    注:關鍵點在於搞清楚什麼是剩餘空閒空間

例:<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按鈕1"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_marginLeft="210dp"
            android:layout_height="wrap_content"
            android:text="按鈕2"/>
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">



        <Button
            android:layout_width="wrap_content"

            android:layout_height="wrap_content"
            android:layout_marginTop="160dp"
            android:layout_marginLeft="150dp"
            android:text="按鈕3"/>
    </LinearLayout>
    <LinearLayout

        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="200dp"
            android:text="按鈕4"/>
        <Button
            android:layout_width="wrap_content"

            android:layout_height="wrap_content"
            android:layout_marginTop="200dp"
            android:layout_marginLeft="210dp"
            android:text="按鈕5"/>
    </LinearLayout>
</LinearLayout>

//效果圖如下:
在這裡插入圖片描述

  1. 案例5:幀佈局(就好象一張張卡片堆疊上去,後面會蓋出前面的)
    FrameLayout
    注:幀佈局有點類似於awt的CardLayout都是把元件一個一個疊加到一起,
    但CardLayout能將下面的元件移上來,但FrameLayout沒有提供此功能
例:<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_margin="30dp"
    android:padding="30dp"

xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
    android:background="@color/colorPrimaryDark"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_margin="30dp"
        android:padding="30dp"

        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:background="@color/colorAccent"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/colorPrimaryDark"

            android:text="a"/>


    </FrameLayout>


</FrameLayout>
ImageView 
  src
  scaleType="fitXY" XY方向拉伸

 android:scaleType="fitXY"
        android:src="@drawable/img18"

//效果圖如下
在這裡插入圖片描述