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;

}

}

}

代码写的有点乱,有待整理下,哈哈。

上面只是一个画龙点睛的作用,真要实现一个好的电子书,后面还有跟多的工作,也希望有兴趣的朋友能在此基础上实现一个完美的电子书,然后把源代码开放,这样我就不用在往下做了,嘎嘎。

时间: 2024-10-25 02:57:56

android书架效果实现原理与代码的相关文章

android书架效果实现原理与代码_Android

以前也模仿者ireader实现了书架的效果,但是那种是使用listview实现的,并不好用.绝大多数都是用gridview实现的,网上这方面资料比较少,有些开源的电子书都是重点做了阅读,并没有像ireader和QQ阅读这样的书架效果. 书架这种效果我早就实现了,本来想做一个完美的电子书,但是因为自己的懒惰,仅仅持续了一两天,今天又找到了以前的代码分享出来,希望大家能一起实现一个比较完美的开源的电子书.废话不多说先看下效果:  本地部分还没有做,做好以后就可以吧本地的书加载到书架里了,这只是一个开

android底部菜单栏实现原理与代码_Android

上一个项目已经做完了,这周基本上没事,所以整理了下以前的项目,想把一些通用的部分封装起来,这样以后遇到相似的项目就不用重复发明轮子了,也节省了开发效率.今天把demo贴出来一是方便以后自己查询,二是希望同时也能帮到大家. 底部菜单栏很重要,我看了一下很多应用软件都是用了底部菜单栏做.我这里使用了tabhost做了一种通用的(就是可以像微信那样显示未读消息数量的,虽然之前也做过但是layout下的xml写的太臃肿,这里去掉了很多不必要的层,个人看起来还是不错的,所以贴出来方便以后使用). 先看一下

android底部菜单栏实现原理与代码

上一个项目已经做完了,这周基本上没事,所以整理了下以前的项目,想把一些通用的部分封装起来,这样以后遇到相似的项目就不用重复发明轮子了,也节省了开发效率.今天把demo贴出来一是方便以后自己查询,二是希望同时也能帮到大家. 底部菜单栏很重要,我看了一下很多应用软件都是用了底部菜单栏做.我这里使用了tabhost做了一种通用的(就是可以像微信那样显示未读消息数量的,虽然之前也做过但是layout下的xml写的太臃肿,这里去掉了很多不必要的层,个人看起来还是不错的,所以贴出来方便以后使用). 先看一下

密码强度检测效果实现原理与代码_javascript技巧

复制代码 代码如下: <html> <head> <title>密码强度检测效果</title> <script type="text/javascript"> function chkpwd(obj){ var t=obj.value; var id=getResult(t); //定义对应的消息提示 var msg=new Array(4); msg[0]="密码过短."; msg[1]="密

Jquery写一个鼠标拖动效果实现原理与代码_jquery

近日项目中要做一个鼠标拖拽层的效果,于是手动使用Jquery做了一个,发出来跟大伙儿分享一下,并希望能得到高手的指点,如果哪位大侠觉得我的思路和代码不正确或者需要改进的话,希望能指点一二,在下感激不尽. 我的思路是这样的: 1.在鼠标按下的时候,捕获鼠标的当前位置: 2.得到要移动对象的当前位置信息: 3.鼠标移动时,计算鼠标移动的距离,将这个距离更新到对象的位置,在我的代码中,我试用绝对定位来表示对象的位置: 4.当鼠标移出对象或者鼠标弹起的时候,则认为对象处于不能移动的状态.这个在我的代码中

DWR实现模拟Google搜索效果实现原理及代码_javascript技巧

复制代码 代码如下: <!-- 模拟google搜索 --> <script type="text/javascript"> /********************************可配置选项********************************/ // 被选中的相似关键字背景颜色 var selectedBgColor = "#CCCCCC"; // 未被选中的相似关键字背景颜色 var unselectedBgColo

Android编程之书架效果背景图处理方法_Android

本文实例讲述了Android编程之书架效果背景图处理方法.分享给大家供大家参考,具体如下: 在android应用中,做一个小说阅读器是很多人的想法,大家一般都是把如何读取大文件,如果在滚动或是翻页时,让用户感觉不到做为重点.我也在做一个类似一功能,可是在做书架的时候,看了QQ阅读的书架,感觉很好看,就想做一个,前面一篇<android书架效果实现原理与代码>对此做了专门介绍,其完整实例代码可点击此处本站下载. 上面的例子很不错,可是有一个问题是他的背景图的宽必须是手机屏幕的宽,不会改变,这样感

IOS代码笔记之仿电子书书架效果_IOS

本文实例为大家分享了IOS书架效果的具体实现代码,供大家参考,具体内容如下 一.效果图   二.工程图  三.代码RootViewController.h #import <UIKit/UIKit.h> @interface RootViewController : UIViewController <UITableViewDataSource,UITableViewDelegate> { NSMutableArray * dataArray; UITableView * myTa

Android 四种动画效果的调用实现代码_Android

(1) main.xml 代码如下:(声明四个按钮控件) XML代码: 复制代码 代码如下: <?xml version="1.0" encoding="utf-8"?> <AbsoluteLayout android:id="@+id/widget32" android:layout_width="fill_parent" android:layout_height="fill_parent&qu