Android基础学习常用UI布局

前行者行途中

已于 2022-10-27 14:28:46 修改

阅读量1.3k

点赞数 1

分类专栏： Android 文章标签： android ui 学习

于 2022-10-22 20:18:43 首次发布

本文链接：https://blog.csdn.net/oschina_41673164/article/details/127465861

版权

Android 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

1.LinearLayout(线性布局)

XML

<LinearLayout 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:id="@+id/mylayout" //组件名称
    android:orientation="horizontal"   //布局方式(horizontal：水平布局 vertical：垂直布局)
    android:layout_width="match_parent" //组件宽度
    android:layout_height="match_parent"  //组件高度
    android:gravity="center" //该组件在父容器中的对齐方式 android:gravity="right|bottom"
    android:ignoreGravity="@id/ignore"  //id为ignore的控件不受父视图影响
    android:padding="16dp"  //该组件在父容器中的边距
    android:background="@mipmap/background"  //设置背景图片或填充颜色
    tools:context=".MainActivity">

</LinearLayout>

常用属性

android:id 
  @+id/标识名  借助Activity或View实例的findViewById方法通过id标识名获取对应的实例对象
android:orientation
	布局方式(horizontal：水平布局 vertical：垂直布局)
android:layout_width; android:layout_heigh；
	指定子组件的宽高 属性值：match_parent 指定子组件的高度、宽度与父容器组件的高度、宽度相同； fill_parent 作用与match_parent相同，已被match_parent取代；wrap_content指定子组件的大小刚好能包裹它的内容
 android:gravity：
 	对象在容器中的位置:top 顶部; bottom 底部; left 左侧; right 右侧; center_vertical 所有子控件相对父容器纵向居中，垂直方向居中对齐; fill_vertical 必要的时候增加对象纵向的大小，以完全填充满容器 垂直方向填充; center_horizontal 所有子控件相对父容器横向居中，水平方向居中对齐; fill_horizontal 必要的时候增加对象横向的大小，以完全填充满容器；水平方向填充; center 所有子控件相对父容器居中对齐; fill 必要的时候增加对象横纵的大小，以完全填充满容器; clip_vertical ⽤于按照容器的边来剪切对象的顶部和/或底部的内容. 剪切基于其纵向对齐设置：顶部对齐时，剪切底部；底部对齐时剪切顶部；除此之外剪切顶部和底部。垂直⽅向裁剪; clip_horizontal ⽤于按照容器的边来剪切对象的左侧和/或右侧的内容. 剪切基于其横向对齐设置：左侧对齐时，剪切右侧；右侧对齐时剪切左侧；除此之外剪切左侧和右侧。⽔平⽅向裁剪
 	当 android:orientation="vertical" 时， 只有水平方向的设置才起作用，垂直方向的设置不起作用。 即：left，right，center_horizontal 是生效的。 当 android:orientation="horizontal" 时， 只有垂直方向的设置才起作用，水平方向的设置不起作用。 即：top，bottom，center_vertical 是生效的。
android:ignoreGravity:
    属性值 @+id/+给定ID;id为给定ID的控件不受父视图影响
android:ellipsize:
   设定文本内容超出控件宽度时文本的缩略方式，（end表示在尾部进行缩略）android:Layout_weight: 权重大小 所有weight值比例为LinearLayout的总和

在这里插入图片描述

布局特点：放主要提供控件水平或者垂直排列的模型，每个子组件都是以垂直或水平的方式来线性排布.(默认是垂直)

2.RelativeLayout(相对布局)

基本属性

gravity： 设置容器内组件的对齐方式
ignoreGravity： 设置了该属性为true的属性的组件，将不受gravity属性的影响 

相对于给定ID控件：
android:layout_above="@+id/mylayout" 将该控件的底部置于给定ID的控件之上
android:layout_below="@+id/mylayout"  将该控件的底部置于给定ID的控件之下
android:layout_toLeftOf="@+id/mylayout" 将该控件的右边缘与给定ID的左边缘对齐
android:layout_toRightOf="@+id/mylayout" 将该控件的左边缘与给定ID的右边缘对齐
android:layout_alignBaseline="@+id/mylayout" 将该控件的baseline与给定ID的baseline对齐
android:layout_alignTop="@+id/mylayout"  将该控件的顶部边缘与给定ID的顶部边缘对齐
android:layout_alignBottom="@+id/mylayout" 将该控件的底部边缘与给定ID的底部边缘对齐
android:layout_alignLeft="@+id/mylayout" 将该控件的左边缘与给定ID的左边缘对齐
android:layout_alignRight="@+id/mylayout" 将该控件的右边缘与给定ID的右边缘对齐

