首页 > 其他分享 >LinearLayout（线性布局）

LinearLayout（线性布局）

时间：2023-03-01 23:00:45浏览次数：38  
标签：layout parent 布局 height content width 线性 android LinearLayout

本节引言

本节开始讲Android中的布局，今天我们要讲解的就是第一个布局，LinearLayout(线性布局)，我们屏幕适配的使用用的比较多的就是LinearLayout的weight(权重属性)，在这一节里，我们会详细地解析LinearLayout，包括一些基本的属性，Weight属性的使用，以及比例如何计算，另外还会说下一个用的比较少的属性：android：divider绘制下划线！

1.本节学习图

LinearLayout（线性布局）_xml

2.weight(权重)属性详解

①最简单用法

如图：

LinearLayout（线性布局）_xml_02

实现代码：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    
    xmlns:tools="http://schemas.android.com/tools"    
    android:id="@+id/LinearLayout1"    
    android:layout_width="match_parent"    
    android:layout_height="match_parent"    
    android:orientation="horizontal">   
        
    <LinearLayout    
        android:layout_width="0dp"    
        android:layout_height="fill_parent"    
        android:background="#ADFF2F"     
        android:layout_weight="1"/>    
       
        
    <LinearLayout    
        android:layout_width="0dp"    
        android:layout_height="fill_parent"    
        android:background="#DA70D6"     
        android:layout_weight="2"/>    
        
</LinearLayout>

要实现第一个的1:1的效果,只需要分别把两个LinearLayout的weight改成1和1就可以了用法归纳:按比例划分水平方向:将涉及到的View的android:width属性设置为0dp,然后设置为androidweight属性设置比例即可;类推,竖直方向,只需设android:height为0dp,然后设weight属性即可！大家可以自己写个竖直方向的等比例划分的体验下简单用法！

②weight属性详解

当然,如果我们不适用上述那种设置为0dp的方式,直接用wrap_content和match_parent的话,则要接着解析weight属性了,分为两种情况,wrap_content与match_parent！另外还要看LinearLayout的orientation是水平还是竖直,这个决定哪个方向等比例划分

1)wrap_content比较简单,直接就按比例的了

LinearLayout（线性布局）_android_03

实现代码：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    
    xmlns:tools="http://schemas.android.com/tools"    
    android:id="@+id/LinearLayout1"    
    android:layout_width="match_parent"    
    android:layout_height="match_parent"  
    android:orientation="horizontal" >    
    
    <TextView    
        android:layout_weight="1"    
        android:layout_width="wrap_content"    
        android:layout_height="fill_parent"    
        android:text="one"     
        android:background="#98FB98"    
     />    
     <TextView    
        android:layout_weight="2"    
        android:layout_width="wrap_content"    
        android:layout_height="fill_parent"    
        android:text="two"     
        android:background="#FFFF00"    
     />    
     <TextView    
        android:layout_weight="3"    
        android:layout_width="wrap_content"    
        android:layout_height="fill_parent"    
        android:text="three"     
        android:background="#FF00FF"    
     />    
    
</LinearLayout>

2)match_parent(fill_parent):这个则需要计算了

我们写这段简单的代码：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    
    xmlns:tools="http://schemas.android.com/tools"    
    android:id="@+id/LinearLayout1"    
    android:layout_width="match_parent"    
    android:layout_height="match_parent" >    
    
    <TextView    
        android:layout_weight="1"    
        android:layout_width="fill_parent"    
        android:layout_height="fill_parent"    
        android:text="one"     
        android:background="#98FB98"    
     />    
     <TextView    
        android:layout_weight="2"    
        android:layout_width="fill_parent"    
        android:layout_height="fill_parent"    
        android:text="two"     
        android:background="#FFFF00"    
     />    
     <TextView    
        android:layout_weight="3"    
        android:layout_width="fill_parent"    
        android:layout_height="fill_parent"    
        android:text="three"     
        android:background="#FF00FF"    
     />    
    
</LinearLayout>

运行效果图：

LinearLayout（线性布局）_ide_04

这个时候就会有疑问了，怎么会这样，这比例是2:1吧，那么three去哪了？代码里面明明有three的啊，还设置了3，而1和2的比例也不对耶，1:2:3却变成了2:1:0，怎么会这样呢?

答:这里其实没那么简单的，还是需要我们计算的，网上给出的算法有几种，这里就给出觉得比较容易理解的一种：

step 1：个个都是fill_parent,但是屏幕只有一个啦,那么1 - 3 = - 2 fill_parent

step 2：依次比例是1/6,2/6,3/6

