使用 asynctask 加载图像时 Android 列表视图中的奇怪行为

Question

我希望任何人都可以帮助我解决我遇到的 ListView 问题。昨天我一直把头撞在铁墙上，因为我无法弄清楚问题是什么。这原本不是我的项目，这使它变得更加困难。

我有一个列表视图，我想在其中加载联系人行。在每一行的左侧，我想（下载）异步加载图像。为此，我使用以下 ArrayAdapter 和 ListItem 布局，请忽略不推荐使用的函数。

这是一个视频http://www.youtube.com/watch?v=aMqI9_y3pag&feature=youtu.be

问题： 每当列表加载时，所有图像都会相互加载，然后将它们放置在正确的位置。它看起来非常有问题，即使它反应迅速而且看起来很糟糕。我在我的 arrayadapter 中添加了一个计数器来计算调用 getView 的时间。

• 4 项无异步图像 - 大约。 38 次
• 4 项带有异步图像 - 大约。 180 次

希望有人可以帮助我！

阵列适配器

    public class ChatContactListArrayAdapter extends ArrayAdapter<ChatContact>{

    private Context context;
    private ArrayList<ChatContact> chatContacts;

    public static DiskImageLoaderHelper diskImageLoader;

    public int count = 0;

    public ChatContactListArrayAdapter(Context context, int resource, ArrayList<ChatContact> chatContacts) {
        super(context, resource, chatContacts);

        this.chatContacts = chatContacts;
        this.context = context;
        diskImageLoader = new DiskImageLoaderHelper(context, "ChatListImages", (1024 * 1024 * 10), CompressFormat.JPEG, 90);
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        count++;
        Log.e(DebugHelper.TAG_DEBUG, "Count: " + count + " Position: " + position);
        ChatContact chatContact = chatContacts.get(position);

        View view = convertView;

        if (view == null) {
            LayoutInflater inflater = (LayoutInflater) getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            view = inflater.inflate(R.layout.chat_contact_list_row, null);
        }

        ImageView contactImageView = (ImageView) view.findViewById(R.id.contact_image);
        if (chatContact.Picture != null) {
            BitmapWorkerTask bitmapWorker = new BitmapWorkerTask(contactImageView, diskImageLoader);
            bitmapWorker.execute(chatContact.Picture);
        } else {
            contactImageView.setVisibility(View.INVISIBLE);
        }

        TextView fromTextView = (TextView) view.findViewById(R.id.fromName);
        fromTextView.setText(chatContact.Name);

        Boolean l_blToMe = false;
        if (chatContact.From == chatContact.Id) {
            l_blToMe = true;
        }

        LinearLayout chatContactRow = (LinearLayout) view.findViewById(R.id.chatContactRow);
        ImageView imageViewStatusMessage = (ImageView) view.findViewById(R.id.lastMessageStatusImg);

        TextView lastMessage = (TextView) view.findViewById(R.id.lastMessage);
        if (CommonUtilities.isNullOrEmpty(chatContact.Message) && !CommonUtilities.isNullOrEmpty(chatContact.MessageId)) {
            lastMessage.setText("<afbeelding>");
        } else {
            lastMessage.setText(chatContact.Message);
        }

        imageViewStatusMessage.setImageResource(0);

        if (!CommonUtilities.isNullOrEmpty(chatContact.Received)) {
            imageViewStatusMessage.setImageDrawable(context.getResources().getDrawable(R.drawable.chat_double_check));
            chatContactRow.setBackgroundColor(Color.parseColor("#F2F2F2"));
            lastMessage.setTypeface(null, Typeface.NORMAL);
        } else if (!CommonUtilities.isNullOrEmpty(chatContact.Sent) && !l_blToMe) {
            imageViewStatusMessage.setImageDrawable(context.getResources().getDrawable(R.drawable.chat_single_check));
            chatContactRow.setBackgroundColor(Color.parseColor("#F2F2F2"));
            lastMessage.setTypeface(null, Typeface.NORMAL);
        } else if (!CommonUtilities.isNullOrEmpty(chatContact.Sent) && l_blToMe) {
            imageViewStatusMessage.setImageDrawable(context.getResources().getDrawable(R.drawable.chat_arrow));
            chatContactRow.setBackgroundColor(Color.parseColor("#F4E0CC"));
            lastMessage.setTypeface(null, Typeface.BOLD);
        } else {
            imageViewStatusMessage.setVisibility(View.INVISIBLE);
        }

        TextView receivedDate = (TextView) view.findViewById(R.id.receivedDate);

        if (!CommonUtilities.isNullOrEmpty(chatContact.Sent) && CommonUtilities.isNullOrEmpty(chatContact.Received)) {
            try {
                SimpleDateFormat l_dbDateFormatter = new SimpleDateFormat("yyyyMMddHHmmss");
                Date l_dOrgDate = (Date) l_dbDateFormatter.parse(chatContact.Sent);
                SimpleDateFormat l_showDateFormatter = new SimpleDateFormat("dd-MM-yyyy HH:mm");

                String newDateStr = l_showDateFormatter.format(l_dOrgDate);
                receivedDate.setText(newDateStr);
            } catch (ParseException e) {
                Log.e(DebugHelper.TAG_ERROR, "ChatContactListAdapter::" + e.toString());
//              ACRA.getErrorReporter().handleSilentException(e);
            }
        } else if (!CommonUtilities.isNullOrEmpty(chatContact.Received)) {
            try {
                SimpleDateFormat l_dbDateFormatter = new SimpleDateFormat(
                        "yyyyMMddHHmmss");
                Date l_dOrgDate = (Date) l_dbDateFormatter.parse(chatContact.Received);
                SimpleDateFormat l_showDateFormatter = new SimpleDateFormat(
                        "dd-MM-yyyy HH:mm");

                String newDateStr = l_showDateFormatter.format(l_dOrgDate);
                receivedDate.setText(newDateStr);
            } catch (ParseException e) {
                Log.e(DebugHelper.TAG_ERROR, "ChatContactListAdapter::" + e.toString());
//              ACRA.getErrorReporter().handleSilentException(e);
            }
        } else {
            receivedDate.setVisibility(View.INVISIBLE);
        }

        return view;
    }

    @Override
    public void clear() {
        count = 0;
        super.clear();
    }

    class BitmapWorkerTask extends AsyncTask<String, Void, Drawable> {

        private final WeakReference<ImageView> contactImageView;
        private DiskImageLoaderHelper diskImageLoader;

        public BitmapWorkerTask(ImageView imageView, DiskImageLoaderHelper diskImageLoader) {
            this.contactImageView = new WeakReference<ImageView>(imageView);
            this.diskImageLoader = diskImageLoader;
        }

        @Override
        protected Drawable doInBackground(String... params) {
            String imageUrl = params[0];
            Bitmap bitmap = null;
            if (!diskImageLoader.containsKey(CommonUtilities.filePathToCacheKey(imageUrl, false)) || false) {
                bitmap = CommonUtilities.getCroppedBitmap(CommonUtilities.createBitmapFromImageLocation(CommonUtilities.mStrBasePath + imageUrl), 50);
                if(bitmap != null) {
                    diskImageLoader.put(CommonUtilities.filePathToCacheKey(imageUrl, true), bitmap);
                }
            } else {
                bitmap = diskImageLoader.getBitmap(CommonUtilities.filePathToCacheKey(imageUrl, false));
            }

            return new BitmapDrawable(context.getResources(), bitmap);
        }

        @Override
        protected void onPostExecute(Drawable drawable) {
            ImageView view = contactImageView.get();
            if (view != null && drawable != null) {
                view.setBackgroundDrawable(drawable);
//              contactImageView.setImageBitmap(bitmap);
                view.setImageDrawable(context.getResources().getDrawable(R.drawable.image_round_overlay_grey));
            }
        }
    }
}