相对于父组件：
android:layout_alignParentTop="true" 如果为true，将该控件的顶部与其父控件的顶部对齐
android:layout_alignParentBottom="true" 如果为true，将该控件的底部与其父控件的底部对齐
android:layout_alignParentLeft="true"  如果为true，将该控件的左部与其父控件的左部对齐
android:layout_alignParentRight="true"  如果为true，将该控件的右部与其父控件的右部对齐
android:layout_centerHorizontal="true"   如果为true，该控件与其父控件水平居中
android:layout_centerVertical="true"   如果为true，该控件与其父控件垂直居中

居中：
android:layout_centerHorizontal="true" 如果为true将该控件置于水平居中
android:layout_centerVertical="true" 如果为true将该控件置于垂直居中
android:layout_centerInParent="true" 如果为true将该控件置于父控件的中央

指定移动像素：
android:layout_margin="16dp" 四个边偏移的值
android:layout_marginTop="16dp" 上偏移的值
android:layout_marginBottom="16dp" 下偏移的值
android:layout_marginLeft="16dp" 左偏移的值
android:layout_marginRight="16dp" 右偏移的值

填充：
android:layout_padding="16dp" 四个边往内部元素上下左右填充一定边距
android:layout_paddingTop="16dp" 往内部元素的顶部填充一定边距
android:layout_paddingBottom="16dp" 往内部元素的底部填充一定边距
android:layout_paddingLeft="16dp" 往内部元素的左边填充一定边距
android:layout_paddingRight="16dp" 往内部元素的右边填充一定边距

在这里插入图片描述

布局特点：为某一个组件为参照物，来定位下一个组件的位置的布局方式。

3.TableLayout(表格布局)

常用属性：

android:collapseColumns="1" 设置需要被隐藏的列的序号
android:shrinkColumns="1" 设置允许被收缩的列的序号
android:stretchColumns="2" 设置运行被拉伸的列的序号
以上这三个属性的列号都是从0开始算的,比如shrinkColunmns = "2",对应的是第三列！ 可以设置多个,用逗号隔开比如"0,2",如果是所有列都生效,则用"*"号即可

android:layout_column="2"  表示的就是跳过第二个直接显示到第三个格子处,从1开始算的
android:layout_span="4"   表示合并4个单元格,也就说这个组件占4个单元格

如何确定列数与行数

直接往TableLayout中添加组件的话,那么这个组件将占满一行
如果我们想一行上有多个组件的话,就要添加一个TableRow的容器,把组件都丢到里面
tablerow中的组件个数就决定了该行有多少列,而列的宽度由该列中最宽的单元格决定
tablerow的layout_width属性,默认是fill_parent的,我们自己设置成其他的值也不会生效，但是layout_height默认是wrap_content的,我们却可以自己设置大小
整个表格布局的宽度取决于父容器的宽度(占满父容器本身)
有多少行就要自己数啦,一个tablerow一行,一个单独的组件也一行！多少列则是看tableRow中的组件个数,组件最多的就是TableLayout的列数

布局特点：类似Html里的Table.使用TableRow来布局，其中TableRow代表一行，TableRow的每一个视图组件代表一个单元格。

水平布局与Viewpager联动

属性详解style：

