最近下载几款手机应用研究了下,发了有些自定义控件惊人的类似,因此我以为在之后的开发中,对一些控件的复用确定是不少的,在首页(非载入页)通常都会有一个幻灯片效果,既能够放广告也能够放推荐,若是图片设计的好看,效果通常都会不错,既然用到了Gallery,也附带把相框效果的例子写一写(淘宝详情界面的商品图片滑动展现) java
1、效果图展现 android
(1)幻灯片效果展现:
ide
(2)商品图片滑动展现
查看大图:
post
2、部分代码说明 测试
(1)幻灯片效果的实现:
自定义Gallery:DetailGallery.java
可视界面:ImgSwitchActivity.java
适配类:GalleryIndexAdapter.java
1)自定义Gallery主要重写onFling经过按下和松手的位置不一样比较是向右移动仍是向左移动,部分代码以下: this
private boolean isScrollingLeft(MotionEvent e1, MotionEvent e2) { return e2.getX() > e1.getX(); } @Override public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) { int kEvent; if (isScrollingLeft(e1, e2)) { kEvent = KeyEvent.KEYCODE_DPAD_LEFT; } else { kEvent = KeyEvent.KEYCODE_DPAD_RIGHT; } onKeyDown(kEvent, null); return true; }2)在适配类 GalleryIndexAdapter主要完成幻灯片的循环播放,在getCount里面返回值返回Integer.MAX_VALUE,而后在getView里面根据position与传进来初始图片个数进行余数计算获得每次循环到哪张图片。部分代码以下:
@Override public int getCount() { // TODO Auto-generated method stub return Integer.MAX_VALUE; } …… @Override public View getView(int position, View convertView, ViewGroup arg2) { // TODO Auto-generated method stub ImageView imageView = new ImageView(context); imageView.setBackgroundResource(imagList.get(position%imagList.size())); imageView.setScaleType(ScaleType.FIT_XY); imageView.setLayoutParams(new Gallery.LayoutParams(Gallery.LayoutParams.FILL_PARENT , Gallery.LayoutParams.WRAP_CONTENT)); return imageView; }3)在可视界面里面实现逻辑控制,经过定时器定时刷新幻灯片,定时器经过定时发送消息,消息接受处理机制接收到消息以后,就模拟滑动事件,调用Gallery的onFling方法实现图片自动切换效果。选择按钮的显示效果(RadioButton)须要在Gallery的setOnItemSelectedListener进行处理。
//定时器和事件处理5秒刷新一次幻灯片 /** 展现图控制器,实现展现图切换 */ final Handler handler_gallery = new Handler() { public void handleMessage(Message msg) { /* 自定义屏幕按下的动做 */ MotionEvent e1 = MotionEvent.obtain(SystemClock.uptimeMillis(), SystemClock.uptimeMillis(), MotionEvent.ACTION_UP, 89.333336f, 265.33334f, 0); /* 自定义屏幕放开的动做 */ MotionEvent e2 = MotionEvent.obtain(SystemClock.uptimeMillis(), SystemClock.uptimeMillis(), MotionEvent.ACTION_DOWN, 300.0f, 238.00003f, 0); myGallery.onFling(e2, e1, -800, 0); /* 给gallery添加按下和放开的动做,实现自动滑动 */ super.handleMessage(msg); } }; protected void onResume() { autogallery(); super.onResume(); }; private void autogallery() { /* 设置定时器,每5秒自动切换展现图 */ Timer time = new Timer(); TimerTask task = new TimerTask() { @Override public void run() { Message m = new Message(); handler_gallery.sendMessage(m); } }; time.schedule(task, 8000, 5000); } //指示按钮和gallery初始化过程以及事件监听添加过程 //初始化 void init(){ myGallery = (DetailGallery)findViewById(R.id.myGallery); gallery_points = (RadioGroup) this.findViewById(R.id.galleryRaidoGroup); ArrayList<Integer> list = new ArrayList<Integer>(); list.add(R.drawable.banner1); list.add(R.drawable.banner2); list.add(R.drawable.banner3); list.add(R.drawable.banner4); GalleryIndexAdapter adapter = new GalleryIndexAdapter(list, context); myGallery.setAdapter(adapter); //设置小按钮 gallery_point = new RadioButton[list.size()]; for (int i = 0; i < gallery_point.length; i++) { layout = (LinearLayout) inflater.inflate(R.layout.gallery_icon, null); gallery_point[i] = (RadioButton) layout.findViewById(R.id.gallery_radiobutton); gallery_point[i].setId(i);/* 设置指示图按钮ID */ int wh = Tool.dp2px(context, 10); RadioGroup.LayoutParams layoutParams = new RadioGroup.LayoutParams(wh, wh); // 设置指示图大小 gallery_point[i].setLayoutParams(layoutParams); layoutParams.setMargins(4, 0, 4, 0);// 设置指示图margin值 gallery_point[i].setClickable(false);/* 设置指示图按钮不能点击 */ layout.removeView(gallery_point[i]);//一个子视图不能指定了多个父视图 gallery_points.addView(gallery_point[i]);/* 把已经初始化的指示图动态添加到指示图的RadioGroup中 */ } } //添加事件 void addEvn(){ myGallery.setOnItemSelectedListener(new OnItemSelectedListener() { @Override public void onItemSelected(AdapterView<?> arg0, View arg1, int arg2, long arg3) { // TODO Auto-generated method stub gallery_points.check(gallery_point[arg2%gallery_point.length].getId()); } @Override public void onNothingSelected(AdapterView<?> arg0) { // TODO Auto-generated method stub } }); }
(2)商品图片滑动实现过程:
图片滑动效果和上面的幻灯片效果很是的相似,只是在逻辑处理和界面上有一些小小的区别。
1)适配器类GalleryAdapter.java上面进行了图片缩放处理,节省了内存开销,又可把图片按照本身的要求缩放。 spa
//因为是测试case,因此图片都是写死的为了区别,在position = 1的时候换了一张图片 public View getView(int position, View convertView, ViewGroup parent) { // TODO Auto-generated method stub ImageView imageView = (ImageView) LayoutInflater.from(context).inflate(R.layout.img, null); Bitmap bitmap = null; try { if(position == 1 ){ bitmap = BitmapFactory.decodeStream(assetManager.open("xpic11247_s.jpg")); imageView.setTag("xpic11247_s.jpg"); } else{ bitmap = BitmapFactory.decodeStream(assetManager.open("item0_pic.jpg")); imageView.setTag("item0_pic.jpg"); } } catch (IOException e) { // TODO Auto-generated catch block e.printStackTrace(); } // 加载图片以前进行缩放 int width = bitmap.getWidth(); int height = bitmap.getHeight(); float newHeight = 200; float newWidth = width*newHeight/height; float scaleWidth = ((float) newWidth) / width; float scaleHeight = ((float) newHeight) / height; // 取得想要缩放的matrix参数 Matrix matrix = new Matrix(); matrix.postScale(scaleWidth, scaleHeight); // 获得新的图片 Bitmap newbm = Bitmap.createBitmap(bitmap, 0, 0, width, height, matrix, true); System.out.println(newbm.getHeight()+"-----------"+newbm.getWidth()); imageView.setImageBitmap(newbm); // } return imageView; }2)添加了一个相框效果,若是图片加载失败,就会出现一个图片压缩以后大小相等的相框图片。
<?xml version="1.0" encoding="utf-8"?> <ImageView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/waterfall_image" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="@drawable/image_border" > </ImageView>