第2章Android常見界面布局chapter02

第2章Android常見界面布局2

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

布局的使用學(xué)會搭建常用布局1學(xué)習(xí)目標(biāo)2.1布局的創(chuàng)建主講內(nèi)容Speechcontent主講內(nèi)容View視圖所有的UI元素都是通過View與ViewGroup構(gòu)建的，對于一個Android應(yīng)用的用戶界面來說，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布局類型2.2.2RelativeLayout相對布局2.2.3TableLayout表格布局2.2.4FrameLayout幀布局2.2.5ConstraintLayout布局界面布局編寫方式界面布局編寫方式在XML文件中編寫布局：推薦此種方式布局有效的將界面中布局的代碼和Java代碼隔離，使程序的結(jié)構(gòu)更加清晰。在Java代碼中編寫布局在Android中所有布局和控件的對象都可以通過new關(guān)鍵字創(chuàng)建出來，將創(chuàng)建的View控件添加到ViewGroup布局中，從而實現(xiàn)View控件在布局界面中顯示。2.2.1LinearLayout線性布局在XML文件中編寫布局<?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>相對布局繼承自ViewGroupTextView控件繼承自View2.2.1LinearLayout線性布局設(shè)置文字的樣式在Java代碼中編寫布局RelativeLayoutrelativeLayout=newRelativeLayout(this);RelativeLayout.LayoutParamsparams=newRelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT,RelativeLayout.LayoutParams.WRAP_CONTENT);//addRule參數(shù)對應(yīng)RelativeLayoutXML布局的屬性params.addRule(RelativeLayout.CENTER_IN_PARENT);//設(shè)置居中顯示TextViewtextView=newTextView(this);//創(chuàng)建TextView控件textView.setText("Java代碼實現(xiàn)界面布局");//設(shè)置TextView的文字內(nèi)容textView.setTextColor(Color.RED);//設(shè)置TextView的文字顏色textView.setTextSize(18);//設(shè)置TextView的文字大小//添加TextView對象和TextView的布局屬性relativeLayout.addView(textView,params);setContentView(relativeLayout);//設(shè)置在Activity中顯示RelativeLayout2.2.1LinearLayout線性布局五種常用布局線性布局相對布局幀布局表格布局約束布局特點：以水平或垂直方向排列特點：通過相對定位排列特點：開辟空白區(qū)域，幀里的控件(層)疊加特點：表格形式排列特點：可視化的方式編寫布局2.2.1LinearLayout線性布局布局的通用屬性Android系統(tǒng)提供的五種常用布局直接或者間接繼承自ViewGroup，因此它們也支持在ViewGroup中定義的屬性，這些屬性可以看作是布局的通用屬性。2.2.1LinearLayout線性布局屬性名稱功能描述android:id設(shè)置布局的標(biāo)識android:layout_width設(shè)置布局的寬度android:layout_height設(shè)置布局的寬度android:background設(shè)置布局的背景android:layout_margin設(shè)置當(dāng)前布局與屏幕邊界或與周圍控件的距離android:padding設(shè)置當(dāng)前布局與該布局中控件的距離Padding、margin2.2.1LinearLayout線性布局多學(xué)一招：Android支持的尺寸單位2.2.1LinearLayout線性布局尺寸單位px（pixels，像素)：每個px對應(yīng)屏幕上的一個點。dp（Density-independentPixels，設(shè)備獨立像素）：是一種與屏幕密度無關(guān)的尺寸單位。sp（scaledpixels，比例像素）：主要處理字體的大小，可以根據(jù)用戶字體大小首選項進行縮放。in（inches，英寸）：標(biāo)準長度單位。pt（points，磅）：屏幕物理長度單位，1磅為1/72英寸。mm（Millimeters，毫米）：屏幕物理長度單位。相對布局相對布局（RelativeLayout）是通過相對定位的方式指定子控件位置，即以其它控件或父容器為參照物，擺放控件位置。定義格式2.2.2RelativeLayout相對布局<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)前控件是否與父控件頂端對齊android:layout_alignParentLeft設(shè)置當(dāng)前控件是否與父控件左對齊android:layout_alignParentRight設(shè)置當(dāng)前控件是否與父控件右對齊android:layout_alignParentBottom設(shè)置當(dāng)前控件是否與父控件底端對齊android:layout_alignTop設(shè)置當(dāng)前控件的上邊界與某控件的上邊界對齊android:layout_alignBottom設(shè)置當(dāng)前控件的下邊界與某控件的下邊界對齊android:layout_alignLeft設(shè)置當(dāng)前控件的左邊界與某控件的左邊界對齊android:layout_alignRight設(shè)置當(dāng)前控件的右邊界與某控件的右邊界對齊2.2.2相對布局—控件位置屬性相對布局<RelativeLayoutxmlns:android="/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent">……..</RelativeLayout>2.2.2RelativeLayout相對布局表格布局采用行、列的形式來管理控件，它不需要明確聲明包含多少行、多少列，而是通過在TableLayout布局中添加TableRow布局來控制表格的行數(shù)，通過在TableRow布局中添加控件來控制表格的列數(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ù)幾列，默認為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ū)域中的每個子控件占一幀，這些幀會一個一個疊加在一起，后加入的控件會疊加在上一個控件上層所有控件都默認顯示在屏幕左上角。定義格式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新添加的布局。它適合使用可視化的方式編寫界面布局——當(dāng)然，可視化操作的背后仍然是使用XML代碼實現(xiàn)的，只不過這些代碼是AndroidStudio根據(jù)我們的操作自動生成的。相對定位居中定位和傾向Chain2.2.5ConstraintLayout約束布局相對定位相對定位是在ConstraintLayout中創(chuàng)建布局的基本構(gòu)建方法之一。相對定位即一個控件相對于另一個控件進行定位。ConstraintLayout布局中的控件可以在橫向和縱向上以添加約束關(guān)系的方式進行相對定位，其中，橫向邊包括Left、Start、Right、End，縱向邊包括Top、Bottom、Baseline（文本底部的基準線）。2.2.5ConstraintLayout約束布局屬性名稱功能描述layout_constraintLeft_toLeftOf控件的左邊與另外一個控件的左邊對齊layout_constraintLeft_toRightOf控件的左邊與另外一個控件的右邊對齊layout_constraintRight_toLeftOf控件的右邊與另外一個控件的左邊對齊layout_constraintRight_toRightOf控件的右邊與另外一個控件的右邊對齊layout_constraintTop_toTopOf控件的上邊與另外一個控件的上邊對齊layout_constraintTop_toBottomOf控件的上邊與另外一個控件的底部對齊layout_constraintBaseline_toBaselineOf控件間的文本內(nèi)容基準線對齊layout_constraintStart_toEndOf控件的起始邊與另外一個控件的尾部對齊layout_constraintStart_toStartOf控件的起始邊與另外一個控件的起始邊對齊layout_constraintEnd_toStartOf控件的尾部與另外一個控件的起始邊對齊layout_constraintEnd_toEndOf控件的尾部與另外一個控件的尾部對齊2.2.5約束布局—相對定位關(guān)系的屬性居中定位和傾向在ConstraintLayout布局中，控件可以通過添加約束的方式確定該控件在父布局（ConstraintLayout）中的相對位置。當(dāng)相同方向上（橫向或縱向），控件兩邊同時