Android UI控件之Gallery +GridView兑现图片与小圆点同步变化
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