android gallery 自定义边框+幻灯片效果

最近在项目中用到图片轮播，试了Gallery，ViewFlipper，ViewPager,感觉Gallery最符合需求，但是Gallery的系统边框很难看，项目中要求用自己的背景图片。

下面来看一下使用Gallery实现图片轮播

运行效果：

布局文件：

 

[java] view plaincopy
 
 
  1. <FrameLayout  
  2.     android:layout_width="fill_parent"  
  3.     android:layout_height="wrap_content"  
  4.     android:paddingLeft="16dp"  
  5.     android:paddingRight="16dp"  
  6.     android:paddingTop="10dp" >  
  7.   
  8.     <Gallery  
  9.         android:id="@+id/gallery"  
  10.         android:layout_width="fill_parent"  
  11.         android:layout_height="wrap_content"  
  12.         android:fadingEdge="none"  
  13.         android:spacing="0dp" />  
  14.   
  15.     <RelativeLayout  
  16.         android:layout_width="fill_parent"  
  17.         android:layout_height="18dp"  
  18.         android:layout_gravity="bottom"  
  19.         android:layout_marginBottom="3dp"  
  20.         android:layout_marginLeft="3dp"  
  21.         android:layout_marginRight="3dp"  
  22.         android:background="#80776f63"  
  23.         android:gravity="center" >  
  24.   
  25.         <ImageView  
  26.             android:id="@+id/dot_1"  
  27.             android:layout_width="wrap_content"  
  28.             android:layout_height="wrap_content"  
  29.             android:src="@drawable/ic_dot_normal" />  
  30.   
  31.         <ImageView  
  32.             android:id="@+id/dot_2"  
  33.             android:layout_width="wrap_content"  
  34.             android:layout_height="wrap_content"  
  35.             android:layout_marginLeft="10dp"  
  36.             android:layout_toRightOf="@+id/dot_1"  
  37.             android:src="@drawable/ic_dot_normal" />  
  38.   
  39.         <ImageView  
  40.             android:id="@+id/dot_3"  
  41.             android:layout_width="wrap_content"  
  42.             android:layout_height="wrap_content"  
  43.             android:layout_marginLeft="10dp"  
  44.             android:layout_marginRight="10dp"  
  45.             android:layout_toRightOf="@+id/dot_2"  
  46.             android:src="@drawable/ic_dot_normal" />  
  47.     </RelativeLayout>  
  48. </FrameLayout>  

其中， android:fadingEdge="none"消除图片两边的阴影。使用FrameLayout在底部显示小圆点

 

 

[java] view plaincopy
 
 
  1. public class MainActivity extends Activity {  
  2.   
  3.     private Gallery mGallery;  
  4.     private int index = 0;// 记录选中的图片位置  
  5.     private ImageView[] mImageViewIds;// 小圆点ImageView数组  
  6.     private static final int IMAGE_COUNT = 3;// 小圆点个数  
  7.   
  8.     @Override  
  9.     public void onCreate(Bundle savedInstanceState) {  
  10.         super.onCreate(savedInstanceState);  
  11.         setContentView(R.layout.activity_main);  
  12.   
  13.         findViews();  
  14.         mImageViewIds[0].setImageDrawable(getBaseContext().getResources()  
  15.                 .getDrawable(R.drawable.ic_dot_focused));  
  16.         ImageAdapteradapter = new ImageAdapter(this);  
  17.         mGallery.setAdapter(adapter);  
  18.         Timer timer = new Timer();  
  19.         timer.schedule(task, 2000, 2000);  
  20.         mGallery.setOnItemSelectedListener(onItemSelectedListener);  
  21.         mGallery.setOnItemClickListener(onItemClickListener);  
  22.     }  
  23.   
  24.     private void findViews() {  
  25.         mGallery = (Gallery) findViewById(R.id.gallery);  
  26.         mImageViewIds = new ImageView[] { (ImageView) findViewById(R.id.dot_1),  
  27.                 (ImageView) findViewById(R.id.dot_2),  
  28.                 (ImageView) findViewById(R.id.dot_3) };  
  29.     }  
  30.   
  31.     private TimerTask task = new TimerTask() {  
  32.   
  33.         @Override  
  34.         public void run() {  
  35.             Message message = new Message();  
  36.             message.what = 2;  
  37.             index = mGallery.getSelectedItemPosition();  
  38.             index++;  
  39.             handler.sendMessage(message);  
  40.         }  
  41.     };  
  42.   
  43.     /** 
  44.      * 开一个线程执行耗时操作 
  45.      */  
  46.     private Handler handler = new Handler() {  
  47.   
  48.         @Override  
  49.         public void handleMessage(Message msg) {  
  50.             super.handleMessage(msg);  
  51.             switch (msg.what) {  
  52.             case 2:  
  53.                 mGallery.setSelection(index);  
  54.                 break;  
  55.             default:  
  56.                 break;  
  57.             }  
  58.         }  
  59.   
  60.     };  
  61.     /** 
  62.      * 设置小圆点显示，position会一直增加，如果要循环显示图片，需要对position取余，否则数组越界 
  63.      */  
  64.     private OnItemSelectedListener onItemSelectedListener = new OnItemSelectedListener() {  
  65.   
  66.         @Override  
  67.         public void onItemSelected(AdapterView<?> parent, View view,  
  68.                 int position, long id) {  
  69.             int pos = position % IMAGE_COUNT;  
  70.             mImageViewIds[pos].setImageDrawable(getBaseContext().getResources()  
  71.                     .getDrawable(R.drawable.ic_dot_focused));  
  72.             if (pos > 0) {  
  73.                 mImageViewIds[pos - 1].setImageDrawable(getBaseContext()  
  74.                         .getResources().getDrawable(R.drawable.ic_dot_normal));  
  75.             }  
  76.             if (pos < (IMAGE_COUNT - 1)) {  
  77.                 mImageViewIds[pos + 1].setImageDrawable(getBaseContext()  
  78.                         .getResources().getDrawable(R.drawable.ic_dot_normal));  
  79.             }  
  80.             if (pos == 0) {  
  81.                 mImageViewIds[IMAGE_COUNT - 1]  
  82.                         .setImageDrawable(getBaseContext().getResources()  
  83.                                 .getDrawable(R.drawable.ic_dot_normal));  
  84.             }  
  85.         }  
  86.   
  87.         @Override  
  88.         public void onNothingSelected(AdapterView<?> arg0) {  
  89.             // TODO Auto-generated method stub  
  90.   
  91.         }  
  92.     };  
  93.   
  94.     /** 
  95.      * 点击事件，点击图片进入SecondActivity 
  96.      */  
  97.     private OnItemClickListener onItemClickListener = new OnItemClickListener() {  
  98.   
  99.         @Override  
  100.         public void onItemClick(AdapterView<?> arg0, View arg1, int pos,  
  101.                 long arg3) {  
  102.             Intent intent = new Intent();  
  103.             intent.setClass(MainActivity.this, SecondActivity.class);  
  104.             startActivity(intent);  
  105.         }  
  106.     };  
  107. }  

