当前位置: 代码迷 >> Android >> Android应用程序向导页
  详细解决方案

Android应用程序向导页

热度:30   发布时间:2016-04-28 07:35:42.0
Android应用程序引导页
一般的Android程序首次进入时都会有一个引导页面,本文简单的实现了一下这个功能。主要是用ViewPager配合GridView实现。ViewPager用来装载引导图片,GridView用来显示底部的指示图标。附件里是一些资源图片。
先看一下效果图:
 
具体代码如下,包括一个主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>
  相关解决方案