android - 具有多个元素( ImageView )重叠的 ListView

Question

陷入困惑我必须为平板电脑做书架。其中有一排书。所以我打算使用 ListView 。我不想在 GridView 中进行操作，因为背景图像无法随项目一起滚动。所以我没时间了。所以想到使用 ListView 。我可以展示书架上的书。但是书架上的书的图像重叠了。请帮我解决这个问题。任何帮助对我来说都非常有值(value)。

代码有点长，和其他 ListView 一样。所以我猜它来自 getview 方法。所以你可以直接检查那部分。其余代码供您引用另请注意随附的快照。

请检查以下代码:

/*
 * Number of books in array - totalBooks
 * To display number of books in one row - bookItem
 * Quotient (Number of rows will hold books) -  numberOfBookRows
 * Reminder (Number of extra books in row) - extraBooks  
 */

import java.util.ArrayList;

import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.view.ViewGroup.LayoutParams;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.ImageView.ScaleType;
import android.widget.LinearLayout;
import android.widget.ListView;

public class BookShelf extends Activity {

    private static final String TAG = "Book-shelf";
    //calculation
    private int totalBooks = 0;
    private int bookItem = 0;
    private int numberOfBookRows = 0;
    private int extraBooks = 0;

    private ArrayAdapter<String> adapter;
    private ListView listview;

    private String[] bookName = new String[5];
    private int[] bookImage = new int[5];

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.book_shelf);

        // THIS ARE STATIC CONTENT

        // Title of book
        bookName[0] = "EMF";
        bookName[1] = "Ganddhi";
        bookName[2] = "The Code";
        bookName[3] = "The Code";
        bookName[4] = "The Code";

        // Image for book
        bookImage[0] = R.drawable.book1;
        bookImage[1] = R.drawable.book2;
        bookImage[2] = R.drawable.book3;
        bookImage[3] = R.drawable.book3;
        bookImage[4] = R.drawable.book1;

        listview = (ListView) findViewById(R.id.list);
        calculateRowsAndColms();
        adapter = new MyCustomAdapter(BookShelf.this, R.layout.book_shelf_row);
        listview.setAdapter(adapter);
        addEmptyRow(5);
    }

    public void calculateRowsAndColms(){
        totalBooks = 0;
        bookItem = 0;
        numberOfBookRows = 0;
        extraBooks = 0;

        totalBooks = bookName.length;
        bookItem = 3;//TODO: make it dynamic
        if(totalBooks < bookItem && totalBooks > 0){
            numberOfBookRows = 1;
        }else{
            numberOfBookRows = (totalBooks/bookItem);
            extraBooks = (totalBooks % bookItem);
            if( extraBooks != 0)
                 numberOfBookRows++;
        }

        Log.d(TAG," Total books:"+totalBooks);
        Log.d(TAG," Number of books to be displayed:"+bookItem);
        Log.d(TAG," Number of rows occupying the books:"+numberOfBookRows);
        Log.d(TAG," Number of extra books(odd count):"+extraBooks);
    }

    public void addEmptyRow(int count) {

        LinearLayout ll_addRows = (LinearLayout) findViewById(R.id.add_rows);
        LayoutParams params = new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT,
                LayoutParams.WRAP_CONTENT);
        count = count * 2;
        for (int i = 0; i < count; i++) {

            ImageView bg = new ImageView(this);
            bg.setImageResource(R.drawable.book_shelf_bgdub);
            bg.setLayoutParams(params);
            bg.setScaleType(ScaleType.FIT_XY);

            ImageView border = new ImageView(this);
            border.setImageResource(R.drawable.book_shelf_border_dub);
            border.setLayoutParams(params);
            border.setScaleType(ScaleType.FIT_XY);

            Log.d(TAG, "i:" + i);
            if (i % 2 == 0)
                ll_addRows.addView(bg, i);
            else
                ll_addRows.addView(border, i);
            Log.d(TAG, "i:" + i);
        }
    }

    public class MyCustomAdapter extends ArrayAdapter {

        Context context;
        int rowXmlId;

        public MyCustomAdapter(Context context, int textViewResourceId) {
            super(context, textViewResourceId);
            rowXmlId = textViewResourceId;
            this.context = context;

        }

        @Override
        public int getCount() {
            return numberOfBookRows;
        }

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            Log.d(TAG, " POSITION:" + position);

            ViewHolder holder;
            View v = convertView;
            if (convertView == null) {
                holder = new ViewHolder();
                LayoutInflater mInflater = (LayoutInflater) context
                        .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
                v = mInflater.inflate(rowXmlId, null, false);

                ImageView image1 = (ImageView) v.findViewById(R.id.image1);
                ImageView image2 = (ImageView) v.findViewById(R.id.image2);
                ImageView image3 = (ImageView) v.findViewById(R.id.image3);

                holder.imgList.add(image1);
                holder.imgList.add(image2);
                holder.imgList.add(image3);
                v.setTag(holder);

            } else {
                holder = (ViewHolder) v.getTag();
            }


            if( (position == numberOfBookRows-1) &&  extraBooks!=0)
                for(int i=0; i<extraBooks; i++){ 
                    int k = (position * bookItem)+i;
                    holder.imgList.get(i).setBackgroundResource(bookImage[k]);
                    holder.imgList.get(i).setOnClickListener(new OnBookClickListner());
                    holder.imgList.get(i).setVisibility(View.VISIBLE);
                    holder.imgList.get(i).setId(k);

                    Log.d(TAG,"============> k:"+k+" i:"+i+" id:"+holder.imgList.get(i).getId());
                }
            else
                for(int i=0; i<bookItem; i++){
                    int k = (position * bookItem)+i;
                    holder.imgList.get(i).setBackgroundResource(bookImage[k]);
                    holder.imgList.get(i).setOnClickListener(new OnBookClickListner());
                    holder.imgList.get(i).setVisibility(View.VISIBLE);
                    holder.imgList.get(i).setId(k);

                    Log.d(TAG,"============> k:"+k+" i:"+i+" id:"+holder.imgList.get(i).getId());
                }

            return v;
        }
    }

    static class ViewHolder {
        ArrayList<ImageView> imgList = new ArrayList<ImageView>();
        //ImageView image1, image2 ,image3;
    }

    public class OnBookClickListner implements OnClickListener{

        @Override
        public void onClick(View v) {
            Log.d(TAG, " ITEM SELECTED IN LIST VIEW:"+v.getId());
            Intent intent = new Intent(BookShelf.this, MyLessons.class);
            startActivity(intent);
        }

    }
}

