Android开发(布局管理器)_android布局管理器-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_56127002/article/details/127477409

一：View

二：ViewGroup

2.1 viewGroup组件依赖的控制类

2.1.1 viewGroup.LayoutParams类

2.1.2 viewGroup.MarginLayoutParams类

三：View和ViewGroup组成UI界面

3.3 java程序和xml文件对UI的管理

四：自定义的View

五：布局管理器

5.1 相对布局管理器（RelativeLayout）

编辑

5.1.1 相对布管理器的定义（所有组件与容器的关系）

5.2 线性布局管理器（LinearLayout）

5.2.1 Layout_weight组件

5.2.2 线性布局管理器实例

5.3 帧布局管理器（FrameLayout）

5.4 表格布局管理器（TableLayout）

5.4.2 表格布局实例

5.5 网格布局管理器（GridLayout）

5.6 布局管理器的嵌套

5.6.1 注意

5.6.2 实例

一：View

view是容器上的界面内容格式设计

View类是所有组件的基类。

标识：

android:id="@+id/button" 是组件的唯一标识

背景：

android:background = "@+mipap/bg" 背景图片资源，也可以设置成背景颜色

内边距的设置：
android:paddingLeft=""

android:paddingRight=""

android:paddingBottom=""

android:paddingTop=""

二：ViewGroup

viewGroup是容器类，用于存放view

2.1 viewGroup组件依赖的控制类

2.1.1 viewGroup.LayoutParams类

根据我们的内容大小自定义

android:layout_width="wrap_content"
android:layout_height="wrap_content"

与父容器相同

android:layout_height="match_parent"

2.1.2 viewGroup.MarginLayoutParams类

设置我们组件的外边距

app:layout_goneMarginLeft="1dp"等

三：View和ViewGroup组成UI界面

3.1 XML文件对UI的管理

使用xml文件控制UI界面

在res/layout目录下建了一个xml文件，然后我们通过setContentView(R.layout.activity_main);把他加载到程序中。

使用javac程序控制UI界面

3.1.1 字体颜色、大小、内容的设置

android:text="@string/start"
android:textColor="@color/teal_200"

values下面存放我们的字体，颜色，内容等的值，通过name唯一标识

android:textSize="80sp"
android:text="@string/start"
android:textColor="@color/teal_200"

3.1.2 背景图片的设置

android:background="@drawable/bg"

drawable下面存放我们的图片资源，通过路劲标识

android:background="@drawable/bg"

3.2 java程序对UI的管理

java代码对UI界面的管理我们用到了awt和swing中的知识。

我们app要想运行首先得继承自activity的一个子类，并且实现oncreate()方法。

package com.example;

import android.app.AlertDialog;
import android.content.DialogInterface;
import android.graphics.Color;
import android.util.Log;
import android.util.TypedValue;
import android.view.View;
import android.view.ViewGroup;
import android.widget.FrameLayout;
import android.widget.TextView;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
//        setContentView(R.layout.activity_main);

        FrameLayout frameLayout = new FrameLayout(this);
        frameLayout.setBackgroundResource(R.drawable.bg);
        setContentView(frameLayout);
        TextView textView = new TextView(this);
        textView.setText("开始游戏");
        textView.setTextSize(TypedValue.COMPLEX_UNIT_SP,10);
        textView.setTextColor(Color.rgb(17,85,114));
        FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,
                ViewGroup.LayoutParams.WRAP_CONTENT);
        textView.setLayoutParams(params);
        textView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                new AlertDialog.Builder(MainActivity.this).setTitle("系统提示").setMessage("游戏有风险")
                        .setPositiveButton("确定", new DialogInterface.OnClickListener() {
                            @Override
                            public void onClick(DialogInterface dialog, int which) {
                                Log.i("桌面台球","进入游戏");
                            }
                        }).setNegativeButton("退出", new DialogInterface.OnClickListener() {
                            @Override
                            public void onClick(DialogInterface dialog, int which) {
                                Log.i("桌面台球","退出游戏");
                                finish();
                            }
                        }).show();
            }
        });
        frameLayout.addView(textView);
    }
}

3.3 java程序和xml文件对UI的管理

<?xml version="1.0" encoding="utf-8"?>
<GridLayout
        android:id="@+id/layout"
        android:orientation="horizontal"
        android:rowCount="1"
        android:columnCount="3"
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

