阴影在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类似。}