高仿iReader书架效果

阅读过电子书的朋友相信对iReader都是比较熟悉的，iReader的书架做的非常漂亮，以前总以为是使用了2D画图做的呢，今天反编译了一下才明白原来是用图片拼接起来的，这样就OK了，今天我就带大家实现一个iReader书架。

首先看一下layout下main.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" >

	<RelativeLayout
		android:layout_width="fill_parent"
		android:layout_height="wrap_content"
		android:background="@drawable/bookshelf_header_bg" >

		<ImageView
			android:id="@+id/shelf_image_title"
			android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:layout_centerInParent="true"
			android:background="@drawable/bookshelf_header_logo" />

		<Button
			android:id="@+id/shelf_image_button"
			android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:layout_alignParentRight="true"
			android:background="@drawable/bookshelf_goto_bookcity_f" />
	</RelativeLayout>

	<ListView
		android:id="@+id/shelf_list"
		android:layout_width="fill_parent"
		android:layout_height="fill_parent"
		android:scrollbars="none"
		android:divider="#00000000"
		android:cacheColorHint="#00000000"/>

</LinearLayout>

由于书架是用图片拼成的，所以每一个行的数据框都是一个listview ， 看一些listview对应的item布局：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="fill_parent"
	android:layout_height="fill_parent" >

	<ImageView
		android:id="@+id/shelf_image_left"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:layout_alignParentLeft="true"
		android:layout_centerVertical="true"
		android:background="@drawable/bookshelf_layer_left" />

	<LinearLayout
		android:id="@+id/linearLayout1"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:layout_centerVertical="true"
		android:layout_toLeftOf="@+id/shelf_image_right"
		android:layout_toRightOf="@+id/shelf_image_left"
		android:background="@drawable/bookshelf_layer_center"
		android:orientation="horizontal" >

		<LinearLayout
			android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:layout_weight="1"
			android:gravity="center_horizontal" >

			<Button
				android:id="@+id/button_1"
				android:layout_width="80dip"
				android:layout_height="110dip"
				android:layout_marginTop="15dip"
				android:background="@drawable/default_cover" />
		</LinearLayout>

		<LinearLayout
			android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:layout_weight="1"
			android:gravity="center_horizontal" >

			<Button
				android:id="@+id/button_2"
				android:layout_width="80dip"
				android:layout_height="110dip"
				android:layout_marginTop="15dip"
				android:background="@drawable/default_cover" />
		</LinearLayout>

		<LinearLayout
			android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:layout_weight="1"
			android:gravity="center_horizontal" >

			<Button
				android:id="@+id/button_3"
				android:layout_width="80dip"
				android:layout_height="110dip"
				android:layout_marginTop="15dip"
				android:background="@drawable/default_cover" />
		</LinearLayout>
	</LinearLayout>

	<ImageView
		android:id="@+id/shelf_image_right"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:layout_alignParentRight="true"
		android:layout_centerVertical="true"
		android:background="@drawable/bookshelf_layer_right" />

</RelativeLayout>

最后是把item绑定到listview中：

package cn.com.karl.reader;

import android.app.Activity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.widget.BaseAdapter;
import android.widget.ListView;

public class IReaderActivity extends Activity {
	/** Called when the activity is first created. */
	private ListView shelf_list;
	// 书架的列数
    int[] size = new int[5];

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		this.requestWindowFeature(Window.FEATURE_NO_TITLE);
		setContentView(R.layout.main);

		shelf_list = (ListView) findViewById(R.id.shelf_list);
		
		ShelfAdapter adapter = new ShelfAdapter();
		shelf_list.setAdapter(adapter);
	}

	public class ShelfAdapter extends BaseAdapter {
		

		@Override
		public int getCount() {
			// TODO Auto-generated method stub
			return size.length;
		}

		@Override
		public Object getItem(int position) {
			// TODO Auto-generated method stub
			return size[position];
		}

		@Override
		public long getItemId(int position) {
			// TODO Auto-generated method stub
			return position;
		}

		@Override
		public View getView(int position, View convertView, ViewGroup parent) {
			// TODO Auto-generated method stub
			View layout = LayoutInflater.from(getApplicationContext()).inflate(
					   R.layout.list_item, null);
		
			return layout;
		}

	}

}

每一本书对应的点击事件这里并没有做，相信大家可以实现，OK，下面看一下运行后效果：