android 页面布局模板 android页面布局实例

转载

mob64ca1417b0c6 2023-08-17 22:33:07

文章标签 android 页面布局模板 android studio android 控件 xml 文章分类 Android 移动开发

1. Android的基础布局
LinearLayout 线性布局

RelativeLayout 相对布局

TableLayout 表格布局

FrameLayout 帧布局（框架布局）

ConstrantLayout 约束布局（Android Studio默认布局）用于拖拽的

2. LinearLayout 线性布局

线性布局（LinearLayout）主要以水平或垂直方式来排列界面中的控件。并将控件排列到一条直线上。在线性布局中，如果水平排列，垂直方向上只能放一个控件，如果垂直排列，水平方向上也只能方一个控件。

使用线性布局，需要将布局节点改成LinearLayout，基本格式如下：

<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="match_parent"
    tools:context=".MainActivity">
 ....
    
</LinearLayout>

1. 线性布局有两种：

水平的线性布局所有控件都是水平挨个排布

如果没有android:orientation属性的存在

或者 android:orientation="horizontal"
2. 垂直的线性布局所有控件都是垂直挨个排布

android:orientation="vertical"

3. gravity属性

线性布局的控件默认是从左往右排列或从上往下排列，如果想让线性布局中的控件排列对齐右边缘或者底部，可以用gravity属性控制。

3.1 layout_weight属性

LinearLayout中另外一个常用的属性是layout_weight，该属性需要加在LinearLayout的子控件中。其作用是分配线性布局中的剩余空间到该控件上。

3.2分隔线：内部的线

android:divider="@color/black"
android:showDividers="middle"

4.layout_weight（比重）

在布局文件中设置layout_weight（比重）属性时，以宽为例，假如 android:layout_width="wrap_content",或者 android:layout_width="0dp"，此时，设置的layout_weight属性和数值成正比；假如 android:layout_width="match_parent"，此时，设置的layout_weight属性和数值成反比。

具体说明：

<LinearLayout 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:orientation="horizontal">

    <LinearLayout 
        android:layout_marginTop="50dp"
        android:layout_width="wrap_content"
        android:layout_height="20dp"
        android:background="#00f"
        android:layout_weight="1"
        ></LinearLayout>
    <LinearLayout 
        android:layout_marginTop="50dp"
        android:layout_width="wrap_content"
        android:layout_height="20dp"
        android:background="#0f0"
        android:layout_weight="2"
        ></LinearLayout>
</LinearLayout>

5. 嵌套线性布局结构

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        
    </LinearLayout>
    
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    
    </LinearLayout>

</LinearLayout>

RelativeLayout

RelativeLayout又称作相对布局，也是一种非常常用的布局。和LinearLayout的排列规则不同，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="match_parent">
 
    <Button
        android:id="@+id/btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:text="btn1"
        android:textAllCaps="false" />
 
    <Button
        android:id="@+id/btn2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentRight="true"
        android:text="btn2"
        android:textAllCaps="false" />
 
    <Button
        android:id="@+id/btn3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="btn3"
        android:textAllCaps="false" />
 
    <Button
        android:id="@+id/btn4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentBottom="true"
        android:text="btn4"
        android:textAllCaps="false" />
 
    <Button
        android:id="@+id/btn5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:text="btn5"
        android:textAllCaps="false" />
 
</RelativeLayout>

相对于父布局定位的效果图

android 页面布局模板 android页面布局实例_android

上面的代码很好理解，根据英文意思就可以明白。（左上，右上，中心，左下，右下）

关于父布局的对齐方式：

上：android:layout_alignParentTop

下：android:layout_alignParentBottom

中：android:layout_centerInParent

左：android:layout_alignParentLeft

右：android:layout_alignParentRight

上面的例子中的每个控件都是相对于父布局进行定位的，那控件可不可以相对于控件进行定位呢？当然是可以的，修改activity_main.xml中的代码：

<?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="match_parent">
 
    <Button
        android:id="@+id/btn3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="btn3"
        android:textAllCaps="false" />
 
    <Button
        android:id="@+id/btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/btn3"
        android:layout_toLeftOf="@id/btn3"
        android:text="btn1"
        android:textAllCaps="false" />
 
    <Button
        android:id="@+id/btn2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/btn3"
        android:layout_toRightOf="@id/btn3"
        android:text="btn2"
        android:textAllCaps="false" />
 
    <Button
        android:id="@+id/btn4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/btn3"
        android:layout_toLeftOf="@id/btn3"
        android:text="btn4"
        android:textAllCaps="false" />
 
    <Button
        android:id="@+id/btn5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/btn3"
        android:layout_toRightOf="@id/btn3"
        android:text="btn5"
        android:textAllCaps="false" />
 
</RelativeLayout>

效果图：

android 页面布局模板 android页面布局实例_控件_02

相对于控件进行定位的方式：

上：android:layout_above="@id/控件id"

下：android:layout_below="@id/控件id"

左：android:layout_toLeftOf="@id/控件id"

右：android:layout_toRightOf="@id/控件id"

虽然，RelativeLayout的属性众多，但都是有规律可循的。

4. 常用的控件
(1) TextView 文本控件给用户一个文字性的提示

EditText 输入文本控件

ImageView 图片控件显示图片

Button 按钮

(2) TextView

1. 掌握常用的属性

2.掌握资源文件的使用

1 如何创建资源文件，并对资源文件编程

2. 使用资源文件

File--->New--->New Project

android 页面布局模板 android页面布局实例_android studio_03

第二步：

android 页面布局模板 android页面布局实例_android 页面布局模板_04

带图片的TextView
android:drawableTop

重点1：怎么样设置一个shaper(皮肤)

在drawable文件夹下设置 xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<!--设置一个黑色边框-->
    <stroke android:width="2px" android:color="#000000"/>
<!-- 渐变-->
    <gradient
        android:angle="270"
        android:endColor="#C0C0C0"
        android:startColor="#FCD209"/>
    <!-- 设置一下边距,让空间大一点 -->
    <padding
        android:left="5dp"
        android:top="5dp"
        android:right="5dp"
        android:bottom="5dp"/>
</shape>

带图片的TextView

在TextView里，用android:drawableTop引用你要添加的图片，一定要写在TextView里

<TextView
        android:layout_marginTop="20dp"
        android:id="@+id/textView9"
        android:gravity="center_horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:drawableTop="@drawable/fly"
        android:text="跑步" />

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。