先看一下效果图:
具体代码如下,包括一个主Activity和两个适配器:
主Activity
public class GuideActivityActivity extends Activity implements OnPageChangeListener { private List<View> views; private ViewPager viewPager; private GridView gridView; private GuidePagerAdapter pagerAdapter; private GuideGridAdapter gridAdapter; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.guide); initData(); initView(); } private void initData() { int images[] = {R.drawable.guide_first, R.drawable.guide_second, R.drawable.guide_third}; views = new ArrayList<View>(); for (int i = 0; i < images.length; i++) { ImageView imageView = new ImageView(this); imageView.setImageResource(images[i]); imageView.setScaleType(ScaleType.FIT_XY); views.add(imageView); } } private void initView() { viewPager = (ViewPager) findViewById(R.id.guide_viewpager); gridView = (GridView) findViewById(R.id.guide_gridview); pagerAdapter = new GuidePagerAdapter(); pagerAdapter.setViews(views); viewPager.setAdapter(pagerAdapter); viewPager.setCurrentItem(0); viewPager.setOnPageChangeListener(this); gridAdapter = new GuideGridAdapter(this); gridAdapter.setCountSize(views.size()); gridView.setColumnWidth(12); gridView.setNumColumns(views.size()); gridView.setAdapter(gridAdapter); gridAdapter.setSelectPoint(0); gridAdapter.notifyDataSetChanged(); } @Override public void onPageScrollStateChanged(int arg0) {} @Override public void onPageScrolled(int arg0, float arg1, int arg2) {} @Override public void onPageSelected(int position) { gridAdapter.setSelectPoint(position); gridAdapter.notifyDataSetChanged(); } @Override protected void onPause() { super.onPause(); if (null != views) { views.clear(); } } @Override protected void onDestroy() { super.onDestroy(); if(null != viewPager){ viewPager.removeAllViews(); viewPager.destroyDrawingCache(); } } }
GridView和ViewPager的适配器
public class GuideGridAdapter extends BaseAdapter { private int size; private int index = 0; private Context context; public GuideGridAdapter(Context context) { this.context = context; } @Override public int getCount() { return size; } @Override public Object getItem(int position) { return null; } @Override public long getItemId(int position) { return position; } @Override public View getView(final int position, View convertView, ViewGroup parent) { ViewHolder viewHolder = null; if (convertView == null) { ImageView imageView = new ImageView(context); convertView = imageView; viewHolder = new ViewHolder(); viewHolder.dotView = imageView; convertView.setTag(viewHolder); } else { viewHolder = (ViewHolder) convertView.getTag(); } if (index == position) { viewHolder.dotView.setImageResource(R.drawable.point_select); } else { viewHolder.dotView.setImageResource(R.drawable.point_noselect); } return convertView; } static class ViewHolder { ImageView dotView = null; } /** * 设置选中页 高亮显示 * @param indexPoint 当前选中页索引 */ public void setSelectPoint(int indexPoint) { this.index = indexPoint; } /** * 设置页码总数 * @param countSize 页码总数 */ public void setCountSize(int countSize) { this.size = countSize; } }
public class GuidePagerAdapter extends PagerAdapter { private List<View> views; public void setViews(List<View> views) { this.views = views; } @Override public int getCount() { return views.size(); } @Override public boolean isViewFromObject(View arg0, Object arg1) { return arg0 == (arg1); } @Override public void destroyItem(View arg0, int arg1, Object arg2){ ((ViewPager) arg0).removeView(views.get(arg1)); } @Override public Object instantiateItem(View arg0, int arg1) { ((ViewPager) arg0).addView(views.get(arg1), 0); return views.get(arg1); } }
布局文件guide.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"> <GridView android:id="@+id/guide_gridview" android:layout_width="70.0dip" android:layout_height="25dip" android:focusable="false" android:focusableInTouchMode="false" android:background="#00000000" android:cacheColorHint="#00000000" android:layout_alignParentBottom="true" android:layout_marginBottom="10.0dip" android:layout_marginTop="10.0dip" android:layout_centerHorizontal="true"> </GridView> <android.support.v4.view.ViewPager android:id="@+id/guide_viewpager" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_above="@id/guide_gridview"/> </RelativeLayout>