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_;@Overrideprotected 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 OnItemSelectedinfoshow_gallery.setOnItemSelectedListener(new Gallery.OnItemSelectedListener(){@Overridepublic void onItemSelected(AdapterView<?> parent, View view,int position, long id) {// TODO Auto-generated method stub//设置当前选中的IndexcurrentIndex_ = position;//改变GridView显示gridviewAdapter.notifyDataSetInvalidated();}@Overridepublic void onNothingSelected(AdapterView<?> arg0) {// TODO Auto-generated method stub}});// Gallery OnItemClickinfoshow_gridview.setOnItemClickListener(new OnItemClickListener() {@Overridepublic void onItemClick(AdapterView<?> parent, View view, int position,long id) {// TODO Auto-generated method stub//设置当前选中的IndexcurrentIndex_ = 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;}@Overridepublic int getCount() {// TODO Auto-generated method stubreturn infoIds.length;}@Overridepublic Object getItem(int position) {// TODO Auto-generated method stubreturn infoIds[position];}@Overridepublic long getItemId(int position) {// TODO Auto-generated method stubreturn position;}@Overridepublic View getView(int position, View convertView, ViewGroup parent) {// TODO Auto-generated method stubImageView 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;}@Overridepublic int getCount() {// TODO Auto-generated method stubreturn infoIds.length;}@Overridepublic Object getItem(int position) {// TODO Auto-generated method stubint index = 0 ;if(position == currentIndex_){index = 0;}else{index = 1;}return thumbIds[index];}@Overridepublic long getItemId(int position) {// TODO Auto-generated method stubreturn position;}@Overridepublic View getView(int position, View convertView, ViewGroup parent) {// TODO Auto-generated method stubImageView 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(){@Overridepublic void run() {// TODO Auto-generated method stubwhile(isAlive_){currentIndex_ = currentIndex_ % infoIds.length;infoshow_gallery.post(new Runnable(){@Overridepublic void run() {// TODO Auto-generated method stubinfoshow_gallery.setSelection(currentIndex_);}});//更新时间间隔 5秒try {Thread.sleep(5000);} catch (InterruptedException e) {// TODO Auto-generated catch blocke.printStackTrace();}currentIndex_++;}}}).start();}}

         好了，实现基本就是这些了！Over