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

时间:2014-09-18 13:41:02

标签: android xml image android-fragments android-listview

我有一个我似乎无法解决的问题。不知道以前是否曾经问过,我可能错过了它。

概述: 我目前在一家公司担任实习生Android开发人员(android经验+/- 3个月)。我得到了一个测试项目 对我来说学习android。测试项目是关于一个新闻网站/应用程序,你可以从JSON获得文章,当点击文章时, 你得到另一个片段的完整文章。在完整文章中,您可以将文章保存为收藏夹(存储在sqlite DB中)。 另一个片段从数据库中获取收藏夹,并将其显示在列表视图中,该列表视图包含1个图像视图,3个文本视图和1个图像按钮。

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

  1. 如果只有1行,则图像显示正确,不会发生改组。
  2. 当列表视图中有1行以上时,第一行的图像会循环 在正确分配/填充之前,通过所有行的图像 图像到各自的行/文章。图像循环大约需要1-2秒。
  3. 下面是我的listview布局xml,片段布局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" />
    

    片段布局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);
        }
    }
    }
    

    任何人都可以帮我解决这个问题。

1 个答案:

答案 0 :(得分: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); 
    }
}