Android布局管理器

最新推荐文章于 2024-07-19 11:42:08 发布
最新推荐文章于 2024-07-19 11:42:08 发布
阅读量407 收藏 8
点赞数
文章标签： android html android studio
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46592197/article/details/109387354
版权

文章目录

布局管理器

常用布局管理器

在这里插入图片描述

在这里插入图片描述
无论使用哪种布局管理器，布局管理器前两句不变

    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"

相对布局管理器RelativeLayout

在这里插入图片描述

  • gravity和ignoreGravity属性
//设置宽度和高度
    android:layout_width="match_parent" 
    android:layout_height="match_parent"

//设置内边距
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    
//指向使用布局的Activity，可删除
	tools:context="com.example.MainActivity">
	

<?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:id="@+id/activity_hello_world"

    android:layout_width="match_parent"
    android:layout_height="match_parent"

    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    
    //设置相对组件
    android:gravity="center"
    //设置相对组件id不受控制
    android:ignoreGravity="@id/user"

    tools:context="com.example.hahaha.helloworld.HelloWorldActivity">

    <TextView
    	//设置相对组件id
        android:id="@+id/user"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" />
</RelativeLayout>

在这里插入图片描述
利用参数设置：

<?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:id="@+id/activity_hello_world"

    android:layout_width="match_parent"
    android:layout_height="match_parent"

    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"

    android:gravity="center"
    android:ignoreGravity="@id/user"

    tools:context="com.example.hahaha.helloworld.HelloWorldActivity">
    
	//设置相对组件2
    <TextView
        android:id="@+id/user"//相对组件id
        android:layout_width="wrap_content"//相对组件宽
        android:layout_height="wrap_content"//相对组件高
        android:layout_centerInParent="true"//相对组件居中
        android:text="Hello World!" />

	//设置相对组件2
    <TextView
        android:id="@+id/user1"//相对组件id
        android:layout_width="wrap_content"//相对组件宽
        android:layout_height="wrap_content"//相对组件高
        //设置相对组件user1位于user下方
        android:layout_below="@+id/user"
        android:text="明日" />

</RelativeLayout>

结果：
在这里插入图片描述
例子:

  • 利用相对布局实现软件更新提示页面
    在这里插入图片描述

  1. 设置背景

    将背景图片放置到对应module下的mipmap中。

    使用android:background属性：android:background="@mipmap/bg"

  2. 设置文本框居中：android:layout_centerInParent属性

    android:layout_centerInParent=“true”

  3. 设置文本框id：android:id="@+id/text1View1"

  4. 设置文本框内容：android:text=“发现有新版本，您想现在安装吗？？”

res>layout>activity_main.xml


<?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:id="@+id/activity_main"
    android:layout_width="match_parent" android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"

    android:background="@mipmap/bg"

    tools:context="com.example.MainActivity">

    <TextView
        android:id="@+id/text1View1"
        android:layout_centerInParent="true"

        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="发现有新版本，您想现在安装吗？？" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:id="@+id/button2"
        android:text="以后再说"

        android:layout_below="@+id/text1View1"
        android:layout_alignRight="@+id/text1View1"
        />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:id="@+id/button1"
        android:text="现在更新"

        android:layout_below="@+id/text1View1"
        android:layout_toLeftOf="@+id/button2"
        />

</RelativeLayout>

设计视图
在这里插入图片描述

main>java>MainActivity.java

package com.example;

import android.support.v7.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);
    }
}

结果：
在这里插入图片描述
注：还未给button添加activity，点击还不能跳转

线性布局管理器LinearLayout

在这里插入图片描述
组件横向或者纵向进行排列

在这里插入图片描述
特点：组件一个挨着一个排列到窗口，剩余的组件不会显示出来

  1. orientation属性

    新建一个module，在新建的module中编写：
    设置水平or垂直线性布局管理器：

    android:orientation="horizontal"或者android:orientation=“vertical”

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main"
    android:layout_width="match_parent" android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"

    android:orientation="horizontal"

    tools:context="com.example.linearlayout.MainActivity">

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

    <Button
        android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:text="按钮4" />

    <Button
        android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:text="按钮5" />

</LinearLayout>


切换到设计视图，由于按钮5到窗口边界，故不不显示

在这里插入图片描述

点击切换为横屏就能够显示设置的所有按钮

在这里插入图片描述
在这里插入图片描述

