注意:该demo只能适应几张图片滑动。如果多了需要参考自定义viewgroup引导页实现
根据图片的多少添加多少小圆点。然后添加到布局中。
通过viewpager的监听事件可以设置选中的小圆点和未选中的小圆点
下面看是完整代码
对应的 xml
所用的适配器
一个轻量级的viewpager指示器 ,类似于nexus5 启动器的效果。它可以自定义指示器上小圆点的样式和动画效果。可以用于引导页。
项目地址: https://github.com/ongakuer/CircleIndicator
Guideshow使你简单、快速的构建引导页。另外,你无须生成动态的gif图片就可使页面产生动画效果,如平移、渐变。
项目地址: https://github.com/javajavadog/guideshow
实现了动态添加小圆点,滑动到当前页设置选中,滑动到最后一页时显示立即进入按钮。
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
尝试使用了下,确实是个漂亮的控件,而且使用也很简单,推荐使用。
4.SwitchViewDemo
一个简单的引导页实现。值得推荐的是这完全是个单独的控件,而不是借助ViewPager实现的。作者完全是扩展ViewGroup做的。
框架原文:http://j.news.163.com/docs/28/2015092010/B3US4ART90014ARU.html