第2章Android常見(jiàn)界面布局chapter02

第2章Android常見(jiàn)界面布局2

·2.1布局的創(chuàng)建·2.2布局類(lèi)型3約束布局重點(diǎn)了解掌握2View視圖界面布局的編寫(xiě)方式

布局的使用學(xué)會(huì)搭建常用布局1學(xué)習(xí)目標(biāo)2.1布局的創(chuàng)建主講內(nèi)容Speechcontent主講內(nèi)容View視圖所有的UI元素都是通過(guò)View與ViewGroup構(gòu)建的，對(duì)于一個(gè)Android應(yīng)用的用戶(hù)界面來(lái)說(shuō)，ViewGroup作為容器盛裝界面中的控件，它可以包含普通的View控件，也可以包含ViewGroup。2.1布局的創(chuàng)建View視圖Actvity與View直接的關(guān)系2.1布局的創(chuàng)建2.2.1LinearLayout線性布局主講內(nèi)容Speechcontent主講內(nèi)容2.2布局類(lèi)型2.2.2RelativeLayout相對(duì)布局2.2.3TableLayout表格布局2.2.4FrameLayout幀布局2.2.5ConstraintLayout布局界面布局編寫(xiě)方式界面布局編寫(xiě)方式在XML文件中編寫(xiě)布局：推薦此種方式布局有效的將界面中布局的代碼和Java代碼隔離，使程序的結(jié)構(gòu)更加清晰。在Java代碼中編寫(xiě)布局在Android中所有布局和控件的對(duì)象都可以通過(guò)new關(guān)鍵字創(chuàng)建出來(lái)，將創(chuàng)建的View控件添加到ViewGroup布局中，從而實(shí)現(xiàn)View控件在布局界面中顯示。2.2.1LinearLayout線性布局在XML文件中編寫(xiě)布局<?xmlversion="1.0"encoding="utf-8"?><RelativeLayoutxmlns:android="http://schemas.androi /apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="使用XML布局文件控制UI界面"android:textColor="#ff0000"android:textSize="18sp"android:layout_centerInParent="true"/></RelativeLayout>相對(duì)布局繼承自ViewGroupTextView控件繼承自View2.2.1LinearLayout線性布局設(shè)置文字的樣式在Java代碼中編寫(xiě)布局RelativeLayoutrelativeLayout=newRelativeLayout(this);RelativeLayout.LayoutParamsparams=newRelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT,RelativeLayout.LayoutParams.WRAP_CONTENT);//addRule參數(shù)對(duì)應(yīng)RelativeLayoutXML布局的屬性params.addRule(RelativeLayout.CENTER_IN_PARENT);//設(shè)置居中顯示TextViewtextView=newTextView(this);//創(chuàng)建TextView控件textView.setText("Java代碼實(shí)現(xiàn)界面布局");//設(shè)置TextView的文字內(nèi)容textView.setTextColor(Color.RED);//設(shè)置TextView的文字顏色textView.setTextSize(18);//設(shè)置TextView的文字大小//添加TextView對(duì)象和TextView的布局屬性relativeLayout.addView(textView,params);setContentView(relativeLayout);//設(shè)置在Activity中顯示RelativeLayout2.2.1LinearLayout線性布局五種常用布局線性布局相對(duì)布局幀布局表格布局約束布局特點(diǎn)：以水平或垂直方向排列特點(diǎn)：通過(guò)相對(duì)定位排列特點(diǎn)：開(kāi)辟空白區(qū)域，幀里的控件(層)疊加特點(diǎn)：表格形式排列特點(diǎn)：可視化的方式編寫(xiě)布局2.2.1LinearLayout線性布局布局的通用屬性Android系統(tǒng)提供的五種常用布局直接或者間接繼承自ViewGroup，因此它們也支持在ViewGroup中定義的屬性，這些屬性可以看作是布局的通用屬性。2.2.1LinearLayout線性布局屬性名稱(chēng)功能描述android:id設(shè)置布局的標(biāo)識(shí)android:layout_width設(shè)置布局的寬度android:layout_height設(shè)置布局的寬度android:background設(shè)置布局的背景android:layout_margin設(shè)置當(dāng)前布局與屏幕邊界或與周?chē)丶木嚯xandroid:padding設(shè)置當(dāng)前布局與該布局中控件的距離Padding、margin2.2.1LinearLayout線性布局多學(xué)一招：Android支持的尺寸單位2.2.1LinearLayout線性布局尺寸單位px（pixels，像素)：每個(gè)px對(duì)應(yīng)屏幕上的一個(gè)點(diǎn)。dp（Density-independentPixels，設(shè)備獨(dú)立像素）：是一種與屏幕密度無(wú)關(guān)的尺寸單位。sp（scaledpixels，比例像素）：主要處理字體的大小，可以根據(jù)用戶(hù)字體大小首選項(xiàng)進(jìn)行縮放。in（inches，英寸）：標(biāo)準(zhǔn)長(zhǎng)度單位。pt（points，磅）：屏幕物理長(zhǎng)度單位，1磅為1/72英寸。mm（Millimeters，毫米）：屏幕物理長(zhǎng)度單位。相對(duì)布局相對(duì)布局（RelativeLayout）是通過(guò)相對(duì)定位的方式指定子控件位置，即以其它控件或父容器為參照物，擺放控件位置。定義格式2.2.2RelativeLayout相對(duì)布局<RelativeLayoutxmlns:android="/apk/res/android"