ListViewItem 布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/chat_contact_list_selector"
    android:orientation="horizontal"
    android:id="@+id/chatContactRow" >

    <ImageView
        android:id="@+id/contact_image"
        android:layout_width="55dp"
        android:layout_height="55dp"
        android:layout_marginBottom="10dp"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="5dp"
        android:src="@drawable/image_round_overlay_grey"/>

    <LinearLayout
        android:id="@+id/TextualHolder"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" 
        android:baselineAligned="false">

        <RelativeLayout 
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal" 
            android:baselineAligned="false">
            <TextView
                android:id="@+id/fromName"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dip"
                android:layout_marginTop="10dp"
                android:paddingBottom="10dip"
                android:textColor="#222222"
                android:ellipsize="end"
                android:singleLine="true"
                android:textSize="18sp" />

            <TextView
                android:id="@+id/receivedDate"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginRight="15dp"
                android:layout_marginTop="10dp"
                android:layout_alignParentRight="true"
                android:paddingBottom="10dip"
                android:textColor="#777777"
                android:textSize="10sp"
                android:textStyle="bold" />
        </RelativeLayout>

        <LinearLayout
            android:id="@+id/statusMessageHolder"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_marginLeft="10dip"
            android:paddingBottom="10dip" >

            <ImageView
                android:id="@+id/lastMessageStatusImg"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical" />

            <TextView
                android:id="@+id/lastMessage"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="#777777"
                android:textSize="15sp"
                android:ellipsize="end"
                android:singleLine="true"
                android:textStyle="bold"/>
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