</GridLayout>

package com.example;

import android.view.ViewGroup;
import android.widget.GridLayout;
import android.widget.ImageView;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {
    private ImageView[] imageViews = new ImageView[3];
    private int[] imagePath = new int[]{
        R.mipmap.p1, R.mipmap.p2, R.mipmap.p3
    };
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        GridLayout gridLayout = findViewById(R.id.layout);
        for (int i = 0; i < imagePath.length; i++){
            imageViews[i] = new ImageView(MainActivity.this);
            imageViews[i].setImageResource(imagePath[i]);
            imageViews[i].setPadding(2,2,2,2);
            ViewGroup.LayoutParams params = new ViewGroup.LayoutParams(118,68);
            imageViews[i].setLayoutParams(params);
            gridLayout.addView(imageViews[i]);
        }
    }
}

ImageView 显示图片

四：自定义的View

布局管理器的id和背景

android:background="@drawable/t1"
        android:id="@+id/mylayout"

自定义的View

package com.example;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.view.View;

public class RabbitView extends View {
    private float bigMapX;
    private float bigMapY;

    public float getBigMapX() {
        return bigMapX;
    }

    public void setBigMapX(float bigMapX) {
        this.bigMapX = bigMapX;
    }

    public float getBigMapY() {
        return bigMapY;
    }

    public void setBigMapY(float bigMapY) {
        this.bigMapY = bigMapY;
    }

    public RabbitView(Context context) {
        super(context);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Paint paint = new Paint();
        Bitmap bitmap = BitmapFactory.decodeResource(this.getResources(),R.drawable.t2);
        canvas.drawBitmap(bitmap,bigMapX,bigMapY,paint);
        if(bitmap.isRecycled()){
            bitmap.recycle();
        }
    }
}

布局管理器的设定

package com.example;

import android.view.MotionEvent;
import android.view.View;
import android.widget.FrameLayout;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        FrameLayout frameLayout = findViewById(R.id.mylayout);
        RabbitView rabbitView = new RabbitView(this);
        rabbitView.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                rabbitView.setBigMapX(event.getX());
                rabbitView.setBigMapY(event.getY());
                rabbitView.invalidate();
                return true;
            }
        });
        frameLayout.addView(rabbitView);
    }
}

五：布局管理器

5.1 相对布局管理器（RelativeLayout）

RelativeLayout：相对布局管理器

使用相对布局管理器的话，必须指定一个参考点，下图就是以进入按钮为参考点

5.1.1 相对布管理器的定义（所有组件与容器的关系）

<RelativeLayout
        #表示我们anroid的命名空间
        xmlns:android="http://schemas.android.com/apk/res/android"
        #表示工具命名空间
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:background="@drawable/t1"
        android:id="@+id/mylayout"
        #与父容器相同的布局宽度
        android:layout_width="match_parent"
        #与父容器相同的布局高度
        android:layout_height="match_parent"
        #指向我们的布局管理器activity
        tools:context=".MainActivity">

</RelativeLayout>

还有android:padding的左右前后内边距

gravity属性:布局管理器中组件的显示位置（居中、前后对齐等）

ingroe_gravity属性:哪些组件不受组件的统一管理

5.1.2 LayoutPrams类：控制布局管理器中各组件的分布方式

andorid:layout_XXX等管理组件与组件和容器的对齐方式

<RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">
    <TextView
            android:id="@+id/user"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="进入游戏"
            />
    <TextView
            android:id="@+id/user1"
            android:layout_below="@+id/user"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="退出游戏"
    />

</RelativeLayout>

5.1.3 LayoutPrams类实例（一个组件与一个组件的关系）

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@mipmap/p1"
        tools:context=".MainActivity">
    <TextView
            android:id="@+id/user"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="你现在确定要更新么？"
    />
    <Button
            android:id="@+id/button1"
            android:layout_below="@+id/user"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignRight="@+id/user"
            android:text="更新"
    />
    <Button
            android:id="@+id/button2"
            android:layout_below="@+id/user"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toLeftOf="@+id/button1"
            android:text="不更新"
    />

5.2 线性布局管理器（LinearLayout）

控制组件横向和纵向的线性排列

android:orientation="vertical"

android:orientation="horizontal"

5.2.1 Layout_weight组件

代表组件所占父容器所剩空间的权重

