第二次,本牛崽十分从容,今天咱们来讲讲Android Q之布局,我遇到的问题与自己学到的,大牛不要嘲笑哈,有错误可以指出来,本牛崽看到就改了。

今天我的学长跟我们开始了布局,布局看资料说好像有5种,又不止五种,但是嘞,基本上后面的都不用了,主要是线性布局和帧布局。

首先咱们来讲讲线性布局,本牛崽说说自己理解的哈,如果有质疑,大牛们可以提。

    我了解到的概念哈,线性布局是相当于把每块区域用一根线穿起来,有水平和垂直两种重要的布局规格。

    纵向:android:orientation="vertical",也叫垂直方向布局一般都是相当于数学作业本那种样式,一般每行一个区域。

    横向:android:orientation="horizontal"就是把数学本横摆着嘛,嘿嘿。

    还有一种就是不写这个属性,就是一般的,自动定义区域的

下面图中的LinerLayout就是线性布局,这个新牛崽值得拥有,哈哈,本牛崽就喜欢拖,拖下去代码就出来了

用垂直方向布局的话一般得嵌套线性布局哈

 

 效果就这样:

是不是很像数学作业本啊,你们高数怕了吗?

 这就是简单的线性布局啦,

然后就是帧布局,帧布局,学长讲解的,我大概可以理解成是贴在最外面的,所以写代码的时候一般都是把你最想放在最外面的东西写到最后,它就会显示在最外面。

FrameLayout:这边直接嵌套线性布局来用了,看下面,记住特点,最下面写的布局是最外面这层,然后所有布局会堆起来,下面测试的颜色应该看得出来吧,绿色和红色。

  

 我们显示出的是红色,懂吧,它在下面,它最大。然后布局都堆在一起了。这不算线性布局和帧布局嵌套哈,只是帧布局包着线性布局罢了

现在就拿出我学到的镇店之宝吧。。。

就是一个布局嵌套:

 

一开始我也觉得挺难的,后来发现还不错,代码贴上:

其实我当时写的时候就分出来了,看着很长,知道思路就简单,记住,帧布局的东西,最下面的最大。

我的思路是,先放个垂直的线性布局,再放两个空线性布局,然后分别放入两个帧布局就把它分成两部分了

但是要注意的是,如果想做出这种情况,就得让两个线性布局堆叠,大的放最下面,就是白色块,蓝色块在中间,最上面放图片,贴在白色块的底部,就形成了居中分离,下面再放信息,信息也是这种铺地毯的方法。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"> <LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="190dp"
android:background="#fff"
android:layout_gravity="bottom"
> </LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="150dp"
android:background="@color/colorPrimary"
android:gravity="bottom">
</LinearLayout>
//记住不要把图片用上面的线性布局包起来了,用帧布局包着才行,
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_gravity="center"
android:layout_marginTop="50dp"
android:background="@drawable/pgpg" /> </FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="110dp"
android:gravity="bottom"> <LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"> <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="104dp"
android:layout_marginRight="20dp"
android:text="200\n粉丝" /> <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="40dp"
android:layout_marginRight="40dp"
android:text="54\n关注" /> <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:text="4\n动态" />
</LinearLayout> </LinearLayout>           //记住,千万别包裹住下面的了,这样他就不能独立的贴在最上面了
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:layout_marginLeft="165dp"
android:text="失去的青春"> </TextView>
</FrameLayout>
</LinearLayout> <LinearLayout
android:layout_width="match_parent"
android:layout_height="29dp"
android:layout_weight="2" android:background="#baa"> </LinearLayout>
</LinearLayout> </androidx.constraintlayout.widget.ConstraintLayout> 做到这个地步就是本牛崽作业的成果啦!
是不是觉得很长很可怕,我刚开始也这么觉得,插入图片,应该都知道,把图片放到下面图中的drawable中,改个名字就好,然后用背景图片、图片视图、图片按钮都可以插入。

补充完了,线性布局和帧布局学会了吗?我刚开始也是云里雾里的,一番研究加上自己写随笔的总结,我已经学懂了。很提倡大家花半个小时左右来总结。这样就像讲课一样,能修养自己也能帮助别人,这就是传说中的双赢,但是会比较累。加油,牛崽向大牛进发。

 

