logo标签列表

异步加载图片时，Android listview表现异常

androidlistviewandroid-listviewandroid-asynctask
3

我希望有人能帮我解决ListView的问题。昨天我一直在试图找出问题所在，但是没有头绪。这个项目不是由我创建的，所以问题更加困难。

我有一个ListView，我想要加载联系人行。在每一行的左边，我想要异步地下载图片。为此，我使用了以下的ArrayAdapter和ListItem布局，请忽略弃用的函数。

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

问题： 当列表加载时，所有的图片都会重叠加载，然后被放置在正确的位置。它看起来非常不稳定，尽管它很快，并且一切都响应良好，但它看起来很糟糕。我在我的ArrayAdapter中添加了一个计数器来计算getView被调用的次数。

  • 4个没有异步图片的项 - 大约38次
  • 4个有异步图片的项 - 大约180次

希望有人能帮我！

ArrayAdapter

    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);
    }
2个回答
3
实际上，主要问题是您在自定义适配器的 getView() 方法中大多数 if 条件语句中没有添加else条件语句。
比如：

  1. put else here

    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. Add else statement in your all if-else if statement for list item row views. Either make them gone in visibility or assign blank text or default images.

更新：由于列表行的引用视图，我对这种情况表示怀疑。

请移除此代码。

 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);
谢谢你的回答！我刚刚更新了我的ArrayAdapter并且会在我的问题中放一个编辑版本。不幸的是，这并没有解决我所得到的行为！我获得的调用比之前少了一点！ - Fergers
它真的有效！我得到了52个调用我的getView方法，图片加载时没有任何奇怪的行为！谢谢！ - Fergers
嗨@user370305，我发现这个解决了我的问题，我已经点赞了问题和答案，但是使用这段代码后listView的滑动不太流畅。如何使其更加流畅？ 注意：无条件地从视图适配器中进行布局膨胀：应该使用View Holder模式（将回收的视图作为第二个参数传递到此方法中）以实现更平滑的滚动... 在实现视图适配器时，应避免无条件地膨胀新布局；如果可以重复使用可用项，则应尝试使用该项。这有助于使例如ListView滚动更加流畅。 - Faisal
1

我刚刚花了几个小时来解决我的列表视图异步加载每一行的图片时为什么会出现这种情况。结果发现，列表视图在XML中必须设置“match_parent”来设置宽度和高度。真是一个奇怪和诡异的bug。

谢谢，你的解决方案完美无缺。你已经弄清楚为什么设置布局宽度为wrap content会发生这种情况了吗？ - Searock
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接