Android 简单引导页实现

原创 2016年06月01日 09:26:50

注意:该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<View> 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<View>();
		// 将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

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpage"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <LinearLayout
        android:id="@+id/llPoint"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="24.0dip"
        android:gravity="center_horizontal"
        android:orientation="horizontal" >
      
    </LinearLayout>
	<TextView 
	    android:id="@+id/guideTv"
	    android:layout_width="130dp"
	    android:layout_height="40dp"
	    android:text="立即体验"
	    android:textColor="#ffffff"
	    android:background="#88000000"
	    android:textSize="14sp"
	    android:gravity="center"
	    android:layout_above="@id/llPoint"
	    android:layout_centerHorizontal="true"
	    android:layout_marginBottom="20dp"
	    android:visibility="gone"
	    />
</RelativeLayout>










所用的适配器
public class GuideViewAdapter extends PagerAdapter {

	private List<View> list;

	public GuideViewAdapter(List<View> 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


尝试使用了下,确实是个漂亮的控件,而且使用也很简单,推荐使用。

项目地址:https://github.com/PaoloRotolo/AppIntro


4.SwitchViewDemo

一个简单的引导页实现。值得推荐的是这完全是个单独的控件,而不是借助ViewPager实现的。作者完全是扩展ViewGroup做的。

框架原文:http://j.news.163.com/docs/28/2015092010/B3US4ART90014ARU.html










带你一步步实现android引导页面

当你第一次打开一款应用的时候常常会看到精美的引导页设计,它们在你未使用产品之前提前告知你产品的主要功能与特点,第一次印象的好坏会极大地影响到后续的产品使用体验。因此各个公司都在努力将这几个页面设计好,...
  • Loften_93663469
  • Loften_93663469
  • 2016年05月21日 19:06
  • 8009

Android进阶篇之引导页系列之ViewPager实现Animation动画引导页

这次就拿模仿搜狗地图6.3版本开启动画的demo来讲解,先看效果,第一页就是一个指针在转动,第二页那个小车从下面开向上面去,第三页云朵在飘动和小车在上下起伏,第四页钱币不断的洒落进存储罐。。。...
  • ye_scofield
  • ye_scofield
  • 2015年04月02日 15:08
  • 17048

【Android】如何实现启动APP时引导页、欢迎页功能设置之(二)设置只在第一次启动APP时跳入引导界面

(二)设置欢迎页并判断是否程序实第一次开启,来判断是否加载引导页。 实现关键功能: 1.欢迎页面的定时设置 2.判断 程序是否是第一次启动,如果是则跳入引导页,否则跳入主界面3.记得在Mainfest...
  • yuxunye85
  • yuxunye85
  • 2017年07月04日 14:53
  • 2967

Android软件新手引导页面制作

android应用新手引导页面的制作
  • RKun595
  • RKun595
  • 2017年07月23日 13:47
  • 310

Android中的页面引导

首先贴一张效果图先来分析下这个界面的构成: ViewPager LinearLayout 两个主要的ViewGroup构成 接下来贴出页面布局代码 ...
  • xikai18827083487
  • xikai18827083487
  • 2016年10月17日 23:34
  • 150

【Android】如何实现启动APP时引导页、欢迎页功能之(一)引导页功能的实现

基本上APP在第一次启动时都有引导页,本人在做APP开发时想实现这一功能,当时还不大知晓这个功能的页的具体名字,因为一直是一个人在默默的自学。我在这里就简单的给予个解释,引导页——就是APP在第一次启...
  • yuxunye85
  • yuxunye85
  • 2017年07月04日 10:15
  • 1699

Android中的引导页,一个Activity搞定引导页

整个引导页需要两个条件: 一个Activity ,一个Fragment,一组你想在滑动时的动态小图标,一个类库在http://download.csdn.net/detail/male09/98283...
  • male09
  • male09
  • 2017年04月28日 11:42
  • 383

Android客户端首次启动时的引导界面(viewpager)

刚做完一个比赛项目,来写点以后能用着的东西–Android客户端的首次启动页面,而且这个以后复用的几率很大,也不怎么修改,特留下为以后准备,同时为初学者提供一个帮助。 实现思路是:用SharedPr...
  • u013592964
  • u013592964
  • 2016年03月02日 23:18
  • 5565

Android 简单引导页实现

注意:该demo只能适应几张图片滑动。如果多了需要参考自定义viewgroup引导页实现 实现了动态添加小圆点,滑动到当前页设置选中,滑动到最后一页时显示立即进入按钮。 1.动态添加小圆点...
  • qq_35114086
  • qq_35114086
  • 2016年09月21日 23:47
  • 5187

Android引导页Splash设计

Android_Splash引导页就是在应用第一次安装时用来介绍应用的部分功能的动画页面,让用户大致的了解这个应用有啥功能。当用户首次安装时会有引导页面,用户下次启动的时候,就会直接进入主页面。 Sp...
  • Zuo_0625
  • Zuo_0625
  • 2016年05月07日 14:27
  • 1579
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Android 简单引导页实现
举报原因:
原因补充:

(最多只允许输入30个字)