UI设计-详解四种布局

Dream城堡

发布于 2018-12-13 17:11:02

8280

发布于 2018-12-13 17:11:02

文章被收录于专栏：Spring相关Spring相关

UI设计-详解四种布局

1.线性布局

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>

2.相对布局

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 //这个可以让一个控件处于另一个控件的右边

3.帧布局

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>

4.百分比布局

由于线性布局已经支持按比例排列控件了,所以百分比布局只在相对布局和帧布局上做了扩展,有

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

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2018.11.16 ，如有侵权请联系 cloudcommunity@tencent.com 删除

其他

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

其他

登录后参与评论

0 条评论

热度

UI设计-详解四种布局

UI设计-详解四种布局

UI设计-详解四种布局

1.线性布局

2.相对布局

3.帧布局

4.百分比布局

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