Cardview and Glide - 丸みのついたコーナーなし、シャドーなし

Question

左のイメージは私が探しているものです。右手に私の結果を注意深く見ると、底に白い丸いコーナーが見えますが、まだ影はありません。

私は、Glideを使用してCardView内のいくつかの画像を読み込んでいます。私は問題が何であるかを正確には分かっていませんが、それはGlideによると思われます。 レイアウトプレビューでは、私が望むようにCardViewが表示されますが、エミュレータまたは実際のデバイスにロードすると表示されません。

Glide.with(mContext) 
      .load(image.getSmall()) 
      .fitCenter() 
      .crossFade() 
      .bitmapTransform() 
      .diskCacheStrategy(DiskCacheStrategy.ALL) 
      .into(holder.coverImageView);} 

XML

<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="wrap_content" 
android:layout_margin="5dp" 
card_view:cardCornerRadius="5dp" 
card_view:cardElevation="5dp"> 

<LinearLayout 
    android:layout_width="match_parent" 
    android:layout_height="@dimen/card_height" 
    android:orientation="vertical" 
    android:weightSum="4"> 

    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_weight="3.5" 
     android:orientation="vertical"> 

     <FrameLayout 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:layout_gravity="center_horizontal"> 

      <ImageView 
       android:id="@+id/coverImageView" 
       android:layout_width="match_parent" 
       android:layout_height="match_parent" 
       android:layout_gravity="center" 
       android:scaleType="centerCrop" /> 

      <LinearLayout 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:layout_gravity="left|bottom" 
       android:background="@android:drawable/screen_background_dark_transparent" 
       android:orientation="vertical"> 

       <TextView 
        android:id="@+id/titleTextView" 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:padding="16dp" 
        android:textColor="#FFFFFF" 
        android:textSize="@dimen/text_size" 
        android:textStyle="bold" /> 
      </LinearLayout> 
     </FrameLayout> 
    </LinearLayout> 
</LinearLayout> 

Answer 1

問題は、レイアウトやグライドませんでした。数週間前に私はこれを追加しました：

android:hardwareAccelerated="false" 
android:largeHeap="true" 

私のマニフェストには、メモリ管理上の問題（私のアプリはGeneymotionでの応答を停止するため）がありました。 解決策よりも多くの問題が発生しています。

Answer 2

使用この

app:cardCornerRadius="10dp" 
app:cardElevation="5dp" 

Answer 3

Glideと組み合わせてRoundedCornerTransformationを使用してください。イメージが丸くないので、あなたのカードビューの丸い角が見えません。画像ビューの幅と高さを指定します。 .FitCenter（）を削除します。

同じ変換でもサイズの異なる同じ画像を持つ2番目のリストをお持ちの場合は、.diskCacheStrategy(DiskCacheStrategy.ALL)で注意してください。また、変換もキャッシュされます。次に、.diskCacheStrategy(DiskCacheStrategy.SOURCE)を使用します。

以下のコードはXamarin Androidのコードですが、簡単にjavaに変換できます。

あなたはこのようにそれを呼び出すことができます。

[Flags] 
public enum CornerTransformType 
{ 
    TopLeftCut = 0x1, 
    TopRightCut = 0x2, 
    BottomLeftCut = 0x4, 
    BottomRightCut = 0x8, 

    TopLeftRounded = 0x10, 
    TopRightRounded = 0x20, 
    BottomLeftRounded = 0x40, 
    BottomRightRounded = 0x80, 

    AllCut = TopLeftCut | TopRightCut | BottomLeftCut | BottomRightCut, 
    LeftCut = TopLeftCut | BottomLeftCut, 
    RightCut = TopRightCut | BottomRightCut, 
    TopCut = TopLeftCut | TopRightCut, 
    BottomCut = BottomLeftCut | BottomRightCut, 

    AllRounded = TopLeftRounded | TopRightRounded | BottomLeftRounded | BottomRightRounded, 
    LeftRounded = TopLeftRounded | BottomLeftRounded, 
    RightRounded = TopRightRounded | BottomRightRounded, 
    TopRounded = TopLeftRounded | TopRightRounded, 
    BottomRounded = BottomLeftRounded | BottomRightRounded, 
} 

グライドのBitmapTransformationから継承CornersTransformationを使用します。

.transform(new CornersTransformation(context, _radius, _radius, _radius, _radius, CornerTransformType.AllRounded, preferredImageWidth, preferredImageHeight)) 

は、丸みを帯びた角を定義する列挙クラスを使用します。

public class CornersTransformation : BitmapTransformation 
{ 
    #region properties 

