(二)android布局管理器

最新推荐文章于 2023-11-15 17:04:58 发布

大卫不加班

最新推荐文章于 2023-11-15 17:04:58 发布

阅读量389

点赞数

分类专栏：走心系列 android android 文章标签： android

本文链接：https://blog.csdn.net/qq_36922927/article/details/88257688

版权

走心系列同时被 3 个专栏收录

35 篇文章 1 订阅

订阅专栏

android

3 篇文章 0 订阅

订阅专栏

android

2 篇文章 0 订阅

订阅专栏

布局管理器: 就是为了方便控制多个控件之间位置关系,按照某个要求显示在屏幕恰当的位置,布局中可以放置其他控件,比如button,tetxtview,imageview等等,甚至可以嵌套其他布局

四大布局:

1 LinearLayout 线性布局

水平(horizontal 左往右)或者竖直(vertical 从上往下) (布局可以嵌套,可以达到tablelayout的效果,比较灵活)
示例:
设置: orientation 属性即可指定是水平还是垂直布局
如果要实现下图所示的界面:
在这里插入图片描述
使用linearLayout 需要嵌套才能完完成:
设计视图是这样的:(代码最好不用看了,比较长,看设计视图旁边的结构会比较清晰)

粘上代码:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".PetActivity">

    <LinearLayout
        android:id="@+id/linearLayout3"
        android:layout_width="0dp"
        android:layout_height="220dp"
        android:orientation="vertical"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="500dp"
            android:layout_weight="1"
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/imageView5"
                android:layout_width="146dp"
                android:layout_height="match_parent"
                android:layout_marginTop="0dp"
                android:width="60dp"
                android:adjustViewBounds="true"
                android:background="@drawable/keji2"

                />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="500dp"
                android:layout_marginTop="0dp"
                android:orientation="vertical">


                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="40dp"

                    android:orientation="horizontal">

                    <TextView
                        android:id="@+id/textView10"
                        android:layout_width="40dp"
                        android:layout_height="wrap_content"

                        android:layout_weight="1"
                        android:text="宠物名:" />

                    <EditText
                        android:id="@+id/pet_name"
                        android:layout_width="100dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="2"
                        android:inputType="text" />
                </LinearLayout>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="40dp"
                    android:orientation="horizontal">

                    <TextView
                        android:id="@+id/textView11"
                        android:layout_width="40dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:text="性   别:" />

                    <EditText
                        android:id="@+id/pet_sex"
                        android:layout_width="100dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="2"
                        android:inputType="text" />
                </LinearLayout>


                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="40dp"

                    android:orientation="horizontal">

                    <TextView
                        android:id="@+id/textView12"
                        android:layout_width="40dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:text="种   类:" />

                    <EditText
                        android:id="@+id/pet_species"
                        android:layout_width="100dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="2"
                        android:inputType="text"
                        android:outlineAmbientShadowColor="#ff1" />
                </LinearLayout>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="40dp"

                    android:orientation="horizontal">

                    <TextView
                        android:id="@+id/textView13"
                        android:layout_width="40dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:text="年   龄:" />

                    <EditText
                        android:id="@+id/pet_age"
                        android:layout_width="100dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="2"
                        android:inputType="number" />
                </LinearLayout>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="40dp"
                    android:orientation="horizontal">

                    <Button
                        android:id="@+id/btn_sure"
                        android:layout_width="120dp"
                        android:layout_height="wrap_content"
                        android:text="确认" />

                    <Button
                        android:id="@+id/btn_cancel"
                        android:layout_width="120dp"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="5dp"
                        android:gravity="center"
                        android:text="取消" />
                </LinearLayout>

            </LinearLayout>

        </LinearLayout>

        <TextView
            android:id="@+id/showInfo"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="20sp"
            />

    </LinearLayout>

</android.support.constraint.ConstraintLayout>

2 tablelayout 表格布局管理器

就是一个表格,每列表格的宽度,取决于该列宽度最大的那一格的宽度
其中有几个重要的属性:
列拉伸(列变宽,如果还有空余空间):
android:stretchColumns

android:stretchColumns="0,1" // 这里表示把 第0列,第1列拉伸
// 比如:屏幕宽是 100dp
//  第2列分别占用 20dp,那么第0列,第1列可以占用高于20dp的宽度,使得最终这3列占满全部宽度

效果: 0,1 拉伸
在这里插入图片描述
xml 代码:
就是tablelayout的一行,一行自然是横着的,有点像是水平线性布局

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".TableLayoutActivity">

    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:stretchColumns="0,1">

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <Button
                android:id="@+id/button4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button0" />

            <Button
                android:id="@+id/button5"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button1" />

            <Button
                android:id="@+id/button6"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button2" />

        </TableRow>

    </TableLayout>
</android.support.constraint.ConstraintLayout>

列收缩(列变窄,如果没有空余空间了,会被其他列挤压)

android:shrinkColumns

 android:shrinkColumns="2" // 设置第2列可以被挤压(收缩),当一行的其他列占得宽度比较大是,留给第二列的空间不多,就会被挤压

