java - StaggeredGridLayoutManager 正在显示像 GridLayoutManager 这样的图像
问题描述
我正在尝试StaggeredGrid
使用此代码进行创建。
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {
View view=inflater.inflate(R.layout.userprofile_photos,container,false);
setRetainInstance(true);
photosRecycler=view.findViewById(R.id.userPhotos_recycler);
layoutManager= new StaggeredGridLayoutManager(2,StaggeredGridLayoutManager.VERTICAL);
layoutManager.setGapStrategy(StaggeredGridLayoutManager.GAP_HANDLING_MOVE_ITEMS_BETWEEN_SPANS);
photosRecycler.setLayoutManager(layoutManager);
photosRecycler.setHasFixedSize(true);
adapter=new fetchPhoto_Adapter();
photosRecycler.setAdapter(adapter);
return view;
}
片段布局
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:layout_behavior="@string/appbar_scrolling_view_behavior">
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/userPhotos_recycler"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll" />
</RelativeLayout>
适配器
public class fetchPhoto_Adapter extends RecyclerView.Adapter<fetchPhoto_Adapter.ViewHolder>{
@NonNull
@Override
public fetchPhoto_Adapter.ViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
LayoutInflater inflater= (LayoutInflater) viewGroup.getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View v = inflater.inflate(R.layout.photogallery,viewGroup,false);
return new ViewHolder(v);
}
@Override
public void onBindViewHolder(fetchPhoto_Adapter.ViewHolder viewHolder, int i) {
Glide.with(getActivity()).load(ImageList.get(i)).apply(new RequestOptions().centerCrop()).into(viewHolder.image);
}
@Override
public int getItemCount() {
return ImageList.size();
}
public class ViewHolder extends RecyclerView.ViewHolder {
ImageView image;
public ViewHolder(View itemView) {
super(itemView);
image = itemView.findViewById(R.id.UserProfile_photoThumb);
}
}
}
适配器项布局 XML
<?xml version="1.0" encoding="utf-8"?>
<ImageView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/UserProfile_photoThumb"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
/>
我试图做到这一点,StaggeredGrid
但使用上面的代码并进行了大量修改,例如将图像比例类型设置为 fitxy、centercrop、center 并将高度更改为 wrap_content 并修改 Glide 图像加载代码,所有这些都显示相同的输出。我想让我的StaggeredGrid
Like 低于所需的输出。请帮帮我。
解决方案
好吧,我已经在我的一个项目中实现了这一点,所以我在这里与您分享一些代码片段。试试看,让我知道。
class DemoActivity : ActivityBase() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_demo_activity)
val layoutmanager = StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL)
layoutmanager.gapStrategy = StaggeredGridLayoutManager.GAP_HANDLING_MOVE_ITEMS_BETWEEN_SPANS
rcv_staggered.layoutManager = layoutmanager
rcv_staggered.setHasFixedSize(true)
val listItem = ArrayList<DemoModel>()
// This is dummy url for reference and in this image url I was
// getting image with different width and height
val demoModel = DemoModel("https://i.picsum.photos/id/237/200/400.jpg", "Title 1")
val demoModel1 = DemoModel("https://i.picsum.photos/id/237/750/250.jpg", "Title 2")
val demoModel2 = DemoModel("https://i.picsum.photos/id/237/500/250.jpg", "Title 3")
val demoModel3 = DemoModel("https://i.picsum.photos/id/237/100/200.jpg", "Title 4")
listItem.add(demoModel)
listItem.add(demoModel1)
listItem.add(demoModel2)
listItem.add(demoModel3)
rcv_staggered.adapter = DemoAdapter(listItem)
}
}
像我们一样创建 recyclerView 适配器。
使用以下代码段加载图像:
Glide.with(holder.img.context)
.load(listItem[holder.adapterPosition].color)
.placeholder(R.color.black_alpha_10)
.into(holder.img)
这是我的 recyclerview 项目布局
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:orientation="vertical">
<androidx.appcompat.widget.AppCompatImageView
android:id="@+id/image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"/>
</LinearLayout>
交错网格布局管理器截图
推荐阅读
- kubernetes - 将 configmaps 用于 Kubernetes/Helm 环境变量的优势
- angular - 如何识别 FormArray 中的哪个项目发出了 valueChanges 事件?
- python-3.x - 将调用不同函数的 for 循环转换为生成器
- qt - 在 ToolButton icon.source 中使用来自 qrc 的 .ico
- python - 具有多个值的矩阵旋转
- node.js - 如何从 mongoose find 返回列表值
- javascript - 如何使用带有 TypeScript 的 d3 每个函数更新 SVG/HTML 元素?
- jquery - blueimp 文件上传的 iPhone 照片方向问题
- javascript - 如果状态不同,为什么 Redux 不会重新渲染组件?
- r - R studio“pavo”包:我可以使用函数“tcsplot”在同一个四面体色彩空间中绘制两个数据吗?