2. 程式人生 > >Android第三講——五大布局(UI)

Android第三講——五大布局(UI)

阿新 • • 發佈：2019-02-16

Android的五大布局

UI：View與ViewGroup物件建立的UI
ViewGroup是包含多個View與ViewGroup的容
器ViewGroup繼承於View
巢狀層次不要超過10層，否則低執行效率

px畫素
dp一英寸上存在160px 那麼1dp=1px 一英寸/160，手機不同解析度不同dp不同
sp 文字的大小跟dp一樣，只用於文字的大小

線性佈局LinearLayout

只能是單列或者單行
沒有設定orientation預設horizontal(水平)
vertical(垂直)
gravity:表示控制元件所處的位置

<?xml version="1.0" encoding="utf-8"?>
 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="bottom">
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text
 
="Button1"/>
</LinearLayout>

這裡寫圖片描述
layout_gravity相對於父控制元件

     <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button2"
        android:layout_gravity="center_horizontal"/><!-- 表示此按鈕處於相對於父控制元件的水平居中-->

layout_weight所佔比重

 <Button
        android:layout_width="match_parent"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:text="Button1"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button2"
        android:layout_gravity="center_horizontal"/>

這裡寫圖片描述

練習，寫出如下佈局：
這裡寫圖片描述
1、

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <Button
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>
    <Button
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>
    <Button
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>
    <Button
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>
</LinearLayout>

2、

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="match_parent" />
    <Button
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="match_parent" />
    <Button
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="match_parent" />
    <Button
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="match_parent" />
</LinearLayout>

3、需要LinearLayout巢狀

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <Button
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="2">
        <LinearLayout
            android:layout_width="0dp"
            android:layout_weight="2"
            android:orientation="vertical"
            android:layout_height="match_parent">
            <Button
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"/>
            <Button
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="2"/>
        </LinearLayout>
        <Button
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="match_parent" />
    </LinearLayout>
</LinearLayout>

4、需要LinearLayout巢狀

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">
        <Button
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="match_parent" />
        <LinearLayout
            android:layout_width="0dp"
            android:layout_weight="2"
            android:layout_height="match_parent"
            android:orientation="vertical">
            <Button
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"/>
            <Button
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"/>
        </LinearLayout>
    </LinearLayout>
    <Button
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">
        <LinearLayout
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="match_parent"
            android:orientation="vertical">
            <Button
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"/>
            <Button
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"/>
            <Button
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"/>
        </LinearLayout>
        <Button
            android:layout_width="0dp"
            android:layout_weight="2"
            android:layout_height="match_parent" />
    </LinearLayout>
</LinearLayout>

相對佈局RelativeLayout

alignParentLeft Right Bottom Top相對父控制元件的上下左右
centerInParent centerVertical
centerHorizontal相對父控制元件的中心

<?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="match_parent">
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:text="Button1"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:text="Button2"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:text="Button3"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:text="Button4"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:text="Button5"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:text="Button6"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Button7"/>
</RelativeLayout>

如圖：
這裡寫圖片描述

toLeftOf toRightOf above below相對後邊跟的id的控制元件的上下左右

<?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="match_parent">
    <Button
        android:id="@+id/button_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Button1"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@id/button_1"
        android:text="Button2"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/button_1"
        android:text="Button3"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/button_1"
        android:text="Button4"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/button_1"
        android:text="Button5"/>
</RelativeLayout>

如圖：
這裡寫圖片描述

alignLeft alignRight alignBottom alignTop相對有空間的上下左右邊對齊 

<?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="match_parent">
    <Button
        android:id="@+id/button_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Button1"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@id/button_1"
        android:text="Button2"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@id/button_1"
        android:text="Button4"/>
</RelativeLayout>

如圖：
這裡寫圖片描述
alignBaseline基準線對齊

<?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="match_parent">
    <Button
        android:id="@+id/button_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Button1"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@id/button_1"
        android:text="Button2"/>
