高仿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，下面看一下运行后效果：