FlexboxLayout初步探索二

最新推荐文章于 2025-05-06 16:52:22 发布

liuAsang

最新推荐文章于 2025-05-06 16:52:22 发布

阅读量628

点赞数

CC 4.0 BY-SA版权

分类专栏： android 技术

本文链接：https://blog.youkuaiyun.com/qq_35366908/article/details/67632247

android 技术专栏收录该内容

33 篇文章

订阅专栏

自我接触FlexboxLayout以来，基本看过的每一篇博客都会提及FlexboxLayout与Recyclerview结合使用，Google的例子里实现的效果类似于瀑布流。

虽然到现在我也没有在实际的项目中应用过这个组合，但我写了个小demo来实现这个组合的简单应用。

FlexboxLayout与Recycleview结合使用首先要引用'com.google.android:flexbox:0.3.0-alpha2',android studio的朋友也可以直接下载这个包（http://download.youkuaiyun.com/detail/qq_35366908/9796053），然后添加

Model依赖就可以正常使用使用了

用过Recyclerview的都知道，Recyclerview要添加一个布局管理器，之前都是添加一个LinearLayoutManager，代码如下：

        mRecyclerView.setLayoutManager(new LinearLayoutManager(this));//这个布局管理器可以设置Recycleview的显示形式（默认是Vertical显示），是否滚动，设置分割线属性等等。

现在要使用FlexboxLayoutManager来替代LinearLayoutManager设置RecyclerView 的布局显示，这个类是这样定义的：

/**LayoutManager for the {@link RecyclerView}. This class is intended to be used within a
 * {@link RecyclerView} and offers the same capabilities of measure/layout its children
 * as the {@link FlexboxLayout}. */

大概就是为RecyclerView提供相同功能的FlexBoxLayout布局

private void initRecycleView() {
        mRecyclerView = (RecyclerView) findViewById(R.id.rv_combine_fiexBox);
        FlexboxLayoutManager manager = new FlexboxLayoutManager();
        //设置主轴排列方式
        manager.setFlexDirection(FlexDirection.ROW);
        //设置是否换行
        manager.setFlexWrap(FlexWrap.WRAP);
        manager.setAlignItems(AlignItems.STRETCH);
        mRecyclerView.setLayoutManager(manager);
        mAdpter = new RvFlexAdapter(mDates, this);
        mRecyclerView.setAdapter(mAdpter);
    }

在RecyclerView 的adapter中，获取item控件，对控件的布局参数可以进行设置（属性可参考FlexboxLayout的子控件属性）
我只带布局中添加了一个ImageView在ViewHolder中提供了获取ImageView的get方法。

 @Override
    public void onBindViewHolder(BaseFvFlexViewHolder holder, int position) {
    ImageView mImageView = holder.getImageView(R.id.tv_title);
    holder.tvTitle.setImageResource(mTitles[position]);
    //        holder.tvTitle.setText(mTitles[position]+"");
    ViewGroup.LayoutParams lp = mImageView.getLayoutParams();
    if (lp instanceof FlexboxLayoutManager.LayoutParams) {
    FlexboxLayoutManager.LayoutParams flexboxLp =
    (FlexboxLayoutManager.LayoutParams) mImageView.getLayoutParams();
    flexboxLp.setFlexGrow(1);
    }
    }

就简单的实现了FlexboxLayout与RecyclerView的结合使用，对于Item的布局，最外层布局不要填充父控件要wrap_content ，若是给match_parent
就会一行只显示一个图片，看不出换行的效果，我的测试item布局如下：子控件的尺寸可以根据需求来定义。

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
    android:id="@+id/tv_title"
    android:layout_width="wrap_content"
    android:layout_height="70dp"
    android:layout_margin="5dp"
    android:visibility="visible" />
<!--<TextView-->
<!--android:id="@+id/tv_title"-->
<!--android:layout_width="wrap_content"-->
<!--android:layout_height="wrap_content"-->
<!--android:layout_margin="5dp"-->
<!--android:gravity="center_vertical"-->
<!--android:textSize="16sp"-->
<!--android:visibility="visible" />-->
</LinearLayout>

因为图片资源有限，我也换过用TextView来测试，效果可能比我找的图片好一些。