Java转Android:第4天 用Layout布局实现罗盘和三叉戟

·  阅读 819
Java转Android:第4天 用Layout布局实现罗盘和三叉戟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第4天,点击查看活动详情


今天只有xml视图布局,没有逻辑代码,认真读完,你可以实现以下功能:

1、拥有一款可以伴随手机旋转的方位罗盘 标注.gif

2、为海王合成断掉的三叉戟

image34.png

一、我讲

今天主要内容:1、简说Android中的布局;2、重点说一下约束布局;3、稍微一提其他布局。

1.1 布局

我们看到房子,会想到一个叫布局的词语。

image7.jpeg

房间内的布局是由两部分组成的。

image.png

APP页面其实也是一样。

image.png

房间的布局会有很多种。同样,Android里面也有很多布局,下面名称带有Layout的都是布局。

image9.png

从Android Studio 2.2开始,新建项目时,默认的布局样式改为了ConstraintLayout,也就是约束布局。

这说明,Android官方建议我们使用约束布局进行开发。

image10.png

因此,我们首先来学习一下它!

1.2 约束布局 ConstraintLayout

约束,其实就是制约,管束。

image.png

当约束布局上加一个按钮的时候,由于它没有约束,运行时会出现在左上角。

这时需要给它添加约束,实现我们的期望。

image12.GIF

每个控件的约束都分为垂直和水平两类,一共可以在四个方向上给控件添加约束。

image13.png

上图中Button的上下左右各有一个圆圈,这圆圈就是用来添加约束的,我们可以将约束添加到总布局上,也可以将约束添加到另一个控件。

添加约束

下图演示如何通过拖拽圆圈到布局,给按钮添加位于整体布局右下角的约束。

image14.GIF

给按钮添加一个以其他控件为参照的约束。 image8.GIF

删除约束

删除某条约束的方法,点击某个方向的圆圈。

image15.GIF

删除某个控件约束的方法,点击控件下方的红色叉号。

image16.GIF

删除某个页面约束的方法,点击页面顶部的红色叉号。

image17.GIF

智能推断约束

推断约束,是Android Studio依照开发工具的推断,给你自动生成约束。当你摆放完成控件之后,点击图中的魔法棒图标,即可完成自动添加约束。

image9.GIF

1.3 其他布局

线性布局 LinearLayout

内部元素按照线性进行排列,分为水平(horizontal)方向和垂直(vertical)方向。

image.png

当然,他也可以嵌套使用。

image.png

上面就是一个垂直线性分为上下两部分,下部分是一个水平嵌套,分为左右两部分。

实际上最常用的可能还是权重占比。

image.png

相对布局 RelativeLayout

相对布局内部元素按照相对位置的说明进行排列,必须要参照一个元素(包括父控件)。

image.png

其中最为常用的,还是相对于兄弟控件,相对于兄弟控件的属性,需要指定另一个控件的ID。 image.png

image.png

二、你做

本期多是界面操作的活,基本上操作Android Studio即可,但是最终生成的还是xml代码。

三叉戟的拼接我们用相对布局,我把素材图片放出来,大家可以使用。

image6.pngimage5.pngimage4.png

最终代码如下:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android:id="@+id/mid"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        app:srcCompat="@mipmap/mid" />
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/mid"
        android:layout_alignLeft="@+id/mid"
        app:srcCompat="@mipmap/top" />
    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/mid"
        android:layout_below="@+id/mid"
        app:srcCompat="@mipmap/bottom" />
</RelativeLayout>
复制代码

先让中间部分在布局中间,然后顶部的位于中间之上,底部的位于中间之下。另外,还要左侧对齐。

至于罗盘,采用约束布局,操作就可以了。

Untitled.gif

三、关于

现在,行业内多是Android转Java,很少有Java转Android的。

但是,这并不妨碍Java同学了解Android开发,从学习的角度去拓宽自己的知识面。

所以,我会以最精简的语言来编写一个系列教程《Java转Android》(第一季30篇,日更)。

其实,不管是Java还是python,只要有编程基础的同学,一天看800字,30天可入门安卓。

四、今天还有一段话

我已经连续更新4天了。

其中第三篇《Listener(中文)实现问答App》被官方下架了,Listener的中文词不让说,所以我改了名称叫观察器。这让我受到了一点小打击。

除此之外,掘友们也不看好往Android转。

Snip20220803_1.png

Snip20220803_2.png

不过,我想我还是会继续更新的。

计划是连更30天,内容都是原创。

如果,我哪天不更新了,我一定会在最后一篇告诉大家的。

分类:
Android
标签:
分类:
Android
标签:
收藏成功!
已添加到「」, 点击更改