簡單的Android XML佈局使用

阿新 • • 發佈：2018-12-29

Android XML佈局

前言

今天我們來簡單介紹一下Android的XML佈局以及三種常見的XML佈局

1.XML佈局的優點

在XML檔案中設計UI可以更好地將應用的外觀與控制應用行為的程式碼隔離，每次修改或調整介面佈局只需要修改XML檔案的程式碼而不是修改原始碼和重新編譯。

2.XML佈局基礎介紹

2.1 呼叫XML佈局

在編譯XML佈局檔案時，都需要通過main函式中的 onCreate 來呼叫，通常使用如下方式來進行呼叫。

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super 
.onCreate(savedInstanceState);
        setContentView(R.layout.activity_linear_layout);
    }

其中setContentView裡的內容‘R’為就是系統給宣告的靜態變數，所有的子類都是通過‘R’來呼叫。而‘R’的路徑則是 Android 工程路徑下的 app -> src -> main -> res 下。
R.layout指res資料夾下一個名為layout的資料夾，而R.layout.activity_linear_layout之後的部分則是layout資料夾下自己定義的.xml

檔案。

2.2 XML佈局的常見屬性

屬性	描述
ID	控制元件名字，是當前控制元件的唯一標識，常用字串表示
background	調整當前介面背景
gravity	調整所有控制元件所在的整體位置
layout_width	當前介面整體寬度，常用wrap_content和match_parent
layout_height	當前介面整體高度，常用wrap_content和match_parent
padding	調整螢幕邊距，可以整體調整或者單項調整
text	控制元件顯示文字，可呼叫values資料夾中的strings.xml來顯示文字內容
textColor	顯示文字顏色，可呼叫values資料夾中的color.xml來定義
textSize	顯示文字字型大小，單位常用dp和px
textStyle	顯示文字字型風格，可選的有斜體和粗體

3.常見的三種簡單XML佈局

3.1 LinearLayout

這一種使用單個水平行或垂直行來組織子項的佈局，是風格最簡單的佈局。

<LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/textView"
        android:layout_alignParentLeft="false"
        android:layout_alignParentStart="true"
        android:weightSum="1"
        android:id="@+id/linearLayout"
        android:layout_alignParentTop="false"
        android:layout_alignWithParentIfMissing="false"
        android:layout_alignParentRight="false"
        android:layout_alignParentBottom="false"
        android:background="#000000">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:text="One,One"
            android:id="@+id/textView2"
            android:textSize="16dp"
            android:gravity="center_horizontal"
            android:layout_weight="0.19"
            android:textColor="#ffffff" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:text="One,Two"
            android:id="@+id/textView3"
            android:textSize="16dp"
            android:layout_weight="0.34"
            android:gravity="center_horizontal"
            android:textColor="#ffffff" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:text="One,Three"
            android:id="@+id/textView4"
            android:layout_weight="0.27"
            android:textSize="16dp"
            android:gravity="center_horizontal"
            android:textColor="#ffffff" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:text="One,Four"
            android:id="@+id/textView5"
            android:textSize="16dp"
            android:gravity="center_horizontal"
            android:textColor="#ffffff" />
    </LinearLayout>

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_below="@+id/linearLayout"
        android:weightSum="1"
        android:id="@+id/linearLayout2"
        android:background="#000000">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:text="Two,One"
            android:id="@+id/textView6"
            android:textSize="16dp"
            android:layout_weight="0.13"
            android:gravity="center_horizontal"
            android:textColor="#ffffff" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:text="Two,Two"
            android:id="@+id/textView7"
            android:textSize="16dp"
            android:layout_weight="0.41"
            android:gravity="center_horizontal"
            android:textColor="#ffffff" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:text="Two,Three"
            android:id="@+id/textView8"
            android:textSize="16dp"
            android:layout_weight="0.25"
            android:gravity="center_horizontal"
            android:textColor="#ffffff" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:text="Two,Four"
            android:id="@+id/textView9"
            android:textSize="16dp"
            android:gravity="center_horizontal"
            android:textColor="#ffffff" />
    </LinearLayout>

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/linearLayout2"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:weightSum="1"
        android:id="@+id/linearLayout3"
        android:background="#000000">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:text="Three,One"
            android:id="@+id/textView10"
            android:textSize="16dp"
            android:gravity="center_horizontal"
            android:textColor="#ffffff" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:text="Three,Two"
            android:id="@+id/textView11"
            android:textSize="16dp"
            android:layout_weight="0.38"
            android:gravity="center_horizontal"
            android:textColor="#ffffff" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:text="Three,Three"
            android:id="@+id/textView12"
            android:textSize="16dp"
            android:gravity="center_horizontal"
            android:layout_weight="0.26"
            android:textColor="#ffffff" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:text="Three,Four"
            android:id="@+id/textView13"
            android:textSize="16dp"
            android:gravity="center_horizontal"
            android:textColor="#ffffff" />
    </LinearLayout>

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/linearLayout3"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:weightSum="1"
        android:background="#000000">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:text="Four,One"
            android:id="@+id/textView14"
            android:gravity="center_horizontal"
            android:textSize="16dp"
            android:layout_weight="0.14"
            android:textColor="#ffffff" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:text="Four,Two"
            android:id="@+id/textView15"
            android:gravity="center_horizontal"
            android:textSize="16dp"
            android:layout_weight="0.37"
            android:textColor="#ffffff" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:text="Four,Three"
            android:id="@+id/textView16"
            android:gravity="center_horizontal"
            android:textSize="16dp"
            android:layout_weight="0.20"
            android:textColor="#ffffff" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:text="Four,Four"
            android:id="@+id/textView17"
            android:gravity="center_horizontal"
            android:textSize="16dp"
            android:layout_weight="0.15"
            android:textColor="#ffffff" />
    </LinearLayout>

