详解四种基本布局
布局是一种可用于放置很多控件的容器,他可以按照一定的规律调整内部控件的位置,从而编写出精美的页面
布局内部除了放置控件,也可以放置布局
布局与控件的关系,如图
线性布局(LinearLayout)
android:orientation (排列方向)
- horizontal:水平排列(默认), 内部控件的宽度不能设置为match_parent,设置为match_parent,会把整个水平空间占满
- vertical :纵向排列,内部控件的高度不能设置为match_parent,设置为match_parent,会把整个纵向空间占满
android:layout_gravity (用于指定控件在布局中的对齐方式)
- 当LinearLayout的排列方向为horizontal时,只有垂直方向上的对齐方式才会生效;当LinearLayout的排列方向为vertical时,只有水平方向上的对齐方式才会生效
实例
//布局
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
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_gravity="top"
android:text="Button 1"/>
<Button
android:id="@+id/button_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:text="Button 2"/>
<Button
android:id="@+id/button_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:text="Button 3"/>
</LinearLayout>
android:layout_weight (允许我们使用比例的方式来指定控件的大小,他在实际屏幕的适配中起到非常重要的作用)
-
属性值同时指定为1,这表示 EditText和Button在水平方向平分宽度
-
实例
//指定android:layout_weight <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="match_parent" > <EditText android:id="@+id/input_message" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:hint="Type somrthing" tools:ignore="Suspicious0dp" /> <Button android:id="@+id/send" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Send" tools:ignore="Suspicious0dp" android:layout_weight="1"/> </LinearLayout>
//使用layout_weight实现宽度自适配效果
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<EditText
android:id="@+id/input_message"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:hint="Type somrthing"
tools:ignore="Suspicious0dp" />
<Button
android:id="@+id/send"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Send"
/>
</LinearLayout>
相对布局(RelativeLayout)
-
android:layout_alignParentLeft :左对齐
-
android:layout_alignParentRight:右对齐
-
layout_alignParentTop:上对齐
-
android:layout_alignParentBottom:下对齐
-
android:layout_centerInParent:居中
-
举例
//控件相对于父布局定位的效果 //通过true和false控制 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" > <!--左上--> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_alignParentTop="true" android:text="Button 1" /> <!--右上--> <Button android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_alignParentTop="true" android:text="Button 2" /> <!--居中--> <Button android:id="@+id/button3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:text="Button 3" /> <!--左下--> <Button android:id="@+id/button4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentLeft="true" android:text="Button4" /> <!--右下--> <Button android:id="@+id/button5" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentRight="true" android:text="Button5" /> </RelativeLayout>
-
android:layout_above:让一个控件位于另一个控件的上方
-
android:layout_below:让一个控件位于另一个控件的下方
-
android:layout_toLeftOf:让一个控件位于另一个控件的左侧
-
android:layout_toRightOf:让一个控件位于另一个控件的右侧
-
举例:
//控件相对于控件布局 //通过引用id控制 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" > <Button android:id="@+id/button3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:text="Button 3" /> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_above="@+id/button3" android:layout_toLeftOf="@+id/button3" android:text="Button 1" /> <Button android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_above="@+id/button3" android:layout_toRightOf="@+id/button3" android:text="Button 2" /> <Button android:id="@+id/button4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/button3" android:layout_toLeftOf="@+id/button3" android:text="Button4" /> <Button android:id="@+id/button5" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/button3" android:layout_toRightOf="@+id/button3" android:text="Button5" /> </RelativeLayout>
帧布局(FrameLayout)
帧布局没有方便的定位方式,所有控件都会默认的摆在布局的左上角
实例
//帧布局的默认效果
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="@+id/text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="This is TextView"/>
<ImageView
android:id="@+id/image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher_round"/>
</FrameLayout>
使用android:layout_gravity属性来指定控件在布局中的对齐方式
实例
//使用android:layout_gravity属性来指定控件在布局中的对齐方式
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="@+id/text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:text="This is TextView"/>
<ImageView
android:id="@+id/image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:src="@mipmap/ic_launcher_round"/>
</FrameLayout>