Android FlexboxLayout的简单了解以及使用

FlexboxLayout

FlexboxLayout是谷歌的一个开源项目,是用来搞定各种复杂布局的一个开源项目,跟LinearLayout类似,但是要比它强大的多。FlexBoxLayout跟LinearLayout和RelativeLayout一样继承ViewGroup,你可以设置布局属性。

FlexBoxLayout开源项目地址

https://github.com/google/flexbox-layout

使用:

1:添加依赖

dependencies {
    compile ‘com.google.android:flexbox:0.2.2‘
}

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>

3:设置布局属性代码

FlexboxLayout flexboxLayout = (FlexboxLayout) findViewById(R.id.flexbox_layout);
flexboxLayout.setFlexDirection(FlexboxLayout.FLEX_DIRECTION_COLUMN);

View view = flexboxLayout.getChildAt(0);
FlexboxLayout.LayoutParams lp = (FlexboxLayout.LayoutParams) view.getLayoutParams();
lp.order = -1;
lp.flexGrow = 2;
view.setLayoutParams(lp);

FlexboxLayout的属性

1:flexDirection

flexDirection 属性决定主轴的方向(即项目的排列方向)。类似 LinearLayout 的 vertical 和 horizontal。

row (default) 默认,水平方向,起点在左边

row_reverse 水平方向,起点在右边

column 垂直方向,起点在上

column_reverse 垂直方向,起点在下

开源项目效果:

2:flexWrap

默认情况FlexboxLayout不换行,flexWrap自带换行属性。

nowrap (default) 默认,不换行

wrap 正常方向换行

wrap_reverse 正常反方向换行

效果:

3:justifyContent

这个属性控制在主轴线的对齐方式

flex_start (default) 默认左对齐

flex_end 右对齐

center 居中对齐

space_between 两端对齐,模块间隔等距

space_around 每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。

效果:

4:alignItems

alignItems属性定义项目在Y轴轴上如何对齐。

stretch (default) 默认,如果项目未设置高度或设为auto,将占满整个容器的高度。

flex_start Y轴顶部对齐

flex_end Y轴底部对齐

center Y轴居中对齐

baseline 项目的第一行文字的底部对齐

效果:

动态效果:

5:alignContent

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

比较难理解,我还没理解。感觉用到这个属性的机会很小,再看看吧。



Attributes for the children of a FlexboxLayout

1:layout_order (integer)

order可以控制子view的排列顺序,负值在前,正直在后,默认为1。

布局

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.flexbox.FlexboxLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/flex"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:flexDirection="row"
    app:flexWrap="wrap"
    tools:context="com.example.com.flexdemo.MainActivity">

    <TextView
        android:id="@+id/tv1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/bg_tv"
        android:padding="5dp"
        app:layout_order="0"
        android:layout_margin="4dp"
        android:text="0"/>
    <TextView
        android:id="@+id/tv2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/bg_tv"
        android:padding="5dp"
        app:layout_order="2"
        android:layout_margin="4dp"
        android:text="2"/>
    <TextView
        android:id="@+id/tv3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/bg_tv"
        android:padding="5dp"
        android:layout_margin="4dp"
        app:layout_order="-1"
        android:text="-1"/>
</com.google.android.flexbox.FlexboxLayout>

效果:

2:layout_flexGrow (float)

类似LinearLayout的weight属性,默认为0,即有剩余空间也不缩小,也不放大。如果子view全是1,则等分。

布局:

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.flexbox.FlexboxLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/flex"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:flexDirection="row"
    app:flexWrap="wrap"
    tools:context="com.example.com.flexdemo.MainActivity">

    <TextView
        android:id="@+id/tv1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/bg_tv"
        android:padding="5dp"
        app:layout_flexGrow="1"
        android:layout_margin="4dp"
        android:text="1"/>
    <TextView
        android:id="@+id/tv2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/bg_tv"
        android:padding="5dp"
        app:layout_flexGrow="2"
        android:layout_margin="4dp"
        android:text="2"/>
    <TextView
        android:id="@+id/tv3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/bg_tv"
        android:padding="5dp"
        app:layout_flexGrow="1"
        android:layout_margin="4dp"
        android:text="1"/>
</com.google.android.flexbox.FlexboxLayout>

效果:

3:layout_flexShrink (float)

layout_flexShrink 属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。

如果所有项目的 layout_flexShrink 属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。

负值对该属性无效。

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.flexbox.FlexboxLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/flex"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:flexDirection="row"
    tools:context="com.example.com.flexdemo.MainActivity">

    <TextView
        android:id="@+id/tv1"
        android:layout_width="50dp"
        android:layout_height="wrap_content"
        android:background="@drawable/bg_tv"
        android:padding="5dp"
        app:layout_flexShrink="0"
        android:layout_margin="4dp"
        android:text="1"/>
    <TextView
        android:id="@+id/tv2"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:background="@drawable/bg_tv"
        android:padding="5dp"
        app:layout_flexShrink="1"
        android:layout_margin="4dp"
        android:text="2"/>
    <TextView
        android:id="@+id/tv3"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:background="@drawable/bg_tv"
        android:padding="5dp"
        app:layout_flexShrink="1"
        android:layout_margin="4dp"
        android:text="1"/>
</com.google.android.flexbox.FlexboxLayout>

效果:

4:layout_alignSelf