<declare-styleable name="TabLayout">
    <!--指示器颜色-->
    <attr name="tabIndicatorColor" format="color"/>
    <!--指示器高度-->
    <attr name="tabIndicatorHeight" format="dimension"/>
    <!--指示器宽度 true:和tab同宽  false：和tab中的字同宽 -->
    <attr name="tabIndicatorFullWidth" format="boolean"/>
    <!--tabs距TabLayout开始位置的偏移量，但app:tabMode="scrollable"才生效-->
    <attr name="tabContentStart" format="dimension"/>
    <!--仅是Tab背景，设置TabLayout背景用android:background-->
    <attr name="tabBackground" format="reference"/>
    <!--默认fixed，所有Tab只能在屏幕内显示，超出会被挤压；scrollable,tab数量多会超出屏幕，可滑动-->
    <attr name="tabMode">
        <enum name="scrollable" value="0"/>
        <enum name="fixed" value="1"/>
    </attr>
    <!--默认fill，tab填满TabLayout,但tabMode=“fixed”才生效；center，tabs位于TabLayout的中间-->
    <attr name="tabGravity">
        <enum name="fill" value="0"/>
        <enum name="center" value="1"/>
    </attr>
    <!--Tab的最小宽度-->
    <attr name="tabMinWidth" format="dimension"/>
    <!--Tab的最大宽度-->
    <attr name="tabMaxWidth" format="dimension"/>
    <!--Tab文本设置样式-->
    <attr name="tabTextAppearance" format="reference"/>
    <!--Tab未选中字体颜色-->
    <attr name="tabTextColor" format="color"/>
    <!--Tab选中字体颜色-->
    <attr name="tabSelectedTextColor" format="color"/>
    <!--Tab内填充相关-->
    <attr name="tabPaddingStart" format="dimension"/>
    <attr name="tabPaddingTop" format="dimension"/>
    <attr name="tabPaddingEnd" format="dimension"/>
    <attr name="tabPaddingBottom" format="dimension"/>
    <attr name="tabPadding" format="dimension"/>
</declare-styleable>

图文混排