    public double TopLeftCornerSize { get; set; } 
    public double TopRightCornerSize { get; set; } 
    public double BottomLeftCornerSize { get; set; } 
    public double BottomRightCornerSize { get; set; } 
    public int DesiredWidht { get; set; } 
    public int DesiredHeight { get; set; } 
    public CornerTransformType CornersTransformType { get; set; } 
    public bool SetForcedSize { get; set; } 

    public override string Id 
    { 
     get 
     { 
      return string.Format("CornersTransformation,cornersSizes={0},{1},{2},{3},cornersTransformType={4},cropWidthRatio={5},cropHeightRatio={6},", 
      TopLeftCornerSize, TopRightCornerSize, BottomRightCornerSize, BottomLeftCornerSize, CornersTransformType, DesiredWidht, DesiredHeight); 
     } 
    } 

    #endregion 

    #region constructor 

    public CornersTransformation(IntPtr javaReference, JniHandleOwnership transfer) : base(javaReference, transfer) 
    { 
    } 

    public CornersTransformation(IBitmapPool p0) : base(p0) 
    { 
    } 

    public CornersTransformation(Context context, double topLeftCornerSize, double topRightCornerSize, double bottomLeftCornerSize, double bottomRightCornerSize, 
           CornerTransformType cornersTransformType, int desiredWidht, int desiredHeight) : base(context) 
    { 
     TopLeftCornerSize = topLeftCornerSize; 
     TopRightCornerSize = topRightCornerSize; 
     BottomLeftCornerSize = bottomLeftCornerSize; 
     BottomRightCornerSize = bottomRightCornerSize; 
     CornersTransformType = cornersTransformType; 
     DesiredWidht = desiredWidht; 
     DesiredHeight = desiredHeight; 
    } 

    #endregion 

    #region public methods 

    protected override Bitmap Transform(IBitmapPool p0, Bitmap bitmap, int p2, int p3) 
    { 
     return ToTransformedCorners(bitmap, TopLeftCornerSize, TopRightCornerSize, BottomLeftCornerSize, BottomRightCornerSize, CornerTransformType.AllRounded, 1, 1); 
    } 

