android - 在 Listview 第一行中下载的图像在正确显示 android 之前随机播放所有图像

Question

我有一个似乎无法解决的问题。不知道以前有没有人问过这个问题，我可能错过了。

概述:我目前在一家公司担任实习生 android 开发人员(android 经验 +/- 3 个月)。我有一个测试项目要做适合我学习安卓。测试项目是关于一个新闻站点/应用程序的，您可以从 JSON 中获取文章，当点击一篇文章时，您会在另一个 fragment 中获得完整的文章。在完整文章中，您可以将文章保存为收藏夹(存储在 sqlite 数据库中)。另一个 fragment 从数据库中获取收藏夹并将其显示在具有 1 个 ImageView 、3 个 TextView 和 1 个图像按钮的 ListView 中。

问题:当我到达收藏夹 fragment (显示它)时:

1. 如果只有 1 行，图像会正确显示，不会发生乱序。
2. 当listview多于1行时，循环第一行的图像在正确分配/填充之前通过所有行的图像图像到各自的行/文章。图像循环大约需要 1-2 秒。

下面是我的 ListView 布局 xml、 fragment 布局 xml 和我的类文件。

ListView 布局 xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="1dp"
android:descendantFocusability="blocksDescendants" >

<ImageView
    android:id="@+id/iv_thumb"
    android:layout_width="65dp"
    android:layout_height="65dp"
    android:layout_centerVertical="true"
    android:padding="10dp"
    android:contentDescription="@string/str_iv_thumb" />

<TextView
    android:id="@+id/tv_article_title"
    android:layout_width="250dp"
    android:layout_height="wrap_content"
    android:textSize="15sp"
    android:textStyle="bold"
    android:layout_marginTop="8dp"
    android:layout_centerHorizontal="true"
    android:layout_toRightOf="@id/iv_thumb" />

<TextView
    android:id="@+id/tv_article_date"
    android:layout_width="250dp"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_toRightOf="@id/iv_thumb"
    android:layout_below="@id/tv_article_title" />

<TextView
    android:id="@+id/tv_article_synopsis"
    android:layout_width="250dp"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_toRightOf="@id/iv_thumb"
    android:layout_below="@id/tv_article_date" />

<ImageButton
    style="@style/Rem_Fav" 
    android:id="@+id/iv_rem_favs_single"
    android:src="@drawable/remove_favourite" 
    android:layout_width="25dp"
    android:layout_height="25dp"
    android:clickable="true"
    android:layout_marginTop="8dp"
    android:layout_marginRight="5dp"
    android:layout_alignParentRight="true"
    android:layout_centerVertical="true"
    android:contentDescription="@string/rem_favs_single"
    android:layout_toRightOf="@+id/tv_article_synopsis" />

fragment 布局 xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<RelativeLayout
    android:id="@+id/relativeLayout1"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    style="@style/background"  >

        <ImageView
            android:id="@+id/iv_logo"
            android:contentDescription="@string/content"
            android:layout_width="250dp"
            android:layout_height="36dp"
            android:layout_centerHorizontal="true"
            android:src="@drawable/logo" />

        <ImageButton
            style="@style/Rem_Fav" 
            android:id="@+id/iv_rem_favs"
            android:src="@drawable/remove_favourite" 
            android:clickable="true"
            android:layout_width="25dp"
            android:layout_marginRight="1dp"
            android:layout_marginTop="10dp"
            android:layout_alignParentRight="true"
            android:contentDescription="@string/rem_favs"
            android:layout_toRightOf="@id/iv_logo" />

</RelativeLayout>

<RelativeLayout
    android:id="@+id/relativeLayout2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:layout_below="@id/relativeLayout1"
    style="@style/background"  >

        <ListView
            android:id="@+id/lv_Entities"
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:clickable="true"
            tools:context=".MainActivity" />

</RelativeLayout>
</LinearLayout>

类文件:

package com.example.***;

import java.io.InputStream;
import java.util.HashMap;
import java.util.List;

import com.example.***.sqlite.SqliteController;
import com.example.***.R;

import android.annotation.SuppressLint;
import android.content.Context;
import android.database.sqlite.SQLiteDatabase;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.AsyncTask;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.util.Log;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.View.OnClickListener;
import android.view.ViewGroup.LayoutParams;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.ImageButton;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.PopupWindow;
import android.widget.TextView;