我的 sherlockFragment 中的 OnCreate

@Override
    public void onActivityCreated(Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);

        context = getActivity().getApplicationContext();

        mLvContactList = (ListView) getView().findViewById(R.id.listContacts);
        if(mDbDataBase == null)
            mDbDataBase = nl.w3s.hulpverlener.JohelpenApplication.mDbDataBase;
        if(mCurDB == null)
            mCurDB = nl.w3s.hulpverlener.JohelpenApplication.mCurDB;

        mCursor = mCurDB.query(mTblChatContacts.mTable, mDbDataBase.dbFieldsToString(mTblChatContacts.mFields), null, null, null, null, null);
        chatContacts = CommonUtilities.getContactsFromCursor(mCursor);
        mCursor.close();

        chatContactArrayAdapter = new ChatContactListArrayAdapter(getActivity(), R.layout.chat_contact_list_row, chatContacts);
        mLvContactList.setAdapter(chatContactArrayAdapter);

        mLvContactList.setOnItemClickListener(new AdapterView.OnItemClickListener() {
                    @Override
                    public void onItemClick(AdapterView<?> parent,
                            final View view, int position, long id) {

                        ChatContact chatContact = (ChatContact) parent.getItemAtPosition(position);
                        ChatFragment chatFragment = new ChatFragment(chatContact.Id);
                        mMainObject.switchContent(chatFragment, true);
                    }
                });

        getSherlockActivity().getSupportActionBar().setIcon(R.drawable.icon_ab_chat);
        getSherlockActivity().getSupportActionBar().setNavigationMode(ActionBar.NAVIGATION_MODE_STANDARD);
        MainActivity.mMenuLayout = -1;
        getSherlockActivity().invalidateOptionsMenu();
        setStatusMessage();

        mMainObject.setTitle(mTitle);
    }

Answer 1

实际上主要问题是您没有在自定义适配器的getView() 方法中的大多数if 条件语句中添加else 条件语句。

喜欢，

1. 把else放在这里

   if (chatContact.Picture != null) {
           BitmapWorkerTask bitmapWorker = new BitmapWorkerTask(contactImageView, diskImageLoader);
           bitmapWorker.execute(chatContact.Picture);
   }
   else
   {
           contactImageView.setImageResource(R.id.icon); // only for your reference.. add default image
   } 
   

2. 在列表项行视图的所有 if-else if 语句中添加 else 语句。要么让它们消失，要么分配空白文本或默认图像。

更新：由于列表行的参考视图，我怀疑这种情况。

删除此代码，

 View view = convertView;

 if (view == null) {
     LayoutInflater inflater = (LayoutInflater) getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
     view = inflater.inflate(R.layout.chat_contact_list_row, null);
 }

随便用，

LayoutInflater inflater = (LayoutInflater)getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
view = inflater.inflate(R.layout.chat_contact_list_row, null);

Answer 2

当我为每一行异步加载图像时，我花了几个小时试图弄清楚为什么我的列表视图会发生这种情况。事实证明，列表视图必须为 XML 中设置的宽度和高度设置“match_parent”。真是奇怪又怪异的错误。