Android 简单引导页实现

注意:该demo只能适应几张图片滑动。如果多了需要参考自定义viewgroup引导页实现

实现了动态添加小圆点,滑动到当前页设置选中,滑动到最后一页时显示立即进入按钮。

1.动态添加小圆点

[html]  view plain  copy
 
  1. /**  
  2.      * 添加小圆点  
  3.      */  
  4.     private void addPoint() {  
  5.         // 1.根据图片多少,添加多少小圆点  
  6.         for (int i = 0; i < imageView.length; i++) {  
  7.             LinearLayout.LayoutParams pointParams = new LinearLayout.LayoutParams(  
  8.                     LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);  
  9.             if (i < 1) {  
  10.                 pointParams.setMargins(0, 0, 0, 0);  
  11.             }else{  
  12.                 pointParams.setMargins(10, 0, 0, 0);  
  13.             }  
  14.             ImageView iv = new ImageView(this);  
  15.             iv.setLayoutParams(pointParams);  
  16.             iv.setBackgroundResource(R.drawable.point_normal);  
  17.             llPoint.addView(iv);  
  18.         }  
  19.         llPoint.getChildAt(0).setBackgroundResource(R.drawable.point_select);  
  20.   
  21.     }  

根据图片的多少添加多少小圆点。然后添加到布局中。


2.判断选中小圆点

[java]  view plain  copy
 
  1. for (int i = 0; i < imageView.length; i++) {  
  2.             if (i == position) {  
  3.                 llPoint.getChildAt(position).setBackgroundResource(  
  4.                         R.drawable.point_select);  
  5.             } else {  
  6.                 llPoint.getChildAt(i).setBackgroundResource(  
  7.                         R.drawable.point_normal);  
  8.             }  
  9.         }  

通过viewpager的监听事件可以设置选中的小圆点和未选中的小圆点


3.当滑动到最后一页时显示立即进入按钮,其实也是判断viewpager的事件。当滑动到最后一个时显示就行。其它时候都隐藏

[java]  view plain  copy
 
  1. // 3.当滑动到最后一个添加按钮点击进入,  
  2.         if (position == imageView.length - 1) {  
  3.             textView.setVisibility(View.VISIBLE);  
  4.         } else {  
  5.             textView.setVisibility(View.GONE);  
  6.         }  

下面看是完整代码

[html]  view plain  copy
 
  1. public class GuideViewActivity extends BaseActivity {  
  2.     private ViewPager viewPage;  
  3.     // 图片  
  4.     private int[] imageView = { R.drawable.yindaoye1, R.drawable.yindaoye2,  
  5.             R.drawable.yindaoye3, R.drawable.yindaoye4 };  
  6.     private List<View> list;  
  7.     // 底部小点的图片  
  8.     private LinearLayout llPoint;  
  9.     //立即进入按钮  
  10.     private TextView textView;  
  11.   
  12.     @Override  
  13.     protected void onCreate(Bundle savedInstanceState) {  
  14.         super.onCreate(savedInstanceState);  
  15.         setContentView(R.layout.guide_view_acitivyt);  
  16.         initview();  
  17.         initoper();  
  18.         addView();  
  19.         addPoint();  
  20.   
  21.     }  
  22.   
  23.     private void initoper() {  
  24.         // 进入按钮  
  25.         textView.setOnClickListener(new OnClickListener() {  
  26.             @Override  
  27.             public void onClick(View arg0) {  
  28.                 PageManage.toPageKeepOldPageState(PageDataKey.login);  
  29.                 finish();  
  30.             }  
  31.         });  
  32.   
  33.         // 2.监听当前显示的页面,将对应的小圆点设置为选中状态,其它设置为未选中状态  
  34.         viewPage.addOnPageChangeListener(new OnPageChangeListener() {  
  35.             @Override  
  36.             public void onPageSelected(int position) {  
  37.                 monitorPoint(position);  
  38.             }  
  39.   
  40.             @Override  
  41.             public void onPageScrolled(int arg0, float arg1, int arg2) {  
  42.             }  
  43.   
  44.             @Override  
  45.             public void onPageScrollStateChanged(int arg0) {  
  46.                 UIUtils.log("arg0--" + arg0);  
  47.             }  
  48.         });  
  49.   
  50.     }  
  51.   
  52.     private void initview() {  
  53.         viewPage = (ViewPager) findViewById(R.id.viewpage);  
  54.         llPoint = (LinearLayout) findViewById(R.id.llPoint);  
  55.         textView = (TextView) findViewById(R.id.guideTv);  
  56.   
  57.     }  
  58.   
  59.     /**  
  60.      * 添加图片到view  
  61.      */  
  62.     private void addView() {  
  63.         list = new ArrayList<View>();  
  64.         // 将imageview添加到view  
  65.         LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(  
  66.                 LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);  
  67.         for (int i = 0; i < imageView.length; i++) {  
  68.             ImageView iv = new ImageView(this);  
  69.             iv.setLayoutParams(params);  
  70.             iv.setScaleType(ScaleType.FIT_XY);  
  71.             iv.setImageResource(imageView[i]);  
  72.             list.add(iv);  
  73.         }  
  74.         // 加入适配器  
  75.         viewPage.setAdapter(new GuideViewAdapter(list));  
  76.   
  77.     }  
  78.   
  79.     /**  
  80.      * 添加小圆点  
  81.      */  
  82.     private void addPoint() {  
  83.         // 1.根据图片多少,添加多少小圆点  
  84.         for (int i = 0; i < imageView.length; i++) {  
  85.             LinearLayout.LayoutParams pointParams = new LinearLayout.LayoutParams(  
  86.                     LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);  
  87.             if (i < 1) {  
  88.                 pointParams.setMargins(0, 0, 0, 0);  
  89.             } else {  
  90.                 pointParams.setMargins(10, 0, 0, 0);  
  91.             }  
  92.             ImageView iv = new ImageView(this);  
  93.             iv.setLayoutParams(pointParams);  
  94.             iv.setBackgroundResource(R.drawable.point_normal);  
  95.             llPoint.addView(iv);  
  96.         }  
  97.         llPoint.getChildAt(0).setBackgroundResource(R.drawable.point_select);  
  98.   
  99.     }  
  100.   
  101.     /**  
  102.      * 判断小圆点  
  103.      *   
  104.      * @param position  
  105.      */  
  106.     private void monitorPoint(int position) {  
  107.         for (int i = 0; i < imageView.length; i++) {  
  108.             if (i == position) {  
  109.                 llPoint.getChildAt(position).setBackgroundResource(  
  110.                         R.drawable.point_select);  
  111.             } else {  
  112.                 llPoint.getChildAt(i).setBackgroundResource(  
  113.                         R.drawable.point_normal);  
  114.             }  
  115.         }  
  116.         // 3.当滑动到最后一个添加按钮点击进入,  
  117.         if (position == imageView.length - 1) {  
  118.             textView.setVisibility(View.VISIBLE);  
  119.         } else {  
  120.             textView.setVisibility(View.GONE);  
  121.         }  
  122.     }  
  123. }  