附上xml如下:book_shelf.xml这是主要的 xml，它有列表，并在列表的开头和开头为书架添加了一些边框。这里什么也没做。仅使用此 xml 中的列表。

<?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="match_parent"
android:orientation="vertical" >

<ImageView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/book_shelf_top_border" />

<ListView
    android:id="@+id/list"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:divider="@drawable/book_shelf_border_dub" >
</ListView>

<ImageView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/book_shelf_border_dub" />

<LinearLayout
    android:id="@+id/add_rows"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical" >
</LinearLayout>

下面的xml book_shelf_row.xml我用这个 xml 来表示一行。

<?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="match_parent"
android:background="@drawable/book_shelf_bgdub"
android:orientation="horizontal" >

<View
    android:layout_width="50dp"
    android:layout_height="120dp" />

<ImageView
    android:id="@+id/image1"
    android:layout_width="100dp"
    android:layout_height="120dp"
    android:layout_gravity="bottom"
    android:src="@drawable/book1"
    android:visibility="invisible" />

<View
    android:layout_width="100dp"
    android:layout_height="120dp" />

<ImageView
    android:id="@+id/image2"
    android:layout_width="100dp"
    android:layout_height="120dp"
    android:layout_gravity="bottom"
    android:src="@drawable/book2"
    android:visibility="invisible" />

<View
    android:layout_width="100dp"
    android:layout_height="120dp" />

<ImageView
    android:id="@+id/image3"
    android:layout_width="100dp"
    android:layout_height="120dp"
    android:layout_gravity="bottom"
    android:src="@drawable/book3"
    android:visibility="invisible" />

</LinearLayout>

每个 ImageView 都将保存这本书的图像。

下面是截图。书籍图像如何重叠。

图中分别可以看到R.drawable.book1到book3。在第一行和第二行中，它的自拍图像都被替换了。如果你深入观察图像。第一行的第一张图片。重叠两次。我不明白为什么会这样。你能帮我解决这个问题吗？任何帮助表示赞赏。谢谢。

Answer 1

好的，问题解决了。在 book_shelf_row.xml 中， ImageView 具有背景图像。所以图像是重叠的当涉及动态时。

结论:去掉imageview的src属性。由于我们在代码中动态更改 src 属性。