03UI开发-基本布局

2018-03-17 本文已影响8人何惧l

线性布局 LinearLayout

这个布局会将它包含的控件在线性方向上依次排序,这个布局中有一个android:orientation="vertical"属性,这是让它在垂直方向排序，也可以指定为horizontal,这个时候控件就会在水平方法上进行排序

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/but_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="button 1"/>
    <Button
        android:id="@+id/but_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="button 2"/>
    <Button
        android:id="@+id/but_3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="button 3"/>

</LinearLayout>

长指定了Button的度和宽度都是wrap_content，并排序的方向都是垂直的

2018-03-10_15-38-20.png
当然了，把这个属性orientation="horizontal",就是水平的了

Snipaste_2018-03-10_15-38-20.png

android:layout_gravity属性：用于指定控件在布局中的对齐方式，一般top、bottom、center等，
但是需要注意的是，LinearLayout的排列方向是horizontal时，只有在垂直方向的对齐方式才会有效，因为此时水平方向的长度是不固定的，每添加一个控件，水平方向的长度都会放生变化，因而无法指定该方向上的对齐方式，同样的道理，当LinearLayout的排列方向是vertical时，只有水平方向上的对齐方式才会生效

<?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">

    <Button
        android:id="@+id/but_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="top"
        android:text="button 1"/>
    <Button
        android:id="@+id/but_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:text="button 2"/>
    <Button
        android:id="@+id/but_3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:text="button 3"/>

</LinearLayout>

由于现在的排列方向是水平的，那么只能指定垂直方向的排列方向

2018-03-10_15-57-03.png

android.layout_weight，这个属性允许我们使用比例的方式来控制控件的大小

<?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">

    <EditText
        android:id="@+id/edit_1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:hint="请输入用户名"/>

    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Send"/>
</LinearLayout>

这里使用水平的方式， android:layout_width="0dp"，指定这两个控件的宽度为0dp,这个时候控件的大小就是由 android:layout_weight="1"来决定的，这里表示这两个按钮在水平方向平分，当然了也可以指定别的数字，例如文本框指定3，按钮指定2，那么文本框的在水平方向上就占3/5的大小

Snipaste_2018-03-10_16-13-35.png
当然了，在实际中，我们指定文本框的:android:layout_width="0dp"，layout_weight="1"
按钮的宽度为layout_width="wrap_content"，这样按钮就自适应，文本框就会占用剩下的全部空间，这种方法在各种屏幕的适配方面会非常好

Snipaste_2018-03-10_16-18-55.png

相对布局 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_1"
        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/button_2"
        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/button_3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="button_3"/>

    <Button
        android:id="@+id/button_4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentBottom="true"
        android:text="button_4"/>

    <Button
        android:id="@+id/button_5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:text="button_5"/>
</RelativeLayout>

android:layout_centerInParent="true" 中间
android:layout_alignParentLeft="true" 左
android:layout_alignParentTop="true" 上
android:layout_alignParentRight="true" 右
android:layout_alignParentBottom="true" 下

Snipaste_2018-03-10_16-30-33.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_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/button_3"
        android:layout_toLeftOf="@id/button_3"
        android:text="button_1"/>

    <Button
        android:id="@+id/button_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/button_3"
        android:layout_toRightOf="@id/button_3"
        android:text="button_2"/>

    <Button
        android:id="@+id/button_3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="button_3"/>

    <Button
        android:id="@+id/button_4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/button_3"
        android:layout_toLeftOf="@id/button_3"
        android:text="button_4"/>

    <Button
        android:id="@+id/button_5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/button_3"
        android:layout_toRightOf="@id/button_3"
        android:text="button_5"/>
</RelativeLayout>

android:layout_above="@id/button_3" 可以让这个控件位于指定控件的上方
android:layout_below="@id/button_3" 可以让这个空间位于指定控件的下方
android:layout_toLeftOf="@id/button_3" 可以让这个控件位于指定控件的左边
android:layout_toRightOf="@id/button_3" 可以让这个控件位于指定控件的右边

Snipaste_2018-03-10_16-30-33.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_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/button_2"
        android:layout_alignLeft="@id/button_3"
        android:text="button_1"/>

    <Button
        android:id="@+id/button_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/button_3"
        android:layout_alignLeft="@id/button_3"
        android:text="button_2"/>

    <Button
        android:id="@+id/button_3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="button_3"/>

    <Button
        android:id="@+id/button_4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/button_3"
        android:layout_alignRight="@id/button_3"
        android:text="button_4"/>

    <Button
        android:id="@+id/button_5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/button_4"
        android:layout_alignRight="@id/button_3"
        android:text="button_5"/>
</RelativeLayout>

android:layout_alignRight="@id/button_3":让这个控件的右边和指定控件的右边对齐
android:layout_alignLeft="@id/button_3":让这个控件的左边和指定控件的左边对齐
android:layout_alignBottom="@id/button_3":让这个控件的下边和指定控件的下边对齐
android:layout_alignTop="@id/button_3":让这个控件的上边和指定控件的上边对齐

Snipaste_2018-03-10_16-57-24.png

帧布局 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_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="This is TextView"/>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher"/>

</FrameLayout>

由于图片是之后添加的，所以就覆盖掉了文字

Snipaste_2018-03-10_17-05-11.png

当然了，除了这个默认的效果以外，还可以使用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_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="left"
        android:text="This is TextView"/>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:src="@mipmap/ic_launcher"/>

</FrameLayout>

Snipaste_2018-03-10_17-08-48.png

由于这个布局在定位的方面有欠缺，所以这个布局用的场景比较少

参考文献：第一行代码

03UI开发-基本布局

线性布局 LinearLayout

相对布局 RelativeLayout

帧布局 FrameLayout

猜你喜欢

热点阅读