step 3：先到先得,先分给one,计算: 1 - 2 * (1/6) = 2/3 fill_parent 接着到two,计算: 1 - 2 * (2/6) = 1/3 fill_parent 最后到three,计算 1 - 2 * (3/6) = 0 fill_parent

step 4：所以最后的结果是:one占了两份,two占了一份,three什么都木有以上就是为什么three没有出现的原因了。

或许大家看完还是有点蒙,没事,我们举多几个例子试试就知道了！

比例为：1：1：1

LinearLayout（线性布局）_xml_05

按照上面的计算方法算一次,结果是:1/3 1/3 1/3,没错

接着我们再试下:2:3:4

LinearLayout（线性布局）_xml_06

计算结果:5/9 3/9 1/9,对比效果图,5:3:1,也没错,所以这个计算方法你可得mark下了!

③Java代码中设置weight属性

setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT,     
        LayoutParams.WRAP_CONTENT, 1));

3.为LinearLayout设置分割线

很多界面开发中都会设置一些下划线,或者分割线,从而使得界面更加整洁美观,比如下面的酷狗音乐的注册页面:

LinearLayout（线性布局）_android_07

对于这种线,我们通常的做法有两种

①直接在布局中添加一个view,这个view的作用仅仅是显示出一条线,代码也很简单:

<View  
    android:layout_width="match_parent"  
    android:layout_height="1px"  
    android:background="#000000" />

这个是水平方向上的黑线,当然你也可以改成其他颜色,或者使用图片

②第二种则是使用LinearLayout的一个divider属性

直接为LinearLayout设置分割线这里就需要你自己准备一张线的图片了1)android:divider设置作为分割线的图片2)android:showDividers设置分割线的位置,none(无),beginning(开始),end(结束),middle(每两个组件间)3)dividerPadding设置分割线的Padding

使用示例：

LinearLayout（线性布局）_ide_08

实现代码：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    xmlns:tools="http://schemas.android.com/tools"  
    android:id="@+id/LinearLayout1"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent"  
    android:divider="@drawable/ktv_line_div"  
    android:orientation="vertical"  
    android:showDividers="middle"  
    android:dividerPadding="10dp"  
    tools:context="com.jay.example.linearlayoutdemo.MainActivity" >  
  
    <Button  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:text="按钮1" />  
  
    <Button  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:text="按钮2" />  
  
    <Button  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:text="按钮3" />  
  
</LinearLayout>

4.LinearLayout的简单例子

LinearLayout（线性布局）_ide_09

实现代码如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    
    xmlns:tools="http://schemas.android.com/tools"    
    android:id="@+id/LinearLayout1"    
    android:layout_width="fill_parent"    
    android:layout_height="fill_parent"    
    android:orientation="vertical"    
    tools:context=".MainActivity" >    
        
    <TextView    
        android:layout_width="wrap_content"    
        android:layout_height="wrap_content"    
        android:text="请输入要保存的电话号码"/>    
    <EditText    
        android:layout_width="fill_parent"    
        android:layout_height="wrap_content"/>    
    <LinearLayout    
        android:layout_width="fill_parent"    
        android:layout_height="wrap_content"    
        android:orientation="horizontal"    
        android:gravity="right">    
        <Button    
            android:layout_width="wrap_content"    
            android:layout_height="wrap_content"    
            android:text="保存"/>    
        <Button    
            android:layout_width="wrap_content"    
            android:layout_height="wrap_content"    
            android:text="清空"/>    
    </LinearLayout>    
</LinearLayout>

5.注意事项:

使用Layout_gravity的一个很重要的问题!!!问题内容:在一个LinearLayout的水平方向中布置两个TextView,想让一个左,一个右,怎么搞?或许你会脱口而出:"gravity设置一个left,一个right就可以啦!"真的这么简单?你试过吗?代码如下：

<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"  
    tools:context="com.jay.example.getscreendemo.MainActivity" >  
  
    <TextView  
        android:layout_width="wrap_content"  
        android:layout_height="200dp"  
        android:layout_gravity="left"  
        android:background="#FF7878"  
        android:gravity="center"  
        android:text="O(∩_∩)O哈哈~" />  
  
    <TextView  
        android:layout_width="wrap_content"  
        android:layout_height="200dp"  
        android:layout_gravity="right"  
        android:background="#FF7428"  
        android:gravity="center"  
        android:text="(*^__^*) 嘻嘻……" />  
  
</LinearLayout>

运行结果图:

LinearLayout（线性布局）_ide_10

看到这里你会说:哎呀,真的不行耶,要不在外层LinearLayout加个gravity=left的属性,然后设置第二个TextView的layout_gravity为right,好我们试一下:

