LinearLayout又称为线性布局,是一种非常常用的布局.这个布局会将它所包含的控件在线性方向上依次排列.
android:orientation="vertical" //属性指定线性排列的方向,默认是垂直排列
//以下是横向排列:
android:orientation="horizontal"
修改activity_main.xml,这个时候的按钮就是横向排列了:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="match_parent"
android:baselineAligned="false">
<Button
android:id="@+id/button_01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button01"
/>
<Button
android:id="@+id/button_02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button02"
/>
<Button
android:id="@+id/button_03"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button03"
/>
</LinearLayout>
我们还可以修改按钮的位置,android:layout_gravity="top"可以使按钮处于顶部:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="match_parent"
android:baselineAligned="false">
<Button
android:id="@+id/button_01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:text="button01"
/>
<Button
android:id="@+id/button_02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:text="button02"
/>
<Button
android:id="@+id/button_03"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:text="button03"
/>
</LinearLayout>
LinearLayout有个重要的属性android:layout_weight,这个不受android:layout_width的影响,让控件大小按照所有android:layout_weight之和来算各个控件的大小比例,比如下面的所有控件之和为10,第一个占屏幕宽度的比例为5/10的宽:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="match_parent"
android:baselineAligned="false">
<Button
android:id="@+id/button_01"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="5"
android:text="button01"
/>
<Button
android:id="@+id/button_02"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="3"
android:text="button02"
/>
<Button
android:id="@+id/button_03"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:text="button03"
/>
</LinearLayout>
RelativeLayout又称为相对布局,是一种非常常用的布局,它可以让控件出现在布局的任何位置,如下:
<?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_01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="button01"
/>
<Button
android:id="@+id/button_02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:text="button02"
/>
<Button
android:id="@+id/button_03"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="button03"
/>
<Button
android:id="@+id/button_04"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="button04"
/>
<Button
android:id="@+id/button_05"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:text="button05"
/>
</RelativeLayout>
android:layout_alignParentBottom="true" 使控件出现在底部右边
android:layout_alignParentRight="true"
呈现的界面如下所示:
image.png
以上的每个控件都是相对于父布局进行定位的,当然我们也可以相对控件进行定位,如下:
<?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_03"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="button03"
/>
<Button
android:id="@+id/button_01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/button_03"
android:layout_toLeftOf="@id/button_03"
android:text="button01"
/>
<Button
android:id="@+id/button_02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/button_03"
android:layout_toRightOf="@id/button_03"
android:text="button02"
/>
<Button
android:id="@+id/button_04"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/button_03"
android:layout_toLeftOf="@id/button_03"
android:text="button04"
/>
<Button
android:id="@+id/button_05"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/button_03"
android:layout_toRightOf="@id/button_03"
android:text="button05"
/>
</RelativeLayout>
这里布局后的界面如下所示:
image.png
android:layout_above //这个可以让一个控件处于另一个控件的上方
android:layout_below //这个可以让一个控件处于另一个控件的下方
android:layout_toLeftOf //这个可以让一个控件处于另一个控件的左边
android:layout_toRightOf //这个可以让一个控件处于另一个控件的右边
FrameLayout又称为帧布局,它相比于前面两种布局就简单许多,因此它的应用场景也很少.这种布局所有的控件都会默认放在左上角:
<?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"
>
<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"
/>
</FrameLayout>
效果如下:
image.png
这里也可以用android:layout_gravity进行定位:
<?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"
>
<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"
/>
</FrameLayout>
由于线性布局已经支持按比例排列控件了,所以百分比布局只在相对布局和帧布局上做了扩展,有
PercentFrameLayout 和 PercentRelativeLayout 用法一致 这里只列举一个PercentFrameLayout
先加入相应的依赖包:
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
exclude group: 'com.android.support', module: 'support-annotations'
})
compile 'com.android.support:appcompat-v7:25.3.1'
compile 'com.android.support:percent:25.3.1'
compile 'com.android.support.constraint:constraint-layout:1.0.2'
}
然后修改xml的内容:
<?xml version="1.0" encoding="utf-8"?>
<android.support.percent.PercentFrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<Button
android:id="@+id/button1"
android:text="button01"
app:layout_widthPercent="50%"
app:layout_heightPercent="50%"
android:layout_gravity="left|top"
/>
<Button
android:id="@+id/button2"
android:text="button02"
app:layout_widthPercent="50%"
app:layout_heightPercent="50%"
android:layout_gravity="right|top"
/>
<Button
android:id="@+id/button3"
android:text="button03"
app:layout_widthPercent="50%"
app:layout_heightPercent="50%"
android:layout_gravity="left|bottom"
/>
<Button
android:id="@+id/button4"
android:text="button04"
app:layout_widthPercent="50%"
app:layout_heightPercent="50%"
android:layout_gravity="right|bottom"
/>
</android.support.percent.PercentFrameLayout>
效果如下:
image.png