android書架效果實現原理與代碼

以前也模仿者ireader實現了書架的效果，但是那種是使用listview實現的，並不好用。絕大多數都是用gridview實現的，網上這方面資料比較少，有些開源的電子書都是重點做了閱讀，並沒有像ireader和QQ閱讀這樣的書架效果。

書架這種效果我早就實現了，本來想做一個完美的電子書，但是因為自己的懶惰，僅僅持續了一兩天，今天又找到了以前的代碼分享出來，希望大家能一起實現一個比較完美的開源的電子書。廢話不多說先看下效果：
 
本地部分還沒有做，做好以後就可以吧本地的書加載到書架裡了，這只是一個開始，後面還有很多復雜的沒有做。
下面先看一下書架的實現原理吧！
首先看一下layout下的布局文件main.xml
代碼如下：

<?xmlversion="1.0"encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<includelayout="@layout/head"android:id="@+id/head"/>
<cn.com.karl.view.MyGridView
android:id="@+id/bookShelf"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="@id/head"
android:cacheColorHint="#00000000"
android:columnWidth="90.0dip"
android:fadingEdge="none"
android:horizontalSpacing="5dp"
android:listSelector="#00000000"
android:numColumns="3"
android:scrollbars="none"
android:verticalSpacing="20dp"/>

<SlidingDrawer
android:id="@+id/sliding"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:content="@+id/allApps"
android:handle="@+id/imageViewIcon"
android:orientation="vertical">

<Button
android:id="@+id/imageViewIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="本地"
android:textSize="18dp"
android:background="@drawable/btn_local"/>
<GridView
android:id="@+id/allApps"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/file_list_bg"
android:columnWidth="60dp"
android:gravity="center"
android:horizontalSpacing="10dp"
android:numColumns="auto_fit"
android:padding="10dp"
android:stretchMode="columnWidth"
android:verticalSpacing="10dp"/>
</SlidingDrawer>
</RelativeLayout>

上面是個自定義的gridview主要來實現書架，因為每一本書是一個item，在自定義的gridview中計算每一行的高度，然後把書架畫上去。下面是個抽屜。
代碼如下：

publicclassMyGridViewextendsGridView{
privateBitmapbackground;
publicMyGridView(Contextcontext,AttributeSetattrs){
super(context,attrs);
background=BitmapFactory.decodeResource(getResources(),
R.drawable.bookshelf_layer_center);
}
@Override
protectedvoiddispatchDraw(Canvascanvas){
intcount=getChildCount();
inttop=count>0?getChildAt(0).getTop():0;
intbackgroundWidth=background.getWidth();
intbackgroundHeight=background.getHeight()+2;
intwidth=getWidth();
intheight=getHeight();
for(inty=top;y<height;y+=backgroundHeight){
for(intx=0;x<width;x+=backgroundWidth){
canvas.drawBitmap(background,x,y,null);
}
}
super.dispatchDraw(canvas);
}
}

上面就是自定義書架的gridview，也是實現書架最核心的方法。
然後是每一個item的布局：
代碼如下：

<?xmlversion="1.0"encoding="utf-8"?>
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:orientation="vertical">
<TextView
android:layout_height="110dp"
android:layout_width="90dp"
android:layout_marginTop="10dp"
android:background="@drawable/cover_txt"
android:id="@+id/imageView1"
android:text="天龍八部"
android:padding="15dp"
android:textColor="#000000"
/>
</LinearLayout>

最後就可以在主activity中顯示出來了。
代碼如下：

