在Android中创建动态Shelfview?






4.78/5 (8投票s)
在本文中,您可以看到一个显示书架视图的程序。这个书架视图有两个特点。首先,创建一个包含另一个列表视图的 ListView。其次,内部 ListView 允许您水平移动项目。
引言
如您所知,Android 不支持具有水平视图功能的 ListView
。有一种方法可以将其制作成 gallery
或 TableLayout
(您可以在这里看到我的技巧)。当然,我将描述它们。

背景
请注意,在此应用程序中,我使用了两个类
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"。
我已经尝试完整地描述我的项目,我希望这个项目对您有用。