ImageAdapter类，重写android.widget.BaseAdapter，用于描述图像信息。

[java] view plaincopy
 
 
  1. public class ImageAdapter extends BaseAdapter {  
  2.     private Context context;  
  3.     private int[] mImages = { R.drawable.bg_timeline_01,  
  4.             R.drawable.bg_timeline_02, R.drawable.bg_timeline_03 };  
  5.     private static final int IMAGE_PX_HEIGHT = 198;  
  6.   
  7.     public ImageAdapter(Context context) {  
  8.         this.context = context;  
  9.     }  
  10.   
  11.     @Override  
  12.     public int getCount() {  
  13.         return Integer.MAX_VALUE;//实现循环显示  
  14.     }  
  15.   
  16.     @Override  
  17.     public Object getItem(int position) {  
  18.         return position;  
  19.     }  
  20.   
  21.     @Override  
  22.     public long getItemId(int position) {  
  23.         return position;  
  24.     }  
  25.   
  26.     @Override  
  27.     public View getView(int position, View convertView, ViewGroup parent) {  
  28.         ImageView imageView = new ImageView(context);  
  29.         imageView.setImageResource(mImages[position % mImages.length]);  
  30.         imageView.setScaleType(ImageView.ScaleType.CENTER);  
  31.         imageView.setLayoutParams(new Gallery.LayoutParams(  
  32.                 Gallery.LayoutParams.FILL_PARENT, IMAGE_PX_HEIGHT));  
  33.   
  34.         RelativeLayout borderImg = new RelativeLayout(context);  
  35.         borderImg.setPadding(2, 2, 2, 2);  
  36.         borderImg.setBackgroundResource(R.drawable.bg_gallery);//设置ImageView边框  
  37.         borderImg.addView(imageView);  
  38.         return borderImg;  
  39.     }  
  40.   
  41. }  


如果用系统背景，可以这样写

 

 

[java] view plaincopy
 
 
  1. int mGalleryItemBackground;  
  2. private Context mContext;  
  3.    
  4. public ImageAdapter(Context context)  
  5. {  
  6. mContext = context;  
  7. // 获得Gallery组件的属性  
  8. TypedArray typedArray = obtainStyledAttributes(R.styleable.Gallery);  
  9. mGalleryItemBackground = typedArray.getResourceId(  
  10. R.styleable.Gallery_android_galleryItemBackground, 0);   
  11. }  

在getview中设置

 

 

[java] view plaincopy
 
 
  1. imageView.setBackgroundResource(mGalleryItemBackground);  

Gallery组件属性信息定义在res\values\attrs.xml

 

 

[java] view plaincopy
 
 
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <resources>  
  3. <declare-styleable name="Gallery">  
  4. <attr name="android:galleryItemBackground" />  
  5. </declare-styleable>  
  6. </resources>  

详细讲解见http://www.eoeandroid.com/forum.php?mod=viewthread&tid=182297

 

自定义边框参考http://stackoverflow.com/questions/4830173/change-border-style-in-gallery

posted @ 2014-04-01 16:05  V青山绿水  阅读(3043)  评论(0)  编辑  收藏  举报