当前位置: 代码迷 >> Android >> Android UI控件之Gallery +GridView兑现图片与小圆点同步变化
  详细解决方案

Android UI控件之Gallery +GridView兑现图片与小圆点同步变化

热度:98   发布时间:2016-05-01 11:08:03.0
Android UI控件之Gallery +GridView实现图片与小圆点同步变化

             在Web应用中有这样一种需求,特别是在一些购物网站中。经常会看到会有一些动态循环

       展示的一组图片。Android可不可以实现这种效果呢?答案当然是肯定的了。

             至于如何实现,看一下例子程序吧

             依照惯例,先上几张效果图吧!

                 先看第一张:

 

             接下来第二张:

        最后在看一张:

             上面的效果是如何实现的呢?来看具体代码吧!

                main_activity.xml文件:

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:background="@drawable/background" >    <Gallery        android:id="@+id/infoshow_gallery"        android:layout_width="fill_parent"        android:layout_height="fill_parent"        android:scrollbars="none"        android:spacing="10dp" />    <RelativeLayout        android:layout_width="fill_parent"        android:layout_height="fill_parent" >        <LinearLayout            android:layout_width="fill_parent"            android:layout_height="wrap_content"            android:layout_alignParentBottom="true"            android:background="@color/halftransparent"            android:gravity="right" >            <GridView                android:id="@+id/infoshow_gridview"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_gravity="right"                android:cacheColorHint="#00000000"                android:listSelector="#00000000"                android:stretchMode="none" />        </LinearLayout>    </RelativeLayout></RelativeLayout>
               MainActivity文件:

