1、准备数据
int[] ids = new int[]{ R.drawable.guild_news, R.drawable.guild_picture, R.drawable.guild_weather };
2、设置ImageViews集合，保存图片，并创建点的集合，并适配点的像素，
imageViews = new ArrayList<>(); for (int i = 0; i < ids.length; i++) { ImageView imageView = new ImageView(this); //设置背景 imageView.setBackgroundResource(ids[i]); //添加到集合 imageViews.add(imageView); //创建点 ImageView point = new ImageView(this); point.setBackgroundResource(R.drawable.point_normal); /** * 参数的单位是像素 * 适配：把单位dp转为像素 */ params = new LinearLayout.LayoutParams(withdpi,withdpi); if (i!=0){ //设置圆点间的间距 params.leftMargin = withdpi; } point.setLayoutParams(params); //添加到线性布局中 ll_point_group.addView(point); }
3、创建灰点和红点的xml
1 <?xml version="1.0" encoding="utf-8"?> 2 <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> 3 <size android:height="10dp" android:width="10dp"></size> 4 <solid android:color="@android:color/darker_gray"></solid> 5 </shape>
1 <?xml version="1.0" encoding="utf-8"?> 2 <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> 3 <size android:height="10dp" android:width="10dp"></size> 4 <solid android:color="@android:color/holo_red_dark"></solid> 5 </shape>
4、添加ViewPager设配器，重写4个方法
//设置ViewPager适配器 viewPager.setAdapter(new MyPagerAdapter());
class MyPagerAdapter extends PagerAdapter { /** * 返回数据总个数 * * @return */ @Override public int getCount() { return imageViews.size(); } /** * @param container ViewPager * @param position 要创建页面的位置 * @return */ @Override public Object instantiateItem(ViewGroup container, int position) { ImageView imageView = imageViews.get(position); //添加到容器 container.addView(imageView); return imageView; } /** * @param view 当前创建的视图 * @param object instantiateItem（）返回的结果 */ @Override public boolean isViewFromObject(View view, Object object) { return view == object; } /** * 销毁页面 * * @param container ViewPager * @param position 要销毁页面的位置 * @param object */ @Override public void destroyItem(ViewGroup container, int position, Object object) { // super.destroyItem(container, position, object); container.removeView((View) object); } }
引导页布局
1 <?xml version="1.0" encoding="utf-8"?> 2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 xmlns:tools="http://schemas.android.com/tools" 4 android:id="@+id/activity_guide" 5 android:layout_width="match_parent" 6 android:layout_height="match_parent" 7 tools:context="com.mynews.activity.GuideActivity"> 8 9 <android.support.v4.view.ViewPager 10 android:id="@+id/viewpager" 11 android:layout_width="match_parent" 12 android:layout_height="match_parent" /> 13 14 <Button 15 android:id="@+id/btn_start_main" 16 android:layout_width="wrap_content" 17 android:layout_height="wrap_content" 18 android:layout_alignParentBottom="true" 19 android:layout_centerHorizontal="true" 20 android:layout_marginBottom="80dp" 21 android:background="@drawable/btn_start_main_selector" 22 android:paddingLeft="20dp" 23 android:paddingRight="20dp" 24 android:text="开始体验" 25 android:textColor="@drawable/btn_start_main_textcolor_selector" 26 android:textSize="20sp" 27 android:visibility="gone" /> 28 29 <RelativeLayout 30 android:layout_width="wrap_content" 31 android:layout_height="wrap_content" 32 android:layout_alignParentBottom="true" 33 android:layout_centerHorizontal="true" 34 android:layout_marginBottom="40dp"> 35 36 <LinearLayout 37 android:id="@+id/ll_point_group" 38 android:layout_width="wrap_content" 39 android:layout_height="wrap_content" 40 android:orientation="horizontal" /> 41 42 <ImageView 43 android:id="@+id/iv_red_point" 44 android:layout_width="10dp" 45 android:layout_height="10dp" 46 android:background="@drawable/point_red" /> 47 </RelativeLayout> 48 49 50 </RelativeLayout>
5、计算红点移动位置和设置进入主页按钮事件监听
根据view的生命周期，当执行到onLayout或onDraw时，已经获取视图的宽，高和边距
iv_red_point.getViewTreeObserver().addOnGlobalLayoutListener(new MyOnGlobalLayoutListener());
1 class MyOnGlobalLayoutListener implements ViewTreeObserver.OnGlobalLayoutListener{ 2 3 @Override 4 public void onGlobalLayout() { 5 //执行不止一次 6 iv_red_point.getViewTreeObserver().removeOnGlobalLayoutListener(this); 7 8 //计算间距 间距=第一个点距离左边的距离-第0个点距离左边的距离 9 leftmax = ll_point_group.getChildAt(1).getLeft() - ll_point_group.getChildAt(0).getLeft(); 10 //得到屏幕滑动的百分比 11 viewPager.addOnPageChangeListener(new MyOnPageChangeListener()); 12 13 //设置按钮点击事件，进入主页面 14 btn_start_main.setOnClickListener(new View.OnClickListener() { 15 @Override 16 public void onClick(View v) { 17 //1.保存曾经进入过的主页面 18 CacheUtils.putBoolean(GuideActivity.this, WelcomeActivity.START_MAIN,true); 19 //2.跳转到主页面 20 Intent intent = new Intent(GuideActivity.this,MainActivity.class); 21 startActivity(intent); 22 //3.关闭引导页面 23 } 24 }); 25 }
1 class MyOnPageChangeListener implements ViewPager.OnPageChangeListener{ 2 private RelativeLayout.LayoutParams params; 3 4 /** 5 * 页面滚动回调 6 * @param position 当前滑动的位置 7 * @param positionOffset 页面滑动百分比 8 * @param positionOffsetPixels 滑动的像素 9 */ 10 @Override 11 public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { 12 //两点间移动距离=屏幕百分比*间距 13 //int leftmargin = (int) (positionOffset*leftmax); 14 //两点间滑动距离对应的坐标=原来的起始位置+两点间移动的距离 15 int leftmargin = (int) (position*leftmax+positionOffset*leftmax); 16 //parms.leftMargin=两点间滑动距离对应的坐标 17 params = (RelativeLayout.LayoutParams) iv_red_point.getLayoutParams(); 18 params.leftMargin = leftmargin; 19 iv_red_point.setLayoutParams(params); 20 } 21 22 /** 23 *页面被选中时回调 24 * @param position 选中的位置 25 */ 26 @Override 27 public void onPageSelected(int position) { 28 /** 29 * 最后一个页面 30 */ 31 if (position==imageViews.size()-1){ 32 btn_start_main.setVisibility(View.VISIBLE); 33 }else{ 34 btn_start_main.setVisibility(View.GONE); 35 } 36 } 37 38 /** 39 *页面状态改变时回调 40 * @param state 状态（拖动，静止，释放） 41 */ 42 @Override 43 public void onPageScrollStateChanged(int state) { 44 45 } 46 } 47 }
完整代码：
1 public class GuideActivity extends AppCompatActivity { 2 private ViewPager viewPager; 3 private Button btn_start_main; 4 private LinearLayout ll_point_group; 5 private ArrayList<ImageView> imageViews; 6 private LinearLayout.LayoutParams params; 7 private ImageView iv_red_point; 8 private int leftmax; 9 10 private int withdpi; 11 12 @Override 13 protected void onCreate(Bundle savedInstanceState) { 14 super.onCreate(savedInstanceState); 15 setContentView(R.layout.activity_guild); 16 viewPager = (ViewPager) findViewById(R.id.viewpager); 17 btn_start_main = (Button) findViewById(R.id.btn_start_main); 18 ll_point_group = (LinearLayout) findViewById(R.id.ll_point_group); 19 iv_red_point = (ImageView) findViewById(R.id.iv_red_point); 20 21 //引导页数据 22 int[] ids = new int[]{ 23 R.drawable.guide_news, 24 R.drawable.guide_picture, 25 R.drawable.guide_weather 26 }; 27 28 withdpi = DensityUtil.dip2px(this,10); 29 30 imageViews = new ArrayList<>(); 31 for (int i = 0; i < ids.length; i++) { 32 ImageView imageView = new ImageView(this); 33 //设置背景 34 imageView.setBackgroundResource(ids[i]); 35 //添加到集合 36 imageViews.add(imageView); 37 //创建点 38 ImageView point = new ImageView(this); 39 point.setBackgroundResource(R.drawable.point_normal); 40 /** 41 * 参数的单位是像素 42 * 适配：把单位dp转为像素 43 */ 44 params = new LinearLayout.LayoutParams(withdpi,withdpi); 45 if (i!=0){ 46 //设置圆点间的间距 47 params.leftMargin = withdpi; 48 } 49 point.setLayoutParams(params); 50 //添加到线性布局中 51 ll_point_group.addView(point); 52 53 } 54 //设置ViewPager适配器 55 viewPager.setAdapter(new MyPagerAdapter()); 56 57 //根据view的生命周期，当执行到onLayout或onDraw时，已经获取视图的宽，高和边距 58 iv_red_point.getViewTreeObserver().addOnGlobalLayoutListener(new MyOnGlobalLayoutListener()); 59 60 } 61 62 class MyOnGlobalLayoutListener implements ViewTreeObserver.OnGlobalLayoutListener{ 63 64 @Override 65 public void onGlobalLayout() { 66 //执行不止一次 67 iv_red_point.getViewTreeObserver().removeOnGlobalLayoutListener(this); 68 69 //计算间距 间距=第一个点距离左边的距离-第0个点距离左边的距离 70 leftmax = ll_point_group.getChildAt(1).getLeft() - ll_point_group.getChildAt(0).getLeft(); 71 //得到屏幕滑动的百分比 72 viewPager.addOnPageChangeListener(new MyOnPageChangeListener()); 73 74 //设置按钮点击事件，进入主页面 75 btn_start_main.setOnClickListener(new View.OnClickListener() { 76 @Override 77 public void onClick(View v) { 78 //1.保存曾经进入过的主页面 79 CacheUtils.putBoolean(GuideActivity.this, WelcomeActivity.START_MAIN,true); 80 //2.跳转到主页面 81 Intent intent = new Intent(GuideActivity.this,MainActivity.class); 82 startActivity(intent); 83 //3.关闭引导页面 84 } 85 }); 86 } 87 class MyOnPageChangeListener implements ViewPager.OnPageChangeListener{ 88 private RelativeLayout.LayoutParams params; 89 90 /** 91 * 页面滚动回调 92 * @param position 当前滑动的位置 93 * @param positionOffset 页面滑动百分比 94 * @param positionOffsetPixels 滑动的像素 95 */ 96 @Override 97 public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { 98 //两点间移动距离=屏幕百分比*间距 99 //int leftmargin = (int) (positionOffset*leftmax); 100 //两点间滑动距离对应的坐标=原来的起始位置+两点间移动的距离 101 int leftmargin = (int) (position*leftmax+positionOffset*leftmax); 102 //parms.leftMargin=两点间滑动距离对应的坐标 103 params = (RelativeLayout.LayoutParams) iv_red_point.getLayoutParams(); 104 params.leftMargin = leftmargin; 105 iv_red_point.setLayoutParams(params); 106 } 107 108 /** 109 *页面被选中时回调 110 * @param position 选中的位置 111 */ 112 @Override 113 public void onPageSelected(int position) { 114 /** 115 * 最后一个页面 116 */ 117 if (position==imageViews.size()-1){ 118 btn_start_main.setVisibility(View.VISIBLE); 119 }else{ 120 btn_start_main.setVisibility(View.GONE); 121 } 122 } 123 124 /** 125 *页面状态改变时回调 126 * @param state 状态（拖动，静止，释放） 127 */ 128 @Override 129 public void onPageScrollStateChanged(int state) { 130 131 } 132 } 133 } 134 135 class MyPagerAdapter extends PagerAdapter { 136 137 /** 138 * 返回数据总个数 139 * 140 * @return 141 */ 142 @Override 143 public int getCount() { 144 return imageViews.size(); 145 } 146 147 /** 148 * @param container ViewPager 149 * @param position 要创建页面的位置 150 * @return 151 */ 152 @Override 153 public Object instantiateItem(ViewGroup container, int position) { 154 ImageView imageView = imageViews.get(position); 155 //添加到容器 156 container.addView(imageView); 157 return imageView; 158 } 159 160 /** 161 * @param view 当前创建的视图 162 * @param object instantiateItem（）返回的结果 163 */ 164 @Override 165 public boolean isViewFromObject(View view, Object object) { 166 return view == object; 167 } 168 169 /** 170 * 销毁页面 171 * 172 * @param container ViewPager 173 * @param position 要销毁页面的位置 174 * @param object 175 */ 176 @Override 177 public void destroyItem(ViewGroup container, int position, Object object) { 178 // super.destroyItem(container, position, object); 179 container.removeView((View) object); 180 } 181 } 182 }