public class FavouritesFragment extends Fragment {

// Listview attribute
ListView mListView;

List<HashMap<String, String>> articles = null;

SqliteController controller;
SQLiteDatabase db;

ImageButton allRemoveBtn;

CustomListAdapter adapter;

public FavouritesFragment() {

}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
        Bundle savedInstanceState) {

    controller = new SqliteController(getActivity());
    db = controller.getWritableDatabase();

    View rootView = inflater.inflate(R.layout.fragment_favourites, container, false);

    // Setting the Title of the List
    getActivity().getActionBar().setTitle("Favourites");

    // Getting the articles from the DB
    articles = controller.getAllArticles();

    // Getting a reference to ListView of activity_main
    mListView = (ListView) rootView.findViewById(R.id.lv_Entities);

    adapter = new CustomListAdapter(getActivity(), R.layout.lv_fav_layout);

    mListView.setAdapter(adapter);

    // Log.d("LISTVIEW","mListView: " + mListView);

    /** 
     *  This section is for the Remove All from Favourites function
     *  with a pop-up window asking if the user is sure about his/her
     *  choice. If the yes button is clicked, all of the saved favourites
     *  is deleted and the image chaged to selected image.
    */

    if (articles.isEmpty()) {
        // Do not show the Delete all image button
        allRemoveBtn = (ImageButton) rootView.findViewById(R.id.iv_rem_favs);
        allRemoveBtn.setVisibility(View.INVISIBLE);
    }
    else 
    {
        allRemoveBtn = (ImageButton) rootView.findViewById(R.id.iv_rem_favs);
        allRemoveBtn.setOnClickListener(new OnClickListener() {

            @SuppressLint("InflateParams")
            @Override
               public void onClick(View arg0) {

                    LayoutInflater layoutInflater  = (LayoutInflater) getActivity().getBaseContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
                    View popupView = layoutInflater.inflate(R.layout.popup, null);

                    final PopupWindow popupWindow = new PopupWindow(popupView, LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
                    popupWindow.showAtLocation(popupView, Gravity.CENTER, 0, 0);

                    Button btnNo = (Button) popupView.findViewById(R.id.btn_no);
                    btnNo.setOnClickListener(new Button.OnClickListener(){

                         @Override
                         public void onClick(View v) {

                             // Close the pop-up window
                             popupWindow.dismiss();
                         }
                    });

                    Button btnYes = (Button) popupView.findViewById(R.id.btn_yes);
                    btnYes.setOnClickListener(new Button.OnClickListener(){

                         @Override
                         public void onClick(View v) {

                             // Delete All from Table
                             controller.deleteAllArticle(db, "Favourites");

                             // Close the pop-up window
                             popupWindow.dismiss();

                             // Reload current fragment
                             articles = controller.getAllArticles();
                             adapter.notifyDataSetChanged();

                             // Hide the Image Button
                             allRemoveBtn.setVisibility(View.INVISIBLE);
                         }
                    });
                    popupWindow.showAsDropDown(allRemoveBtn, 50, -30);
                }
        });

    }
    return rootView;
}

public class CustomListAdapter extends ArrayAdapter<HashMap<String, String>>
{
    Context context;

    public CustomListAdapter(Context context, int resourceId)
    {   
        super(context, resourceId);
        this.context = context;
    }

    @Override
    public int getCount() {
        return articles.size();
    }

    @Override
    public long getItemId(int position) {
        return position;
    }
    @SuppressWarnings("unused")
    @Override
    public View getView(final int position, View convertView, ViewGroup parent) {

        View row = convertView;
        ViewHolder view_holder;
        final HashMap<String, String> rowItem = articles.get(position);

        if (row == null) 
        {
            LayoutInflater inflater = (LayoutInflater) getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            row = inflater.inflate(R.layout.lv_fav_layout, null);

            view_holder = new ViewHolder();


            view_holder.iv_thumb = (ImageView) row.findViewById(R.id.iv_thumb);
            view_holder.tv_article_title = (TextView) row.findViewById(R.id.tv_article_title);
            view_holder.tv_article_date = (TextView) row.findViewById(R.id.tv_article_date);
            view_holder.tv_article_synopsis = (TextView) row.findViewById(R.id.tv_article_synopsis);
            view_holder.iv_rem_favs_single =(ImageButton)row.findViewById(R.id.iv_rem_favs_single);

            row.setTag(view_holder);
        }
        else
        {
            view_holder = (ViewHolder) row.getTag();
            view_holder.iv_thumb.setImageBitmap(null);
        }

        row.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View arg0) {

                selectItem(position);
            }
        });

        // Getting the Article ID of selected item
        final String articleId = articles.get(position).get("ArticleId");

        // Setting of the Image
        String imgUrl = articles.get(position).get("ArticleUrl");
        new DownloadImageTask(view_holder.iv_thumb).execute(imgUrl);

        // Setting the Title
        view_holder.tv_article_title.setText(articles.get(position).get("ArticleTitle"));

        // Setting the Date
        view_holder.tv_article_date.setText(articles.get(position).get("ArticleDate"));

        // Setting the Synopsis of the article
        view_holder.tv_article_synopsis.setText(articles.get(position).get("ArticleSynopsis"));

        // Set the onclick listener for the remove favourite item
        view_holder.iv_rem_favs_single.setTag(view_holder.iv_rem_favs_single);
        view_holder.iv_rem_favs_single.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(final View arg0) {
                LayoutInflater layoutInflater  = (LayoutInflater) getActivity().getBaseContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
                View popupView = layoutInflater.inflate(R.layout.popup, null);

                final PopupWindow popupWindow2 = new PopupWindow(popupView, LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
                popupWindow2.showAtLocation(popupView, Gravity.CENTER, 0, 0);

                Button btnNo = (Button) popupView.findViewById(R.id.btn_no);
                btnNo.setOnClickListener(new Button.OnClickListener(){

                     @Override
                     public void onClick(View v) {

                         // DO NOT DELETE ANYTHING

                         // Close the pop-up window
                         popupWindow2.dismiss();
                     }
                });

                Button btnYes = (Button) popupView.findViewById(R.id.btn_yes);
                btnYes.setOnClickListener(new Button.OnClickListener(){

                     @Override
                     public void onClick(View v) {

                         // Delete selected item from the Table
                         controller.deleteArticle(articleId);

                         // Close the pop-up window
                         popupWindow2.dismiss();

                         // Reload current fragment
                         articles = controller.getAllArticles();
                         adapter.notifyDataSetChanged();

                         // Set the Image of the Image Button to selected
                         //((ImageButton) arg0.getTag()).setImageResource(R.drawable.remove_favourite_selected);

                         if (articles.isEmpty()) {
                            // Do not show the Delete all image button
                            allRemoveBtn.setVisibility(View.INVISIBLE);
                         }
                     }
                });

                popupWindow2.showAsDropDown((ImageButton) arg0.getTag(), 50, -30);
            }
        });

        return row;
    }

    private class ViewHolder{
        ImageView iv_thumb;
        TextView tv_article_title;
        TextView tv_article_date;
        TextView tv_article_synopsis;
        ImageButton iv_rem_favs_single;
    }
}

