Android的前期（一）学习——布局

2020-02-04 本文已影响0人大鱼鱼

布局的创建——关于布局
1.在Android程序中界面是通过布局文件设定的，在每个应用程序创建时都会默认包含一个主界面布局，该布局位于res/layout目录中。
2.实际开发中每个应用程序都包含多个界面，而程序默认提供的一个主界面布局无法满足需求，因此经常会在程序中添加多个布局。
五种常用布局
1.线性布局：以水平或者垂直方向排列
2.相对布局：通过相对定位排列
3.帧布局：开辟空白区域，帧里的控件（层）叠加
4.表格布局：表格形式排列
5.绝对布局：通过x,y坐标排列
线性布局（Linearlayout）

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="wrap_content"//不需要撑满整个屏幕，自适应
    android:orientation="horizontal"//排列方向设置成水平
    tools:context=".MainActivity">

    <Button
        android:id="@+id/button"
        android:layout_width="0dp"//为三个button设置权重，宽度需要设置成0dp
        android:layout_height="wrap_content"
        android:layout_weight="1"//每一个button的权重都是1，三个button在水平方向平均分成3份
        android:text="Button" />

    <Button
        android:id="@+id/button3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Button" />

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Button" />

</LinearLayout>

代码实现的效果如下：

image.png

相对布局（Relativelayout）
通过相对定位的方式指定控件位置，即以其他控件或父容器为参照物，摆放控件位置。
在设计相对布局时要遵循控件之间的依赖关系，后放入控件的位置依赖于先放入的控件。

image.png

android:layout_marginTop//设置当前控件上边界与某控件的距离
android:layout_marginBottom//设置当前控件底边界与某控件的距离
android:layout_marginLeft//设置当前控件左边界与某控件的距离
android:layout_marginRight//设置当前控件右边界与某控件的距离
控件属性：
android:paddingTop//设置布局顶部内边距的距离
android:paddingBottom//设置布局底部内边距的距离
android:paddingLeft//设置布局左部内边距的距离
android:paddingRight//设置布局右部内边距的距离
android:padding//设置布局四周内边距的距离
常用单位;
px:像素，即在屏幕中可以显示最小元素的单位
pt:磅数，一磅等于1/72英寸，一般pt会作为字体的单位来显示
dp:基于屏幕密度的抽象单位。不同设备有不同的显示效果，根据分辨率的不同来确定控件的尺寸
sp:可伸缩像素，采用与dp相同的设计理念，推荐设置文字大小时使用

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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"
    android:background="@mipmap/ic_launcher_foreground"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="登录页面"
        android:textColor="@android:color/black"
        android:textSize="@android:dimen/app_icon_size"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.497"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.058" />
    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="45dp"
        android:layout_marginLeft="45dp"
        android:layout_marginTop="84dp"
        android:text="账号"
        android:textColor="@android:color/black"
        android:textSize="25dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView1" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="45dp"
        android:layout_marginLeft="45dp"
        android:layout_marginTop="84dp"
        android:text="密码"
        android:textColor="@android:color/black"
        android:textSize="25dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView2" />

    <EditText
        android:id="@+id/editText"
        android:layout_width="300dp"
        android:layout_height="35dp"
        android:layout_marginLeft="45dp"
        android:layout_marginTop="240dp"
        android:hint="请输入账号"
        android:textColorHint="@android:color/darker_gray"
        android:textSize="12dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <EditText
        android:id="@+id/editText2"
        android:layout_width="300dp"
        android:layout_height="35dp"
        android:layout_marginStart="45dp"
        android:layout_marginLeft="45dp"
        android:layout_marginTop="356dp"
        android:hint="请输入密码"
        android:inputType="textPassword"
        android:textColorHint="@android:color/darker_gray"
        android:textSize="12dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


    <Button
        android:id="@+id/Button"
        android:layout_width="wrap_content"
        android:layout_height="45dp"
        android:layout_marginStart="236dp"
        android:layout_marginLeft="236dp"
        android:layout_marginTop="420dp"
        android:background="@drawable/button"
        android:gravity="center"
        android:text="登录"
        android:textSize="17dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <CheckBox
        android:id="@+id/checkBox"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="45dp"
        android:layout_marginLeft="45dp"
        android:layout_marginTop="420dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="76dp"
        android:layout_marginLeft="76dp"
        android:layout_marginTop="427dp"
        android:text="记住密码"
        android:textColor="@android:color/black"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/content"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginStart="148dp"
        android:layout_marginLeft="148dp"
        android:layout_marginTop="500dp"
        android:text="没有账号？去注册"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

代码实现的效果如下：

image.png

帧布局（FrameLayout）
为每个加入其中的控件创建一个空白区域（称为一帧，每个控件占据一帧）。
所有控件都默认显示在屏幕的左上角，按照先后放入的顺序重叠摆放。帧布局的大小由内部最大控件决定。

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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="wrap_content"
    android:foreground="@mipmap/ic_launcher_round"//一直处在最上层
    android:foregroundGravity="left"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/button"
        android:layout_width="300dp"
        android:layout_height="450dp"
        android:text="Button1" />
    <Button
        android:id="@+id/button4"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:text="Button2" />

    <Button
        android:id="@+id/button5"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:text="Button3" />
</FrameLayout>

代码实现效果如下：

image.png

表格布局（TableLayout）
是以表格形式排列控件的，通过行和列将界面划分为多个单元格，每个单元格都可以添加控件。
表格布局需要和TableRow配合使用，每一行都由TableRow对象组成，因此TableRow的数量决定表格的行数。而表格的列数是由包含最多控件的TableRow决定的，例如第一个TableRow有两个控件，第二个TableRow有三个控件，则表格列数为3。

image.png

<?xml version="1.0" encoding="utf-8"?>
<TableLayout 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"
    android:stretchColumns="2"
    tools:context=".MainActivity">

    <TableRow android:layout_height="wrap_content">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button1" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button2" />
    </TableRow>

    <TableRow android:layout_height="59dp">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="1"
            android:text="Button3" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="2"
            android:text="Button4" />
    </TableRow>
    <TableRow>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button5"
            android:layout_column="3"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button6"/>
    </TableRow>
</TableLayout>

需要注意的是：如果是要拉伸列需要在tablelayout里设置，如果设置在第几列需要在tablerow下的组件中设置。
代码实现效果如下：

image.png

绝对布局（AbsoluteLayout）
通过指定x,y坐标来控制每一个控件的位置

<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout 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=".MainActivity">



    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="150dp"
        android:layout_y="94dp"
        android:text="TextView" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="88dp"
        android:layout_y="242dp"
        android:text="TextView" />
</AbsoluteLayout>

通过x,y轴来决定位置，对屏幕的适应性很差，现在已经不建议使用。

Android的前期（一）学习——布局

猜你喜欢

热点阅读