Android 简单引导页实现
注意：该demo只能适应几张图片滑动。如果多了需要参考自定义viewgroup引导页实现
实现了动态添加小圆点，滑动到当前页设置选中，滑动到最后一页时显示立即进入按钮。
1.动态添加小圆点
/**
* 添加小圆点
*/
private void addPoint() {
// 1.根据图片多少，添加多少小圆点
for (int i = 0; i < imageView.length; i++) {
LinearLayout.LayoutParams pointParams = new LinearLayout.LayoutParams(
LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
if (i < 1) {
pointParams.setMargins(0, 0, 0, 0);
}else{
pointParams.setMargins(10, 0, 0, 0);
}
ImageView iv = new ImageView(this);
iv.setLayoutParams(pointParams);
iv.setBackgroundResource(R.drawable.point_normal);
llPoint.addView(iv);
}
llPoint.getChildAt(0).setBackgroundResource(R.drawable.point_select);
}根据图片的多少添加多少小圆点。然后添加到布局中。
2.判断选中小圆点
for (int i = 0; i < imageView.length; i++) {
if (i == position) {
llPoint.getChildAt(position).setBackgroundResource(
R.drawable.point_select);
} else {
llPoint.getChildAt(i).setBackgroundResource(
R.drawable.point_normal);
}
}通过viewpager的监听事件可以设置选中的小圆点和未选中的小圆点
3.当滑动到最后一页时显示立即进入按钮，其实也是判断viewpager的事件。当滑动到最后一个时显示就行。其它时候都隐藏
// 3.当滑动到最后一个添加按钮点击进入，
if (position == imageView.length - 1) {
textView.setVisibility(View.VISIBLE);
} else {
textView.setVisibility(View.GONE);
}下面看是完整代码
public class GuideViewActivity extends BaseActivity {
private ViewPager viewPage;
// 图片
private int[] imageView = { R.drawable.yindaoye1, R.drawable.yindaoye2,
R.drawable.yindaoye3, R.drawable.yindaoye4 };
private List list;
// 底部小点的图片
private LinearLayout llPoint;
//立即进入按钮
private TextView textView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.guide_view_acitivyt);
initview();
initoper();
addView();
addPoint();
}
private void initoper() {
// 进入按钮
textView.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View arg0) {
PageManage.toPageKeepOldPageState(PageDataKey.login);
finish();
}
});
// 2.监听当前显示的页面，将对应的小圆点设置为选中状态，其它设置为未选中状态
viewPage.addOnPageChangeListener(new OnPageChangeListener() {
@Override
public void onPageSelected(int position) {
monitorPoint(position);
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
@Override
public void onPageScrollStateChanged(int arg0) {
UIUtils.log("arg0--" + arg0);
}
});
}
private void initview() {
viewPage = (ViewPager) findViewById(R.id.viewpage);
llPoint = (LinearLayout) findViewById(R.id.llPoint);
textView = (TextView) findViewById(R.id.guideTv);
}
/**
* 添加图片到view
*/
private void addView() {
list = new ArrayList();
// 将imageview添加到view
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
for (int i = 0; i < imageView.length; i++) {
ImageView iv = new ImageView(this);
iv.setLayoutParams(params);
iv.setScaleType(ScaleType.FIT_XY);
iv.setImageResource(imageView[i]);
list.add(iv);
}
// 加入适配器
viewPage.setAdapter(new GuideViewAdapter(list));
}
/**
* 添加小圆点
*/
private void addPoint() {
// 1.根据图片多少，添加多少小圆点
for (int i = 0; i < imageView.length; i++) {
LinearLayout.LayoutParams pointParams = new LinearLayout.LayoutParams(
LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
if (i < 1) {
pointParams.setMargins(0, 0, 0, 0);
} else {
pointParams.setMargins(10, 0, 0, 0);
}
ImageView iv = new ImageView(this);
iv.setLayoutParams(pointParams);
iv.setBackgroundResource(R.drawable.point_normal);
llPoint.addView(iv);
}
llPoint.getChildAt(0).setBackgroundResource(R.drawable.point_select);
}
/**
* 判断小圆点
*
* @param position
*/
private void monitorPoint(int position) {
for (int i = 0; i < imageView.length; i++) {
if (i == position) {
llPoint.getChildAt(position).setBackgroundResource(
R.drawable.point_select);
} else {
llPoint.getChildAt(i).setBackgroundResource(
R.drawable.point_normal);
}
}
// 3.当滑动到最后一个添加按钮点击进入，
if (position == imageView.length - 1) {
textView.setVisibility(View.VISIBLE);
} else {
textView.setVisibility(View.GONE);
}
}
} 对应的 xml
所用的适配器
public class GuideViewAdapter extends PagerAdapter {
private List list;
public GuideViewAdapter(List list) {
this.list = list;
}
@Override
public int getCount() {
return list.size();
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
}
@Override
public void destroyItem(ViewGroup view, int position, Object object) {
view.removeView(list.get(position));
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(list.get(position));
return list.get(position);
}
} 下面有几个不错的引导页开源框架：
1.CircleIndicator
一个轻量级的viewpager指示器 ，类似于nexus5 启动器的效果。它可以自定义指示器上小圆点的样式和动画效果。可以用于引导页。
项目地址： https://github.com/ongakuer/CircleIndicator
2.Guideshow
Guideshow使你简单、快速的构建引导页。另外，你无须生成动态的gif图片就可使页面产生动画效果，如平移、渐变。
项目地址： https://github.com/javajavadog/guideshow
3.AppIntro
尝试使用了下，确实是个漂亮的控件，而且使用也很简单，推荐使用。
4.SwitchViewDemo
框架原文：http://j.news.163.com/docs/28/2015092010/B3US4ART90014ARU.html