屬性="屬性值" ......></RelativeLayout>控件屬性功能描述android:layout_centerInParent設(shè)置當(dāng)前控件位于父布局的中央位置android:layout_centerVertical設(shè)置當(dāng)前控件位于父布局的垂直居中位置android:layout_centerHorizontal設(shè)置當(dāng)前控件位于父控件的水平居中位置android:layout_above設(shè)置當(dāng)前控件位于某控件上方android:layout_below設(shè)置當(dāng)前控件位于某控件下方android:layout_toLeftOf設(shè)置當(dāng)前控件位于某控件左側(cè)android:layout_toRightOf設(shè)置當(dāng)前控件位于某控件右側(cè)android:layout_alignParentTop設(shè)置當(dāng)前控件是否與父控件頂端對(duì)齊android:layout_alignParentLeft設(shè)置當(dāng)前控件是否與父控件左對(duì)齊android:layout_alignParentRight設(shè)置當(dāng)前控件是否與父控件右對(duì)齊android:layout_alignParentBottom設(shè)置當(dāng)前控件是否與父控件底端對(duì)齊android:layout_alignTop設(shè)置當(dāng)前控件的上邊界與某控件的上邊界對(duì)齊android:layout_alignBottom設(shè)置當(dāng)前控件的下邊界與某控件的下邊界對(duì)齊android:layout_alignLeft設(shè)置當(dāng)前控件的左邊界與某控件的左邊界對(duì)齊android:layout_alignRight設(shè)置當(dāng)前控件的右邊界與某控件的右邊界對(duì)齊2.2.2相對(duì)布局—控件位置屬性相對(duì)布局<RelativeLayoutxmlns:android="/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent">……..</RelativeLayout>2.2.2RelativeLayout相對(duì)布局表格布局采用行、列的形式來(lái)管理控件，它不需要明確聲明包含多少行、多少列，而是通過(guò)在TableLayout布局中添加TableRow布局來(lái)控制表格的行數(shù)，通過(guò)在TableRow布局中添加控件來(lái)控制表格的列數(shù)。2.2.3TableLayout表格布局<TableLayoutxmlns:android="/apk/res/android"

屬性=”屬性值”><TableRow> UI控件