package com.kiritor;import android.app.Activity;import android.content.Context;import android.graphics.Bitmap;import android.graphics.BitmapFactory;import android.os.Bundle;import android.util.Log;import android.view.View;import android.view.ViewGroup;import android.widget.AdapterView;import android.widget.BaseAdapter;import android.widget.Gallery;import android.widget.GridView;import android.widget.ImageView;import android.widget.ImageView.ScaleType;import android.widget.LinearLayout;import android.widget.AdapterView.OnItemClickListener;public class MainActivity extends Activity{	private Gallery infoshow_gallery;	private GalleryAdapter galleryAdapter ;	private GridView infoshow_gridview;	private GridViewAdapter gridviewAdapter;	private Integer[] infoIds = {			R.drawable.item1,R.drawable.item2,R.drawable.item3,			R.drawable.item4,R.drawable.item5,R.drawable.item6	};	private Integer[] thumbIds = {			R.drawable.ball_red1,R.drawable.ball_normal1	};	private int currentIndex_ = 0;		private int gridview_horSpac = 26;//设置信息圆点的间隔距离	private int gridview_xpadding = 10;	private int gridview_ypadding = 5;		private boolean isAlive_;		@Override	protected void onCreate(Bundle savedInstanceState) {		super.onCreate(savedInstanceState);		setContentView(R.layout.main_activity);		isAlive_= true;		infoshow_gallery = (Gallery)findViewById(R.id.infoshow_gallery);		infoshow_gridview = (GridView)findViewById(R.id.infoshow_gridview);				//infoshow_gallery 赋值		galleryAdapter = new GalleryAdapter(this);		infoshow_gallery.setAdapter(galleryAdapter);				//Gallery 赋值		gridviewAdapter = new GridViewAdapter(this);		infoshow_gridview.setAdapter(gridviewAdapter);		Bitmap bmp = new BitmapFactory().decodeResource(this.getResources(), R.drawable.ball_normal1);		int width = bmp.getWidth();		int height = bmp.getHeight();		infoshow_gridview.setColumnWidth(width);		infoshow_gridview.setHorizontalSpacing(gridview_horSpac);//设置水平间隔		infoshow_gridview.setNumColumns(infoIds.length);//设置列数		LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams)infoshow_gridview.getLayoutParams();		lp.width = width * infoIds.length + gridview_horSpac*(infoIds.length - 1) + (gridview_xpadding << 1);		lp.height = height + (gridview_ypadding << 1);		infoshow_gridview.setLayoutParams(lp);		infoshow_gridview.setPadding(gridview_xpadding, gridview_ypadding, gridview_xpadding, gridview_ypadding);		// Gallery OnItemSelected		infoshow_gallery.setOnItemSelectedListener(new Gallery.OnItemSelectedListener(){			@Override			public void onItemSelected(AdapterView<?> parent, View view,					int position, long id) {				// TODO Auto-generated method stub				//设置当前选中的Index				currentIndex_ = position;				//改变GridView显示				gridviewAdapter.notifyDataSetInvalidated();			}			@Override			public void onNothingSelected(AdapterView<?> arg0) {				// TODO Auto-generated method stub							}					});		// Gallery OnItemClick		infoshow_gridview.setOnItemClickListener(new OnItemClickListener() {			@Override			public void onItemClick(AdapterView<?> parent, View view, int position,					long id) {				// TODO Auto-generated method stub				//设置当前选中的Index				currentIndex_ = position;				//改变GridView显示				gridviewAdapter.notifyDataSetInvalidated();				//改变Gallery显示				infoshow_gallery.setSelection(currentIndex_);			}					});		//释放图片资源		if(bmp != null && !bmp.isRecycled()){			bmp.recycle();			bmp = null;		}		autoPlay();	}	/**	 * Gallery 的适配器	 * */	class GalleryAdapter extends BaseAdapter{		private Context context_;				public GalleryAdapter(Context context){			context_ = context;		}		@Override		public int getCount() {			// TODO Auto-generated method stub			return infoIds.length;		}		@Override		public Object getItem(int position) {			// TODO Auto-generated method stub			return infoIds[position];		}		@Override		public long getItemId(int position) {			// TODO Auto-generated method stub			return position;		}		@Override		public View getView(int position, View convertView, ViewGroup parent) {			// TODO Auto-generated method stub			ImageView img = new ImageView(context_);			//此处每个ImageView都要占全部空间			img.setLayoutParams(new Gallery.LayoutParams(Gallery.LayoutParams.FILL_PARENT, 					Gallery.LayoutParams.FILL_PARENT));			img.setImageResource(infoIds[position]);			img.setScaleType(ScaleType.FIT_XY);			return img;		}			}		/**	 * GridView 的适配器	 * */	class GridViewAdapter extends BaseAdapter{		private Context context_;				public GridViewAdapter(Context context){			context_ = context;		}		@Override		public int getCount() {			// TODO Auto-generated method stub			return infoIds.length;		}		@Override		public Object getItem(int position) {			// TODO Auto-generated method stub			int index = 0 ;			if(position == currentIndex_){				index = 0;			}else{				index = 1;			}			return thumbIds[index];		}		@Override		public long getItemId(int position) {			// TODO Auto-generated method stub			return position;		}		@Override		public View getView(int position, View convertView, ViewGroup parent) {			// TODO Auto-generated method stub			ImageView img = new ImageView(context_);			img.setLayoutParams(new GridView.LayoutParams(GridView.LayoutParams.WRAP_CONTENT, 					GridView.LayoutParams.WRAP_CONTENT));			//红球表示选中状态			if(position == currentIndex_){				img.setImageResource(thumbIds[0]);			}else{				img.setImageResource(thumbIds[1]);			}			img.setScaleType(ScaleType.FIT_CENTER);			return img;		}	}	private void autoPlay(){		//设置间隔5秒自动播放的功能		new Thread(new Runnable(){			@Override			public void run() {				// TODO Auto-generated method stub				while(isAlive_){					currentIndex_ = currentIndex_ % infoIds.length;					infoshow_gallery.post(new Runnable(){						@Override						public void run() {							// TODO Auto-generated method stub							infoshow_gallery.setSelection(currentIndex_);						}											});					//更新时间间隔 5秒					try {						Thread.sleep(5000);					} catch (InterruptedException e) {						// TODO Auto-generated catch block						e.printStackTrace();					}					currentIndex_++;				}			}					}).start();	}	}
         好了,实现基本就是这些了!Over

  相关解决方案