web-dev-qa-db-ja.com

StaggeredGridLayoutManagerおよび移動アイテム

RecyclerviewによってStaggeredGridLayoutManagerで28枚の画像を表示する非常に単純なプロジェクトを作成しました。しかし、recyclerviewをスクロールすると、たとえば左から右にアイテムを移動したり、左右の列を入れ替えたりします。

コード：

import Java.util.ArrayList;
import Java.util.List;

import Android.app.Activity;
import Android.os.Bundle;
import Android.support.v7.widget.RecyclerView;
import Android.support.v7.widget.StaggeredGridLayoutManager;


public class MainActivity extends Activity {


    String mImageDir;
    private RecyclerView mRecyclerView;
    private StaggeredGridLayoutManager mLayoutManager;



    MyRecyclerAdapter myRecyclerAdapter;
    List<ImageModel> mImageList;

    @Override
    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);   
        mRecyclerView = (RecyclerView)findViewById(R.id.recyclerview_rootview);
        mLayoutManager = new StaggeredGridLayoutManager(2,StaggeredGridLayoutManager.VERTICAL);     
        mLayoutManager.setGapStrategy(StaggeredGridLayoutManager.GAP_HANDLING_MOVE_ITEMS_BETWEEN_SPANS);        
        mRecyclerView.setLayoutManager(mLayoutManager);
        mRecyclerView.setHasFixedSize(false);
        mImageList = new ArrayList<ImageModel>();
        for (int i = 1; i < 29 ; i++) {
            ImageModel img = new ImageModel();
            img.setTitle("Image No " + i);
            int drawableResourceId = this.getResources().getIdentifier("image"+String.valueOf(i), "drawable", this.getPackageName());
            img.setResId(drawableResourceId);
            mImageList.add(img);

        }
        myRecyclerAdapter = new MyRecyclerAdapter(MainActivity.this,mImageList);        
        mRecyclerView.setAdapter(myRecyclerAdapter);

    }

}

そしてアダプター：

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


    private List<ImageModel> mItems;
    Context mContext;

    public MyRecyclerAdapter(Context context,List<ImageModel> objects) {
        mContext = context;
        mItems = objects;

    }

    static class ViewHolder extends RecyclerView.ViewHolder{
        public  ImageView mImageView;
        public  TextView mTextView;
        public View rootView;
        public ViewHolder(View itemView) {
            super(itemView);
            rootView = itemView;
            mImageView =(ImageView)itemView.findViewById(R.id.image);
            mTextView =(TextView)itemView.findViewById(R.id.title);
        }
    }

    @Override
    public int getItemCount() {

        return mItems.size();
    }

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

        ImageModel item = mItems.get(position); 
        Picasso.with(mContext).load(item.getResId()).into(holder.mImageView);
        holder.mTextView.setText(item.getTitle());
    }


    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int arg1) {
        LayoutInflater inflater =    
                (LayoutInflater) mContext.getSystemService(Activity.LAYOUT_INFLATER_SERVICE);
        View convertView = inflater.inflate(R.layout.item, parent, false);
        return new ViewHolder(convertView);

    }

}

サンプル移動アイテム：

http://i.imgur.com/FUapm2K.gif?1

再生（上下にスクロール）すると、より興味深いアニメーションを見つけることができます:-)

それを防ぎ、通常のリストビューのような安定したレイアウトにする方法は？

編集

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

    ImageModel item = mItems.get(position);
    RelativeLayout.LayoutParams rlp = (RelativeLayout.LayoutParams)holder.mImageView.getLayoutParams();
    float ratio = item.getHeight()/item.getWidth();
    rlp.height = (int)(rlp.width * ratio);
    holder.mImageView.setLayoutParams(rlp);
    Picasso.with(mContext).load(item.getResId()).into(holder.mImageView);
    holder.mTextView.setText(item.getTitle());
}
androidandroid-recyclerviewrecycler-adapterstaggeredgridlayout
23
mmlooloo

これは、SGLMがビューに関するw/h情報を保持しないために発生しています。そのため、ビューがリバウンドされるたびに、最初にプレースホルダーのサイズが取得され、次にイメージがロードされるときに最終サイズが取得されます。

（プレースホルダーとは異なる）サイズの異なる実際の画像を読み込むと、新しいレイアウトリクエストがトリガーされ、そのレイアウトリクエスト中に、SGLMはUIにギャップがあることを検出します位置）このように、アイテムをアニメーション付きで再注文します。

プレースホルダーの画像を実際の画像の寸法に設定することで、これを回避できます。前もって持っていない場合は、イメージが初めてロードされた後に保存し、次のonBind呼び出しで使用できます。

15
yigit

私のために働いたのは、StaggeredGridLayoutManagerを使用するときに、リサイクルビューですべてのアニメーションを無効にすることでした。

mRecyclerView.setItemAnimator(null);

移動するアニメーションのみを制限し、アイテムアニメーションの追加と削除を維持する場合は、独自のアニメーターを作成できます。

10
Sanchit Gupta

これを試すことができます

    StaggeredGridLayoutManager manager = new StaggeredGridLayoutManager(2, OrientationHelper.VERTICAL);
    manager.setGapStrategy(StaggeredGridLayoutManager.GAP_HANDLING_NONE);
    mRecyclerView.setLayoutManager(manager);

これを設定すると、一番上までスクロールすると、一番上に空白が表示されます。これを設定し続けます

    mRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
        @Override
        public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
            super.onScrollStateChanged(recyclerView, newState);
            ((StaggeredGridLayoutManager)recyclerView.getLayoutManager()).invalidateSpanAssignments();
        }
    });

それは私のために働いています、私はどこかでこのようになります。それがあなたのお役に立てば幸いです！

9
TC.Martin

この行を変更

mLayoutManager.setGapStrategy(
        StaggeredGridLayoutManager.GAP_HANDLING_MOVE_ITEMS_BETWEEN_SPANS);

この行に

mLayoutManager.setGapStrategy(
        StaggeredGridLayoutManager.GAP_HANDLING_NONE);
6
Matthias Robbers

メソッドの最後に次の行を追加します。holder.mImageView.requestLayout（）;

@Override
public void onBindViewHolder(ViewHolder holder, int position) {
    ...
    holder.mImageView.requestLayout();
}

これで問題が解決しました。

3
M. Baumgartner

次のコードのような最初のギャップ戦略を設定します：

mLayoutManager = new StaggeredGridLayoutManager(SPAN_COUNT, StaggeredGridLayoutManager.VERTICAL);
                            mLayoutManager.setGapStrategy(StaggeredGridLayoutManager.GAP_HANDLING_NONE);

アイテムをmItemsに追加してから使用します：

mAdapter.notifyItemInserted(mItems.size() - 1);

この方法は、以下を使用するよりも優れています。

mAdapter.notifyDataSetChanged();
0
subhash gaikwad

たぶんこれはより効率的な方法です：

mBrandRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
        @Override
        public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
            if(newState == RecyclerView.SCROLL_STATE_IDLE){
                mBrandRecyclerView.invalidateItemDecorations();
            }
        }
    });

詳細： https://github.com/ibosong/CommonItemDecoration

0
Bos

Staggered-layout-managerのrecyclerviewの高さを固定し、アイテムの高さと幅のwrap-contentを設定します

0
Roufal