publicclassBookShelfActivityextendsBaseActivity{
privateGridViewbookShelf;
privateint[]data={
R.drawable.cover_txt,R.drawable.cover_txt,R.drawable.cover_txt,R.drawable.cover_txt,R.drawable.cover_txt,
R.drawable.cover_txt,R.drawable.cover_txt,R.drawable.cover_txt,R.drawable.cover_txt,R.drawable.cover_txt,
R.drawable.cover_txt,R.drawable.cover_txt,R.drawable.cover_txt,R.drawable.cover_txt,
R.drawable.cover_txt,R.drawable.cover_txt,R.drawable.cover_txt,R.drawable.cover_txt,
R.drawable.cover_txt,R.drawable.cover_txt,R.drawable.cover_txt,R.drawable.cover_txt,
R.drawable.cover_txt,R.drawable.cover_txt,R.drawable.cover_txt,R.drawable.cover_txt,
R.drawable.cover_txt,R.drawable.cover_txt,R.drawable.cover_txt,R.drawable.cover_txt,
R.drawable.cover_txt,R.drawable.cover_txt,R.drawable.cover_txt,R.drawable.cover_txt

};
privateString[]name={
"天龍八部","搜神記","水浒傳","黑道悲情"
};
privateGridViewgv;
privateSlidingDrawersd;
privateButtoniv;
privateList<ResolveInfo>apps;
/**Calledwhentheactivityisfirstcreated.*/
@Override
publicvoidonCreate(BundlesavedInstanceState){
super.onCreate(savedInstanceState);
this.requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.main);
bookShelf=(GridView)findViewById(R.id.bookShelf);
ShlefAdapteradapter=newShlefAdapter();
bookShelf.setAdapter(adapter);
bookShelf.setOnItemClickListener(newOnItemClickListener(){
@Override
publicvoidonItemClick(AdapterView<?>arg0,Viewarg1,intarg2,
longarg3){
//TODOAuto-generatedmethodstub
if(arg2>=data.length){

}else{
Toast.makeText(getApplicationContext(),""+arg2,Toast.LENGTH_SHORT).show();
}
}
});
loadApps();
gv=(GridView)findViewById(R.id.allApps);
sd=(SlidingDrawer)findViewById(R.id.sliding);
iv=(Button)findViewById(R.id.imageViewIcon);
gv.setAdapter(newGridAdapter());
sd.setOnDrawerOpenListener(newSlidingDrawer.OnDrawerOpenListener()//開抽屜
{
@Override
publicvoidonDrawerOpened(){
iv.setText("返回");
iv.setBackgroundResource(R.drawable.btn_local);//響應開抽屜事件
//，把圖片設為向下的
}
});
sd.setOnDrawerCloseListener(newSlidingDrawer.OnDrawerCloseListener(){
@Override
publicvoidonDrawerClosed(){
iv.setText("本地");
iv.setBackgroundResource(R.drawable.btn_local);//響應關抽屜事件
}
});
}
classShlefAdapterextendsBaseAdapter{
@Override
publicintgetCount(){
//TODOAuto-generatedmethodstub
returndata.length+5;
}
@Override
publicObjectgetItem(intarg0){
//TODOAuto-generatedmethodstub
returnarg0;
}
@Override
publiclonggetItemId(intarg0){
//TODOAuto-generatedmethodstub
returnarg0;
}
@Override
publicViewgetView(intposition,ViewcontentView,ViewGrouparg2){
//TODOAuto-generatedmethodstub

contentView=LayoutInflater.from(getApplicationContext()).inflate(R.layout.item1,null);

TextViewview=(TextView)contentView.findViewById(R.id.imageView1);
if(data.length>position){
if(position<name.length){
view.setText(name[position]);
}
view.setBackgroundResource(data[position]);
}else{
view.setBackgroundResource(data[0]);
view.setClickable(false);
view.setVisibility(View.INVISIBLE);
}
returncontentView;
}

}
@Override
publicbooleanonKeyDown(intkeyCode,KeyEventevent){
//TODOAuto-generatedmethodstub
if(keyCode==KeyEvent.KEYCODE_BACK){
AlertDialog.Builderbuilder=newAlertDialog.Builder(this);
builder.setMessage("你確定退出嗎？")
.setCancelable(false)
.setPositiveButton("確定",
newDialogInterface.OnClickListener(){
publicvoidonClick(DialogInterfacedialog,
intid){
finish();
}
})
.setNegativeButton("返回",
newDialogInterface.OnClickListener(){
publicvoidonClick(DialogInterfacedialog,
intid){
dialog.cancel();
}
});
AlertDialogalert=builder.create();
alert.show();
returntrue;
}
returnsuper.onKeyDown(keyCode,event);
}
privatevoidloadApps(){
Intentintent=newIntent(Intent.ACTION_MAIN,null);
intent.addCategory(Intent.CATEGORY_LAUNCHER);
apps=getPackageManager().queryIntentActivities(intent,0);
}
publicclassGridAdapterextendsBaseAdapter{
publicGridAdapter(){
}
publicintgetCount(){
//TODOAuto-generatedmethodstub
returnapps.size();
}
publicObjectgetItem(intposition){
//TODOAuto-generatedmethodstub
returnapps.get(position);
}
publiclonggetItemId(intposition){
//TODOAuto-generatedmethodstub
returnposition;
}
publicViewgetView(intposition,ViewconvertView,ViewGroupparent){
//TODOAuto-generatedmethodstub
ImageViewimageView=null;
if(convertView==null){
imageView=newImageView(BookShelfActivity.this);
imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);
imageView.setLayoutParams(newGridView.LayoutParams(50,50));
}else{
imageView=(ImageView)convertView;
}
ResolveInfori=apps.get(position);
imageView.setImageDrawable(ri.activityInfo
.loadIcon(getPackageManager()));
returnimageView;
}
}
}

代碼寫的有點亂，有待整理下，哈哈。
上面只是一個畫龍點睛的作用，真要實現一個好的電子書，後面還有跟多的工作，也希望有興趣的朋友能在此基礎上實現一個完美的電子書，然後把源代碼開放，這樣我就不用在往下做了，嘎嘎。