程式碼結果截圖
線性佈局

3.2 RelativeLayout

相對佈局讓您能夠指定子物件彼此之間的相對位置（子物件 A 在子物件 B 左側）或子物件與父物件的相對位置（與父物件頂部對齊），自由度是最大的一種佈局。

<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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.relativelayout.MainActivity"
    android:background="#090505">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Red"
        android:id="@+id/textView"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:padding="3dp"
        android:background="#ff0000"
        android:textSize="25dp"
        android:gravity="center_horizontal"
        android:layout_toLeftOf="@+id/textView4"
        android:layout_toStartOf="@+id/textView4" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Orange"
        android:id="@+id/textView2"
        android:padding="3dp"
        android:background="#ff7700"
        android:textSize="25dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:gravity="center_horizontal" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Yellow"
        android:id="@+id/textView3"
        android:layout_alignParentTop="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:padding="3dp"
        android:background="#ffd500"
        android:textSize="25dp"
        android:gravity="center_horizontal" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Green"
        android:id="@+id/textView4"
        android:layout_marginTop="50dp"
        android:padding="3dp"
        android:background="#1eff00"
        android:textSize="25dp"
        android:gravity="center_horizontal"
        android:layout_below="@+id/textView"
        android:layout_toLeftOf="@+id/textView2"
        android:layout_toStartOf="@+id/textView2" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Blue"
        android:id="@+id/textView5"
        android:layout_alignTop="@+id/textView4"
        android:layout_centerHorizontal="true"
        android:padding="3dp"
        android:background="#001eff"
        android:textSize="25dp"
        android:gravity="center_horizontal" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Indigo"
        android:id="@+id/textView6"
        android:padding="3dp"
        android:background="#9000ff"
        android:textSize="25dp"
        android:gravity="center_horizontal"
        android:layout_alignTop="@+id/textView5"
        android:layout_toRightOf="@+id/textView2"
        android:layout_toEndOf="@+id/textView2" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Violet"
        android:id="@+id/textView7"
        android:layout_below="@+id/textView5"
        android:layout_marginTop="48dp"
        android:padding="3dp"
        android:background="#ff00b7"
        android:textSize="25dp"
        android:gravity="center_horizontal"
        android:layout_toLeftOf="@+id/textView3"
        android:layout_alignLeft="@+id/textView4"
        android:layout_alignStart="@+id/textView4" />
</RelativeLayout>

程式碼結果截圖
相對佈局

3.3 TableLayout

顯示滾動的單列列表，在手機的設定裡基本就是使用這種佈局。

