さまざまなサイズの画像を指す URL のリストがあります。それらをずらした垂直グリッドで表示し、各画像の幅を伸ばして1行を占有し、高さを伸ばしてスケーリングされた画像を包み込みたいと思います。すべてが次のようになります。
http://www.technotalkative.com/wp-content/uploads/2014/04/staggered-gridview-in-android.png
RecycleView と StaggeredGridLayoutManager を使用しています。残念ながら、私はそれをうまく機能させることができません。
これは、表示したいアイテムのクラスです。
public class Photo {
public String title;
public String url;
public Photo(String title, String url) {
this.title = title;
this.url = url;
}
}
アイテムに対応する XML:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:margin="5dp">
<ImageView
android:id="@+id/imageview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"/>
<TextView
android:id="@+id/textview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="@+id/imageview"
android:paddingTop="4dp"
android:paddingBottom="4dp"
android:background="@color/transparant_white"
android:gravity="center_horizontal"
android:textSize="18sp"/>
</RelativeLayout>
アダプター:
public class PhotoAdapter extends RecyclerView.Adapter<PhotoAdapter.ViewHolder> {
private final static String TAG = PhotoAdapter.class.getSimpleName();
private Context mContext;
private List<Photo> mPhotos;
public PhotoAdapter(Context context, List<Photo> photos) {
super();
mContext = context;
mPhotos = photos;
}
@Override
public ViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
View itemView = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.item_photo, viewGroup, false);
return new ViewHolder(itemView);
}
@Override
public void onBindViewHolder(ViewHolder viewHolder, int i) {
Photo photo = mPhotos.get(i);
Picasso.with(mContext).load(photo.url).into(viewHolder.imageView);
viewHolder.textView.setText(photo.title);
}
@Override
public int getItemCount() {
return mPhotos.size();
}
public static class ViewHolder extends RecyclerView.ViewHolder {
ImageView imageView;
TextView textView;
public ViewHolder(View itemView) {
super(itemView);
imageView = (ImageView) itemView.findViewById(R.id.imageview);
textView = (TextView) itemView.findViewById(R.id.textview);
}
}
}
そして、すべてが呼び出されるフラグメント:
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.fragment_main, container, false);
PhotoAdapter photoAdapter = new PhotoAdapter(getActivity(), createItems());
StaggeredGridLayoutManager staggeredGridLayoutManager
= new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL);
RecyclerView recyclerView = (RecyclerView) rootView.findViewById(R.id.recyclerview);
recyclerView.setAdapter(photoAdapter);
recyclerView.setLayoutManager(staggeredGridLayoutManager);
return rootView;
}
最初のいくつかの画像は正常に表示されますが、下にスクロールすると、すべての画像が 1 列に表示され始めます。次に、リストの一番上までスクロールすると、まだダウンロードしていない画像までスクロールダウンするまで、すべてがまとめられ、画像が 2 列に表示されます。問題は、ダウンロードする前に各画像のサイズがわからないため、各アイテムのサイズを事前に設定できないことです。
うまくいけば、誰かが以前にこれに遭遇して解決したか、単に私よりもこれについてよく知っていて、私がそれを機能させるのを手伝ってくれることを願っています.
Etsy の Staggered GridView も試してみましたが、同様の、さらに悪い結果が得られました。