代码之家 › 专栏 › 技术社区 › CacheMeOutside P-A

阴影在浮动上显示为正方形ActionButton Glide V4

android-glide floating-action-button android-view android

CacheMeOutside P-A · 技术社区 · 7 年前

我最近将Glide升级到第4版,这导致了我在浮动动作按钮中显示的图像出现问题。我尝试了两种方法,并对这两种方法使用相同的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上看起来像下图:

方法#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的方法…任何帮助都将不胜感激!

2 回复 | 直到 7 年前

Ferdous Ahamed 7 年前

使用 FloatingActionButton

而不是 浮动操作按钮 ImageView 与第三方库类似 Picasso 或 Glide 加载和转换 Image 资源您也可以使用 CircleImageView

解决方案1:

使用具有 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>

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);

解决方案2:

图片框 具有 Glide .

格拉德尔:

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

XML

<?xml版本=“1.0”编码=“utf-8”&燃气轮机;
<RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android"
xmlns:app=”http://schemas.android.com/apk/res-auto"
android:layout\u width=“匹配父对象”
android:layout\u height=“match\u parent”>

android:id=“@+id/image\u头”
android:layout_height=“200dp”
android:background=“@drawable/dummy\u background”/>

android:id=“@+id/image\u profile\u pic”
android:layout_height=“150dp”
android:layout\u marginTop=“125dp”

JAVA

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


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

解决方案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>

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

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

希望这会有所帮助~

azizbekian 7 年前

FloatingActionButton 不能采用任意宽度/高度值,请使用 app:fabSize

layout_width 和 layout_height FAB as的 wrap_content app:fabSize="normal" (或列表中的其他参数)。

^{this one

.}