1. 通过SpannableString设置图片
@NonNull
private SpannableString setImageSpan(String string,int drawableId) {
    SpannableString ss = new SpannableString("  "+string);
    Drawable drawable = ContextCompat.getDrawable(this, drawableId);
    drawable.setBounds(0,0,drawable.getIntrinsicWidth(),drawable.getIntrinsicHeight());
    ImageSpan imageSpan = new ImageSpan(drawable);
    ss.setSpan(imageSpan,0,1, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
    return ss;
}

2.代码设置
 TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
tabLayout.addTab(tabLayout.newTab().setCustomView(setCustomView(R.drawable.ic_home,"首页")));
tabLayout.addTab(tabLayout.newTab().setCustomView(setCustomView(R.drawable.ic_info,"资讯")));
tabLayout.addTab(tabLayout.newTab().setCustomView(setCustomView(R.drawable.ic_live,"直播")));
tabLayout.addTab(tabLayout.newTab().setCustomView(setCustomView(R.drawable.ic_me,"我")));

在这里插入图片描述

4.FrameLayout(帧布局)

android:foreground="@mimap/img02"   前景图像: 始终位于最上层的图像
android:foregroundGravity="left|top"     设置前景图像的位置

布局特点：放入其中的所有元素都被放置在最左上的区域，而且无法为这些元素指定一个确切的位置,下一个子元素会重叠覆盖上一个子元素

5.GridLayout(网格布局)

可以自己设置布局中组件的排列方式
android:orientation="horizontal"  指定排列方式horizontal默认水平 vertical垂直
android:layout_gravity="center" 对齐方式center left right bottom 同时用两个eg: right|bottom

可以自定义网格布局有多少行，多少列
android:rowCount="4" 指定最大行数
android:columnCount="3" 指定最大列数

可以直接设置组件位于某行某列
android:layout_row="2" 子组件位于网格的第几行
android:layout_column="2" 子组件位于网格的第几列

可以设置组件横跨几行或者几列
android:layout_columnSpan="2" 子组件横向跨几列
android:layout_rowSpan="3" 子组件纵向跨几行

内部类GridLayout.LayoutParams
android:layout_column="2" 子组件的第几列
android:layout_columnSpan="2" 子组件横向跨几列
android:layout_columnWeight="2" 子组件在水平方向的权重 分配的比例
android:gravity="right" 子组件在水平方向的占据位置
android:layout_row="2" 子组件位于网格的第几行
android:layout_rowSpan="3" 子组件纵向跨几行
android:layout_rowWeight="" 子组件在垂直方向的权重 分配的比例

在这里插入图片描述

用法归纳:

1: 先定义组件的对其方式 android:orientation 水平或者竖直,设置多少行与多少列
2: 设置组件所在的行或者列,记得是从0开始算的,不设置默认每个组件占一行一列
3: 设置组件横跨几行或者几列;设置完毕后,需要在设置一个填充:android:layout_gravity = “”

6.AbsoluteLayout(绝对布局)

绝对布局又可以叫做坐标布局，可以直接指定子元素的绝对位置(xy)
由于手机屏幕尺寸差别比较大使用绝对定位的适应性比较差，在屏幕的适配上有缺陷
布局特点：采用坐标轴的方式定位组件，左上角是(0，0)点，往右x轴递增，往下Y轴递增,组件定位属性为android:layout_x和android:layout_y来确定坐标。
Android2.2后废弃

android:layout_x 当前组件X坐标的位置(从左到右方向)
android:layout_y 当前组件y坐标的位置(从上到下方向)

7.ConstraintLayout(约束布局)

Google于2016年引入布局，不在Android基础api里需要额外引入
布局简单的时候ConstraintLayout消耗的性能比RelativeLayout或LinearLayout等耗时要高，但在复杂多层级嵌套的时候具有明显的优势

属性

app:layout_constraintRight_toRightOf
app:layout_constraintEnd_toEndOf
constraintRight或constraintEnd表示的是本控件的右边，而toRightOf或toEndOf表示目标控件的左边，这句话的意思就是本控件的右边位于目标控件的右边。要注意如果使用了Right，想要左边就得有Left，如果使用了Start，想要右边就得有End，Right和Start不能混用，Left和End不能混用。推荐使用Start和End。

app:layout_constraintLeft_toLeftOf
app:layout_constraintStart_toStartOf
constraintLeft或constraintStart表示是本控件的左边，而toLeftOf或toStartOf表示目标控件的左边，这句话的意思就是本控件的左边位于目标控件的左边。混用规则同上最后一句。推荐使用Start和End。

app:layout_constraintTop_toTopOf 
	表示本控件的顶部位于目标控件的顶部
app:layout_constraintBottom_toBottomOf
	表示本控件的底部位于目标控件的底部
app:layout_constraintStart_toEndOf
   表示该控件左侧位于目标控件的右侧
app:layout_constraintEnd_toStartOf 
   表示该控件的右侧位于目标控件的左侧
app:layout_constraintBottom_toTopOf
	表示该控件的底部位于目标控件的顶部
app:layout_constraintTop_toBottomOf
	表示该控件的顶部位于目标控件的底部

app:layout_constraintCircle
app:layout_constraintCircleAngle
app:layout_constraintCircleRadius
该控件相对目标控件实现角度定位，layout_constraintCircle和layout_constraintCircleAngle和layout_constraintCircleRadius同时使用。

padding
margin

app:layout_goneMarginStart
app:layout_goneMarginTop
app:layout_goneMarginEnd
app:layout_goneMarginBottom
表示的是当目标约束控件Gone隐藏的时候外边距，goneMargin使用条件个margin一致。比如左上角有个A，B在A的下方且间隔20dp，使用RelativeLayout的话，我们通常是A加上marginBottom20dp，当A进行GONE隐藏的时候B自然就上移顶部了，而ConstraintLayout中不会，因为约束条件的存在，B有layout_constraintTop_toBottomOf属性且有marginTop的20dp，当A进行Gone的时候，B还是有top的20dp外边距，这时候就需要用到该属性layout_goneMarginTop,我们设置为0，表示目标约束对象隐藏了该控件外部顶边距为0dp。

app:layout_constraintWidth_max
app:layout_constraintHeight_max
表示的是最大宽度或最大高度，如果使用固定值则对应的layout_width或layout_height使用wrap_content，和android:maxWidth属性类似。可如果和app:layout_constraintWidth_percent或app:layout_constraintHeight_percent结合使用就需要注意了

app:layout_constraintWidth_percent
app:layout_constraintHeight_percent
表示占用父View的宽度或高度的百分比，0-1取值，1代表铺满。可单独使用也可和app:layout_constraintWidth_max或app:layout_constraintHeight_max结合使用，则需要max里面值为wrap，对应的layout_width或layout_height使用0dp，表示最大宽度或高度占用多少父View的多少，宽度或高度变化增加到最大宽度后不再增加

app:layout_constrainedWidth
表示当前宽度受目标约束控件的宽影响，比如A宽度是100dp，B使用layout_constraintStart_toStartOf和layout_constraintEnd_toEndOf和A对齐，如果B的宽度是wrap_content，则B的宽度随内容变化，但是不会超过A的100dp宽度，也就是从另一个层次限制了最大宽度，如果B是0dp，则直接是一直保持和A的同等宽度

app:layout_constrainedHeight
表示当前控件高度受目标约束控件的高影响，比如A高度是100dp，B使用layout_constraintTop_toTopOf和layout_constraintBottom_toBottomOf和A对齐，如果B的高度是wrap_content，则B的高度随内容变化，但是不会超过A的100dp高度，也就是从另一个层次限制了最大高度，如果B是0dp，则直接是一直保持和A的同等高度

app:layout_constraintDimensionRatio
表示宽高比，比如layout_width是0dp，layout_height是100dp，如果该属性是1:1,则layout_width实际值为100dp；如果layout_height是100dp，该属性是3:2，则layout_width是150dp。使用该属性不建议宽高为wrap_content，效果不对劲。

app:layout_constraintHorizontal_chainStyle
如果多个控件是横向约束，比如C在B的左边，B在A的左边，可以使用该属性且只能用在链头上，也就是A，有三个值，spread为默认，spread_inside为摊开，packed为拥挤紧挨

app:layout_constraintVertical_weight
表示垂直比重，和LinearLayout一样，但是前提是这几个控件相互约束，比如需要有一下约束：A和父顶部，A底部和B顶部，B顶部和A底部，B底部和C顶部，C顶部和B底部，C底部和父底部，才会有效果

app:layout_constraintHorizontal_weight
表示水平比重，和LinearLayout一样，但是前提是这几个控件相互约束，比如需要有一下约束：A和父左部，A右部和B左部，B左部和A右部，B右部和C左部，C左部和B右部，C右部和父右部，才会有效果

app:layout_constraintHorizontal_bias
表示水平方向便宜，如需使用该属性需同时指定对应轴向的两条边才会生效，例如使用app:layout_constraintHorizontal_bias="0.5"属性时需要同时指定当前控件的start边和end约束才能生效。该值默认为0.5居中位置，取值范围在0~1之间

app:layout_constraintVertical_bias
表示垂直方向偏移，如需使用该属性需同时指定对应轴向的两条边才会生效，例如使用app:layout_constraintVertical_bias="0.5"属性时需要同时指定当前控件的top边和bottom约束才能生效。该值默认为0.5居中位置，取值范围在0~1之间。 注意属性中Left和Right的有可能失效，虽然可以用代码重新建立约束规则，但没必要，推荐使用Start和End，官方也推荐使用

在这里插入图片描述

全部居中设置

app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"

顶部居中

app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"

底部居中

app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"

容易混淆的通用属性

1、layout_gravity和gravity的区别 : layout_gravity指的是当前视图位于上级视图的哪个位置，而gravity指的是下级视图位于当前视图的哪个位置。
2、layout_margin和padding的区别 : layout_margin指的是当前视图与外部视图的距离，这个margin部分不属于当前视图；padding指的是当前视图与其内部视图的距离，这个padding部分属于当前视图。
3、visibility各取值的区别 : 该属性有三个取值，分别是：visible表示可见，invisible表示不可见，gone表示消失。区别：invisible虽然看不到但还占着位置，看起来那里就是有块空白；gone不但看不到而且也不占位置了，看上去是不留痕迹的消失掉了。
4、layout_weight : 该属性表示当前视图宽或高的权重，但这个权重不是把上级视图的所有空间拿来分配，只是把上级视图的剩余空间拿来分配。所以如果layout_width或者layout_height设置为wrap_content，此时再设置layout_weight，往往发现每个视图的空间并非希望得到的，因为上级视图先扣掉子视图wrap_content后的长度，最后的剩余长度才拿来按照权重分配，所以当然不是我们想要的结果。正确的做法是，把layout_width或者layout_height设置为0dp，同时再指定各下级视图的layout_weight，这表示所有的下级视图都不占空间，那么上级视图的所有空间都剩下来了，此后把所有空间按照权重分配给每个下级视图，才能得到我们的期望结果。

每种布局视图各自要另外指定的属性

LinearLayout需要指定的是orientation，具体取值大家都很熟悉了：vertical表示垂直布局；horizontal表示水平布局。不过该属性值默认是horizontal，可能出乎多数人的意料，因为大家感觉手机APP理应是从上往下垂直布局，所以这里要特别注意垂直布局一定要设置orientation，不然默认水平布局不符合多数业务场景。
ScrollView因为是纵向滚动，所以android:layout_width只能是match_parent或具体数值，不能是wrap_content；android:layout_height则必须是wrap_content。相应的，HorizontalScrollView因为是横向滚动，所以android:layout_height只能是match_parent或具体数值，不能是wrap_content；android:layout_width则必须是wrap_content。