图片高度拉伸(SimpleDraweeView)

Image height stretched (SimpleDraweeView)

最近我在玩一些流行的 android 库,我需要 StaggeredGridLayout 和 Fresco 方面的帮助。

让我告诉你我错了什么

As you can see, these images height is streched

我已经尝试更改 XML/via java 中的 layout_height 参数,但我没有得到好的结果。

Everything is up on my Github repo

一些片段

public class GiphyView
    extends RecyclerView
    implements GiphyPresenter.ViewBind {

@Inject
public GiphyPresenter mGiphyPresenter;

private GiphyAdapter mAdapter;

public GiphyView(Context context) {
    super(context);
    initView(context);
}

public GiphyView(Context context, @Nullable AttributeSet attrs) {
    super(context, attrs);
    initView(context);
}

public GiphyView(Context context, @Nullable AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
    initView(context);
}

private void initView(Context context) {
    CustomApplication.get(context).getGiphyComponent().inject(this);

    mAdapter = new GiphyAdapter();
    setLayoutManager(new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL));
    setAdapter(mAdapter);
}

@Override
protected void onAttachedToWindow() {
    super.onAttachedToWindow();
    mGiphyPresenter.attachVu(this);
}

@Override
protected void onDetachedFromWindow() {
    ImagePipeline imagePipeline = Fresco.getImagePipeline();
    imagePipeline.clearCaches();

    mGiphyPresenter.detachVu();

    super.onDetachedFromWindow();
}

@Override
public void notifyRangeInserted(int start, int count) {
    mAdapter.notifyItemRangeInserted(start, count);
}

private class GiphyAdapter extends RecyclerView.Adapter<GiphyViewHolder> {
    @Override
    public GiphyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        return new GiphyViewHolder(
                LayoutInflater.from(parent.getContext())
                        .inflate(R.layout.giphy_cell, parent, false));
    }

    @Override
    public void onBindViewHolder(GiphyViewHolder holder, int position) {
        holder.setGif(mGiphyPresenter.getItemImage(position));
    }

    @Override
    public int getItemCount() {
        return mGiphyPresenter.getSize();
    }
}

class GiphyViewHolder extends ViewHolder {
    @BindView(R.id.gif)
    SimpleDraweeView mGif;

    GiphyViewHolder(View itemView) {
        super(itemView);
        ButterKnife.bind(this, itemView);
    }

    void setGif(String url) {
        /*ImageRequest request = ImageRequestBuilder.newBuilderWithSource(Uri.parse(url))
                .setRotationOptions(RotationOptions.autoRotate())
                .setLowestPermittedRequestLevel(ENCODED_MEMORY_CACHE)
                .build();*/

        DraweeController controller = Fresco.newDraweeControllerBuilder()
                .setUri(url)
                .setAutoPlayAnimations(true)
                //.setImageRequest(request)
                .build();
        mGif.setController(controller);
    }
}

}

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:fresco="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">

<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    card_view:cardCornerRadius="6dp"
    card_view:cardUseCompatPadding="true">

    <!-- 4:3 aspect ratio
           fresco:viewAspectRatio="1.33" -->
    <com.facebook.drawee.view.SimpleDraweeView
        android:id="@+id/gif"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        fresco:failureImage="@drawable/ic_error_black_24dp"
        fresco:placeholderImage="@drawable/ic_android_black_24dp"/>
</android.support.v7.widget.CardView>

PSA:我已经尝试使用 wrap_content,但没有成功(是的,我知道 Fresco 不支持它)。

我想您需要将父卡片视图的尺寸设置为 wrap_content 而您不需要父卡片视图 LinearLayout。只需使用类似:

<android.support.v7.widget.CardView
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:card_view="http://schemas.android.com/apk/res-auto"
  android:id="@+id/card_view"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  card_view:cardCornerRadius="6dp"
  card_view:cardUseCompatPadding="true">

  <com.facebook.fresco.SimpleDraweeView ... />
</android.support.v7.widget.CardView>

我添加了一个示例应用程序,展示了如何在具有网格布局的回收站视图中使用 CardViewhttps://github.com/facebook/fresco/blob/master/samples/showcase/src/main/java/com/facebook/fresco/samples/showcase/drawee/DraweeRecyclerViewFragment.java