</RelativeLayout>

如圖：
這裡寫圖片描述

幀佈局FrameLayout

visibility()屬性;visible顯示 invisible不顯示但是佔用位置 gone直接去掉
可以疊加.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        android:layout_width="150dp"
        android:layout_height="150dp"
        />
    <Button
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:textAllCaps="false"
        android:text="@string/button2"/>
</FrameLayout>

這裡寫圖片描述此時兩個Button都可見 

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:visibility="invisible"
        />
    <Button
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:textAllCaps="false"
        android:text="@string/button2"/>
</FrameLayout>

這裡寫圖片描述此時最下邊的Button不可見，但是它還佔用著位置

表格佈局TableLayout

一般的：首先要有TableRow

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TableRow>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button1"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button2"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button3"/>
    </TableRow>
    <TableRow>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button1"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button2"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button3"/>
    </TableRow><TableRow>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button1"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button2"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button3"/>
</TableRow>
</TableLayout>

這裡寫圖片描述
collapseColumns隱藏某一列
TableLayout內加入此句：0表示第一列，依次類推

android:collapseColumns="0"

這裡寫圖片描述 此時隱藏了第一列。
shrinkColumns自動收縮某一列，防止其他列被擠出去

android:shrinkColumns="0"
<!--將Button1改為 -->
 <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button1sfdsaaaaaaaaaaaaaadsffffffffff"/>

這裡寫圖片描述
layout_span表示佔幾列

<!--在Button1中加入layout_span-->
<Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            <!--"2"表示此Button佔2列-->
            android:layout_span="2"
            android:text="Button1"/>

這裡寫圖片描述 此時Button1佔兩列。

絕對佈局AbsoluteLayout

·不推薦使用
直接隨意拖拽。

相關推薦

Android第三講——五大布局(UI)

Android的五大布局 UI：View與ViewGroup物件建立的UI ViewGroup是包含多個View與ViewGroup的容 器ViewGroup繼承於View 巢狀層次不要超過10層，否則低執行效率 px畫素 dp一英寸上存在160p

android中的五大布局(控件的容器，可以放button等控件)

orien ble frame http logs 控件 容器 div 以及 一.android中五大布局相當於是容器，這些容器裏可以放控件也可以放另一個容器，子控件和布局都需要制定屬性。 1.相對布局：RelativeLayout @1控件默認堆疊排列，需要制定控件的相

安卓基礎知識回顧------Android中的五大布局

Android中的五大布局 在android中的佈局有五大類，這五種佈局為別為：LinearLayout（線性佈局），FrameLayout（框架佈局），RelativeLayout（相對佈局），TableLayout（表格佈局），AbsoluteLayout

【Android開發-5】界面裝修，五大布局你選誰

比例 技術分享 article 嵌套 content java lin layout mark 前言：假設要開一家店，門店裝修是非常重要的事情。有錢都請專門的建築設計公司來設計裝修，沒錢的僅僅能自己瞎折騰。好不好看全憑自己的感覺。像Android開發。在移動端大家看到的

Android五大布局介紹&屬性設置大全

relative oid 像素 屬性 div data 空間 常用 關系 前言 在進行Android開發中，常常需要用到各種布局來進行UI的繪制，今天我們就來講下Android開發中最常用的五大布局介紹和相關屬性的設置。 目錄 Android五大布局介紹&屬性

android 五大布局

場景 通過 ott false 前言 roi 框架 知識 size 前言 android開發中UI必備知識。android 五大布局及相關屬性介紹。 一、布局介紹 1.FrameLayout：框架布局 2.LinearLayoyut：線性布局 3.AbsolutLay

Android常用五大布局屬性控制

一、LinearLayout(線性佈局) 提供了控制元件水平垂直排列的模型，同時可以通過設定子控制元件的weight佈局引數控制各個控制元件在佈局中的相對大 小。 水平（vertical）垂直（horizontal） fill-parent:佔滿整個螢幕 wra

