从url加载图片的可折叠式工具栏？

Question

我在我的安卓应用程序中使用了带有图片的折叠式工具栏。当我使用drawable中的图片时，它能够完美地工作。但是当我从URL检索图像并将其分配给同一图像视图时，折叠式工具栏就无法工作了。标题消失了，不能滚动，也没有图像。

以下是我的屏幕截图。

Picture 1 是来自 drawable 的图片，而 Picture 2 是从 URL 检索的图片。

活动：

    import android.app.ProgressDialog;
    import android.graphics.Bitmap;
    import android.graphics.BitmapFactory;
    import android.graphics.drawable.BitmapDrawable;
    import android.os.AsyncTask;
    import android.os.Build;
    import android.os.Bundle;
    import android.support.design.widget.CollapsingToolbarLayout;
    import android.support.v7.app.AppCompatActivity;
    import android.support.v7.graphics.Palette;
    import android.support.v7.widget.Toolbar;
    import android.widget.ImageView;

    import android.widget.Toast;

    import java.io.InputStream;
    import java.net.URL;


    public class RecipeDisplay extends AppCompatActivity {
        CollapsingToolbarLayout collapsingToolbarLayout;
        ImageView image;
        ImageView img;
        Bitmap bitmap;
        ProgressDialog pDialog;

        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_recipe_display);
            Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
            setSupportActionBar(toolbar);

            //default header image for toolbar
            image = (ImageView) findViewById(R.id.image);
            image.setImageResource(R.drawable.header);

            //Loading image using async task
            new LoadImage().execute("http://www.twinaccommodation.com/media/313799/pub_food_281x281.jpg");

            collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
    collapsingToolbarLayout.setTitle("Collapsing");
    collapsingToolbarLayout.setExpandedTitleColor(getResources().getColor(android.R.color.transparent));

       }

       //async task
       private class LoadImage extends AsyncTask<String, String, Bitmap> {
            @Override
            protected void onPreExecute() {
               super.onPreExecute();
               pDialog = new ProgressDialog(RecipeDisplay.this);
               pDialog.setMessage("Loading....");
               pDialog.show();

            }

            protected Bitmap doInBackground(String... args) {
                try {
                    bitmap = BitmapFactory.decodeStream((InputStream) new URL(args[0]).getContent());

                } catch (Exception e) {
                    e.printStackTrace();
                }
                return bitmap;
            }

            protected void onPostExecute(Bitmap img) {

                if (img != null) {
                    image.setImageBitmap(img);
                    pDialog.dismiss();

                } else {

                    pDialog.dismiss();
                    Toast.makeText(RecipeDisplay.this, "Error retrieving image", Toast.LENGTH_SHORT).show();

                }
            }
        }

    }

在LOGCAT中也没有抛出任何错误...请帮帮我。

编辑：XML布局

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">

<android.support.design.widget.AppBarLayout
    android:id="@+id/app_bar_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    android:fitsSystemWindows="true">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        app:contentScrim="?attr/colorPrimary"
        app:expandedTitleMarginStart="48dp"
        app:expandedTitleMarginEnd="64dp"
        android:fitsSystemWindows="true">

        <ImageView
            android:id="@+id/image"
            android:src="@drawable/pic"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:scaleType="centerCrop"
            android:fitsSystemWindows="true"
            app:layout_collapseMode="parallax"/>

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:layout_collapseMode="pin" />

    </android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

<android.support.v4.widget.NestedScrollView
    android:id="@+id/scroll"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipToPadding="false"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="24dp"
        app:cardElevation="6dp"
        app:cardUseCompatPadding="true">

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

            <TextView
                android:id="@+id/description"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="30dp"
                android:text="Lorem Ipsum..."
                android:textAppearance="@style/TextAppearance.AppCompat.Body1"/>
        </LinearLayout>
    </android.support.v7.widget.CardView>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    app:layout_anchor="@id/app_bar_layout"
    style="@style/fab"
    app:theme="@style/ThemeOverlay.AppCompat.Light"
    app:layout_anchorGravity="bottom|right|end" />

- sughan90

---

这是在模拟器上还是真实设备上？您已经验证了互联网连接吗？并且您已经在清单中添加了互联网权限吗？ - j2emanue

请发布您的布局文件代码。 - user2756345

是的，我已经在清单文件中添加了权限。所以不是权限问题。感谢您的回复。 - sughan90

编辑。布局文件已添加 - sughan90