修改参数为：android:orientation="vertical"即可以转换为纵向视图

在这里插入图片描述

添加：android:gravity="center"则组件居中显示

在这里插入图片描述

设置：android:gravity="right"则组件居右显示

在这里插入图片描述

设置为：android:gravity="right|bottom"则组件居右下角显示

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main"
    android:layout_width="match_parent" android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"

    android:orientation="vertical"

    android:gravity="right|bottom"

    tools:context="com.example.linearlayout.MainActivity">

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

    <Button
        android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:text="按钮4" />

    <Button
        android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:text="按钮5" />

</LinearLayout>

在这里插入图片描述

  1. 子组件属性

    layout_weight属性：设置组件所占权重，为layout_weight分配值是对剩余空间的操作，而不是对整个空间的分配操作。

    在这里插入图片描述
    acyivity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main"
    android:layout_width="match_parent" android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"

    android:orientation="horizontal"


    tools:context="com.example.linearlayout.MainActivity">

    <Button
        android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:text="按钮11111111"
        android:layout_weight="1"
        />

    <Button
        android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:text="按钮2"
        android:layout_weight="1"/>

    <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="按钮4" />

    <Button
        android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:text="按钮5" />

</LinearLayout>

MainActivity.java

package com.example.linearlayout;

import android.support.v7.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);
    }
}

案例：实现微信登陆页面（使用垂直线性布局管理器实现）
在这里插入图片描述
创建一个新的module
在这里插入图片描述
布局文件：res>layout>main_activity.xml 使用垂直线性布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main"
    android:layout_width="match_parent" android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
   
    # 使用垂直线性布局
    android:orientation="vertical"

    tools:context="com.example.MainActivity">
//添加编辑框
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingBottom="20dp" # 设置向上内边距
        android:hint="QQ号/微信号/Email" # 暗示文字
        android:drawableLeft="@mipmap/account" # 设置编辑框前面的文字图片
        />
//添加编辑框
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingBottom="20dp" # 设置向上内边距
        android:hint="密码" # 暗示文字
        android:drawableLeft="@mipmap/password" # 设置编辑框前面的文字图片
        />
//添加登陆按钮
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="登录"
        android:textColor="#FFFFFF" # 设置文本颜色
        android:background="#FF009688" # 设置背景色
        />
//修改自动生成的hello world文本
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="登陆遇到问题？"
        android:paddingTop="20dp" #设置向上的内边距
        android:layout_gravity="center_horizontal" # 设置水平居中
        />
</LinearLayout>

自动生成的main>java>MainActivity.java

package com.example;

import android.support.v7.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);
    }
}

修改自动生成的AndroidMainfest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest
    xmlns:android="http://schemas.android.com/apk/res/android" package="com.example">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
		// 修改主题颜色，将原来的默认的蓝色改为浅色
        android:theme="@style/Theme.AppCompat.Light.DarkActionBar">

        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

结果：
在这里插入图片描述

帧布局管理器FrameLayout

为每一个放入其中的组件创建一个空白区域，这些组件按照先后次序重叠放置，后面的组件会覆盖前面的组件。
在这里插入图片描述
在这里插入图片描述
创建一个新的module：framelayout
修改自动生成的布局relatelayout为帧布局管理器framelayout
组件默认覆盖前面组件

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main"
    android:layout_width="match_parent" android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        android:background="#FF0000" # 设置背景色为红色
        />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" 
        android:background="#FFFF00" # 设置背景色为黄
        />
</FrameLayout>

设计视图：前面红色组件被黄色组件所覆盖
在这里插入图片描述
修改第一个文本框组件的内容text
如果后面的组件比前面组件小，则只能覆盖前面组件的一部分

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main"
    android:layout_width="match_parent" android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!Hello World!" # 修改文本内容
        android:background="#FF0000" # 设置背景色为黄
        />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        android:background="#FFFF00" # 设置背景色为黄
        />
</FrameLayout>

设计视图：黄色组件自覆盖了红色组件一部分
在这里插入图片描述
在mipmap中放置想要设置的前景图片
设计前景图：android:foreground="@mipmap/bg"
设计前景图位置在右下角：android:foregroundGravity=“right|bottom”

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main"
    android:layout_width="match_parent" android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"

    android:foreground="@mipmap/bg" # 设计前景图
    android:foregroundGravity="right|bottom" # 设计前景图相对位置在右下角

    tools:context="com.example.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!Hello World!"
        android:background="#FF0000"
        />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        android:background="#FFFF00"
        />
