65.9K
CodeProject 正在变化。 阅读更多。
Home

在Android中创建动态Shelfview?

starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.78/5 (8投票s)

2012年5月22日

CPOL

3分钟阅读

viewsIcon

86496

downloadIcon

4389

在本文中,您可以看到一个显示书架视图的程序。这个书架视图有两个特点。首先,创建一个包含另一个列表视图的 ListView。其次,内部 ListView 允许您水平移动项目。

引言

如您所知,Android 不支持具有水平视图功能的 ListView。有一种方法可以将其制作成 galleryTableLayout(您可以在这里看到我的技巧)。当然,我将描述它们。

背景

请注意,在此应用程序中,我使用了两个类

  • HorizontalListView 类,它扩展了 AdapterView。它已从 GitHub 下载。
  • Quaere 库的使用方式几乎与 .NET 中的 Linq2Object 相同。您可以从 此处下载它。

其他方法

在这里,我想描述显示书架视图的其他方法(我的意思是 listview,它可以在每一行显示多个项目,并且每一行可以水平滚动)。

第一种方法 - Gallery

在 "main.xml" 文件中,我们只编写一个带有 ID 的 LinearLayout。然后,在 Java 类中,尝试创建一个多画廊,并将每个画廊插入到 LinearLayout 中,每个画廊都扮演行的角色

public class MainActivity extends Activity {	
	//---the images to display---
    Integer[] imageIDs = {
            R.drawable.pic1,
            R.drawable.pic2,
            R.drawable.pic3,
            R.drawable.pic4,
            R.drawable.pic5,
            R.drawable.pic6,
            R.drawable.pic7                    
    };
    
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        for(int i = 0; i < 5 ; i++){
		Gallery gallery = (Gallery) findViewById(R.id.gallery1);
		gallery.setAdapter(new ImageAdapter(this));
        }        
    }
    
    public class ImageAdapter extends BaseAdapter 
    {
        private Context context;
        private int itemBackground;
 
        public ImageAdapter(Context c) 
        {
            context = c;
            //---setting the style---
            TypedArray a = obtainStyledAttributes(R.styleable.Gallery1);
            itemBackground = a.getResourceId(
                R.styleable.Gallery1_android_galleryItemBackground, 0);
            a.recycle();                    
        }
 
        //---returns the number of images---
        public int getCount() {
            return imageIDs.length;
        } 
        
        //---returns the ID of an item--- 
        public Object getItem(int position) {
            return position;
        }            
        
        //---returns the ID of an item---         
        public long getItemId(int position) {
            return position;
        }
  
        //---returns an ImageView view---
        public View getView(int position, View convertView, ViewGroup parent) {
            ImageView imageView = new ImageView(context);
            imageView.setImageResource(imageIDs[position]);
            imageView.setScaleType(ImageView.ScaleType.FIT_XY);
            imageView.setLayoutParams(new Gallery.LayoutParams(150, 120));
            imageView.setBackgroundResource(itemBackground);
 
            return imageView;
        }
    }    
}

这种方法存在一些问题,一个与项目视图位置相关的问题是,它出现在显示器的中心,我无法解决它。

第二种方法 - TableLayout

这已经在这个技巧中得到了充分描述。当然,它也有一些问题,例如它不支持像 AdapterView 那样的虚拟化。

开始

现在,我们想介绍一种新方法,它与上述方法相比具有以下优点

  • 支持虚拟化
  • 使用数组适配器而不是循环语句来创建项目列表
  • 每一行都可以分离其他行

在做任何其他事情之前,请添加 Quaere 库。

在我们的示例中,您将为项目、行和基本方案定义您的布局,并在您的适配器或其他地方使用它。我们想规划两个列表视图 - 第一个列表视图(我们称之为子 ListView)水平显示,第二个列表视图(我们称之为父 ListView)包含多个子 ListView 并垂直滚动。

在项目的 "res/layout" 文件夹中创建 "item.xml" 布局文件。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
 
    <ImageView
        android:id="@+id/icon"
        android:layout_width="80dip"
        android:layout_height="100dip"
        android:paddingLeft="10dip"
        android:src="@drawable/book" />
 
    <TextView
        android:id="@+id/title"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:text="Simple"
        android:textColor="#000"
        android:textSize="15px" />
 
    <TextView
        android:id="@+id/author"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:text="Simple"
        android:textColor="#000"
        android:textSize="15px" />
</LinearLayout> 

"item.xml" 布局文件用于子 ListView。现在,在项目的 "res/layout" 文件夹中创建 "row.xml" 布局文件。"row.xml" 从 HorizontalListView 类定义一个新的 listview,而不是一个通用的 ListView

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
 
    <com.onazifi.shelf.HorizontalListView
        android:id="@+id/subListview"
        android:layout_width="fill_parent"
        android:layout_height="130dip"
        android:background="@drawable/shelf1" />
</LinearLayout> 

请注意,我写了 "com.onazifi.shelf. ",它与我的项目文件夹有关,如果您使用它,请更改其地址。

好的,创建 "main.xml" 文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" 
    android:id="@+id/lineLayout">
 
    <ListView
        android:id="@+id/android:list"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />
</LinearLayout>