测试:将第0,第1列宽度设置为 160dp (每列的宽度取决于该列控件最宽的那个)
效果:
在这里插入图片描述
xml代码:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".TableLayoutActivity">

    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"

        android:shrinkColumns="2"
        >

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <Button
                android:id="@+id/button4"
                android:layout_width="160dp"
                android:layout_height="wrap_content"
                android:text="Button0" />

            <Button
                android:id="@+id/button5"
                android:layout_width="160dp"
                android:layout_height="wrap_content"
                android:text="Button1" />

            <Button
                android:id="@+id/button6"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button2" />

        </TableRow>

 
    </TableLayout>
</android.support.constraint.ConstraintLayout>

列隐藏(直接隐藏列,不显示,不占空间)
android:collapseColumns

 android:collapseColumns="1" // 隐藏第一列,多列之间用 逗号分隔
 // 为了验证影藏列是否还占空间,将 0,2 列设置为拉伸

效果: 隐藏第1列,该列不再占用空间,1,2 列一起沾满整个宽度
在这里插入图片描述
xml代码:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".TableLayoutActivity">

    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"

        android:collapseColumns="1"
        android:stretchColumns="0,2"
        >

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <Button
                android:id="@+id/button4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button0" />

            <Button
                android:id="@+id/button5"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button1" />

            <Button
                android:id="@+id/button6"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button2" />

        </TableRow>
    </TableLayout>
</android.support.constraint.ConstraintLayout>

使用tablelayout+linerlayout 实现登录界面:
在这里插入图片描述
xml代码:注意 .png 文件放在 res/drawable 下

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".Test32Activity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="80dp"
            android:layout_height="80dp"
           android:background="@drawable/keji2"
            android:layout_gravity="center"
            />

        <TableLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:stretchColumns="0,3"
            >

            <TableRow
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                >

                <TextView

                    />

                <TextView
                    android:id="@+id/editText"
                    android:layout_width="60dp"
                    android:layout_height="wrap_content"
                    android:ems="10"
                    android:text="姓名"

                    />

                <EditText
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:hint="请输入姓名" />
                <TextView

                    />
            </TableRow>

            <TableRow
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center">
                <TextView

                    />
                <TextView
                    android:id="@+id/editText2"
                    android:layout_width="60dp"
                    android:layout_height="wrap_content"

                    android:text="密码" />

                <EditText
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:hint="请输入密码"
                    android:inputType="textPassword" />
                <TextView

                    />
            </TableRow>

            <TableRow
                android:layout_width="match_parent"
                android:layout_height="match_parent" >
                <TextView

                    />

                <Button
                    android:id="@+id/button2"
                    android:layout_width="60dp"
                    android:layout_height="wrap_content"
                    android:text="取消" />

                <Button
                    android:id="@+id/button"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="登录" />
                <TextView

                    />

            </TableRow>


        </TableLayout>

    </LinearLayout>
</android.support.constraint.ConstraintLayout>

3 RelativeLayout 相对布局

相对位置,a在b的上面,a的左与b对齐,就能得到a在b的上方,并且a的左边与b的左边是对齐的,在同一竖线上
还有其他的方向也可以
就好像是小明在你的左一桌,小红在你的前一桌,你在教室的中央(教室就是整块屏幕)
在这里插入图片描述
常用属性:
以btnSetting 为例

  <!--上方图片-->
            <ImageView
                android:id="@+id/btnSetting"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:layout_above="@+id/btnStart"
                android:layout_alignRight="@+id/btnStart"
                android:src="@drawable/other" />

上下左右:
android:layout_above="@+id/btnStart" 表示当前控件应该妨放在 id=btnStart的控件的上方(只能保证是在上方,不能保证怎样对齐)

在这里插入图片描述相似的还有: _below,_toLeftoF,_toRightOf

对齐:
android:layout_alignRight="@+id/btnStart" 表示当前控件与btnStart 右对齐
btnSetting 加上右对齐:

  <ImageView
                android:id="@+id/btnSetting"
                android:layout_width="60dp"
                android:layout_height="60dp"

                android:layout_above="@+id/btnStart"
                android:layout_alignRight="@+id/btnStart"
                android:src="@drawable/other" />

在这里插入图片描述相似的还有:alignTop,alignBottom,alignLeft

4 frame 帧布局

可以实现某些空控件在一个控件的上一层,可以将其覆盖,比如一张背景图上添加文字,可以让文字浮在背景的上一层(实现层叠的效果)
demo:将没有文字的图片上面加上一句文字,并且居中
资源:
在这里插入图片描述
效果:
xml代码:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".FrameLayoutActivity">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="400dp">

        <ImageView
            android:id="@+id/imageView6"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginTop="20dp"
            android:layout_marginLeft="20dp"
            android:layout_marginRight="20dp"
            android:background="@drawable/background" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Android程序设计"
            android:textSize="24sp"
            android:textColor="#f00"
            android:layout_gravity="center"
            android:gravity="center"
            />

    </FrameLayout>
</android.support.constraint.ConstraintLayout>

大卫不加班

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
(二)android布局管理器

**布局管理器:**就是为了方便控制多个控件之间位置关系,按照某个要求显示在屏幕恰当的位置四大布局:1 LinearLayout 线性布局水平或者竖直 (布局可以嵌套,可以达到tablelayout的效果,比较灵活)2 relativelayout 相对布局相对位置,a在b的上面,a的左与b对齐,就能得到a在b的上方,并且a的左边与b的左边是对齐的,在同一竖线上还有其他的方向也可以...
复制链接

扫一扫