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