创建 BookItem 类用于映射项目的组件,并创建 Library 类用于创建 BookItem 列表。在这个类中,有一个 "groupbyArrayBookItem" 方法用于对项目列表进行分组。此方法使用 quaere 库进行分组。该库的作用类似于 .NET 中的 LINQ。

 public class Library {
 
	private ArrayList<BookItem> arrayBookItem;
	public static final int AUTHOR = 1;
	public static final int TITLE = 2;
	public static final int RATE = 3;
	public static final int DOWNLOAD_DATE = 4;
 
	public Library() {
		arrayBookItem = new ArrayList<BookItem>();
	}
 
	public void setColectionBookItem(ArrayList<BookItem> _array) {
		this.arrayBookItem = _array;
	}
 
	public void addBookItem(BookItem _bi) {
		this.arrayBookItem.add(_bi);
	}
 
	public ArrayList<ArrayList<BookItem>> groupbyArrayBookItem(int type) {
 
		BookItem[] books = BookItem.ALL_BOOKS;
		ArrayList<ArrayList<BookItem>> groupList = 
				new ArrayList<ArrayList<BookItem>>();
		String getType = "";
		
		switch (type) {
		case AUTHOR:
			getType = "bookitem.getAuthor()";
			break;
		case TITLE:
			getType = "bookitem.getTitle()";
			break;
		case DOWNLOAD_DATE:
			getType = "bookitem.getDownloadDate()";
			break;
		case RATE:
			getType = "bookitem.getRate()";
			break;
		default:
			return groupList;
		}
 
		/*
		 * books is a object of BookItem
		 * bookitem is item for point to list
		 * getType is a string value for set type of grouping
		 * groupbyArrayBookItem return back array of array of items
		 */
		Iterable<Group> groups = 
				from("bookitem").in(books).group("bookitem")
				.by(getType).into("g").select("g");
 
		for (Group group : groups) {
			ArrayList<BookItem> obj = new ArrayList<BookItem>();
			for (Object Item : group.getGroup()) {
				obj.add((BookItem) Item);
			}
			groupList.add(obj);
		}
		return groupList;
	}
}

最后,调查 ShelfViewActivity 类。在这个类中,我们调用 library 类来获取项目数组的数组。然后将适配器父数组列表设置为父 ListView,并在适配器类中,调用另一个适配器类以在子 ListView 中创建项目列表。

 public class ShelfViewActivity extends ListActivity {
	/** Called when the activity is first created. */
	private VerticalAdapter verListAdapter;
 
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
 
		/*
		 * Calling Library & BookItem classes for create list of groups
		 *  groupbyArrayBookItem return back array of array of items
		 */
		Library lb = new Library();
		for (BookItem item : BookItem.ALL_BOOKS) {
			lb.addBookItem(item);
		}
		ArrayList<ArrayList<BookItem>> groupList = 
				new ArrayList<ArrayList<BookItem>>();
		groupList = lb.groupbyArrayBookItem(Library.AUTHOR);
 
		verListAdapter = new VerticalAdapter(this, R.layout.row, groupList);
		setListAdapter(verListAdapter);
 
		verListAdapter.notifyDataSetChanged();
	}
 
	/**
	 * This class add a list of ArrayList to ListView that it include multi
	 * items as bookItem.
	 */
	private class VerticalAdapter extends ArrayAdapter<ArrayList<BookItem>> {
 
		private int resource;
 
		public VerticalAdapter(Context _context, int _ResourceId,
				ArrayList<ArrayList<BookItem>> _items) {
			super(_context, _ResourceId, _items);
			this.resource = _ResourceId;
		}
 
		@Override
		public View getView(int position, View convertView, ViewGroup parent) {
			View rowView;
 
			if (convertView == null) {
				rowView = LayoutInflater.from(getContext()).inflate(resource,
						null);
			} else {
				rowView = convertView;
			}
 
			HorizontalListView hListView = (HorizontalListView) rowView
					.findViewById(R.id.subListview);
			HorizontalAdapter horListAdapter = new HorizontalAdapter(
					getContext(), R.layout.item, getItem(position));
			hListView.setAdapter(horListAdapter);
 
			return rowView;
		}
	}
 
	/*
	 * This class add some items to Horizontal ListView this ListView include
	 * several bookItem.
	 */
	private class HorizontalAdapter extends ArrayAdapter<BookItem> {
 
		private int resource;
 
		public HorizontalAdapter(Context _context, int _textViewResourceId,
				ArrayList<BookItem> _items) {
			super(_context, _textViewResourceId, _items);
			this.resource = _textViewResourceId;
		}
 
		@Override
		public View getView(int position, View convertView, ViewGroup parent) {
			View retval = LayoutInflater.from(getContext()).inflate(
					this.resource, null);
 
			TextView topText = (TextView) retval.findViewById(R.id.title);
			TextView bottomText = (TextView) retval
					.findViewById(R.id.author);
 
			topText.setText(getItem(position).getAuthor());
			bottomText.setText(getItem(position).getTitle());
 
			return retval;
		}
	}
}

摘要

如果您注意源代码,您将学习如何创建从 Android 基类扩展的新类。

请注意,有用于在 "res/drawable" 中显示的图像。此外,此项目已在 Android 4.0 中编码,并且 android:minSdkVersion="14"

我已经尝试完整地描述我的项目,我希望这个项目对您有用。

© . All rights reserved.