首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Android入门教程(三)

Android入门教程(三)

作者头像
达达前端
发布2022-04-28 19:52:26
发布2022-04-28 19:52:26
72900
代码可运行
举报
文章被收录于专栏:达达前端达达前端
运行总次数:0
代码可运行

对Android五大布局的描述,分别是 FrameLayout (框架布局),LinearLayout (线性布局),AbsoluteLayout (绝对布局),RelativeLayout (相对布局),TableLayout (表格布局)。

FrameLayout 框架布局

FrameLayout 布局的使用效果,就是所有布局里的控件都会自动往左上角放置。所有的元素都会依次覆盖上一次的元素。那么我们现在写代码试试看:

在res/layout/activity_main.xml 书写代码

代码语言:javascript
代码运行次数:0
运行
复制
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical">
     <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:textSize="90sp"
        android:textColor="#000000"
        android:text="第一"/>
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:textSize="70sp"
        android:textColor="#ffff00"
        android:text="第二"/>
</FrameLayout>

复制该代码试试看效果图,可以看到第一的元素被覆盖的效果。

android中的 fill_parent 表示宽度是屏幕的宽度,wrap_content 这个表示大小刚好是文本的大小,表示高度,就是该字体有多高,文本框就有多高,同理宽度也一样。

在布局文件中,我们可以看到android:gravity=”###”的描述情况,该控件是描述控件内部的文本格式。

当我们定义一个TextView的文本框时,就是一个控件,控件中我们设定

android:layout_width=”fill_parent” 和 android:layout_height=”wrap_content” 这两个属性来描述该控件的高度和宽度,高度为文本即是字体高度,宽度即是屏幕的宽度。

那么我们android:gravity有什么用呢?那么你在 TextView 中添加一行代码:

代码语言:javascript
代码运行次数:0
运行
复制
<TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:textSize="90sp"
        android:textColor="#000000"
        android:gravity="right"
        android:text="第一"/>

可以看到字体显示在屏幕的右边。这就是gravity属性描述控件内部的文本格式。其实还有很多不同的显示,你可以自己操作一遍试试。

LinearLayout线性布局

LinearLayout是很常用的布局,什么是线性布局,那就是垂直和水平两种布局来排列。在布局中的

android:orientation=”vertical” //属于垂直排列 和 android:orientation=”horizontal” //水平排列

center:居中 center_horizontal // 水平居中 center_vertical //垂直居中

fill:充满容器 |fill_horizontal // 水平方向充满容器 |fill_vertical //垂直方向充满容器

代码例子可以参考github链接:https://github.com/huangguangda/LinearLayout

AbsoluteLayout绝对布局

绝对布局中: android:layout_x=”##dp” 控制当前子类控件的x位置 android:layout_y=”##dp” 控制当前子类控件的y位置

代码练习在res/activity_main.xml中:

代码语言:javascript
代码运行次数:0
运行
复制
<AbsoluteLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="50dp"
        android:layout_y="50dp"
        android:text="Button" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="100dp"
        android:layout_y="100dp"
        android:text="Button" />

</AbsoluteLayout>

RelativeLayout相对布局

RelativeLayout是一个非常强大的为设置用户界面的布局

RelativeLayout常用属性介绍

:来自于:https://www.douban.com/note/97496783/

下面介绍一下RelativeLayout用到的一些重要的属性:

第一类:属性值为true或false

android:layout_centerHrizontal 水平居中

android:layout_alignParentBottom 贴紧父元素的下边缘

android:layout_alignParentLeft 贴紧父元素的左边缘

android:layout_alignParentRight 贴紧父元素的右边缘

android:layout_alignParentTop 贴紧父元素的上边缘

android:layout_alignWithParentIfMissing 如果对应的兄弟元素找不到的话就以父元素做参照物

第二类:属性值必须为id的引用名“@id/id-name”

android:layout_below 在某元素的下方

android:layout_above 在某元素的的上方

android:layout_toLeftOf 在某元素的左边

android:layout_toRightOf 在某元素的右边

android:layout_alignTop 本元素的上边缘和某元素的的上边缘对齐

android:layout_alignLeft 本元素的左边缘和某元素的的左边缘对齐

android:layout_alignBottom 本元素的下边缘和某元素的的下边缘对齐

android:layout_alignRight 本元素的右边缘和某元素的的右边缘对齐

第三类:属性值为具体的像素值,如30dip,40px

android:layout_marginBottom 离某元素底边缘的距离

android:layout_marginLeft 离某元素左边缘的距离

android:layout_marginRight 离某元素右边缘的距离

android:layout_marginTop 离某元素上边缘的距离

代码例子可以参考github链接:https://github.com/huangguangda/RelativeLayout

TableLayout表格布局

TableLayout 将子元素的位置分配到行或列中,是一个以行、列显示视图View的视图组。

ableLayout元素就像是HTML中的table元素;TableRow就像是一一个tr元素。

后续

可能存在出现错误的地方,欢迎指正,非常感谢!

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017-12-31,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • FrameLayout 框架布局
  • LinearLayout线性布局
  • AbsoluteLayout绝对布局
  • RelativeLayout相对布局
  • RelativeLayout常用属性介绍
  • TableLayout表格布局
  • 后续
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档