// If the listview item is selected, it loads the next fragment
private void selectItem(int position) {

        Log.d("POSITION","Position: " + position);

        // update the main content by replacing fragmentss
        FragmentManager fragmentManager = getActivity().getSupportFragmentManager();
        FragmentTransaction transaction = fragmentManager.beginTransaction();


        FullArticleFragment fragment = new FullArticleFragment();
        fragment.article = articles.get(position);

        // Replace whatever is in the fragment_container view with this fragment,
        // and add the transaction to the back stack so the user can navigate back
        transaction.replace(R.id.fragment_container, fragment);
        transaction.addToBackStack(null);

        // Commit the transaction
        transaction.commit();
}

// Download the image from the url stored in the database
private class DownloadImageTask extends AsyncTask<String, Void, Bitmap> {
    ImageView bmImage;

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

    @Override
    protected Bitmap doInBackground(String... urls) {
        String urldisplay = urls[0];
        Bitmap mIcon11 = null;
        InputStream in = null;

            try {
                in = new java.net.URL(urldisplay).openStream();

                // Log.d("IMAGEURL","DIT - Url: " + urldisplay);

                mIcon11 = BitmapFactory.decodeStream(in);
                in.close();
            } 
            catch (Exception e) 
            {
                Log.e("Error", e.getMessage());
                e.printStackTrace();
            }

        return mIcon11;
    }

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

谁能帮我解决这个问题。

Answer 1

您没有检查图像是否在同一位置。尝试这样的事情:

// Download the image from the url stored in the database
private class DownloadImageTask extends AsyncTask<String, Void, Bitmap> {
    ImageView bmImage;
    int position;

    public DownloadImageTask(ImageView bmImage, int position) {
        this.bmImage = bmImage;
        this.position = position;
        ivPic.setTag(position);
        bmImage.setImageBitmap(null);
    }

    @Override
    protected Bitmap doInBackground(String... urls) {
        String urldisplay = urls[0];
        Bitmap mIcon11 = null;
        InputStream in = null;

            try {
                in = new java.net.URL(urldisplay).openStream();

                // Log.d("IMAGEURL","DIT - Url: " + urldisplay);

                mIcon11 = BitmapFactory.decodeStream(in);
                in.close();
            } 
            catch (Exception e) 
            {
                Log.e("Error", e.getMessage());
                e.printStackTrace();
            }

        return mIcon11;
    }


    @Override
    protected void onPostExecute(Bitmap result) {
        super.onPostExecute(result);
        if(result != null && ((Integer)getTag) == this.position)
        bmImage.setImageBitmap(result); 
    }
}