5.2.2 线性布局管理器实例

登录界面

代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingBottom="16dp"
        android:paddingLeft="16dp"
        android:paddingRight="16dp"
        android:paddingTop="16dp"
        android:orientation="vertical"
        tools:context=".MainActivity">
    <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="QQ号"
            android:drawableLeft="@mipmap/p2"
            android:paddingBottom="16dp"
    />
    <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="密码"
            android:drawableLeft="@mipmap/p1"
            android:paddingBottom="16dp"
    />
    <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="登录"
            android:textColor="#FFFFFF"
            android:background="#FF009688"
    />
    <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="有问题联系我"
            android:paddingTop="8dp"
    />


</LinearLayout>

5.3 帧布局管理器（FrameLayout）

帧布局管理器是组件叠加布局

android:foreground=""设置帧布局管理器的前景图像

android:foregroundGravity=""设置帧布局管理器的前景图像位置

android:foreground="@mipmap/p1"
android:foregroundGravity="right|bottom"

5.4 表格布局管理器（TableLayout）

表格行，tableRow

<TableRow>
        <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="登录按钮1"
        />
        <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="登录按钮2"
        />
        <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="登录按钮3"
        />
    </TableRow>
    <TableRow>
        <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="登录按钮3"
        />
        <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="登录按钮5"
        />
        <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="登录按钮6"
        />
    </TableRow>

隐藏某一列

android:collapseColumns="1,2"

设置某列被拉伸

android:stretchColumns="1"

5.4.2 表格布局实例

<?xml version="1.0" encoding="utf-8"?>
<TableLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:stretchColumns="0,3"
        tools:context=".MainActivity">
    <TableRow
        android:paddingTop="200dp"
    >
        <TextView/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="账  号："
            android:textSize="20sp"
            android:gravity="center_horizontal"
        />
        <EditText
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:hint="QQ邮箱或者手机号"
        />
        <TextView/>
    </TableRow>
    <TableRow>
        <TextView/>
        <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="密  码："
                android:textSize="20sp"
                android:gravity="center_horizontal"
        />
        <EditText
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:hint="请输入密码"
        />
        <TextView/>
    </TableRow>
    <TableRow>
        <TextView/>
        <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="登  录"
                android:textSize="20sp"
        />
        <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="注  册"
                android:textSize="20sp"
                android:background="#FF8247"
        />
        <TextView/>
    </TableRow>
    <TableRow android:paddingTop="8dp">
        <TextView/>
        <TextView/>
        <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="有问题？"
                android:textColor="#FF8247"
                android:gravity="right"

        />
        <TextView/>
    </TableRow>

</TableLayout>

5.5 网格布局管理器（GridLayout）

属性

columnCount、rowCount、android:orientation

占几行或者占几列需要scan和gravity="fill"共同使用

5.6 布局管理器的嵌套

根布局管理器需要将其它布局管理器给括起来

5.6.1 注意

每一个布局管理器都需要xmlns文件的导入

xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:orientation="vertical"
        android:background="@mipmap/z1"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

5.6.2 实例

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:orientation="vertical"
        android:background="@mipmap/z1"
        android:layout_height="match_parent"
        tools:context=".MainActivity">
        <RelativeLayout
                xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:tools="http://schemas.android.com/tools"
                xmlns:app="http://schemas.android.com/apk/res-auto"
                android:layout_width="match_parent"
                android:orientation="vertical"
                android:layout_height="match_parent"
                tools:context=".MainActivity">
                    <ImageView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:id="@+id/img"
                            android:layout_alignParentLeft="true"
                            android:layout_margin="10dp"
                            android:src="@mipmap/t1"
                    />
                    <TextView
                            android:id="@+id/name1"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="雪绒花"
                            android:layout_marginTop="10sp"
                            android:layout_toRightOf="@+id/img"
                    />
                    <TextView
                            android:id="@+id/content1"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="床前明月光，疑是地上霜"
                            android:layout_marginTop="10dp"
                            android:layout_toRightOf="@+id/img"
                            android:layout_below="@+id/name1"
                    />
                    <ImageView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:id="@+id/blewImg"
                            android:layout_alignParentRight="true"
                            android:layout_margin="10dp"
                            android:src="@mipmap/h1"
                            android:layout_below="@+id/content1"
                    />

    </RelativeLayout>
</LinearLayout>