安卓相对布局与线性布局

最新推荐文章于 2023-09-01 17:49:47 发布

林木ovo

最新推荐文章于 2023-09-01 17:49:47 发布

阅读量268

点赞数

文章标签：安卓 layout

本文链接：https://blog.csdn.net/weixin_56380842/article/details/117536933

版权

安卓布局

布局的种类
相对布局
- 常用属性
- 测试以上属性
简易登录界面1
线性布局
- 特殊属性
- 简易登录界面1

布局的种类

六大布局：线性布局LinearLayout，相对布局RelativeLayout，表格布局TableLayout，层布局FrameLayout，绝对布局AbsoluteLayout，网格布局GridLayout。
在这里插入图片描述

相对布局

常用属性

1、相对于父控件，例如：android:layout_alignParentTop=“true”
android:layout_alignParentTop 控件的顶部与父控件的顶部对齐;
android:layout_alignParentBottom 控件的底部与父控件的底部对齐;
android:layout_alignParentLeft 控件的左部与父控件的左部对齐;
android:layout_alignParentRight 控件的右部与父控件的右部对齐;

2、相对给定Id控件，例如：android:layout_above=“@id/**”
android:layout_above 控件的底部置于给定ID的控件之上;
android:layout_below 控件的底部置于给定ID的控件之下;
android:layout_toLeftOf 控件的右边缘与给定ID的控件左边缘对齐;
android:layout_toRightOf 控件的左边缘与给定ID的控件右边缘对齐;
android:layout_alignBaseline 控件的baseline与给定ID的baseline对齐;
android:layout_alignTop 控件的顶部边缘与给定ID的顶部边缘对齐;
android:layout_alignBottom 控件的底部边缘与给定ID的底部边缘对齐;
android:layout_alignLeft 控件的左边缘与给定ID的左边缘对齐;
android:layout_alignRight 控件的右边缘与给定ID的右边缘对齐;

3、居中，例如：android:layout_centerInParent=“true”
android:layout_centerHorizontal 水平居中;
android:layout_centerVertical 垂直居中;
android:layout_centerInParent 父控件的中央;

测试以上属性

在这里插入图片描述
android:layout_width=“wrap_content”
android:layout_height=“wrap_content” // 设置元素固定大小
android:background="@drawable/xf1" // 设置图片

<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" >
	<RelativeLayout
	    android:id="@+id/xf1"
	    android:layout_centerVertical="true"	  
	    android:layout_width="wrap_content"
	    android:layout_height="wrap_content"		
	    android:background="@drawable/xf1" >
	</RelativeLayout>
	<RelativeLayout 
	    android:layout_width="wrap_content"
	    android:layout_centerVertical="true"
	    android:layout_height="wrap_content"
	    android:background="@drawable/xf2"
	    android:layout_toRightOf="@id/xf1"
	    ></RelativeLayout>
	
</RelativeLayout>

简易登录界面1

安卓基础控件

Button,TextView,EditText,ImageView
在这里插入图片描述

padding和margin

margin 指的是当前控件和父控件的边距。与其他控件相比如按键，文本一般用margin
padding 指的是当前控件的内边距，即控件中内容距离控件的边缘的距离。与自己比图片一般用padding

设置按钮颜色变化

btn_normal.xml

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

    <!-- 圆角的半径 -->
    <corners android:radius="10dp"/>

    <!-- 填充颜色 -->
    <solid android:color="#00ffff"/>

</shape>

btn_pressed.xml

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

    <!-- 圆角的半径 -->
    <corners android:radius="10dp"/>

    <!-- 填充颜色 -->
    <solid android:color="#0662f5"/>

</shape>

btn_selector.xml

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

    <!-- 正常状态 -->
    <item android:drawable="@drawable/btn_normal" android:state_pressed="false"/>

    <!-- 按下状态 -->
    <item android:drawable="@drawable/btn_pressed" android:state_pressed="true"/>

</selector>

实现

<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="@drawable/beijing"
    tools:context=".MainActivity" >
	
    <RelativeLayout 
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:background="#00ffff"
        >
        <TextView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="智能家居"
            android:textSize="20dp"
            android:paddingTop="5dp"
            android:paddingLeft="10dp"
            />
        <Button 
            android:layout_width="wrap_content"
            android:layout_height="35dp"
            android:text="注册"
            android:textSize="15dp"
            android:layout_marginTop="3dp"
            android:id="@+id/zc"
            android:layout_alignParentRight="true"
            android:background="@drawable/btn_selector2"
            android:layout_marginRight="20dp"
            />
        <Button 
            android:layout_width="wrap_content"
            android:layout_height="35dp"
            android:text="查询信息"
            android:textSize="15dp"
            android:layout_marginTop="3dp"
            android:layout_marginRight="20dp"
            android:layout_toLeftOf="@id/zc"
            android:background="@drawable/btn_selector2"
            
            />
        
    </RelativeLayout>
    
    <ImageView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:src="@drawable/pic_rf"
        />
	<ImageView 
	    android:layout_width="wrap_content"
	    android:layout_height="wrap_content"
	    android:layout_centerInParent="true"
	    android:src="@drawable/card"
	    android:paddingLeft="100dp"
	    />
	<Button 
	    android:layout_width="wrap_content"
	    android:layout_height="wrap_content"
	    android:layout_alignParentBottom="true"
	    android:layout_centerHorizontal="true"
	    android:background="@drawable/btn_selector"
	    android:text="登录"
	    android:layout_marginBottom="50dp"
	    
	    />
</RelativeLayout>

在这里插入图片描述

线性布局

特殊属性

1 android:orientation
该属性用于定义该LinearLayout内的各种控件的排列对齐方式。
有”vertical”和”horizontal”两种值，分别表示垂直对齐和水平对齐。
2 android:gravity
控件中的内容的对齐方式
3 Weight(权重)
等比例划分区域最简单的用法：分谁谁为0，要分的按比例划分
4 divider分割线
android:divider 设置分割的图片
android:showDividers 设置分割线所在位置可选值：none middle begining end

简易登录界面1

<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="@drawable/beijing"
    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=".MainActivity" >

    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="300dp"
        android:layout_height="100dp"
        android:layout_centerInParent="true"
        android:orientation="horizontal" >

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_weight="1"
            android:divider="@drawable/zhixian"
            android:orientation="vertical"
            android:showDividers="middle|end" >

            <TextView
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:gravity="center"
                android:text="账号" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:gravity="center"
                android:text="密码" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:gravity="center"
                android:text="ID号" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_weight="6"
            android:orientation="vertical" >

            <EditText
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1" />

            <EditText
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1" />

            <EditText
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1" />
        </LinearLayout>
    </LinearLayout>

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/linearLayout1"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="23dp"
        android:background="@drawable/btn_selector"
        android:text="确定" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/button1"
        android:layout_alignBottom="@+id/button1"
        android:layout_alignRight="@+id/linearLayout1"
        android:background="@drawable/btn_selector"
        android:text="帮助" />

</RelativeLayout>

在这里插入图片描述

林木ovo

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
安卓相对布局与线性布局

安卓布局布局的种类布局的种类六大布局：线性布局LinearLayout，相对布局RelativeLayout，表格布局TableLayout，层布局FrameLayout，绝对布局AbsoluteLayout，网格布局GridLayout。<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools"
复制链接

扫一扫