</TableRow>......</TableLayout>表格布局屬性布局屬性功能描述android:stretchColumns設(shè)置該列被拉伸android:shrinkColumns設(shè)置該列被收縮android:collapseColumns設(shè)置該列被隱藏表格布局控件屬性控件屬性功能描述android:layout_column設(shè)置該單元顯示位置android:layout_span設(shè)置該單元格占據(jù)幾列，默認(rèn)為1列2.2.3TableLayout表格布局<TableLayoutxmlns:android="/apk/res/android"android:layout_width="wrap_content"android:layout_height="wrap_content"android:stretchColumns="2"><TableRow><Buttonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_column="0"android:text="按鈕1"/> ......</TableRow></TableLayout>第3列可被拉伸設(shè)置控件所在列2.2.3TableLayout表格布局幀布局幀布局（FrameLayout）用于在屏幕上創(chuàng)建一塊空白區(qū)域，添加到該區(qū)域中的每個(gè)子控件占一幀，這些幀會(huì)一個(gè)一個(gè)疊加在一起，后加入的控件會(huì)疊加在上一個(gè)控件上層所有控件都默認(rèn)顯示在屏幕左上角。定義格式2.2.4FrameLayout幀布局<FrameLayoutxmlns:android="/apk/res/android"

屬性="屬性值"></FrameLayout><FrameLayoutxmlns:android="/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:foreground="@mipmap/ic_launcher"android:foregroundGravity="left"></FrameLayout>設(shè)置幀布局容器的前景圖像（始終在所有子控件之上）設(shè)置前景圖像顯示位置2.2.4FrameLayout幀布局約束布局ConstraintLayout是AndroidStudio2.2新添加的布局。它適合使用可視化的方式編寫(xiě)界面布局——當(dāng)然，可視化操作的背后仍然是使用XML代碼實(shí)現(xiàn)的，只不過(guò)這些代碼是AndroidStudio根據(jù)我們的操作自動(dòng)生成的。相對(duì)定位居中定位和傾向Chain2.2.5ConstraintLayout約束布局相對(duì)定位相對(duì)定位是在ConstraintLayout中創(chuàng)建布局的基本構(gòu)建方法之一。相對(duì)定位即一個(gè)控件相對(duì)于另一個(gè)控件進(jìn)行定位。ConstraintLayout布局中的控件可以在橫向和縱向上以添加約束關(guān)系的方式進(jìn)行相對(duì)定位，其中，橫向邊包括Left、Start、Right、End，縱向邊包括Top、Bottom、Baseline（文本底部的基準(zhǔn)線）。2.2.5ConstraintLayout約束布局屬性名稱(chēng)功能描述layout_constraintLeft_toLeftOf控件的左邊與另外一個(gè)控件的左邊對(duì)齊layout_constraintLeft_toRightOf控件的左邊與另外一個(gè)控件的右邊對(duì)齊layout_constraintRight_toLeftOf控件的右邊與另外一個(gè)控件的左邊對(duì)齊layout_constraintRight_toRightOf控件的右邊與另外一個(gè)控件的右邊對(duì)齊layout_constraintTop_toTopOf控件的上邊與另外一個(gè)控件的上邊對(duì)齊layout_constraintTop_toBottomOf控件的上邊與另外一個(gè)控件的底部對(duì)齊layout_constraintBaseline_toBaselineOf控件間的文本內(nèi)容基準(zhǔn)線對(duì)齊layout_constraintStart_toEndOf控件的起始邊與另外一個(gè)控件的尾部對(duì)齊layout_constraintStart_toStartOf控件的起始邊與另外一個(gè)控件的起始邊對(duì)齊layout_constraintEnd_toStartOf控件的尾部與另外一個(gè)控件的起始邊對(duì)齊layout_constraintEnd_toEndOf控件的尾部與另外一個(gè)控件的尾部對(duì)齊2.2.5約束布局—相對(duì)定位關(guān)系的屬性居中定位和傾向在ConstraintLayout布局中，控件可以通過(guò)添加約束的方式確定該控件在父布局（ConstraintLayout）中的相對(duì)位置。當(dāng)相同方向上（橫向或縱向），控件兩邊同時(shí)