我使用Picasso时也遇到了完全相同的问题。你解决了吗？如果是，怎么解决的？ - Paras Jain

Answer 1

使用Android Studio 1.5及以上版本，您可以创建一个滚动模板。 然后将ImageView添加到布局中。

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    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"
    android:fitsSystemWindows="true"
    tools:context="com.codephillip.app.MyActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:fitsSystemWindows="true"
        android:layout_height="@dimen/app_bar_height"
        android:layout_width="match_parent"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:fitsSystemWindows="true"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:contentScrim="?attr/colorPrimary">

            <ImageView
                android:id="@+id/image_id"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@drawable/placeholder_image"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_height="?attr/actionBarSize"
                android:layout_width="match_parent"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/AppTheme.PopupOverlay"/>

        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_stretch_detail"/>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/fab_margin"
        app:layout_anchor="@id/app_bar"
        app:layout_anchorGravity="bottom|end"
        android:src="@drawable/ic_share_white_24dp"/>
</android.support.design.widget.CoordinatorLayout>

然后使用Picasso将其加载到图像中。

public class MyActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_my);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        ImageView toolbarImage = (ImageView) findViewById(R.id.image_id);

        String url = "" //place your url here
        picassoLoader(this, toolbarImage, url);
     }

        public void picassoLoader(Context context, ImageView imageView, String url){
        Log.d("PICASSO", "loading image");
        Picasso.with(context)
                .load(url)
                        //.resize(30,30)
                .placeholder(R.drawable.placeholder_image)
                .error(R.drawable.placeholder_image)
                .into(imageView);
    }
}

同时将Picasso库添加到您的Gradle依赖项中

compile 'com.squareup.picasso:picasso:2.5.2'

- Phillip Kigenyi

Answer 2

我认为你的问题在于，你没有为你的图片视图提供可绘制的内容，因此视图加载时具有0dp的初始高度，因为你在高度参数中使用了wrap_content。即使图片加载到图像视图中，由于该视图尚未失效，因此它仍然具有0dp的高度。所以你看不到图片。

以下是可尝试的解决方案： 1）给你的图片视图一个初始的height，比如说200dp，它就能正常工作了。 2）如果你想使用高度作为wrap_content，那么你也可以使视图失效（即使用新的参数重新在屏幕上绘制它），尝试这个：imageView.invalidate();。在这个区域里输入即可。

 protected void onPostExecute(Bitmap img) {

            if (img != null) {
                image.setImageBitmap(img);
                pDialog.dismiss();
                image.invalidate();

            } else {

                pDialog.dismiss();
                Toast.makeText(RecipeDisplay.this, "Error retrieving image", Toast.LENGTH_SHORT).show();

            }
        }

- Chirag Maheshwari

---

最好使用图像加载库。对于您的情况，Picasso是一个很好的选择。 - Chirag Maheshwari

将ImageView设置特定的高度解决了问题。我将其修复为"@dimen/app_bar_height"。 - Paras Jain

Answer 3

使用Picasso库，并使用它从AsyncTask获取位图。

Bitmap image = Picasso.with(getAppilicationContext()).load(YourString).get();

然后在onPostExecute中将图像设置为collapsingToolbar

或者使用这个AsyncTask

private class DownloadImageTask extends AsyncTask<String, Void, Bitmap> {
    ImageView bmImage;

    public DownloadImageTask(ImageView bmImage) {
        this.bmImage = bmImage;
    }

    protected Bitmap doInBackground(String... urls) {
        String urldisplay = urls[0];
        Bitmap mIcon = null;
        try {
            InputStream in = new java.net.URL(urldisplay).openStream();
            mIcon = BitmapFactory.decodeStream(in);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return mIcon;
    }

    protected void onPostExecute(Bitmap result) {
        bmImage.setImageBitmap(result);
}

并开始任务：

new DownloadImageTask(YourImageView)
     .execute(YourURLString);

- Michele Lacorte

---

我会尝试一下。谢谢伙计。 - sughan90

和我的异步任务一样的问题，没有显示任何图像。 - sughan90

检查INTERNET权限...代码完美运行@sughan90 - Michele Lacorte

大家好，我似乎遇到了类似的问题，它无法加载。由于我已经使用这个下载任务很多次了，但是在使用可折叠工具栏时似乎不起作用。如果我注释掉：<android.support.design.widget.CollapsingToolbarLayout>，那么它就可以正常工作，图片也可以完美加载。有人能详细解释一下吗？ - ImAtWar