在 FloatingActionButton Glide V4 上显示为正方形的阴影
Shadow displaying as square on FloatingActionButton Glide V4
我最近将 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" />
方法一:
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.2 上看起来不错,但在 4.4 上看起来像下图:
方法二:
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 的方法...任何帮助将不胜感激!
FloatingActionButton
cannot take arbitrary width/height values, instead use app:fabSize
属性提供 3 种可用尺寸的输入尺寸:自动、迷你和正常。
将 FAB 的 layout_width
和 layout_height
指定为 wrap_content
,并使用 app:fabSize="normal"
(或列表中的其他参数)提供所需的 fab 大小。
这个问题看起来类似于 。
使用 FloatingActionButton
,不可能对所有 Android 版本都实现预期的行为。
而不是 FloatingActionButton
,将 ImageView
与第 3 方库一起使用,例如 Picasso or Glide to load and transform your Image
resource. You can also use CircleImageView 库。
SOLUTION 1:
将 ImageView
与 Picasso
结合使用。
Gradle:
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);
输出:
SOLUTION 2:
将 ImageView
与 Glide
结合使用。
Gradle:
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);
输出:
SOLUTION 3:
使用 CircleImageView
库。
Gradle:
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);
输出:
希望对你有所帮助~
我最近将 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" />
方法一:
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.2 上看起来不错,但在 4.4 上看起来像下图:
方法二:
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 的方法...任何帮助将不胜感激!
FloatingActionButton
cannot take arbitrary width/height values, instead use app:fabSize
属性提供 3 种可用尺寸的输入尺寸:自动、迷你和正常。
将 FAB 的 layout_width
和 layout_height
指定为 wrap_content
,并使用 app:fabSize="normal"
(或列表中的其他参数)提供所需的 fab 大小。
这个问题看起来类似于
使用 FloatingActionButton
,不可能对所有 Android 版本都实现预期的行为。
而不是 FloatingActionButton
,将 ImageView
与第 3 方库一起使用,例如 Picasso or Glide to load and transform your Image
resource. You can also use CircleImageView 库。
SOLUTION 1:
将 ImageView
与 Picasso
结合使用。
Gradle:
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);
输出:
SOLUTION 2:
将 ImageView
与 Glide
结合使用。
Gradle:
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);
输出:
SOLUTION 3:
使用 CircleImageView
库。
Gradle:
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);
输出:
希望对你有所帮助~