Android自學筆記之 Android五大布局之線性佈局的功能、常用屬性、用法

1.介紹：   線性佈局管理器對存放其中的控制元件或佈局採用線性方式管理 2.LinearLayout的常用屬性android:orientation = “vertical” —— 該屬性決定它子類

淺談Android五大布局

Android的介面是有佈局和元件協同完成的，佈局好比是建築裡的框架，而元件則相當於建築裡的磚瓦。元件按照佈局的要求依次排列，就組成了使用者所看見的介面。Android的五大布局分別是LinearLayout（線性佈局）、FrameLayout（單幀佈局）、Relativ

Android五大布局介紹&屬性設定大全

前言 在進行Android開發中，常常需要用到各種佈局來進行UI的繪製，今天我們就來講下Android開發中最常用的五大布局介紹和相關屬性的設定。 目錄 一、佈局介紹 在Android中，共有五種佈局方式，分別是： FrameLayout(框架佈局)LinearLayout(線性佈局)Absolut

Android系統五大布局詳解Layout

  我們知道Android系統應用程式一般是由多個Activity組成，而這些Activity以檢視的形式展現在我們面前，檢視都是由一個一個的元件構成的。元件就是我們常見的Button、TextEdit等等。那麼我們平時看到的Android手機中那些漂亮的介面是怎麼顯示出來的

Android開發之詳解五大布局

為了適應各式各樣的介面風格，Android系統提供了5種佈局，這5種佈局分別是： LinearLayout(線性佈局) TableLayout(表格佈局) RelativeLayout(相對佈局) AbsoluteLayout(絕對佈局) FrameLayout(框架佈局)

淺談Android五大布局——LinearLayout、FrameLayout和AbsoulteLayout

    Android的介面是有佈局和元件協同完成的，佈局好比是建築裡的框架，而元件則相當於建築裡的磚瓦。元件按照佈局的要求依次排列，就組成了使用者所看見的介面。Android的五大布局分別是LinearLayout（線性佈局）、FrameLayout（單幀佈局）、Re

Android五大布局特性

前言： 大家剛開始接觸安卓的時候應該都知道、安卓有四大元件、五大布局，今天來給大家列出各佈局中常用的方法。 LinearLayout 線性佈局 android:id - 為控制元件指定相應的

android基礎--五大布局

<?xml version="1.0" encoding="utf-8"?> <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:layout_widt

控制元件懸浮在某個控制元件之上 Android五大布局方式——相對佈局（RelativeLayout）屬性詳解

如圖所示,想要實現搜尋框在輪播圖上面,不管滑動與否,這個組合控制元件都在上面 1.就要用到RelativeLayout,相對於父元素定位,而且這個搜尋框的組合控制元件必須要放在所有控制元件下面,在使用android:layout_alignParentTop="true"

Android動態添加布局LayoutInflater簡單用法

下面是關於 LayoutInflater 簡單用法： 直接看例子，我想在 activity_main 檔案中動態的新增一個佈局；下面是 activity_main 檔案中的程式碼： <RelativeLayout xmlns:android="http://schemas.and

View&五大布局介紹

自動換行只需要將 singleLine屬性設定為false 即可； 一下是textview的所有屬性：        android:autoLink設定是否當文字為URL連結/email/電話號碼/map時，文字顯示為可點選的連結。可選值(none/web/email/phone/map/all)

五大布局----LinearLayout線性佈局

LinearLayout 1、LinearLayout是線性佈局控制元件，它包含的子控制元件將以橫向或縱向的方式排列。 2、weight屬性： 當高度設定為wrap_content時，按照weight設定的比例顯示。 當高度設定為ma

安卓學習筆記之———五大布局

首先介紹一下安卓的五大布局分別是什麼？ 線性佈局(LinearLayout) 相對佈局(RelativeLayout) 幀佈局(FrameLayout) 表格佈局(TableLayout) 絕對佈局