Android（2、学习Andriod界面布局）

itYyp&004

已于 2024-03-27 16:58:18 修改

阅读量891

点赞数 18

文章标签：学习 java

于 2024-03-27 16:43:34 首次发布

本文链接：https://blog.csdn.net/yiyuanpeng2004/article/details/137082179

版权

以下是一些安卓页面布局的笔记：

使用布局文件：在安卓中，通常使用XML布局文件来定义页面的布局。这些布局文件可以使用LinearLayout、RelativeLayout、GridLayout等布局容器来组织UI元素。
使用相对布局：相对布局是一种布局方式，其中UI元素的位置是相对于其他UI元素的位置来定义的。这种布局方式可以使用RelativeLayout来实现。
使用线性布局：线性布局是一种布局方式，其中UI元素按照一定的顺序排列在一条线上。这种布局方式可以使用LinearLayout来实现。
使用网格布局：网格布局是一种布局方式，其中UI元素被分布在一个网格中。这种布局方式可以使用GridLayout来实现。
使用表格布局：表格布局是一种布局方式，其中UI元素被分布在一个表格中。这种布局方式可以使用TableLayout来实现。
使用帧布局：帧布局是一种布局方式，其中UI元素被放置在一个个独立的帧中。这种布局方式可以使用FrameLayout来实现。
使用绝对布局：绝对布局是一种布局方式，其中UI元素的位置是绝对的，即它们的位置是由具体的像素值来定义的。这种布局方式可以使用AbsoluteLayout来实现。
使用相对布局的注意事项：在使用相对布局时，需要注意UI元素之间的相对位置关系。例如，如果一个UI元素需要相对于另一个UI元素居中显示，需要使用相对布局的属性来实现。
使用线性布局的注意事项：在使用线性布局时，需要注意UI元素的排列顺序。例如，如果需要将UI元素按照从左到右的顺序排列，需要将它们添加到LinearLayout中的顺序是从左到右。
使用网格布局的注意事项：在使用网格布局时，需要注意UI元素的行数和列数。例如，如果需要将UI元素分布在3行2列的网格中，需要设置GridLayout的rows和columns属性。

以下是一些安卓界面布局的编写方式笔记：

使用XML布局文件：在安卓中，通常使用XML布局文件来定义界面的布局。这些布局文件可以使用LinearLayout、RelativeLayout、GridLayout等布局容器来组织UI元素。
使用相对布局：相对布局是一种布局方式，其中UI元素的位置是相对于其他UI元素的位置来定义的。这种布局方式可以使用RelativeLayout来实现。
使用线性布局：线性布局是一种布局方式，其中UI元素按照一定的顺序排列在一条线上。这种布局方式可以使用LinearLayout来实现。
使用网格布局：网格布局是一种布局方式，其中UI元素被分布在一个网格中。这种布局方式可以使用GridLayout来实现。
使用表格布局：表格布局是一种布局方式，其中UI元素被分布在一个表格中。这种布局方式可以使用TableLayout来实现。
使用帧布局：帧布局是一种布局方式，其中UI元素被放置在一个个独立的帧中。这种布局方式可以使用FrameLayout来实现。
使用绝对布局：绝对布局是一种布局方式，其中UI元素的位置是绝对的，即它们的位置是由具体的像素值来定义的。这种布局方式可以使用AbsoluteLayout来实现。
使用相对布局的注意事项：在使用相对布局时，需要注意UI元素之间的相对位置关系。例如，如果一个UI元素需要相对于另一个UI元素居中显示，需要使用相对布局的属性来实现。
使用线性布局的注意事项：在使用线性布局时，需要注意UI元素的排列顺序。例如，如果需要将UI元素按照从左到右的顺序排列，需要将它们添加到LinearLayout中的顺序是从左到右。
使用网格布局的注意事项：在使用网格布局时，需要注意UI元素的行数和列数。例如，如果需要将UI元素分布在3行2列的网格中，需要设置GridLayout的rows和columns属性。
使用布局文件的注意事项：在使用布局文件时，需要注意UI元素的id属性。这个属性用于在Java代码中引用UI元素，例如使用findViewById()方法来获取UI元素。
使用布局文件的优点：使用布局文件可以使界面的布局更加灵活，可以在不同的设备上自动适应。此外，使用布局文件可以使代码更加简洁，减少代码量。

以上是一些安卓界面布局的编写方式笔记，希望对你有所帮助。

设置文本的大小

在Java代码中调用setTextSize 方法，即可指定文本大小。
在XML文件中则通过属性android:textSize 指定文本大小，此时需要指定字号单位。
●px:它是手机屏幕的最小显示单位，与设备的显示屏有关。
●dp:它是与设备无关的显示单位，只与屏幕的尺寸有关。
●sp:它专门用来设置字体大小，在系统设置中可以调整字体大小。

