快捷導(dǎo)航

android書(shū)架效果實(shí)現(xiàn)原理與代碼

更新時(shí)間：2013年01月02日 16:28:13 作者：

以前也模仿者ireader實(shí)現(xiàn)了書(shū)架的效果，但是那種是使用listview實(shí)現(xiàn)的，并不好用,今天介紹android書(shū)架效果實(shí)現(xiàn)方法

以前也模仿者ireader實(shí)現(xiàn)了書(shū)架的效果，但是那種是使用listview實(shí)現(xiàn)的，并不好用。絕大多數(shù)都是用gridview實(shí)現(xiàn)的，網(wǎng)上這方面資料比較少，有些開(kāi)源的電子書(shū)都是重點(diǎn)做了閱讀，并沒(méi)有像ireader和QQ閱讀這樣的書(shū)架效果。

書(shū)架這種效果我早就實(shí)現(xiàn)了，本來(lái)想做一個(gè)完美的電子書(shū)，但是因?yàn)樽约旱膽卸?，僅僅持續(xù)了一兩天，今天又找到了以前的代碼分享出來(lái)，希望大家能一起實(shí)現(xiàn)一個(gè)比較完美的開(kāi)源的電子書(shū)。廢話不多說(shuō)先看下效果：

本地部分還沒(méi)有做，做好以后就可以吧本地的書(shū)加載到書(shū)架里了，這只是一個(gè)開(kāi)始，后面還有很多復(fù)雜的沒(méi)有做。
下面先看一下書(shū)架的實(shí)現(xiàn)原理吧！
首先看一下layout下的布局文件main.xml

復(fù)制代碼代碼如下:

 
<?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> 

上面是個(gè)自定義的gridview主要來(lái)實(shí)現(xiàn)書(shū)架，因?yàn)槊恳槐緯?shū)是一個(gè)item，在自定義的gridview中計(jì)算每一行的高度，然后把書(shū)架畫(huà)上去。下面是個(gè)抽屜。

復(fù)制代碼代碼如下:

 
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); 
} 
} 

上面就是自定義書(shū)架的gridview，也是實(shí)現(xiàn)書(shū)架最核心的方法。
然后是每一個(gè)item的布局：

復(fù)制代碼代碼如下:

 
<?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中顯示出來(lái)了。

復(fù)制代碼代碼如下:

 
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()//開(kāi)抽屜 
{ 
@Override 
publicvoidonDrawerOpened(){ 
iv.setText("返回"); 
iv.setBackgroundResource(R.drawable.btn_local);//響應(yīng)開(kāi)抽屜事件 
//，把圖片設(shè)為向下的 
} 
}); 
sd.setOnDrawerCloseListener(newSlidingDrawer.OnDrawerCloseListener(){ 
@Override 
publicvoidonDrawerClosed(){ 
iv.setText("本地"); 
iv.setBackgroundResource(R.drawable.btn_local);//響應(yīng)關(guān)抽屜事件 
} 
}); 
} 
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; 
} 
} 
} 

代碼寫(xiě)的有點(diǎn)亂，有待整理下，哈哈。
上面只是一個(gè)畫(huà)龍點(diǎn)睛的作用，真要實(shí)現(xiàn)一個(gè)好的電子書(shū)，后面還有跟多的工作，也希望有興趣的朋友能在此基礎(chǔ)上實(shí)現(xiàn)一個(gè)完美的電子書(shū)，然后把源代碼開(kāi)放，這樣我就不用在往下做了，嘎嘎。

您可能感興趣的文章: