中国领先的IT技术网站
|
|
创建专栏

Android轻松搞定流动布局

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

作者:洪生鹏|2017-05-11 15:01

Tech Neo技术沙龙 | 11月25号,九州云/ZStack与您一起探讨云时代网络边界管理实践


以前我们要实现流动性布局,比较繁琐,Google开源了一个项目叫FlexboxLayout,相信大家都不陌生。下面我们来学习一下FlexboxLayout基础知识,并通过一个案例来加深理解。如果你对FlexboxLayout很熟悉,请忽略本文。

1. 什么是 Flexbox

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

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

2. 什么是 FlexboxLayout?

我们在 Android 开发中使用 Linearlayout + RelativeLayout 基本可以实现大部分复杂的布局,但是Google就想了,有没有类似 Flexbox 的一个布局呢?这使用起来一个布局就可以搞定各种复杂的情况了,于是 FlexboxLayout 就应运而生了。

所以 FlexboxLayout 是针对 Android 平台的,实现类似 Flexbox 布局方案的一个开源项目,开源地址:https://github.com/google/flexbox-layout

3. 使用方式

使用方式很简单,只需要添加以下依赖:

  1. compile 'com.google.android:flexbox:0.2.2' 

在xml布局中我们可以这样使用

  1. <com.google.android.flexbox.FlexboxLayout 
  2.        android:id="@+id/flexbox_layout" 
  3.        android:layout_width="match_parent" 
  4.        android:layout_height="wrap_content" 
  5.        app:flexWrap="wrap"
  6.      <TextView 
  7.        android:id="@+id/tv1" 
  8.        android:layout_width="120dp" 
  9.        android:layout_height="80dp" 
  10.        app:layout_flexBasisPercent="50%" /> 
  11.       <TextView 
  12.        android:id="@+id/tv2" 
  13.        android:layout_width="80dp" 
  14.        android:layout_height="80dp" 
  15.        app:layout_alignSelf="center"/> 
  16.       <TextView 
  17.        android:id="@+id/tv3" 
  18.        android:layout_width="160dp" 
  19.        android:layout_height="80dp" 
  20.        app:layout_alignSelf="flex_end"/> 
  21.    </com.google.android.flexbox.FlexboxLayout> 

代码中可以这样使用

  1. FlexboxLayout flexboxLayout = (FlexboxLayout) findViewById(R.id.flexbox_layout); 
  2. flexboxLayout.setFlexDirection(FlexboxLayout.FLEX_DIRECTION_COLUMN); 
  3. View view = flexboxLayout.getChildAt(0); 
  4. FlexboxLayout.LayoutParams lp = (FlexboxLayout.LayoutParams) view.getLayoutParams(); 
  5. lp.order = -1; 
  6. lp.flexGrow = 2; 
  7. view.setLayoutParams(lp); 

我们来看平台热门专题的布局:

下面我们来实现它,先来看最终实现的效果:

1. 新建activity_flow.xml布局

  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
  3.     xmlns:app="http://schemas.android.com/apk/res-auto" 
  4.     android:layout_width="match_parent" 
  5.     android:layout_height="match_parent"
  6.     <com.google.android.flexbox.FlexboxLayout 
  7.         android:id="@+id/flexbox_layout" 
  8.         android:layout_width="match_parent" 
  9.         android:layout_height="wrap_content" 
  10.         app:flexWrap="wrap" /> 
  11. </RelativeLayout> 

布局很简单,只有一个FlexboxLayout 因为我们需要动态创建它的item,所以就在这里固定写TextView了。

2. 新建ActivityFlow Activity,填充数据源

  1. String[] tags = {"婚姻育儿""散文""设计""上班这点事儿""影视天堂""大学生活""美人说""运动和健身""工具癖""生活家""程序员""想法""短篇小说""美食""教育""心理""奇思妙想""美食""摄影"}; 
  2.         flexboxLayout = (FlexboxLayout) findViewById(R.id.flexbox_layout); 
  3.         for (int i = 0; i < tags.length; i++) { 
  4.             Book model = new Book(); 
  5.             model.setId(i); 
  6.             model.setName(tags[i]); 
  7.             flexboxLayout.addView(createNewFlexItemTextView(model)); 
  8.         } 

其中Book为一个实体,这个不是关键,关键的是createNewFlexItemTextView方法。

  1. /** 
  2.      * 动态创建TextView 
  3.      * @param book 
  4.      * @return 
  5.      */ 
  6.     private TextView createNewFlexItemTextView(final Book book) { 
  7.         TextView textView = new TextView(this); 
  8.         textView.setGravity(Gravity.CENTER); 
  9.         textView.setText(book.getName()); 
  10.         textView.setTextSize(12); 
  11.         textView.setTextColor(getResources().getColor(R.color.colorAccent)); 
  12.         textView.setBackgroundResource(R.drawable.tag_states); 
  13.         textView.setTag(book.getId()); 
  14.         textView.setOnClickListener(new View.OnClickListener() { 
  15.             @Override 
  16.             public void onClick(View view) { 
  17.                 Log.e(TAG, book.getName()); 
  18.             } 
  19.         }); 
  20.         int padding = Util.dpToPixel(this, 4); 
  21.         int paddingLeftAndRight = Util.dpToPixel(this, 8); 
  22.         ViewCompat.setPaddingRelative(textView, paddingLeftAndRight, padding, paddingLeftAndRight, padding); 
  23.         FlexboxLayout.LayoutParams layoutParams = new FlexboxLayout.LayoutParams( 
  24.                 ViewGroup.LayoutParams.WRAP_CONTENT, 
  25.                 ViewGroup.LayoutParams.WRAP_CONTENT); 
  26.         int margin = Util.dpToPixel(this, 6); 
  27.         int marginTop = Util.dpToPixel(this, 16); 
  28.         layoutParams.setMargins(margin, marginTop, margin, 0); 
  29.         textView.setLayoutParams(layoutParams); 
  30.         return textView; 
  31.     } 

其他有关Book实体和Util类,也贴出来一下

Book实体

  1. public class Book { 
  2.     private int id; 
  3.     private String name
  4.     public String getName() { 
  5.         return name
  6.     } 
  7.     public void setName(String name) { 
  8.         this.name = name
  9.     } 
  10.     public int getId() { 
  11.         return id; 
  12.     } 
  13.     public void setId(int id) { 
  14.         this.id = id; 
  15.     } 
  16.     public Book() { 
  17.     } 

Util工具类

  1. public class Util { 
  2.     public static int pixelToDp(Context context, int pixel) { 
  3.         DisplayMetrics displayMetrics = context.getResources().getDisplayMetrics(); 
  4.         return pixel < 0 ? pixel : Math.round(pixel / displayMetrics.density); 
  5.     } 
  6.     public static int dpToPixel(Context context, int dp) { 
  7.         DisplayMetrics displayMetrics = context.getResources().getDisplayMetrics(); 
  8.         return dp < 0 ? dp : Math.round(dp * displayMetrics.density); 
  9.     } 

这样关于流动布局[FlexboxLayout],我们就实现完成了,是不是很简单。

【本文为51CTO专栏作者“洪生鹏”的原创稿件,转载请联系原作者】

戳这里,看该作者更多好文

【编辑推荐】

  1. 外媒速递:6个最常见的Android问题解决方案
  2. Android五分钟轻松教会你掌握WebView与JS交互
  3. Android获取LinearLayout宽高
  4. Android图片放大缩小动画,竟如此简单
  5. Android的WebView中H5页面全屏播放视频
【责任编辑:武晓燕 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

热门职位+更多

× CTO训练营(深圳站)