</FrameLayout>

在这里插入图片描述
修改前景图位置为左下角：android:foregroundGravity=“left|bottom”
在这里插入图片描述
修改前景图位置为左上角： android:foregroundGravity=“left|top”
可以看到文本框被自动覆盖
在这里插入图片描述
实例：利用帧布局管理器居中显示重叠的正方形，并添加前景图片
在这里插入图片描述
将前景图片资源复制到mipmap中

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"

    android:foreground="@mipmap/log3" # 设置前景图
    android:foregroundGravity="right|bottom" # 设置相对位置



    tools:context="com.example.MainActivity">

    <TextView
        android:layout_width="280dp"
        android:layout_height="280dp"
        android:layout_gravity="center" # 设置相对位置居中
        android:background="#FF0000FF" # 设置背景色
        android:text="蓝色背景的textview" # 设置文本内容
        android:textColor="#FFFFFF" # 设置文本颜色
        />

    <TextView
        android:layout_width="230dp"
        android:layout_height="230dp"
        android:layout_gravity="center" # 设置相对位置居中
        android:background="#FF0077FF" # 设置背景色
        android:text="天蓝色背景的textview" # 设置文本内容
        android:textColor="#FFFFFF" # 设置文本颜色
        />

    <TextView
        android:layout_width="180dp"
        android:layout_height="180dp"
        android:layout_gravity="center" # 设置相对位置居中
        android:background="#FF00B4FF" # 设置背景色
        android:text="水蓝色背景的textview" # 设置文本内容
        android:textColor="#FFFFFF" # 设置文本颜色
        />
</FrameLayout>

自动生成的AndroidMainfest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example">

    <application android:allowBackup="true" android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name" android:supportsRtl="true" android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

自动生成的MainActivity.java

package com.example;

import android.support.v7.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);
    }
}

在这里插入图片描述

表格布局管理器GridLayout

以行列的形式来控制UI组件
在这里插入图片描述
设置一个表格行：<TableRow> </TableRow>
表格行里面可以嵌套其他，例如按钮：

<?xml version="1.0" encoding="utf-8"?>
<TableLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main"
    android:layout_width="match_parent" android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.MainActivity">
    
	# 添加一个表格行
    <TableRow>
   		# 一个表格行里面添加按钮1
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮1" />
         # 一个表格行里面添加按钮2
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮2" />
        # 一个表格行里面添加按钮3
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮3" />

    </TableRow>
	
	# 添加第二个表格行
    <TableRow>
    	# 一个表格行里面添加按钮4
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮4" />
        # 一个表格行里面添加按钮5
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮5" />
        # 一个表格行里面添加按钮6
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮6" />

    </TableRow>


</TableLayout>

设计视图：
在这里插入图片描述
设置隐藏列：android:collapseColumns="1"

<?xml version="1.0" encoding="utf-8"?>
<TableLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main"
    android:layout_width="match_parent" android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"

    android:collapseColumns="1" # 设置隐藏列为第二列，从0计数

    tools:context="com.example.MainActivity">

    <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="按钮4" />
        <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>


</TableLayout>

在这里插入图片描述
设置某列被拉伸：android:stretchColumns="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" android:id="@+id/activity_main"
    android:layout_width="match_parent" android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"

    android:collapseColumns="1"
    android:stretchColumns="2" # 设置第3列被拉伸，从0计数

    tools:context="com.example.MainActivity">

    <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="按钮4" />
        <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>


</TableLayout>

在这里插入图片描述
设置按钮收缩：android:shrinkColumns="1"

<?xml version="1.0" encoding="utf-8"?>
<TableLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main"
    android:layout_width="match_parent" android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"

    android:stretchColumns="1"
    android:shrinkColumns="1" # 设置第二列按钮收缩

    tools:context="com.example.MainActivity">

    <TableRow>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮" />
        <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="按钮3111111111111111111111" />

    </TableRow>

    <TableRow>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮4" />
        <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>


</TableLayout>

可以看到按钮3太宽时候，按钮2被收缩
在这里插入图片描述
也可以不使用<TableRow> </TableRow>，直接向布局管理器添加组件也行