Java代码：
    TextView viewById = findViewById(R.id.TextV);
    viewById.setText(R.string.textV01);

设置文本颜色

Java代码：
    TextView textColor = 					    	findViewById(R.id.textColor);
    textColor.setTextColor(0xFF00FF00);
	也可以通过方法设置颜色
    textColor.setTextColor(Color.RED);

设置视图的宽高

视图宽度通过属性android:layout_ width表达，视图高度通过属性android:layout_ height表达，宽高的取值主要有下列三种:
match_ parent: 表示与上级视图保持一致。
wrap_ content: 表示与内容自适应。
以dp为单位的具体尺寸。

可以通过Java代码设置宽高
	//创建px转换dp工具类
	public static int dip2px(Context context, float dpValue){
        //获取当前手机的像素密度（1个dp对应几个像素）
        float scale = context.getResources().getDisplayMetrics().density;
        //用px * dp像素 每个像素 +上0.5 然后进行取整
        return (int)(dpValue * scale + 0.5);
    }
	
	    TextView textWitch = findViewById(R.id.textWitch);
        ViewGroup.LayoutParams params = textWitch.getLayoutParams();
        //调用工具类方法
        params.width = Utils.dip2px(this,300);
        textWitch.setLayoutParams(params);
	
    <TextView
        android:id="@+id/textWitch"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="通过代码设置视图宽高"
        android:textSize="20sp"
        android:background="#ff00ff00"
        />

通过xml文件设置颜色
	<TextView
        android:id="@+id/textColor"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:text="@string/textV01"
        android:textSize="20dp"
        android:background="#ffff0000"/>

设置视图的间距

设置视图的间距有两种方式:

采用layout margin属性，它指定了当前视图与周围平级视图之间的距离。包括layout margin、
layout marginLeft、layout marginTop. layout marginRight. layout marginBottom

采用padding属性，它指定了当前视图与内部下级视图之间的距离。包括padding、 paddingLeft、paddingTop. paddingRight. paddingBottom

设置视图的对齐方式

➢设置视图的对齐方式有两种途径:
●采用layout_ gravity属性，它指定了当前视图相对于上级视图的对齐方式。
●采用gravity属性，它指定了下级视图相对于当前视图的对齐方式。
➢layout gravity与gravity的取值包括: left. top、 right、 bottom,还可以用竖线连接各取值，例如"left|top" 表示即靠左又靠上，也就是朝左.上角对齐。

线性布局LinearLayout

➢线性布局内部的各视图有两种排列方式:
●orientation属性值为horizontal时，内部视图在水平方向从左往右排列。
●orientation属性值为vertical时，内部视图在垂直方向从上往下排列。
➢如果不指定orientation属性，则LinearLayout默认水平方向排列。

线性布局的权重

➢线性布局的权重概念，指的是线性布局的下级视图各自拥有多大比例的宽高。
➢权重属性名叫layout _weight, 但该属性不在LinearLayout节点设置，而在线性布局的直
接下级视图设置，表示该下级视图占据的宽高比例。
●layout _width填0dp时，layout _weight表示水平方向的宽度比例。
●layout height填0dp时，layout weight表示垂直方向的高度比例。

相对布局RelativeLayout

