Использование Fresco с StaggeredGridLayoutManager

Question

Я следил за this приличным учебным пособием, и все было великолепно с локальными изображениями. При попытке перейти от локальных образов к тем, которые я загружаю через Fresco в SimpleDraweeView, я не могу получить представление о том, чтобы изменить размер и пошатнуться среди других изображений.

Моя раскладка выглядит следующим образом (это:

<?xml version="1.0" encoding="utf-8"?> 
<android.support.v7.widget.CardView 
    xmlns:card_view="http://schemas.android.com/apk/res-auto" 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:fresco="http://schemas.android.com/apk/res-auto" 
    android:id="@+id/card_view" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    card_view:cardUseCompatPadding="true" 
    card_view:cardCornerRadius="8dp" 
    android:layout_marginBottom="16dp"> 
    <RelativeLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent"> 
     <com.facebook.drawee.view.SimpleDraweeView 
      android:id="@+id/fresco_image" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      fresco:actualImageScaleType="fitXY" 
      /> 
     <TextView 
      android:id="@+id/text" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:textSize="13sp" 
      android:text="@string/hello_world" 
      android:textColor="#ffffff" 
      android:layout_below="@+id/fresco_image" 
      android:paddingBottom="8dp" 
      android:paddingTop="8dp" 
      android:gravity="center_horizontal" 
      android:layout_alignParentBottom="true" 
      android:background="#1976D2"/> 
    </RelativeLayout> 
</android.support.v7.widget.CardView> 

выше раздувается в следующее:

<android.support.v7.widget.RecyclerView 
     android:id="@+id/view" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:layout_below="@id/text" 
     android:scrollbars="vertical"> 
    </android.support.v7.widget.RecyclerView> 

На моем плательщиком я попробовал:

1. Настройка ширину или высоту, или оба значения «match_parent» и «wrap_content» со всеми вариантами. Параметр wrap_content не выглядит recommended
2. Различные аспектные рационы, но это, по-видимому, приводит к обрезанию изображений и равномерному размеру/форме (не в шахматном порядке)
3. Различные комбинации scaleType с приведенным выше.

Вне плательщиком я, глядя на некоторые из демки от GitHub, но я не могу найти ни одного примера ступенчато зрения.

Я уверен, что это всего лишь вопрос получения настроек в правильной комбинации, но для меня как такового я не могу понять, что такое комбинация.

Любые предложения (или образцы) будут оценены!

ОБНОВЛЕНИЕ Наше внутреннее исполнение возвращает соотношение сторон (а также ширину/высоту) для каждого изображения. Я был в состоянии установить соотношение сторон на SimpleDraweeView и уважал эти значения:

vDraweeView.setAspectRatio(fAspect); 

Было бы круче, если у меня не было, чтобы сделать это, но, видимо, мнение не знает, это не размер до изображение полностью загружено. Хотя это может быть подходящее время для изменения вида, это может привести к неуклюжим дисплеям ... не желательно!

Правильно ли это звучит?

Answer 1

Поскольку SimpleDraweeView не знает размер изображения до его загрузки (и изменение размера после первоначального рисования не рекомендуется для изменения причин пользовательского интерфейса - возможно, по другим причинам), мне пришлось установить соотношение сторон до загрузка изображения. Предполагается, что вы знаете соотношение сторон перед загрузкой изображения ... которое мы делаем в нашем случае. Я сделал это в адаптере recycliewiew.

Команда установить соотношение сторон:

vDraweeView.setAspectRatio(fAspect); 

Answer 2

Вы можете использовать этот альтернативный класс WrapContentDraweeView:

public class WrapContentDraweeView extends GenericDraweeView { 

private PipelineDraweeControllerBuilderSupplier mDraweeControllerBuilderSupplier; 
private PipelineDraweeControllerBuilder mSimpleDraweeControllerBuilder; 


public WrapContentDraweeView(Context context, GenericDraweeHierarchy hierarchy) { 
    super(context, hierarchy); 
    this.init(context, (AttributeSet) null); 
} 

public WrapContentDraweeView(Context context) { 
    super(context); 
    this.init(context, (AttributeSet) null); 
} 

public WrapContentDraweeView(Context context, AttributeSet attrs) { 
    super(context, attrs); 
    this.init(context, attrs); 
} 

public WrapContentDraweeView(Context context, AttributeSet attrs, int defStyle) { 
    super(context, attrs, defStyle); 
    this.init(context, attrs); 
} 

@TargetApi(21) 
public WrapContentDraweeView(Context context, AttributeSet attrs, int defStyleAttr, 
          int defStyleRes) { 
    super(context, attrs, defStyleAttr, defStyleRes); 
    this.init(context, attrs); 
} 

private void init(Context context, @Nullable AttributeSet attrs) { 

    if (!this.isInEditMode()) { 
     mDraweeControllerBuilderSupplier = Fresco.getDraweeControllerBuilderSupplier(); 
     Preconditions.checkNotNull(mDraweeControllerBuilderSupplier, 
       "SimpleDraweeView was not initialized!"); 
     this.mSimpleDraweeControllerBuilder = mDraweeControllerBuilderSupplier.get(); 
     if (attrs != null) { 
      TypedArray gdhAttrs = context.obtainStyledAttributes(attrs, 
        R.styleable.SimpleDraweeView); 

      try { 
       if (gdhAttrs.hasValue(
         R.styleable.SimpleDraweeView_actualImageUri)) { 
        this.setImageURI((Uri) Uri.parse(gdhAttrs.getString(
          R.styleable.SimpleDraweeView_actualImageUri)), 
          (Object) null); 
       } else if (gdhAttrs.hasValue(
         R.styleable.SimpleDraweeView_actualImageResource)) { 
        int resId = gdhAttrs.getResourceId(
          R.styleable.SimpleDraweeView_actualImageResource, 
          -1); 

       } 
      } finally { 
       gdhAttrs.recycle(); 
      } 
     } 

    } 
} 

protected SimpleDraweeControllerBuilder getControllerBuilder() { 
    return this.mSimpleDraweeControllerBuilder; 
} 

public void setImageURI(Uri uri) { 
    this.setImageURI((Uri) uri, (Object) null); 
} 

public void setImageURI(@Nullable String uriString) { 
    this.setImageURI((String) uriString, (Object) null); 
} 

public void setImageURI(Uri uri, @Nullable Object callerContext) { 
    setAspectRatio(FrescoUtils.getAspectRatio(uri)); 
    ImageDecodeOptions decoderOptions = ImageDecodeOptions.newBuilder() 
      .setDecodePreviewFrame(true) 

      .build(); 
    ImageRequest imageRequest = ImageRequestBuilder.newBuilderWithSource(uri) 

      .setLocalThumbnailPreviewsEnabled(true) 
      .setImageDecodeOptions(decoderOptions) 

      .setPostprocessor(new BasePostprocessor() { 
       @Override 
       public CloseableReference<Bitmap> process(Bitmap sourceBitmap, 
                  PlatformBitmapFactory bitmapFactory) { 
        int height = sourceBitmap.getHeight()/2; 
        int width = sourceBitmap.getWidth()/2; 
        if (width/(float) height < 0.5f) { 
         CloseableReference<Bitmap> cropReference = null; 
         CloseableReference<Bitmap> scaledReference = null; 
         try { 
          cropReference = bitmapFactory 
            .createBitmap(sourceBitmap, 0, 0, width, 
              (int) (width/1.66f)); 
          scaledReference = bitmapFactory 
            .createScaledBitmap(cropReference.get(), getWidth(), 
              (int) (getWidth()/1.66f), false); 
          Bitmap bm = scaledReference.get(); 
          Canvas canvas = new Canvas(bm); 
          Bitmap badge = getBadgeBitmap("长图"); 
          int padding = (int) (getResources().getDisplayMetrics().density 
            * 16); 
          canvas.drawBitmap(badge, bm.getWidth() - badge.getWidth() - padding, 
            bm.getHeight() - badge.getHeight() - padding, new Paint()); 
          return super.process(bm, bitmapFactory); 
         } finally { 
          if (cropReference != null) { 
           cropReference.close(); 
          } 
          if (scaledReference != null) { 
           scaledReference.close(); 
          } 
         } 
        } 
        return super.process(sourceBitmap, bitmapFactory); 
       } 
      }) 

      .build(); 

    DraweeController controller = this.mSimpleDraweeControllerBuilder 
      .setImageRequest(imageRequest) 
      .setCallerContext(callerContext) 
      .setOldController(this.getController()) 
      .setAutoPlayAnimations(true) 
      .setControllerListener(FrescoUtils.createControllerListener(this, uri)) 
      .setOldController(this.getController()) 


      .build(); 
    this.setController(controller); 
} 

public void setImageURI(@Nullable String uriString, @Nullable Object callerContext) { 
    Uri uri = uriString != null ? Uri.parse(uriString) : null; 
    this.setImageURI(uri, callerContext); 
} 



public void setImageResource(int resId) { 
    super.setImageResource(resId); 
} 


private Bitmap getBadgeBitmap(String badge) { 

    final DisplayMetrics dm = getResources().getDisplayMetrics(); 
    final float density = dm.density; 
    final float scaledDensity = dm.scaledDensity; 
    final TextPaint textPaint = new TextPaint(Paint.ANTI_ALIAS_FLAG | Paint 
      .SUBPIXEL_TEXT_FLAG); 
    textPaint.setColor(Color.WHITE); 
    textPaint.setTypeface(Typeface.create("sans-serif-black", Typeface.NORMAL)); 
    textPaint.setTextSize(12 * scaledDensity); 

    final float padding = 4 * density; 
    final float cornerRadius = 2 * density; 
    final Rect textBounds = new Rect(); 
    textPaint.getTextBounds(badge, 0, badge.length(), textBounds); 
    final int height = (int) (padding + textBounds.height() + padding); 
    final int width = (int) (padding + textBounds.width() + padding); 
    Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888); 
    bitmap.setHasAlpha(true); 
    final Canvas canvas = new Canvas(bitmap); 
    final Paint backgroundPaint = new Paint(Paint.ANTI_ALIAS_FLAG); 

    backgroundPaint.setColor(Color.DKGRAY); 
    RectF rectF = new RectF(0, 0, width, height); 
    canvas.drawRoundRect(rectF, cornerRadius, cornerRadius, backgroundPaint); 
    // punch out the badge word, leaving transparency 
    //  textPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR)); 

    // 居中 
    Paint.FontMetrics fontMetrics = textPaint.getFontMetrics(); 
    int baseline = (int) (rectF.centerY() - (fontMetrics.top + fontMetrics.bottom)/2); 
    textPaint.setTextAlign(Paint.Align.CENTER); 
    canvas.drawText(badge, rectF.centerX(), baseline, textPaint); 
    return bitmap; 
} 
} 

