Android实现启动引导图

Android实现启动引导图

本文实例为大家分享了Android实现启动引导图的具体代码,供大家参考,具体内容如下

下面是安卓启动引导图的实现,话不多说,直接上代码。

1.布局文件:activity_guide.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/guide_vp"         android:layout_width="match_parent"         android:layout_height="match_parent" />     <LinearLayout         android:id="@+id/ll_guide_point"         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:layout_alignParentBottom="true"         android:layout_marginBottom="40dp"         android:gravity="center_horizontal"         android:orientation="horizontal" />     <ImageButton         android:id="@+id/guide_ib_start"         android:layout_width="wrap_content"         android:layout_height="60dp"         android:layout_alignParentBottom="true"         android:layout_centerHorizontal="true"         android:layout_gravity="center_vertical"         android:layout_marginBottom="120dp"         android:src="@mipmap/img_guide_start"         android:visibility="gone" /> </RelativeLayout>

2.关于的ViewPager的适配器GuidePageAdapter.java

/**  * Created by gdk on 2019/7/22 14:55  * Describe:安装apk第一次启动的引导页  *  * @author gdk  */ public class GuidePageAdapter extends PagerAdapter {     //存放图片的集合     private List<View> viewList;     public GuidePageAdapter(List<View> viewList) {         this.viewList = viewList;     }     /**      * @return 返回页面的个数      */     @Override     public int getCount() {         if (viewList != null) {             return viewList.size();         }         return 0;     }     /**      * 判断对象是否生成界面      *      * @param view      * @param object      * @return      */     @Override     public boolean isViewFromObject(View view, Object object) {         return view == object;     }     /**      * 初始化position位置的界面      *      * @param container      * @param position      * @return      */     @Override     public Object instantiateItem(ViewGroup container, int position) {         container.addView(viewList.get(position));         return viewList.get(position);     }     @Override     public void destroyItem(ViewGroup container, int position, Object object) {         container.removeView(viewList.get(position));     } }

3.引导页的Activity,GuideActivity.java

/**  * 第一次安装的引导页  * Created by gdk on 2019-07-22  *  * @author gdk  */ public class GuideActivity extends BaseActivity<LoginContract.Presenter> implements LoginContract.View, ViewPager.OnPageChangeListener {     @BindView(R.id.guide_ib_start)     ImageButton guideIbStart;     @BindView(R.id.guide_vp)     ViewPager guideVp;     @BindView(R.id.ll_guide_point)     LinearLayout llGuidePoint;     private int[] imagePositionArray;//图片资源的数组     private List<View> viewList;//图片资源的集合     //实例化原点View     private ImageView iv_point;     private ImageView[] ivPointArray;     @Override     public int getLayoutId() {         return R.layout.activity_guide;     }     @Override     public LoginContract.Presenter initPresenter() {         return new LoginPresenter(this);     }     @Override     public void initView() {         //加载滑动的ViewPager         initViewPager();         //加载底部圆点         initPoint();     }     @OnClick({R.id.ll_guide_point, R.id.guide_ib_start})     public void onViewClicked(View view) {         switch (view.getId()) {             case R.id.guide_ib_start:                 //从启动页跳转到引导页,修改保存的值,再次进入时跳过此页面。                 SpUitlsInfo.putString(GuideActivity.this, "VERSION", "1");                 startActivity(new Intent(GuideActivity.this, MainActivity.class));                 break;             default:                 break;         }     }     /**      * 加载底部圆点      */     private void initPoint() {         //这里实例化LinearLayout         llGuidePoint = findViewById(R.id.ll_guide_point);         //根据ViewPager的item数量实例化数组         ivPointArray = new ImageView[viewList.size()];         //循环新建底部圆点ImageView,将生成的ImageView保存到数组中         int size = viewList.size();         for (int i = 0; i < size; i++) {             iv_point = new ImageView(this);             LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,                     LinearLayout.LayoutParams.WRAP_CONTENT);             //设置小圆点的间距             lp.setMargins(20, 0, 20, 0);             iv_point.setLayoutParams(lp);             ivPointArray[i] = iv_point;             //第一个页面需要设置为选中状态,这里采用两张不同的图片             if (i == 0) {                 iv_point.setBackgroundResource(R.drawable.guide_dot_select);             } else {                 iv_point.setBackgroundResource(R.drawable.guide_dot_unselect);             }             //将数组中的ImageView加入到ViewGroup             llGuidePoint.addView(ivPointArray[i]);         }     }     /**      * 加载图片ViewPager      */     private void initViewPager() {         //实例化图片资源         imagePositionArray = new int[]{R.mipmap.img_guide_one, R.mipmap.img_guide_two, R.mipmap.img_guide_three,                 R.mipmap.img_guide_four};         viewList = new ArrayList<>();         //获取一个Layout参数,设置为全屏         LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(                 LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT);         //循环创建View并加入到集合中         int len = imagePositionArray.length;         for (int i = 0; i < len; i++) {             //new ImageView并设置全屏和图片资源             ImageView imageView = new ImageView(this);             imageView.setLayoutParams(params);             imageView.setBackgroundResource(imagePositionArray[i]);             //将ImageView加入到集合中             viewList.add(imageView);         }         //View集合初始化好后,设置Adapter         guideVp.setAdapter(new GuidePageAdapter(viewList));         //设置滑动监听         guideVp.setOnPageChangeListener(this);     }     @Override     public void onResult(Object result, String message) {     }     @Override     public void onError(Throwable throwable, String message) {     }     @Override     public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {     }     /**      * 滑动后的监听      *      * @param position      */     @Override     public void onPageSelected(int position) {         //循环设置当前页的标记图         int length = imagePositionArray.length;         for (int i = 0; i < length; i++) {             ivPointArray[position].setBackgroundResource(R.drawable.guide_dot_select);             if (position != i) {                 ivPointArray[i].setBackgroundResource(R.drawable.guide_dot_unselect);             }         }         //判断是否是最后一页,若是则显示按钮         if (position == imagePositionArray.length - 1) {             guideIbStart.setVisibility(View.VISIBLE);         } else {             guideIbStart.setVisibility(View.GONE);         }     }     @Override     public void onPageScrollStateChanged(int state) {     }     @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         ButterKnife.bind(this);     } }

涉及到两个布局文件

guide_dot_select.xml

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"     android:shape="oval">     <solid android:color="@color/white"></solid>     <corners android:radius="3dp" />     <size         android:width="8dp"         android:height="8dp" /> </shape>

guide_dot_unselect.xml

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"     android:shape="oval">     <solid android:color="@color/colorPrimaryDark"></solid>     <corners android:radius="3dp" />     <size         android:width="8dp"         android:height="8dp" /> </shape>

4.总结,代码中的注释比较详细,各位博友都能看懂,没有效果图,里面涉及的图片请使用简单的替代就行。

推荐阅读