android书架效果

以前也模仿者ireader实现了书架的效果，但是那种是使用listview实现的，并不好用。绝大多数都是用gridview实现的，网上这方面资料比较少，有些开源的电子书都是重点做了阅读，并没有像ireader和QQ阅读这样的书架效果。

书架这种效果我早就实现了，本来想做一个完美的电子书，但是因为自己的懒惰，仅仅持续了一两天，今天又找到了以前的代码分享出来，希望大家能一起实现一个比较完美的开源的电子书。废话不多说先看下效果：

本地部分还没有做，做好以后就可以吧本地的书加载到书架里了，这只是一个开始，后面还有很多复杂的没有做。

下面先看一下书架的实现原理吧！

首先看一下layout下的布局文件main.xml

<?xml version="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"
>
<include layout="@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中计算每一行的高度，然后把书架画上去。下面是个抽屉。

public class MyGridView extends GridView {

	private Bitmap background;

	public MyGridView(Context context, AttributeSet attrs) {
		super(context, attrs);
		background = BitmapFactory.decodeResource(getResources(),
				R.drawable.bookshelf_layer_center);
	}

	@Override
	protected void dispatchDraw(Canvas canvas) {
		int count = getChildCount();
		int top = count > 0 ? getChildAt(0).getTop() : 0;
		int backgroundWidth = background.getWidth();
		int backgroundHeight = background.getHeight()+2;
		int width = getWidth();
		int height = getHeight();

		for (int y = top; y < height; y += backgroundHeight) {
			for (int x = 0; x < width; x += backgroundWidth) {
				canvas.drawBitmap(background, x, y, null);
			}
		}

		super.dispatchDraw(canvas);
	}

}

上面就是自定义书架的gridview，也是实现书架最核心的方法。

然后是每一个item的布局：

<?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: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中显示出来了。

public class BookShelfActivity extends BaseActivity {
    private GridView bookShelf;
    private int[] 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
			
	};
    private String[] name={
    		"天龙八部","搜神记","水浒传","黑道悲情"
    };
    
    private GridView gv;  
    private SlidingDrawer sd;  
    private Button iv;  
    private List<ResolveInfo> apps;  
    

	/** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        this.requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.main);
        
        bookShelf = (GridView) findViewById(R.id.bookShelf);
        ShlefAdapter adapter=new ShlefAdapter();
        bookShelf.setAdapter(adapter);
        bookShelf.setOnItemClickListener(new OnItemClickListener() {

			@Override
			public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,
					long arg3) {
				// TODO Auto-generated method stub
				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(new GridAdapter());  
        sd.setOnDrawerOpenListener(new SlidingDrawer.OnDrawerOpenListener()// 开抽屉  
        {  
            @Override  
            public void onDrawerOpened() {  
            	iv.setText("返回");
                iv.setBackgroundResource(R.drawable.btn_local);// 响应开抽屉事件  
                                                                // ，把图片设为向下的  
            }  
        });  
        sd.setOnDrawerCloseListener(new SlidingDrawer.OnDrawerCloseListener() {  
            @Override  
            public void onDrawerClosed() {  
            	iv.setText("本地");
                iv.setBackgroundResource(R.drawable.btn_local);// 响应关抽屉事件  
            }  
        });  
    }

    class ShlefAdapter extends BaseAdapter{

		@Override
		public int getCount() {
			// TODO Auto-generated method stub
			return data.length+5;
		}

		@Override
		public Object getItem(int arg0) {
			// TODO Auto-generated method stub
			return arg0;
		}

		@Override
		public long getItemId(int arg0) {
			// TODO Auto-generated method stub
			return arg0;
		}

		@Override
		public View getView(int position, View contentView, ViewGroup arg2) {
			// TODO Auto-generated method stub
			
			contentView=LayoutInflater.from(getApplicationContext()).inflate(R.layout.item1, null);
			
			TextView view=(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);
			}
			return contentView;
		}
    	
    }
    
	@Override
	public boolean onKeyDown(int keyCode, KeyEvent event) {
		// TODO Auto-generated method stub

		if (keyCode == KeyEvent.KEYCODE_BACK) {
			AlertDialog.Builder builder = new AlertDialog.Builder(this);
			builder.setMessage("你确定退出吗？")
					.setCancelable(false)
					.setPositiveButton("确定",
							new DialogInterface.OnClickListener() {
								public void onClick(DialogInterface dialog,
										int id) {
									finish();
								}
							})
					.setNegativeButton("返回",
							new DialogInterface.OnClickListener() {
								public void onClick(DialogInterface dialog,
										int id) {
									dialog.cancel();
								}
							});
			AlertDialog alert = builder.create();
			alert.show();
			return true;
		}

		return super.onKeyDown(keyCode, event);
	}
    
    
    private void loadApps() {  
        Intent intent = new Intent(Intent.ACTION_MAIN, null);  
        intent.addCategory(Intent.CATEGORY_LAUNCHER);  
  
        apps = getPackageManager().queryIntentActivities(intent, 0);  
    }  
  
    public class GridAdapter extends BaseAdapter {  
        public GridAdapter() {  
  
        }  
  
        public int getCount() {  
            // TODO Auto-generated method stub  
            return apps.size();  
        }  
  
        public Object getItem(int position) {  
            // TODO Auto-generated method stub  
            return apps.get(position);  
        }  
  
        public long getItemId(int position) {  
            // TODO Auto-generated method stub  
            return position;  
        }  
  
        public View getView(int position, View convertView, ViewGroup parent) {  
            // TODO Auto-generated method stub  
            ImageView imageView = null;  
            if (convertView == null) {  
                imageView = new ImageView(BookShelfActivity.this);  
                imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);  
                imageView.setLayoutParams(new GridView.LayoutParams(50, 50));  
            } else {  
                imageView = (ImageView) convertView;  
            }  
  
            ResolveInfo ri = apps.get(position);  
            imageView.setImageDrawable(ri.activityInfo  
                    .loadIcon(getPackageManager()));  
  
            return imageView;  
        }  
  
    }  

}

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

最后附上源码下载地址：点击打开链接