对应的 xml

[html]  view plain  copy
 
  1. xml version="1.0" encoding="utf-8"?>  
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     >  
  6.   
  7.     <android.support.v4.view.ViewPager  
  8.         android:id="@+id/viewpage"  
  9.         android:layout_width="match_parent"  
  10.         android:layout_height="match_parent" />  
  11.   
  12.     <LinearLayout  
  13.         android:id="@+id/llPoint"  
  14.         android:layout_width="match_parent"  
  15.         android:layout_height="wrap_content"  
  16.         android:layout_alignParentBottom="true"  
  17.         android:layout_centerHorizontal="true"  
  18.         android:layout_marginBottom="24.0dip"  
  19.         android:gravity="center_horizontal"  
  20.         android:orientation="horizontal" >  
  21.         
  22.     LinearLayout>  
  23.     <TextView   
  24.         android:id="@+id/guideTv"  
  25.         android:layout_width="130dp"  
  26.         android:layout_height="40dp"  
  27.         android:text="立即体验"  
  28.         android:textColor="#ffffff"  
  29.         android:background="#88000000"  
  30.         android:textSize="14sp"  
  31.         android:gravity="center"  
  32.         android:layout_above="@id/llPoint"  
  33.         android:layout_centerHorizontal="true"  
  34.         android:layout_marginBottom="20dp"  
  35.         android:visibility="gone"  
  36.         />  
  37. RelativeLayout>  

所用的适配器
[html]  view plain  copy
 
  1. public class GuideViewAdapter extends PagerAdapter {  
  2.   
  3.     private List<View> list;  
  4.   
  5.     public GuideViewAdapter(List<View> list) {  
  6.         this.list = list;  
  7.   
  8.     }  
  9.   
  10.     @Override  
  11.     public int getCount() {  
  12.         return list.size();  
  13.     }  
  14.   
  15.     @Override  
  16.     public boolean isViewFromObject(View arg0, Object arg1) {  
  17.         return arg0 == arg1;  
  18.     }  
  19.   
  20.     @Override  
  21.     public void destroyItem(ViewGroup view, int position, Object object) {  
  22.         view.removeView(list.get(position));  
  23.     }  
  24.   
  25.     @Override  
  26.     public Object instantiateItem(ViewGroup container, int position) {  
  27.         container.addView(list.get(position));  
  28.         return list.get(position);  
  29.     }  
  30.   
  31. }  

下面有几个不错的引导页开源框架:

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

你可能感兴趣的:(安卓)