, а затем в макете использования WrapContentDraweeView вместо SimpleDraweeView и использовать ваше имя пакета вместо фрессовой упаковки

<com.package.info.WrapContentDraweeView 

     android:id="@+id/gridThumbnail" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 


    android:adjustViewBounds="true" 
    fresco:placeholderImage="@drawable/placeholder" 
    /> 

это лучше, чем реализация бэкэнд.

Answer 3

У меня была аналогичная проблема, но я использовал Glide. В любом случае, попробуйте установить ImageView, используя следующие свойства. Мой StaggeredGridView имеет 2 столбца и отлично работает.

<android.support.v7.widget.CardView 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     app:cardCornerRadius="8dp" 
     android:hardwareAccelerated="true" 
     app:cardPreventCornerOverlap="false" 
     android:elevation="0dp"> 

     <ImageView 
      android:id="@+id/item_cover" 
      android:layout_width="match_parent" 
      android:scaleType="fitXY" 
      android:adjustViewBounds="true" 
      android:layout_height="wrap_content" /> 

    </android.support.v7.widget.CardView> 

Другая вещь, которую я должен был решить для устранения ошибок при загрузке изображений, использовал PlaceHolder, пока изображение не будет загружено.

  Glide.with(context) 
       .load(url) 
       .placeholder(R.drawable.transparent_placeholder) 
       .diskCacheStrategy(DiskCacheStrategy.ALL) 
       .crossFade() 
       .into(itemCover)