<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"
    tools:context="com.example.tablelayout.MainActivity"
    android:background="#080404">

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <TextView
            android:text="Open..."
            android:layout_column="1"
            android:padding="3dp"
            android:textSize="20dp"
            android:textColor="#fefefe" />
        <TextView
            android:text="Ctrl-O"
            android:layout_column="2"
            android:padding="3dp"
            android:textSize="20dp"
            android:gravity="right"
            android:textColor="#ffffff" />
    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <TextView
            android:text="Save..."
            android:layout_column="1"
            android:padding="3dp"
            android:textSize="20dp"
            android:textColor="#ffffff" />
        <TextView
            android:text="Ctrl-S"
            android:layout_column="2"
            android:padding="3dp"
            android:textSize="20dp"
            android:gravity="right"
            android:textColor="#ffffff" />
    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <TextView
            android:text="Save As..."
            android:layout_column="1"
            android:padding="3dp"
            android:textSize="20dp"
            android:textColor="#ffffff" />
        <TextView
            android:text="Ctrl-Shift-S"
            android:padding="3dp"
            android:textSize="20dp"
            android:gravity="right"
            android:textColor="#ffffff" />
    </TableRow>

    <View
        android:layout_height="3dp"
        android:background="#ffffff" />
    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <TextView
            android:text="X"
            android:padding="3dp"
            android:textSize="20dp"
            android:textColor="#ffffff" />
        <TextView
            android:text="Import..."
            android:layout_column="1"
            android:padding="3dp"
            android:textSize="20dp"
            android:textColor="#ffffff" />
    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <TextView
            android:text="X"
            android:padding="3dp"
            android:textSize="20dp"
            android:textColor="#ffffff" />
        <TextView
            android:text="Export"
            android:layout_column="1"
            android:padding="3dp"
            android:textSize="20dp"
            android:textColor="#ffffff" />
        <TextView
            android:text="Ctrl-E"
            android:padding="3dp"
            android:textSize="20dp"
            android:gravity="right"
            android:textColor="#ffffff" />
    </TableRow>
    <View
        android:layout_height="3dp"
        android:background="#ffffff" />
    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <TextView
            android:text="Exit"
            android:layout_column="1"
            android:padding="3dp"
            android:textSize="20dp"
            android:textColor="#ffffff" />
    </TableRow>
</TableLayout>

程式碼結果截圖
列表佈局

4.總結

XML佈局是一種非常簡單實用的佈局，在一些簡單的應用開發中合理的使用XML佈局可以更快的完成佈局的實現。

作者：黃毅
原文連結：點選這裡

簡單的Android XML佈局使用

Android XML佈局前言今天我們來簡單介紹一下Android的XML佈局以及三種常見的XML佈局目錄 1.XML佈局的優點在XML檔案中設計UI可以更好地將應用的外觀與控制應用行為的程式碼隔離，每次修改或調整介

Android xml 佈局

首先按照程式的目錄結構大致分析：　　res/layout/ 這個目錄存放的就是佈局用的xml檔案，一般預設為main.xml 　　res/values/ 這個目錄存放的是一堆常量的xml檔案　　res/drawable/ 存放的是一些圖片什麼的，當然圖示也在這裡　　下面主要對layout下的xm

一個很好，很實用，學習android xml佈局檔案

用了各種佈局組合成一個漂亮的見面。新手很實用的一個例子，大家學習一下。。。。。。分享本例用到了（相對佈局，線性佈局的各種巢狀使用）效果圖片： <?xml version="1.0" encoding="utf-8"?> <RelativeLayout

Android xml佈局中設定顏色透明度

百分比-開頭字母–> 100% —FF–> 95% — F2–> 90% — E6–> 85% — D9–> 80% — CC–> 75% — BF–&

android xml佈局中TextView文字居中方法

XML檔案內容如下： <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schem

eclipse新建Android專案無法顯示xml佈局檔案

今天使用eclipse新建Android專案後，編寫xml佈局檔案時想預覽一下效果，結果無法顯示，並且報錯：The following classes could not be instantiat

Android Studio XML佈局檔案設定程式碼自動補齊快捷鍵

Android Studio XML佈局檔案中你會發現無法進行程式碼快捷鍵提示了，經過查詢發現： File -> Settings -> keymap 然後在收入框裡寫 Basic 我的是更改為Alt+反斜槓然後右擊Basic的快捷鍵remove再新增你想

Android效能優化之：XML佈局檔案優化