<?xml version="1.0" encoding="utf-8"?>
<TableLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main"
    android:layout_width="match_parent" android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"

    android:stretchColumns="1"
    android:shrinkColumns="1"

    tools:context="com.example.MainActivity">

    <TableRow>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮" />
        <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="按钮3111111111111111111111" />

    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮4" />
        <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>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮6" />


</TableLayout>

在这里插入图片描述
实例：实现喜马拉雅用户登陆界面
在这里插入图片描述
四行四列的表格布局管理器实现：保证内容正好显示屏幕中间，如果屏幕宽了也显示对应位置，只不过两边列宽了
在这里插入图片描述
res>layout>main_activity.xml

<?xml version="1.0" encoding="utf-8"?>
<TableLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"

    android:background="@mipmap/bg" # 设置背景图片
    android:stretchColumns="0, 3" # 设置第一列和第四列可拉伸

    tools:context="com.example.MainActivity">
	
	# 设置第一个表格行
    <TableRow android:paddingTop="200dp">
		# 设置第一行第一列
        <TextView />
        # 设置第一行第2列
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="账 号 ："
            android:textSize="18sp" # 文本大小
            android:textColor="#FFFF00" # 文本颜色
            />
		# 设置第一行第3列：输入框
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="邮箱或手机号"
            />
		# 设置第一行第4列
        <TextView />
    </TableRow>
	
	# 设置第二个表格行
    <TableRow>

        <TextView />
        # 设置2行第2列
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="密 码 ："
            android:textSize="18sp"
            android:textColor="#FFFF00"
            />
		# 设置2行第3列：输入框
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="输入6~16为数字或字母"
            />

        <TextView />
    </TableRow>
# 设置第3个表格行
    <TableRow>
		# 设置3行第1列
        <TextView />
        # 设置3行第2列：按钮
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="注 册 ："

            />
		# 设置3行第3列：按钮
        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="登 陆"
            android:textColor="#FFFFFF"
            android:background="#FF8247"
            />
		# 设置3行第4列
        <TextView />
    </TableRow>
	# 设置第4个表格行：设有内边距
    <TableRow android:paddingTop="10dp">
        <TextView />
        <TextView />
        # 设置4行第3列
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="忘记密码"
            android:textColor="#FF4500"
            android:gravity="right" # 设置右对齐
            />
        <TextView />
    </TableRow>


</TableLayout>

自动生成的MainActivity.java

package com.example;

import android.support.v7.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);
    }
}

自动生成的AndroidMainfest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example">

    <application android:allowBackup="true" android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name" android:supportsRtl="true" android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

结果：
在这里插入图片描述

网格布局管理器GridLayout

比表格布局管理器更加灵活：不仅可以跨行显示，还可以跨行显示

在这里插入图片描述
新建一个gridlayout的module
参数：
网格最大列数设置 android:columnCount="2"
网格最大行数设置 android:rowCount="2"
网格排列方式是水平还是垂直 android:orientation="vertical"

<?xml version="1.0" encoding="utf-8"?>
<GridLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"

    android:columnCount="2" # 设置最大列数为2


    tools:context="com.example.MainActivity">

    <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="按钮4" />
    <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="按钮3"
        android:layout_row="23"
        android:layout_column="7" />
</GridLayout>

在这里插入图片描述

<?xml version="1.0" encoding="utf-8"?>
<GridLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"

    android:columnCount="2" # 设置最大列数为2
    android:orientation="vertical" # 设置垂直排列

    tools:context="com.example.MainActivity">

    <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" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮4" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮5" />
</GridLayout>

在这里插入图片描述

<?xml version="1.0" encoding="utf-8"?>
<GridLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"

    android:columnCount="2"
    android:rowCount="2" # 设置最大行数为2
    android:orientation="vertical"

    tools:context="com.example.MainActivity">

    <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" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮4" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮5" />
</GridLayout>

在这里插入图片描述

控制子组件参数：在这里插入图片描述

<?xml version="1.0" encoding="utf-8"?>
<GridLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"

    android:rowCount="2" # 设置最大行数


    tools:context="com.example.MainActivity">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮1"
        android:layout_column="0" # 设置按钮1所在行
        android:layout_row="0" # 设置按钮1所在列
        />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮3"
        android:layout_column="0" # 设置按钮2所在行
        android:layout_row="1" # 设置按钮2所在列

        />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮2"
        android:layout_column="1"
        android:layout_row="0"
        android:layout_rowSpan="2" # 设置按钮三跨行显示
        android:layout_gravity="fill" # 设置相对位置为填充所有
        />

