关闭

android flexboxlayout简单使用

标签: androidcssflexw3cweb前端
556人阅读 评论(0) 收藏 举报
分类:

android flexboxlayout简单使用

什么是flexbox

简单来说 Flexbox 是属于web前端领域CSS的一种布局方案,是2009年W3C提出了一种新的布局方案,可以简便、完整、响应式地实现各种页面布局,并且 React Native 也是使用的 Flex 布局。

你可以简单的理解为 Flexbox 是CSS领域类似 Linearlayout 的一种布局,但是要比 Linearlayout 要强大的多

flexboxlayout就是谷歌发布的类似flex的应用于android的方案

使用

compile 'com.google.android:flexbox:0.1.2'

<com.google.android.flexbox.FlexboxLayout
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"
app:flexWrap="wrap"
app:alignItems="stretch"
app:alignContent="stretch" >

<TextView
    android:id="@+id/textview1"
    android:layout_width="120dp"
    android:layout_height="80dp"
    app:layout_flexBasisPercent="50%"
    />

<TextView
    android:id="@+id/textview2"
    android:layout_width="80dp"
    android:layout_height="80dp"
    app:layout_alignSelf="center"
    />

<TextView
    android:id="@+id/textview3"
    android:layout_width="160dp"
    android:layout_height="80dp"
    app:layout_alignSelf="flex_end"
    />
</com.google.android.flexbox.FlexboxLayout>

支持的属性

  • flexDirection

    决定主轴的水平方向


    • row (默认值):主轴为水平方向,起点在左端
    • row-reverse 主轴为水平方向,起点在右端
    • column 主轴为垂直方向,起点在上沿
    • column-reverse 主轴为垂直方向,起点在下沿
  • flexWrap Flex 跟 LinearLayout 一样,都是不带换行排列的,但是flexWrap属性可以支持换行排列
    • nowrap 不换行
    • wrap 按正常方向换行
    • wrap-reverse 按反方向换行
  • justifyContent

    属性定义了项目在主轴上的对齐方式


    • flex-start 左对齐 默认值
    • flex-end 右对齐
    • center 居中
    • space-between 两端对其,项目之间的间隔都相等
    • space-around 每个项目两侧的间隔相等。
  • alignItems

    定义项目在副轴轴上如何对齐


    • flex-start 交叉轴的起点对齐
    • flex-end 交叉轴的终点对其
    • center 交叉轴的中点对其
    • baseline 项目的第一行文字的基线对齐
    • stretch 默认值如果项目未设置高度或设为auto,将占满整个容器的高度
  • alignContent

    属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用


    • flex-start 与交叉轴的起点对齐
    • flex-end 与交叉轴的终点对齐
    • center 与交叉轴的中点对齐
    • space-between 与交叉轴两端对齐,轴线之间的间隔平均分布
    • space-around 每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍
    • stretch 默认值):轴线占满整个交叉轴

跟CSS不同之处

  • 没有flex-flow属性
  • 没有flex属性
  • layout_flexBasisPercent 属性即为CSS中 flexbox 中的 flexBasis 属性
  • 不支持min-width 和 min-height
0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

谷歌推出Android 响应式布局控件 FlexboxLayout -弹性盒子模型

今天github 排行榜上突然出现了 谷歌最新推出的Android 最新控件FlexboxLayout 。 FlexboxLayout 究竟是什么东西呢?      fexbox 也称为盒子模型...
  • github_14899071
  • github_14899071
  • 2016-05-08 00:30
  • 3994

android流式布局:FlexboxLayout用法探析(一)

FlexboxLayout是google官方开源的一个可以简单快速创建具有弹性功能的流式布局,它的目的是使用我们常见的布局模式,帮我们很好的实现UI区域的比例划分,比如三列布局,可以非常简单的实现。它...
  • tabolt
  • tabolt
  • 2016-07-01 13:56
  • 4615

用FlexboxLayout构建灵活的布局

在去年的Google I/O大会上,Google发布了 ConstraintLayout他使我们能够使用一个平面的视图层次来构建复杂的界面布局。android studio的视图编辑器也对其实现了完整...
  • dkdjfkdjfk
  • dkdjfkdjfk
  • 2017-02-28 17:06
  • 2038

Android FlexboxLayout 简单介绍

FlexboxLayout简介FlexboxLayout是Google出的一个类似CSS Flexible Box Layout的控件,GitHub地址为:GitHub地址它是一个ViewGroup,...
  • u011140466
  • u011140466
  • 2016-05-19 15:05
  • 1440

android中使用flexboxlayout

FlexboxLayout在Android中的使用 很高兴和大家再次见面,我是lady_zhou,这是我的Blog,欢迎大家一起来学习FlexboxLayout Google最近开源了一个关于布局的项...
  • lady_zhou
  • lady_zhou
  • 2016-05-23 21:00
  • 938

Android FlexboxLayout使用体验

概述FlexboxLayout是Google新推出的针对流式布局的控件, 记得之前有流式布局的需求时,都是使用的blazsolar/FlowLayout,或者hongyangAndroid/Flow...
  • wbwjx
  • wbwjx
  • 2016-08-07 18:06
  • 647

Android Flexboxlayout使用详解

对于学习React Native或者前端的同学肯定对Flexbox 的有所了解,因为这是前端领域CSS的一种布局方案,现在google也开源了类似前端Flexbox的项目叫Flexboxlayout,...
  • u011992900
  • u011992900
  • 2017-07-27 00:35
  • 215

FlexboxLayout-----Android弹性布局

  • 2017-08-14 10:20
  • 26.01MB
  • 下载

android适配手机升级:最新布局FlexboxLayout替代LinearLayout(支持RecycleView)

FlexboxLayout是google前一段时间推出的新控件,目前github已经有了10K颗星星了,FlexboxLayout的功能十分强大,使用FlexboxLayout代替LinearLayo...
  • huangxiaoguo1
  • huangxiaoguo1
  • 2018-01-10 17:33
  • 878

Android中的FlexboxLayout

谢谢原著,最近在看react-native里面的布局就是FlaxBox,刚开始接触,有点迷糊,不过和google最近开源的布局框架结合起来理解应该会一举两得 我看的文章链接:http://www.o...
  • u014134488
  • u014134488
  • 2016-05-16 17:13
  • 2261
    个人资料
    • 访问:59706次
    • 积分:2035
    • 等级:
    • 排名:千里之外
    • 原创:140篇
    • 转载:2篇
    • 译文:0篇
    • 评论:6条
    文章分类
    最新评论