layout_alignSelf 属性允许单个子元素有与其他子元素不一样的对齐方式,可覆盖 alignItems 属性。默认值为auto,表示继承父元素的 alignItems 属性,如果没有父元素,则等同于stretch。

覆盖在y轴的对齐方式。

auto (default)
flex_start
flex_end
center
baseline
stretch

效果:

布局:

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.flexbox.FlexboxLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/flex"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:alignItems="flex_start"
    tools:context="com.example.com.flexdemo.MainActivity">

    <TextView
        android:id="@+id/tv1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@drawable/bg_tv"
        android:padding="5dp"
        android:gravity="center"
        app:layout_alignSelf="center"
        android:layout_margin="4dp"
        android:text="1"/>
    <TextView
        android:id="@+id/tv2"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@drawable/bg_tv"
        android:padding="5dp"
        android:gravity="center"
        android:layout_margin="4dp"
        android:text="2"/>
    <TextView
        android:id="@+id/tv3"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@drawable/bg_tv"
        android:padding="5dp"
        android:gravity="center"
        android:layout_margin="4dp"
        android:text="1"/>
</com.google.android.flexbox.FlexboxLayout>

效果:

5:layout_flexBasisPercent

layout_flexBasisPercent 属性定义了在分配多余空间之前,子元素占据的main size主轴空间,浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即子元素的本来大小。

FlexboxLyaout简单实现便签自动换行效果

时间: 2024-10-10 03:39:12

Android FlexboxLayout的简单了解以及使用的相关文章

Android ExpandableListView的简单应用

Expandablelistview1Activity.java package com.wangzhu.demoexpandablelistview; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; import android.app.Activity; import android.os.Bundle; import android.widg

【原创】android——SQLite实现简单的注册登陆(已经美化)

1,Main_activity的xmL配置 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 2 xmlns:tools="http://schemas.android.com/tools" 3 android:layout_width="match_parent" 4 android:layout_height="match_pa

Android HttpGet() 请求简单入门实例

HttpClient httpclient = new DefaultHttpClient(); String url = "http://example.com"; List<NameValuePair> params = new ArrayList<NameValuePair>(); params.add( new BasicNameValuePair( "param", "value" ) ); URI uri =

【android】Socket简单用法

原文地址:http://www.cnblogs.com/harrisonpc/archive/2011/03/31/2001565.html Socket通常也称做”套接字“,用于描述IP地址和端口,废话不多说,它就是网络通信过程中端点的抽象表示.值得一提的是,Java在包java.net中提供了两个类Socket和ServerSocket,分别用来表示双向连接的客户端和服务端.这是两个封装得非常好的类,使用起来很方便! 下面将首先创建一个SocketServer的类作为服务端如下,该服务端实现

Android Bundle传递简单数据、对象数据

Android开发过程中进程遇到组件之间.进程之间等数据的传递,数据传递有很多种,其中使用Bundle传递非常方便. Bundle可以传递多种数据,是一种类似map的key-value数据结构 简单的调用如下所示 Bundle bundle=new Bundle(); bundle.put***(key,value) 但是有时候需要我们传递一个对象,做法就是先把该对象使用serializable序列化 public class Book implements Serializable{ } 然后

Android SQLite最简单demo实现(增删查改)

本来不太想写这篇博客的,但是看到网上的关于android数据库操作的博文都讲得很详细,对于像我这样的新手入门了解SQLite的基本操作有一定难度,所以我参考了网上的一些博客文章,并自己亲自摸索了一遍,希望写出这么一篇博文来记录SQLite的最基本操作,同时也希望能够对android的新手们有些帮助. 参考博客:http://www.20864.com/201247/274.html 这里只是一个示范性的demo,并没实现什么具体功能,只实现了对数据库的增删查改操作. 以下是实现demo的步骤:

Android.mk文件简单分析

Android.mk文件简单分析 一个Android.mk文件用来向编译系统描述需要编译的源代码.具体来说:该文件是GNUMakefile的一小部分,会被编译系统解析一次或多次.可以在每一个Android.mk中定义一个或多个模块,也可以在几个模块中使用同一个源代码文件. 每个模块属下列类型之一: 1)APK程序,一般的Android程序,编译打包生成apk文件 2)JAVA库,java类库,编译打包生成jar文件 3)  C\C++应用程序,可执行的C\C++应用程序 4)C\C++静态库,编

IDA 调试 Android 方法及简单的脱壳实现

IDA 调试 Android 方法及简单的脱壳实现 标签: android原创逆向调试dalvik 2016-05-24 14:24 9286人阅读 评论(3) 收藏 举报 分类: 原创(25) Android(5) 学习(9) 逆向(4) 版权声明:本文为博主原创文章,未经博主允许不得转载. 目录(?)[+] 本文参考了一些网络文章,对大大们的技术分享表示感谢.小弟刚刚开始深入去搞Android的逆向不久,写一下学习笔记,希望能抛砖引玉,给新手同学们带来方便.文笔比较烂,这不重要,重要的是按自

Android:PopupWindow简单弹窗改进版

Android:PopupWindow简单弹窗 继续上一节的内容,改进一下,目标是点击菜单后把菜单收缩回去并且切换内容,我使用的是PopupWindow+RadioGroup public class MainActivity extends TabActivity { private PopupWindow pop; private TabHost tabhost; private RadioGroup radiogroup; private RadioButton tab1,tab2; @O