StaggeredGridView 在滚动时更改项目大小

Question

我运行解决了这个问题

我正在使用交错网格视图，它有两列和单列的组合。类似这样

一切正常，直到我上下滚动几次它随机变成这样

又卷了几卷就变成了这样

我不知道为什么而且它非常随机。每次显示页面时，我都尝试执行 notifyDataSetChanged，但似乎什么也没做

这是我的仪表板的代码

public class DashboardStaggered extends Fragment {
    RecyclerView mRecyclerView;
    View v;
    MasonryAdapter adapter;
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        Log.d("MASONRY", "onCreateView");
        super.onCreate(savedInstanceState);
        if(v==null) {
            Log.d("MASONRY", "v is NULL recreating");
            v = inflater.inflate(R.layout.activity_dashboard_staggered, container, false);
            setupRecyclerView();
        }else{
            Log.d("MASONRY", "v is NOT NULL");

        }

        return v;
    }

    private void setupRecyclerView(){
        mRecyclerView = (RecyclerView) v.findViewById(R.id.masonry_grid);
        mRecyclerView.setLayoutManager(new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL));
        adapter = new MasonryAdapter(getActivity(),this);
        mRecyclerView.setAdapter(adapter);
        SpacesItemDecoration decoration = new SpacesItemDecoration(12);
        mRecyclerView.addItemDecoration(decoration);
        adapter.notifyDataSetChanged();

    }
    @Override
    public void onSaveInstanceState(Bundle outState) {
        super.onSaveInstanceState(outState);
    }

    @Override
    public void onResume() {
        super.onResume();
        Log.d("MASONRY", "onResume");
        if(mRecyclerView==null) {
            setupRecyclerView();
        }



    }
    @Override
    public void onPause() {
        super.onPause();
        Log.d("MASONRY", "onPause");

    }

}

如果需要，我也可以 post 适配器。非常感谢大家的任何建议。

适配器代码在这里（不想让 post 混乱）http://pastebin.com/QkZbjjp1

修剪代码http://pastebin.com/Hgsji1RG

Answer 1

正如jason在评论中提到的，这是itemgetviewtype的错误，逻辑错误比什么都重要。但吸取教训，getItemViewType 的更新代码是

@Override
    public int getItemViewType(int position) {
        // Return type based on position
        return tileDefinitions.get(position).getTileType();
    }

感谢大家指出。

Answer 2

发生这种情况是因为当您上下滚动时，holder 无法识别图像视图的宽度和高度。当您向下滚动时，它会清除上面的视图，反之亦然。

这样使用：

@Override
public void onBindViewHolder(ViewHolder viewHolder, int position) {

    MyViewHolder vh = (MyViewHolder) viewHolder;
    ImageModel item = imageModels.get(position);
    RelativeLayout.LayoutParams rlp = (RelativeLayout.LayoutParams) vh.imageView.getLayoutParams();
    float ratio = item.getHeight() / item.getWidth();
    rlp.height = (int) (rlp.width * ratio);
    vh.imageView.setLayoutParams(rlp);
    vh.positionTextView.setText("pos: " + position);
    vh.imageView.setRatio(item.getRatio());
    Picasso.with(mContext).load(item.getUrl()).placeholder(PlaceHolderDrawableHelper.getBackgroundDrawable(position)).into(vh.imageView);
}

为了清楚起见，请看这个link： Picasso/Glide-RecyclerView-StaggeredGridLayoutManager

Answer 3

您好，您可以在下面找到这个答案，它可能对您有所帮助。使用下面的库，

flutter_staggered_grid_view: ^0.3.2

使用下面的输入列表：

const List mylist = [  
  {"img": "assets/images/img_1.png", "title": "Logan"},  
  {"img": "assets/images/img_2.png", "title": "Candyman"},  
  {"img": "assets/images/img_3.png", "title": "Angry Birds"},  
  {"img": "assets/images/img_4.png", "title": "Rocket Life"},  
]

Container(
          height: MediaQuery.of(context).size.height *0.8,
          // child: Text("data"),
          child: StaggeredGridView.countBuilder(
            crossAxisCount: 2,
            itemCount: SearchVideoList.length,
            itemBuilder: (BuildContext context, int index) => new Container(
                color: Colors.transparent,
                child: new Center(
                  child: InkWell(
                    onTap: () {},
                    child: Container(
                      margin: EdgeInsets.all(5),
                      decoration: BoxDecoration(
                          border: Border.all(
                              color: Colors.white.withOpacity(0.5)),
                          borderRadius: BorderRadius.circular(15),
                          image: DecorationImage(
                            image:
                                AssetImage(SearchVideoList[index]['img']),
                            fit: BoxFit.cover,
                          )),
                    ),
                  ),
                )),
            staggeredTileBuilder: (int index) => new StaggeredTile.count(
                index == 3 ? 2 : 1,
                index == 0
                    ? 2
                    : index == 1
                        ? 1
                        : index == 2
                            ? 1
                            : 1),
            mainAxisSpacing: 4.0,
            crossAxisSpacing: 4.0,
          ),
        ),

**示例输出：**

Answer 4

如果您使用Glide加载图片，请添加dontranform()函数并在图片视图中将adjustviewbound设置为true。

例如：

Glide.with(context).load(image.getImageUrl())
                .placeholder(R.drawable.placeholder)
                .dontTransform()
                .into(holder.image);

在布局文件中：

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/avatar"
        android:adjustViewBounds="true" />

StaggeredGridView 在滚动时更改项目大小

StaggeredGridView changing item sizes on scroll

java

android

android-recyclerview

staggered-gridview