阅读过电子书的朋友相信对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,下面看一下运行后效果: