4

我有任何方法可以使用类似于此的 google 的 Flexbox 库来实现交错布局

使用 StaggeredLayoutManager 实现的布局

上面的布局也是使用StaggeredLayoutManger保持图像的纵横比创建的

我已经尝试过代码：

recyclerView.apply {
        layoutManager = FlexboxLayoutManager(context).apply {
            flexWrap = FlexWrap.WRAP
            justifyContent = JustifyContent.CENTER
        }
        adapter = mAdapter
    }

但是它使单列和纵横比的布局也没有保持（考虑到图像尺寸很大）。

4

3 回答 3

5

在此处输入图像描述

所以这就是我在我的一个项目中所做的，使用FlexBoxLayout，同样在我的情况下，有些图片的尺寸非常大，所以不得不做一些关于并发的事情。

  flexboxLayoutManager = new FlexboxLayoutManager(yourActivity.this);
  flexboxLayoutManager.setFlexWrap(FlexWrap.WRAP);
  flexboxLayoutManager.setAlignItems(AlignItems.STRETCH);
  flexboxLayoutManager.setFlexDirection(FlexDirection.ROW);
  recyclerView.setLayoutManager(flexboxLayoutManager);

主逻辑在适配器中，在onBindViewHolder

 Glide.with(context)
         .load(String.format("yourUrlHere")
         .diskCacheStrategy(DiskCacheStrategy.ALL)
         .animate(R.anim.fadein)
         .override(dpToPx(90) ,dpToPx(90)) // here replace with your desired size.
         .centerCrop()
         .listener(new RequestListener<String, GlideDrawable>() {
                    @Override
                    public boolean onException(Exception e, String model, Target<GlideDrawable> target, boolean isFirstResource) {
                        //  holder.loader.setVisibility(View.GONE);
                        return false;
                    }

                    @Override
                    public boolean onResourceReady(GlideDrawable resource, String model, Target<GlideDrawable> target, boolean isFromMemoryCache, boolean isFirstResource) {
                        //  holder.loader.setVisibility(View.GONE);
                        return false;
                    }
                })
         .priority(Priority.IMMEDIATE)
          .into(viewHolder.imageView);

   ViewGroup.LayoutParams lp = viewHolder.imageView.getLayoutParams();
    if (lp instanceof FlexboxLayoutManager.LayoutParams) {
        FlexboxLayoutManager.LayoutParams flexboxLp = (FlexboxLayoutManager.LayoutParams) lp;
        Random random = new Random();
        int val = random.nextInt(5);
        if (val ==0){
            val = 1;
        }
        flexboxLp.setFlexGrow(val);
        flexboxLp.setFlexShrink(1f);

    }

您可以使用此代码解决您的问题，就像我在一个项目中自己实现的那样。希望这能解决您的问题。快乐编码:)

注意：在我的项目中，根据要求，我使用过flexboxLayoutManager.setFlexDirection(FlexDirection.COLUMN);，所以我的布局是这样的。

于 2018-07-20T09:25:33.347 回答
0

利用

flexDirection = FlexDirection.ROW
alignItems = AlignItems.STRETCH

代替

justifyContent = JustifyContent.CENTER

你的新代码就像

recyclerView.apply {
        layoutManager =FlexboxLayoutManager(context).apply {
            flexWrap = FlexWrap.WRAP
            flexDirection = FlexDirection.ROW
            alignItems = AlignItems.STRETCH
        }
        adapter = mAdapter
    }
于 2018-07-16T19:22:43.520 回答
0

看起来你想要像 Pinterest 这样的设计。如果您想要根据上图获得流畅的用户体验，那么您需要在加载图像之前获得图像高度/宽度，以便您可以设置适当的纵横比。Pinterest 和其他人也这样做。

您需要使用GridLayoutManager它，并且使用ConstrainLayout您可以像这样轻松设置图像纵横比。

private val set = ConstraintSet()

override fun onBindViewHolder(holder: ViewHolder, position: Int) {
    val poster = mMoviePosters[position]

    Glide.with(holder.itemView.context)
                .setDefaultRequestOptions(requestOptions)
                .load(poster.imageUrl)
                .into(holder.mImgPoster)

    val ratio =String.format("%d:%d", poster.width,poster.height)
    set.clone(holder.mConstraintLayout)
    set.setDimensionRatio(holder.mImgPoster.id, ratio)
    set.applyTo(holder.mConstraintLayout)
}

我已经写了一篇关于它的详细博客文章。如果您想了解更多信息，请阅读使用约束布局的交错布局管理器中的纵横比

于 2018-07-19T18:08:49.733 回答