<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"  
    android:gravity="left"  
    tools:context="com.jay.example.getscreendemo.MainActivity" >  
  
    <TextView  
        android:layout_width="wrap_content"  
        android:layout_height="200dp"  
        android:background="#FF7878"  
        android:gravity="center"  
        android:text="O(∩_∩)O哈哈~" />  
  
    <TextView  
        android:layout_width="wrap_content"  
        android:layout_height="200dp"  
        android:layout_gravity="right"  
        android:background="#FF7428"  
        android:gravity="center"  
        android:text="(*^__^*) 嘻嘻……" />  
  
</LinearLayout>

结果还是一样：

LinearLayout（线性布局）_xml_11

当 android:orientatinotallow="vertical" 时， 只有水平方向的设置才起作用，垂直方向的设置不起作用。即：left，right，center_horizontal 是生效的。当 android:orientatinotallow="horizontal" 时， 只有垂直方向的设置才起作用，水平方向的设置不起作用。即：top，bottom，center_vertical 是生效的。

然而，这方法好像并没有什么太大作用。比如：如果只能竖直方向设置左右对齐的话,就会出现下面的效果:

LinearLayout（线性布局）_android_12

这显然不是我们要的结果。综上，要么按照上述给出的规则来布局,不过对于这种情况还是使用相对布局RelativeLayout把！网上没给出具体的原因,都是说这样改有人说这个和orientation的优先级有关,暂且先mark下来吧,后续如果知道原因的话再解释!前面屏幕适配也说过了,布局还是建议使用RelativeLayout!

标签：layout,parent,布局,height,content,width,线性,android,LinearLayout
From： https://blog.51cto.com/u_15641375/6094380

相关文章

  • 线性表的顺序存储C++代码
    ​ 我学习顺序表时找不到相关的代码，以及我不清楚写一个线性表需要的知识，当我写出来可以使用的线性表我就把这些内容贴了出来。前置知识点：结构体，常量指针，new和delete顺......
  • 线性基
    线性基和高斯消元有时会联系在一起。概念线性基，大多数时候的应用是\(O(\logV)\)求异或和最大子集，但是本质上是高维向量空间中的一组基。一般线性基一般的二进制线性......
  • C# Winfrom 快速自适应布局
    实现方式:会将from装进Panel里面对控件进行自动计算。在项目中添加AutoWindowsSize.cs类，内容如下：(优势：不需要在Form1中添加任何布局，直接将类复制到项目中，在form1代码中......
  • vue3+ElementPlus 后台布局搭建
    一、https://element-plus.gitee.io/zh-CN/官网  二、后台布局Layui  代码示例如下<template><divclass="app_container"><divclass="common-layo......
  • python用线性回归预测时间序列股票价格|附代码数据
    原文参考：http://tecdat.cn/?p=4516最近我们被客户要求撰写关于线性回归预测股票价格的研究报告，包括一些图形和统计输出。线性回归在整个财务中广泛应用于众多应用程序中......
  • 线性表
    定义：具有相同特性的数据元素的一个有限序列特点：有穷性，一致性，序列性在非空的线性表中，有且仅有一个开始结点a1,没有直接前趋，仅有一个直接后继a2有且只有一个终端结点an，它......
  • 2.1 线性表的定义和特点
    2.1线性表的定义和特点线性表示具有相同特性的数据元素的一个有限序列线性表(LinearList)​ 由n(n>=0)个数据元素（结点）组成的有限序列其中数据元素的个数n定义......
  • 华为LAB实验室3-机器学习实验：（线性回归）美国King County房价预测训练赛
    各位好，我是乾颐堂大堂子。领取完整实战指南可以私信我，关键词：实战指南1.导入相关python库2.数据处理下载的是两个数据文件，一个是真实数据，一个是测试数据，打开kc_train.csv，能够......
  • 行业报告丨生成式 AI 海内外公司布局梳理（下）——国内篇：AI业务增长新驱动，相关产业技术齐
    原创|文BTF机器人03百度（1）广告收入增长趋缓，AI成业务增长新驱动核心广告业务增长乏力。百度是国内搜索及AI领域头部公司，业务收入主要来自搜索广告带来的在线市场服务，自2......
  • 行业报告丨生成式 AI 海内外公司布局梳理（上）——海外篇：微软弯道超车，谷歌蓄势待发
    原创|文BTF机器人01微软（1）老牌PC软件巨头，近年以云业务为核心，Azure市占率不断提升当前微软的核心业务包括智能云（Azure、WindowsServer、GitHub等）、生产力与企业流程（Off......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99