Android线性布局和帧布局的更多相关文章

  1. android布局 FrameLayout(帧布局)详解

    看到一篇很有趣的文章对我就是冲着萌妹子看的 FrameLayout(帧布局) 前言 作为android六大布局中最为简单的布局之一,该布局直接在屏幕上开辟出了一块空白区域, 当我们往里面添加组件的时候 ...

  2. android的布局-----FrameLayout(帧布局)

    (-)帧布局简介 帧布局容器为每个加入的其中的组件创建一个空白的区域称为一帧每个子组件占据一帧,这些帧都会根据gravity的属性执行自动对齐 (二)属性 foreground:这是帧布局的前景图像 ...

  3. 第24讲 UI_布局 之帧布局 表格布局 绝对布局

    第24讲 UI_布局 之帧布局 表格布局 绝对布局 3. FrameLayout(帧布局) 帧布局是从屏幕的左上角(0,0)坐标开始布局,多个组件层叠排序,后一个组件总会将前一个组件所覆盖,除非最后一 ...

  4. Android——布局(线性布局linearLayout,表格布局TableLayout,帧布局FrameLayout)

    线性布局: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:androi ...

  5. Android -- UI布局管理,相对布局,线性布局,表格布局,绝对布局,帧布局

    1. 相对布局 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmln ...

  6. Android中的FrameLayout帧布局

    帧布局由FrameLayout所代表,FrameLayout直接继承了ViewGoup组件. 帧布局容器为每一个增加当中的组件创建一个空白的区域(称为一个帧),每一个子组件占领一帧,这些帧都会依据gr ...

  7. Android布局_帧布局FrameLayout

    一.FrameLayout布局概述 在这个布局中,所有的子元素都不能被指定放置的位置,他们统统放于这块区域的左上角,并且后面的子元素直接覆盖在前面的子元素之上,将前面的子元素部分和全部遮挡  如下面的 ...

  8. Android精通:TableLayout布局,GridLayout网格布局,FrameLayout帧布局,AbsoluteLayout绝对布局,RelativeLayout相对布局

    在Android中提供了几个常用布局: LinearLayout线性布局 RelativeLayout相对布局 FrameLayout帧布局 AbsoluteLayout绝对布局 TableLayou ...

  9. Android零基础入门第30节:两分钟掌握FrameLayout帧布局

    原文:Android零基础入门第30节:两分钟掌握FrameLayout帧布局 前面学习了线性布局.相对布局.表格布局,那么本期来学习第四种布局--FrameLayout帧布局. 一.认识FrameL ...

随机推荐

  1. 机器学习实战基础(十九):sklearn中数据集

    sklearn提供的自带的数据集   sklearn 的数据集有好多个种 自带的小数据集(packaged dataset):sklearn.datasets.load_<name> 可在 ...

  2. day4:运算符

    1.算术运算符:+ - * / // % ** 注意点:1./ 除法,结果为小数  2.// 地板除,返回整数  3.如果被除数或者除数是一个小数,结果加上.0 2.比较运算符:< > & ...

  3. [Qt插件]-02创建应用程序插件(插件化开发的一种思路)

    本篇是学习Qt Creator快速入门,插件开发的笔记   分为两部分 创建插件 使用插件的应用程序(测试插件)   插件是被使用的应用程序加载使用的. 是使用插件的应用程序定义接口,插件按照接口来实 ...

  4. Ethical Hacking - GAINING ACCESS(22)

    CLIENT SIDE ATTACKS - BeEf Framework Browser Exploitation Framework allowing us to launch a number o ...

  5. 简单实用的办公软件导航网站,IT经理必备工具

    最近非常忙,因为公司上线了业财一体化系统.今天分享一个非常实用的办公软件导航网站,节省了我很多百度的时间. 快氪导航,让软件服务更简单. 一.办公软件导航 站长已经按照功能进行了分类:协同办公,流程审 ...

  6. dva + umi 学习笔记

    首先,这里的 dva + umi 不是说学习dva和umi,而是基于 dva + umi 的react前端开发脚手架,这是我的目标. 一开始,我在dva文档的例子里看到了 dva + umi 的例子. ...

  7. Spring RestTemplate 的介绍和使用-入门

    RestTemplate是什么? 传统情况下在java代码里访问restful服务,一般使用Apache的HttpClient.不过此种方法使用起来太过繁琐.spring提供了一种简单便捷的模板类来进 ...

  8. IDEA添加注释常用的快捷键

    1.行注释Ctrl+/ 2.块注释Ctrl+Shift+/ 3.生成类注释 输入/**,然后按回车 (idea上没有生成类注释快捷键的,可以看这里 :idea生成类注释和方法注释的正确方法 ) 4.生 ...

  9. Pytorch实现基于卷积神经网络的面部表情识别(详细步骤)

    文章目录 一.项目背景 二.数据处理 1.标签与特征分离 2.数据可视化 3.训练集和测试集 三.模型搭建 四.模型训练 五.完整代码 一.项目背景数据集cnn_train.csv包含人类面部表情的图 ...

  10. 大型Java进阶专题(九) 设计模式之总结

    前言 ​ 关于设计模式的文章就到这里了,学习这门多设计模式,你是不是有这样的疑惑,发现很多设计模式很类似,经常会混淆某些设计模式.这章节我们将对设计模式做一个总结,看看各类设计模式有什么区别.需要注意 ...