➢相对布局的下级视图位置由其他视图决定。用于确定下级视图位置的参照物分两种:
●与该视图自身平级的视图;
●该视图的上级视图(也就是它归属的RelativeLayout)
➢如果不设定下级视图的参照物，那么下级视图默认显示在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="150dp">

    <TextView
        android:id="@+id/tv_center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:background="#FFFFFF"
        android:text="我在中间"
        android:textColor="#000000"
        android:textSize="11sp" />

    <TextView
        android:id="@+id/tv_centerc_horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:background="#FFFFFF"
        android:text="我在水平中间"
        android:textColor="#000000"
        android:textSize="11sp" />

    <TextView
        android:id="@+id/tv_centerc_vertical"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:background="#FFFFFF"
        android:text="我在垂直中间"
        android:textColor="#000000"
        android:textSize="11sp" />

    <TextView
        android:id="@+id/tv_parent_left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:background="#FFFFFF"
        android:text="我在上级的左边对齐"
        android:textColor="#000000"
        android:textSize="11sp" />

    <TextView
        android:id="@+id/tv_parent_right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:background="#FFFFFF"
        android:text="我在上级的右边对齐"
        android:textColor="#000000"
        android:textSize="11sp" />

    <TextView
        android:id="@+id/tv_parent_top"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:background="#FFFFFF"
        android:text="我在上级的顶部对齐"
        android:textColor="#000000"
        android:textSize="11sp" />

    <TextView
        android:id="@+id/tv_parent_botton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="#FFFFFF"
        android:text="我在上级的底部对齐"
        android:textColor="#000000"
        android:textSize="11sp" />

    <TextView
        android:id="@+id/tv_left_center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#FFFFFF"
        android:layout_toLeftOf="@id/tv_center"
        android:layout_alignTop="@id/tv_center"
        android:text="我在中间右边"
        android:textSize="11sp"
        android:textColor="#000000"/>

    <TextView
        android:id="@+id/tv_right_center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#FFFFFF"
        android:layout_toRightOf="@id/tv_center"
        android:layout_alignBottom="@id/tv_center"
        android:text="我在中间右边"
        android:textSize="11sp"
        android:textColor="#000000"/>

    <TextView
        android:id="@+id/tv_top_center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#FFFFFF"
        android:layout_above="@id/tv_center"
        android:layout_alignLeft="@id/tv_center"
        android:text="我在中间上面"
        android:textSize="11sp"
        android:textColor="#000000"/>

    <TextView
        android:id="@+id/tv_botton_center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#FFFFFF"
        android:layout_below="@id/tv_center"
        android:layout_alignRight="@id/tv_center"
        android:text="我在中间下面"
        android:textSize="11sp"
        android:textColor="#000000"/>
</RelativeLayout>

网格布局GridLayout

➢网格布局支持多行多列的表格排列。
➢网格布局默认从左往右、从上到下排列，它新增了两个属性:
●columnCount属性，它指定了网格的列数，即每行能放多少个视图;
●rowCount属性，它指定了网格的行数，即每列能放多少个视图;

实现网格布局：xml代码

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:columnCount="2"
    android:rowCount="2">

    <TextView
        android:layout_width="0dp"
        android:layout_height="60dp"
        android:layout_columnWeight="1"
        android:background="#ffcccc"
        android:gravity="center"
        android:text="浅红色"
        android:textColor="#000000"
        android:textSize="17sp" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="60dp"
        android:layout_columnWeight="1"
        android:background="#499C54"
        android:gravity="center"
        android:text="浅绿色"
        android:textColor="#000000"
        android:textSize="17sp"

        />

    <TextView
        android:layout_width="0dp"
        android:layout_height="60dp"
        android:layout_columnWeight="1"
        android:background="#F0A732"
        android:gravity="center"
        android:text="淡黄色"
        android:textColor="#000000"
        android:textSize="17sp"

        />

    <TextView
        android:layout_width="0dp"
        android:layout_height="60dp"
        android:layout_columnWeight="1"
        android:background="#FC99E7"
        android:gravity="center"
        android:text="IDEA"
        android:textColor="#000000"
        android:textSize="17sp"

        />
</GridLayout>

滚动视图ScrollView

➢滚动视图有两种:
●ScrollView, 它是垂直方向的滚动视图;垂直方向滚动时，layout width属性值设置为match. parent, layout height属性值设置为wrap. content.
●HorizontalScrollView, 它是水平方向的滚动视图;水平方向滚动时，layout width属性值设置为wrap_ content, layout height属性值设置为match. parent.

滚动视图代码示例：

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

    <HorizontalScrollView
        android:layout_width="wrap_content"
        android:layout_height="200dp">

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

            <View
                android:layout_width="300dp"
                android:layout_height="match_parent"
                android:background="#EB8F3B"
                />

            <View
                android:layout_width="300dp"
                android:layout_height="match_parent"
                android:background="#499C54" />
        </LinearLayout>

    </HorizontalScrollView>

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

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

            <View
                android:layout_width="match_parent"
                android:layout_height="400dp"
                android:background="#EB8F3B"
                />

            <View
                android:layout_width="match_parent"
                android:layout_height="400dp"
                android:background="#499C54" />
        </LinearLayout>

    </ScrollView>

</LinearLayout>

itYyp&004

关注

18
点赞
踩
22

收藏

觉得还不错? 一键收藏
1
评论
Android（2、学习Andriod界面布局）

使用布局文件：在安卓中，通常使用XML布局文件来定义页面的布局。这些布局文件可以使用LinearLayout、RelativeLayout、GridLayout等布局容器来组织UI元素。使用相对布局：相对布局是一种布局方式，其中UI元素的位置是相对于其他UI元素的位置来定义的。这种布局方式可以使用RelativeLayout来实现。使用线性布局：线性布局是一种布局方式，其中UI元素按照一定的顺序排列在一条线上。这种布局方式可以使用LinearLayout来实现。
复制链接

扫一扫