StaggeredGridLayoutManager显示的是GridLayoutManager这样的图像。

问题描述 投票：0回答：1

我正在尝试创建 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 但是，用上面的代码和大量的修改，比如将图像scaletype设置为fitxy,centercrop,center，并将高度改为wrap_content，修改Glide图像加载代码，都显示相同的输出。我想让我的 StaggeredGrid 像下面要求的输出。请帮助我。

Image Output/Required Output

java android xml android-recyclerview android-gridlayout
1个回答
0
投票

包裹你的 ImageView 里面 RelativeLayout应该可以了

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="5dp">

    <ImageView
        android:id="@+id/UserProfile_photoThumb"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</RelativeLayout>
0
投票

我认为他们的问题在滑行代码，你已经使用了

用这个

Glide.with(mContext).load(imageList.get(i)).into(viewHolder.image);

取而代之的是

Glide.with(getActivity()).load(ImageList.get(i)).apply(new RequestOptions().centerCrop()).into(viewHolder.image);

另外，我还对你的代码做了一些其他的修改，请看下面的例子。

在这里找到完整的代码

MainActivity2代码

import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.RecyclerView;
import androidx.recyclerview.widget.StaggeredGridLayoutManager;

import android.os.Bundle;

import com.google.android.flexbox.FlexDirection;
import com.google.android.flexbox.FlexboxLayoutManager;
import com.google.android.flexbox.JustifyContent;

import java.util.ArrayList;

public class MainActivity2 extends AppCompatActivity {
    RecyclerView photosRecycler;
    ArrayList<String> imageList = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);

        photosRecycler = findViewById(R.id.userPhotos_recycler);
        StaggeredGridLayoutManager layoutManager = new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL);
        layoutManager.setGapStrategy(StaggeredGridLayoutManager.GAP_HANDLING_MOVE_ITEMS_BETWEEN_SPANS);
        photosRecycler.setLayoutManager(layoutManager);
        photosRecycler.setHasFixedSize(true);

        imageList.add("https://i.stack.imgur.com/K8FFo.jpg?s=328&g=1");
        imageList.add("https://i.stack.imgur.com/Bpdap.jpg?s=328&g=1");
        imageList.add("https://i.stack.imgur.com/73QY4.jpg");
        imageList.add("https://i.stack.imgur.com/Bpdap.jpg?s=328&g=1");
        imageList.add("https://i.stack.imgur.com/K8FFo.jpg?s=328&g=1");
        imageList.add("https://i.stack.imgur.com/Bpdap.jpg?s=328&g=1");
        imageList.add("https://i.stack.imgur.com/K8FFo.jpg?s=328&g=1");

        fetchPhoto_Adapter adapter = new fetchPhoto_Adapter(imageList, this);
        photosRecycler.setAdapter(adapter);
    }

}

布局的activity_main2

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="match_parent">


    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/userPhotos_recycler"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

fetchPhoto_Adapter

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

import com.bumptech.glide.Glide;
import com.bumptech.glide.request.RequestOptions;

import java.util.ArrayList;

public class fetchPhoto_Adapter extends RecyclerView.Adapter<fetchPhoto_Adapter.ViewHolder> {

    ArrayList<String> imageList = new ArrayList<>();
    Context mContext;

    public fetchPhoto_Adapter(ArrayList<String> imageList, Context mContext) {
        this.imageList = imageList;
        this.mContext = mContext;
    }

    @NonNull
    @Override
    public fetchPhoto_Adapter.ViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
        LayoutInflater inflater = LayoutInflater.from(mContext);
        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(mContext).load(imageList.get(i)).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 version="1.0" encoding="utf-8"?>
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/UserProfile_photoThumb"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:adjustViewBounds="true"
    android:layout_margin="2dp"
    android:scaleType="fitXY" />

输出

enter image description here

0
投票

好吧，我已经在我的一个项目中实现了这一点，所以我在这里给你分享一些代码片段。试试吧，让我知道。

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)

这是我的回收器视图的项目布局。

<?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>

StaggeredGridLayoutManager屏幕截图

StaggeredGridLayoutManager Screenshot 1

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.