陰影在FloatingActionButton Glide上顯示爲正方形滑塊V4

Question

我最近將Glide升級到版本4，導致我在浮動操作按鈕中顯示的圖像出現問題。我曾嘗試2種方法我用兩個相同的XML：

XML：

<android.support.design.widget.FloatingActionButton 
    android:id="@+id/profilepic_fab" 
    android:layout_width="150dp" 
    android:layout_height="150dp" 
    android:scaleType="center" 
    app:layout_anchor="@id/appbar" 
    app:layout_anchorGravity="bottom|center_horizontal" 
    app:srcCompat="@mipmap/bookmark_checked_white" /> 

方法1：

  RequestOptions optionsCentre = new RequestOptions() 
        .placeholder(R.drawable.profilepic_placeholder) 
        error(R.drawable.profilepic_placeholder).dontTransform() 
        .dontAnimate().CircleCrop(); 

      Glide.with(context) 
        .load(userinfo.getprofilePic()) 
        .apply(optionsCentre) 
        .into(profilepic); 

方法＃1的結果：它看起來不錯在Android 7.1 0.2但4.4，它看起來像下面的圖片：

方法＃2：

RequestOptions options = new RequestOptions() 
       .fitCenter() 
       .placeholder(R.drawable.profilepic_placeholder) 
       .error(R.drawable.profilepic_placeholder) 
       .priority(Priority.HIGH); 

    Glide.with(context) 
      .asBitmap() 
      .apply(options) 
      .load(url) 
      .into(new BitmapImageViewTarget(fab) { 
       @Override 
       protected void setResource(Bitmap resource) { 
        RoundedBitmapDrawable circularBitmapDrawable = 
          RoundedBitmapDrawableFactory.create(context.getResources(), resource); 
        circularBitmapDrawable.setCircular(true); 
        fab.setImageDrawable(circularBitmapDrawable); 
       } 
      }); 

的方法＃2結果：結果在Android 7.1.2看起來不同，4.4

的Android 7.1.2：

Android 4.4的：

方法＃2是用於使用Glide v3的...任何幫助將不勝感激！

Answer 1

使用FloatingActionButton，無法實現所有Android版本的預期行爲。

相反的FloatingActionButton，使用ImageView與第三方庫像Picasso或Glide加載和轉換您Image資源。您也可以使用CircleImageView庫。

解決方案1：

使用ImageView與Picasso。

搖籃：

dependencies { 
    ......... 
    compile 'com.squareup.picasso:picasso:2.5.2' 
} 

用法：

XML

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

    <ImageView 
     android:id="@+id/image_header" 
     android:layout_width="match_parent" 
     android:layout_height="200dp" 
     android:background="@drawable/dummy_background"/> 

    <ImageView 
     android:id="@+id/image_profile_pic" 
     android:layout_width="150dp" 
     android:layout_height="150dp" 
     android:layout_marginTop="125dp" 
     android:layout_centerHorizontal="true"/> 

</RelativeLayout> 

JAVA

ImageView imageProfilePic = (ImageView) findViewById(R.id.image_profile_pic); 
Picasso.with(this) 
     .load(R.drawable.dummy_profile_pic) 
     .resize(150, 150) 
     .centerCrop() 
     .transform(new CircleTransform()) 
     .into(imageProfilePic); 

OUTPUT：

解決方案2：

使用ImageView與Glide。

搖籃：

dependencies { 
    ......... 
    compile 'com.github.bumptech.glide:glide:4.0.0-RC1' 
} 

用法：

XML

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

    <ImageView 
     android:id="@+id/image_header" 
     android:layout_width="match_parent" 
     android:layout_height="200dp" 
     android:background="@drawable/dummy_background"/> 

    <ImageView 
     android:id="@+id/image_profile_pic" 
     android:layout_width="150dp" 
     android:layout_height="150dp" 
     android:layout_marginTop="125dp" 
     android:layout_centerHorizontal="true"/> 

</RelativeLayout> 

JAVA

ImageView imageProfilePic = (ImageView) findViewById(R.id.image_profile_pic); 


Glide.with(this) 
     .load(R.drawable.dummy_profile_pic) 
     .apply(RequestOptions.circleCropTransform()) 
     .into(imageProfilePic); 

OUTPUT：

解決方案3：

使用CircleImageView庫。

搖籃：

dependencies { 
    ......... 
    compile 'de.hdodenhof:circleimageview:2.1.0' 
} 

用法：

XML

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

    <ImageView 
     android:id="@+id/image_header" 
     android:layout_width="match_parent" 
     android:layout_height="200dp" 
     android:background="@drawable/dummy_background"/> 

    <de.hdodenhof.circleimageview.CircleImageView 
     xmlns:app="http://schemas.android.com/apk/res-auto" 
     android:id="@+id/image_profile_pic" 
     android:layout_width="150dp" 
     android:layout_height="150dp" 
     android:layout_marginTop="125dp" 
     android:layout_centerHorizontal="true"   
     app:civ_border_width="2dp" 
     app:civ_border_color="#FFFFFF"/> 

</RelativeLayout> 

JAVA

CircleImageView imageProfilePic = (CircleImageView) findViewById(R.id.image_profile_pic); 

Picasso.with(this) 
     .load(R.drawable.dummy_profile_pic) 
     .into(imageProfilePic); 

OUTPUT：

希望這將有助於〜

Answer 2

FloatingActionButton不能取任意的寬度/高度值，而是使用app:fabSize屬性來提供3種可用尺寸的輸入尺寸：auto，mini和normal。

指定layout_width和FAB的layout_height如wrap_content，並提供一種使用app:fabSize="normal"（從列表或其它參數）的所需FAB尺寸。

^{此問題與this one類似。}