</GridLayout>

在这里插入图片描述
实例：网格布局管理器实现QQ聊天界面
在这里插入图片描述
为一个六列四行的网格布局管理器
在这里插入图片描述
res>layout>activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<GridLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"

    android:background="@mipmap/fall" # 设置聊天背景

    tools:context="com.example.qq.MainActivity">
	# 第一个聊天框
    <ImageView
        android:id="@+id/imageview1" # 设置id
        android:src="@mipmap/c1" # 设置聊天内容图片
        android:layout_gravity="end" # 设置右对齐
        android:layout_columnSpan="4" # 设置跨列
        android:layout_row="0" # 位于第1行
        android:layout_column="1" # 位于第2列
        android:layout_marginRight="5dp" # 设置右外边距
        android:layout_marginBottom="20dp" # 设置底外边距
        />
    <ImageView
        android:id="@+id/imageview2"
        android:src="@mipmap/bg1"
        android:layout_row="0"
        android:layout_column="5"
        />
	# 第2个聊天框
    <ImageView
        android:id="@+id/imageview3"
        android:src="@mipmap/bg1"
        android:layout_row="1"
        android:layout_column="0"
        />
    <ImageView
        android:id="@+id/imageview4"
        android:src="@mipmap/c2"
        android:layout_row="1"
        android:layout_marginBottom="20dp"
        />
	# 第3个聊天框
    <ImageView
        android:id="@+id/imageview5"
        android:src="@mipmap/c3"
        android:layout_gravity="end"
        android:layout_columnSpan="4"
        android:layout_row="2"
        android:layout_column="1"
        android:layout_marginRight="5dp"
        android:layout_marginBottom="20dp"
        />
    <ImageView
        android:id="@+id/imageview6"
        android:src="@mipmap/bg1"
        android:layout_row="2"
        android:layout_column="5"
        />
	# 第4个聊天框
    <ImageView
        android:id="@+id/imageview7"
        android:src="@mipmap/bg1"
        android:layout_row="3"
        android:layout_column="0"
        />
    <ImageView
        android:id="@+id/imageview8"
        android:src="@mipmap/c4"
        android:layout_row="3"
        android:layout_marginBottom="20dp"
        />
	# 第5个聊天框
    <ImageView
        android:id="@+id/imageview9"
        android:src="@mipmap/c5"
        android:layout_gravity="end"
        android:layout_columnSpan="4"
        android:layout_row="4"
        android:layout_column="1"
        android:layout_marginRight="5dp"
        android:layout_marginBottom="20dp"
        />
    <ImageView
        android:id="@+id/imageview10"
        android:src="@mipmap/bg1"
        android:layout_row="4" # 位于第5行
        android:layout_column="5" # 位于第6列
        />

</GridLayout>

自动生成的：AndroidMainfest

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example.qq">

    <application android:allowBackup="true" android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name" android:supportsRtl="true" android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

自动生成的：MainActivity.java

package com.example.qq;

import android.support.v7.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);
    }
}

结果：
在这里插入图片描述
注：自动文字功能为实现，聊天内容是截取的已有的聊天图片。