Android中XML佈局檔案的使用非常頻繁，在載入XML佈局的時候，如果對XML檔案其進行優化，將會提高載入的效率。 HierarchyViewer工具再開始介紹之前先說一下HierarchyViewer工具的使用。不合理的佈局會使我們的應用程式

Android 自定義View引用xml佈局

在構造方法中呼叫方法： inflate(context, R.layout.activity_main, this); 一參 Context上下文二參 xml佈局檔案id 三參 ViewGro

Android 載入Assets目錄中Xml佈局檔案

最近由於專案開發使用到了動態佈局，因為打包sdk ，sdk 這塊activity 需要一些layout 檔案。而做過sdk 開發的小夥伴應該知道，layout 檔案是不能打包到jar 中的。當然了aar 除外。由於專案使用的還是jar包，所以怎麼解決lay

安卓xml佈局中 android:paddingBottom="@dimen/activity_vertical_margin"是什麼意思？

@dimen/activity_vertical_margin 是什麼意思？ @dimen/activity_vertical_margin這個的意思就是在你的values資料夾下面的dimens檔案裡面有一個name叫做activity_vertical_margin的

Android中xml佈局檔案中使用include引入佈局進行復用（解決使用include佈局重疊，顏色設定無效問題）

使用include引入佈局的作用提取重複的佈局程式碼，方便進行復用如何使用比如我們想要線上性佈局中建立三塊需要複用的佈局headview、centerview、butto

Android zar高速掃碼程式，（比zxing快很多倍），包更小，掃碼介面Xml佈局。

最近在為公司做一個倉庫管理系統，裡面涉及到物流掃碼，產品掃碼等功能，公司購置了許多PDA用來操作，因此最近研究了一下Android的掃碼。關於zxing 和zbar的比較，這裡我大概的瞭解了一下： zxing 是基於Java程式的，只需要新增一個jar即

解決Android studio無法預覽xml佈局檔案的問題

xml檔案中 xmlns:android="http://schemas.android.com/apk/res/android"> 出現“URI is not registered”，eve

【Android】 XML佈局檔案中，使用自定義屬性不提示和不生效

在XML檔案中使用首先要宣告 xmlns:toolbar=http://schemas.android.com/apk/res/cn.zzm.toolbar 注意，“toolbar”可以換成其他的任何名字，後面的url地址必須最後一部分必須用上自定義元件的包名。自定義屬性了

如何避免android layout.xml 佈局檔案中重名id的錯誤

在android 開發中，用來描述檢視佈局的layout.xml檔案中，通常會涉及到控制元件或子佈局的變數命名問題，有的時候大家為了提編碼速度，可能會造成同名id的問題。那麼佈局檔案中的id是否可以同名呢？分兩種情況：同一個layout.xml中的id重名不同la

Android學習第四課：Java程式碼實現XML佈局

權重屬性layout_height 在佈局控制元件中（如LinearLayout），子控制元件可以根據權重值（預設為0）來分配所佔據的空間，這需要結合layout_width或layout_height的值進行分類： 1）如果子控制元件layout_weight都為“ma

Android Studio Rendering Problems不能顯示xxx.xml佈局檔案

由於最近更新了android的SDK為22，然後開啟xxx.xml佈局檔案，發現以前都可以顯示，但是現在顯示不出來。提示： Rendering Problems This version of the reading library is more recent than

android關於用.xml佈局檔案中對View新增OnClick事件無法響應的事情

最近在寫一個專案，用到了Fragment，於是在Fragment裡用用LayoutInflate映射了一個.xml的佈局檔案， mRootView = (ViewGroup) inflater.inflate(R.layout.luka_category_fragme

Android中measure過程、WRAP_CONTENT詳解以及xml佈局檔案解析流程淺析(上)

繪製流程的三個步驟，即： 1、 measure過程 --- 測量過程 2、 layout 過程 --- 佈局過程 3、 draw 過程

簡單的Android XML佈局使用

Android XML佈局

前言

目錄

1.XML佈局的優點

2.XML佈局基礎介紹

2.1 呼叫XML佈局

2.2 XML佈局的常見屬性

3.常見的三種簡單XML佈局

3.1 LinearLayout

3.2 RelativeLayout

3.3 TableLayout

4.總結

相關推薦