    public Bitmap ToTransformedCorners(Bitmap source, double topLeftCornerSize, double topRightCornerSize, double bottomLeftCornerSize, double bottomRightCornerSize, 
    CornerTransformType cornersTransformType, double cropWidthRatio, double cropHeightRatio) 
    { 
     if (DesiredWidht == 0 || DesiredHeight == 0) 
     { 
      return source; 
     } 

     float cropX = 0, cropY = 0; 
     double desiredWidth = 0; 
     double desiredHeight = 0; 

     if (forcedSize) 
     { 
      BzLogging.Log("DesiredWidht: " + DesiredWidht + ", DesiredHeight: " + DesiredHeight + " in transformation"); 

      if (DesiredWidht > source.Width) 
      { 
       source = Bitmap.CreateScaledBitmap(source, DesiredWidht, source.Height * (DesiredWidht/source.Width), true); 
      } 

      double sourceWidth = source.Width; 
      double sourceHeight = source.Height; 

      desiredWidth = DesiredWidht; 
      desiredHeight = DesiredHeight; 

      topLeftCornerSize = topLeftCornerSize * (desiredWidth + desiredHeight)/2/100; 
      topRightCornerSize = topRightCornerSize * (desiredWidth + desiredHeight)/2/100; 
      bottomLeftCornerSize = bottomLeftCornerSize * (desiredWidth + desiredHeight)/2/100; 
      bottomRightCornerSize = bottomRightCornerSize * (desiredWidth + desiredHeight)/2/100; 

      cropX = (float)((sourceWidth - desiredWidth)/2); 
      cropY = (float)((sourceHeight - desiredHeight)/2); 
     } 
     else 
     { 
      cropX = 0; 
      cropY = 0; 
      desiredWidth = source.Width; 
      desiredHeight = source.Height; 

      topLeftCornerSize = topLeftCornerSize * (desiredWidth + desiredHeight)/2/100; 
      topRightCornerSize = topRightCornerSize * (desiredWidth + desiredHeight)/2/100; 
      bottomLeftCornerSize = bottomLeftCornerSize * (desiredWidth + desiredHeight)/2/100; 
      bottomRightCornerSize = bottomRightCornerSize * (desiredWidth + desiredHeight)/2/100; 
     } 

     Bitmap bitmap = Bitmap.CreateBitmap((int)desiredWidth, (int)desiredHeight, Bitmap.Config.Argb8888); 

     using (Canvas canvas = new Canvas(bitmap)) 
     using (Paint paint = new Paint()) 
     using (BitmapShader shader = new BitmapShader(source, Shader.TileMode.Clamp, Shader.TileMode.Clamp)) 
     using (Matrix matrix = new Matrix()) 
     using (var path = new Path()) 
     { 
      if (Math.Abs(cropX) > 0.0001 || Math.Abs(cropY) > 0.0001) 
      { 
       matrix.SetTranslate(-cropX, -cropY); 
       shader.SetLocalMatrix(matrix); 
      } 

      paint.SetShader(shader); 
      paint.AntiAlias = true; 

      // TopLeft 
      if (cornersTransformType.HasFlag(CornerTransformType.TopLeftCut)) 
      { 
       path.MoveTo(0, (float)topLeftCornerSize); 
       path.LineTo((float)topLeftCornerSize, 0); 
      } 
      else if (cornersTransformType.HasFlag(CornerTransformType.TopLeftRounded)) 
      { 
       path.MoveTo(0, (float)topLeftCornerSize); 
       path.QuadTo(0, 0, (float)topLeftCornerSize, 0); 
      } 
      else 
      { 
       path.MoveTo(0, 0); 
      } 

      // TopRight 
      if (cornersTransformType.HasFlag(CornerTransformType.TopRightCut)) 
      { 
       path.LineTo((float)(desiredWidth - topRightCornerSize), 0); 
       path.LineTo((float)desiredWidth, (float)topRightCornerSize); 
      } 
      else if (cornersTransformType.HasFlag(CornerTransformType.TopRightRounded)) 
      { 
       path.LineTo((float)(desiredWidth - topRightCornerSize), 0); 
       path.QuadTo((float)desiredWidth, 0, (float)desiredWidth, (float)topRightCornerSize); 
      } 
      else 
      { 
       path.LineTo((float)desiredWidth, 0); 
      } 

      // BottomRight 
      if (cornersTransformType.HasFlag(CornerTransformType.BottomRightCut)) 
      { 
       path.LineTo((float)desiredWidth, (float)(desiredHeight - bottomRightCornerSize)); 
       path.LineTo((float)(desiredWidth - bottomRightCornerSize), (float)desiredHeight); 
      } 
      else if (cornersTransformType.HasFlag(CornerTransformType.BottomRightRounded)) 
      { 
       path.LineTo((float)desiredWidth, (float)(desiredHeight - bottomRightCornerSize)); 
       path.QuadTo((float)desiredWidth, (float)desiredHeight, (float)(desiredWidth - bottomRightCornerSize), (float)desiredHeight); 
      } 
      else 
      { 
       path.LineTo((float)desiredWidth, (float)desiredHeight); 
      } 

      // BottomLeft 
      if (cornersTransformType.HasFlag(CornerTransformType.BottomLeftCut)) 
      { 
       path.LineTo((float)bottomLeftCornerSize, (float)desiredHeight); 
       path.LineTo(0, (float)(desiredHeight - bottomLeftCornerSize)); 
      } 
      else if (cornersTransformType.HasFlag(CornerTransformType.BottomLeftRounded)) 
      { 
       path.LineTo((float)bottomLeftCornerSize, (float)desiredHeight); 
       path.QuadTo(0, (float)desiredHeight, 0, (float)(desiredHeight - bottomLeftCornerSize)); 
      } 
      else 
      { 
       path.LineTo(0, (float)desiredHeight); 
      } 

      path.Close(); 
      canvas.DrawPath(path, paint); 

      return bitmap; 
     } 
    } 

    #endregion 
} 

}上のカスタム変換について

詳細情報：https://futurestud.io/tutorials/glide-custom-transformation

Answer 4

まずはAndroid Documentations on Lists and Cards訪問を支払うことをお勧めします。

あなたはグライド、Picassoまたは他の任意のビットマップ・ハンドリング・ライブラリーを使用しているかどうかを第二に、あなたのcardviewの属性に出席のあなたの欲求だけで、app:cardCornerRadiusとapp:cardElevation属性を操作で達成することができます。特定の寸法の画像をカードビューに読み込むことは、まったく関係ありません。

私のアプリケーションでは、Cardviewは、RelativeLayoutviewの内部にあるLinearLayoutviewの内部に構築されています。

<android.support.v7.widget.CardView 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     app:cardElevation="2dp" 
     android:layout_gravity="center" 
     app:cardCornerRadius="100dp" 
     app:cardBackgroundColor="#eaffffff" 
     app:cardUseCompatPadding="true" 
     > 
    </android.support.v7.widget.CardView> 

これは、あなたがapp:cardCornerRadius属性を操作するだけで、カードの角の半径を作成する方法について興味があればここでも非常に類似したこの

に何かを生成します。

同じ引数は、影に適用される属性を操作し、あなたが行ってもいいです。今回だけは、属性名はapp:cardElevation="5dp"

もっとこの話題​​に認知されるビットがあいまいに聞こえることがあります。