Hahaha???
关注
  • 0
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
eclipse项目的图片的绝对路径和相对路径及图片与表单居中
到底意难平
01-30 7030
1.图片的绝对路径和相对路径 eclipse中项目如下： 绝对路径不会错：例如下图中2.jpg的绝对路径如下： 但是一般项目是需要发布的，这样绝对路径就失效了。需要使用相对路径，这时，我就栽了跟头。因为图片命名是以中文命名的，导致死活出现加载图片失败。正确的是应该用英文命名。 2.图片和表单居中 图片居中text-align:cen
eclipse快捷键
abzhaozuowenab21的专栏
09-07 469
【Ct rl+T】 搜索当前接口的实现类   1. 【ALT +/】    此快捷键为用户编辑的好帮手，能为用户提供内容的辅助，不要为记不全方法和属性名称犯愁，当记不全类、方法和属性的名字时，多体验一下【ALT +/】快捷键带来的好处吧。    2. 【Ct rl+O】    显示类中方法和属性的大纲，能快速定位类的方法和属性，在查找Bug时非常有用。    3. 【Ct
CSDN图片居中、左对齐、右对齐、大小设置
qq_42224089的博客
02-02 2070
在撰写CSDN博文时，经常需要对图片进行居中、左对齐、右对齐处理或者是修改图片的大小，进行等比例缩放或者是非等比例缩放
Android-使用框架布局管理器居中显示层叠的正方形
eva1994的博客
03-13 1386
框架布局管理器用表示，在该布局管理器中，每加入一个组件，都将创建一个空白的区域，通常称为一帧，这些帧都会根据gravity属性执行自动对齐。默认情况下，框架布局是从屏幕的左上角（0,0）坐标点开始布局，多个组件层叠排序，后面的组件覆盖前面的组件。FrameLayou支持的常用XML属性 Android:foreground:设置该框架布局容器的前景图像 Android:foregroundgra
Android布局管理器-使用FrameLayout帧布局管理器显示层叠的正方形以及前景照片
BADAO_LIUMANG_QIZHI的博客
01-05 1023
场景 Android布局管理器-使用LinearLayout实现简单的登录窗口布局: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/103838995 帧布局管理器FrameLayout 实现效果 注： 博客：https://blog.csdn.net/badao_liumang_qizhi 关注...
Android：布局管理器
Zhengyangxinn的博客
01-13 1479
在 Android 中，每个组件在窗体中都有具体的位置和大小，在窗体中摆放各种组件时，很难进行判断。不过，使用 Android 布局管理器可以很方便地控制各组件的位置和大小。
android布局管理器代码
02-13
在Android开发中，布局管理器是构建用户界面（UI）的关键元素。它们负责组织和定位UI组件，确保屏幕上的元素合理、美观地排列。本文将深入探讨Android中的常见布局管理器，尤其是基于XML的布局，以及如何在Activity...
Android UI组件布局管理器
08-24
在Android开发中，UI设计是至关重要的，而布局管理器（Layout Manager）则是构建用户界面的核心工具。Android提供了六种主要的布局管理器，每种都有其特定的用途和优势，使得开发者能够根据需求创建出各种各样的界面...
android布局管理器
11-08
很好用的 android布局管理 可自动生成代码 涵盖android所有的布局和控件 可大大提高UI布局设计效率
android文件管理器用法详解
08-30
本文将深入探讨如何创建一个简单的Android文件管理器，包括其基本布局设计和功能实现。 首先，文件管理器的核心是一个列表视图（ListView），用于展示文件和目录。在提供的代码段中，我们看到XML布局文件定义了一个...
android移动开发慕课版本_Android移动开发（慕课版）
weixin_39637179的博客
12-22 666
第1章 Android简介　11.1　手机操作系统　21.2　Android发展史　31.3　Android特征　41.4　Android平台架构　5小结　7习题　7第2章　Android开发环境　82.1　安装Android开发环境　92.1.1　安装与配置JDK　102.1.2　获取Android SDK　122.1.3　Eclipse的安装与启动　182.1.4　安装ADT插件　192.2...
Java——自定义图片和居中
桂的博客
05-27 1112
import java.awt.*; import java.net.URL; import javax.swing.*; public class a { public static void main(String[] args) { new a(); } public a() { JFrame JF=new JFrame("窗口的标题"); JButton JB=new JButton("按钮");//创建按钮 JB.setSize(100,50);//设置按钮
2.AndroidStdio入门：布局管理器
qq_47166215的博客
09-24 713
布局管理器负责安排一个区域内的多个控件的大小和位置。从外面看，布局管理器是一个控件；从内部看，布局管理器又是一个容器。从代码层面来说，布局管理器类都直接或间接派生自ViewGroup类。从运行时的对象层面来说，布局管理器对象可以管理多个控件对象。布局管理器可以嵌套。Android提供多种布局管理器，采用不同方式管理内部控件。可以采用布局文件和Java代码两种方式创建和管理布局管理器。
Android开发(布局管理器)
qq_56127002的博客
10-24 1139
android的布局管理
Android——布局管理器（十一）
毛栗子201105的博客
06-16 856
各类布局管理器
Android中的6大布局管理器
你说的白是什么白_
12-22 2059
文章目录6大布局管理器详解1. LinearLayout 线性布局管理器 为什么要使用布局管理器？ 根据屏幕大小，管理容器内的控件，自动适配组件在手机屏幕中的位置 6大布局管理器详解 1. LinearLayout 线性布局管理器 ...
Android 一体机等root后的机器指令截屏
最新发布
csdn_zxw的博客
07-19 318
Android 一体机等root后的机器指令截屏
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值