首页 > 代码库 > 引导页

引导页

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(GuildActivity.this, WelcomeActivity.START_MAIN,true);
19                     //2.跳转到主页面
20                     Intent intent = new Intent(GuildActivity.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 GuildActivity 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.guild_news,
 24                 R.drawable.guild_picture,
 25                 R.drawable.guild_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(GuildActivity.this, WelcomeActivity.START_MAIN,true);
 80                     //2.跳转到主页面
 81                     Intent intent = new Intent(GuildActivity.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 }

 

引导页