9

我做了一個崩潰的工具欄與我的Android應用程序的圖像。它與可繪製的圖像完美配合。我的問題是,當我從URL中檢索圖像並將其分配給相同的圖像視圖。摺疊工具欄不起作用。標題消失了,無法滾動,也沒有圖像。Collapsing Toolbar with url from url?

這是我的截圖。

Image from drawableAfter set image from async task

圖1是從圖像繪製和 圖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" /> 

+0

這是在模擬器或真實設備,並已確認您的網絡連接,並您添加Internet權限到清單? – j2emanue

+0

發佈您的佈局文件代碼。 – Wizard

+0

是的,我在清單中添加了permisison。所以不是一個權限問題。感謝您的迴應。 – sughan90

回答

1

使用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); 
+1

我會試一試。感謝隊友 – sughan90

+0

像我的異步任務一樣的問題。沒有圖像正在顯示 – sughan90

+0

檢查互聯網許可...代碼完美地工作@ sughan90 –

8

與Android工作室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> 

然後用畢加索將其加載到圖像

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

畢加索庫添加到您的gradle這個依賴以及

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

如果它確實有道理,我可以給你訪問我在github上的代碼:) –

3

我覺得與你的問題是,雖然你沒有給你的圖像視圖的drawable,然後視圖加載初始高度爲0dp,因爲你已經給wrap_content在高度t參數。現在,即使在圖像視圖中加載圖像後,由於視圖還沒有失效,所以它仍然具有0dp的高度。所以你沒有看到圖像。

解決方案ü可以嘗試:

1)給你的圖像視圖的初始height200dp,它會像一個魅力。

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

      } 
     } 
+0

最好你可以使用圖片加載庫。 Piccasso對你的情況會很好。 –

+1

給ImageView一個特定的高度解決了這個問題。我將它固定爲「@ dimen/app_bar_height」。 –