软件编程
位置:首页>> 软件编程>> Android编程>> ViewPager实现带引导小圆点与自动跳转的引导界面

ViewPager实现带引导小圆点与自动跳转的引导界面

作者:Homilier  发布时间:2021-07-11 12:25:18 

标签:ViewPager,引导圆点,自动跳转

实现引导小圆点的方法其实很简单,可直接在布局上放置与引导页面等量的ImageView,然后在切换页面的时候更改图片资源就好了。这里顺便提一下,有些APP是干脆在制作引导页面图片的时候加上引导小圆点,这种方式显然最简单不过了,但是既然是附在图片上的,在切换的时候也是随着图片滑动的,显然看起来效果并不是很好,甚至在我们需要加入小圆点的切换动画时,那就更不能这么去做了。

首先我们先来看看实现效果

ViewPager实现带引导小圆点与自动跳转的引导界面 

这里我们的小圆点图片资源是采用shape绘制的,这里我弄的很随便,所以很粗糙,如果觉得不是很美观那就自行修改吧。如果你是直接使用png资源的话,可直接跳过这一步。

shape_ring_black_normal.xml(黑色小圆环)


<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
 android:shape="oval">

<solid android:color="#FFFFFF" />

<size android:width="24dp"
   android:height="24dp"/>

<stroke android:color="#000000"
   android:width="1dp"/>

</shape>

shape_circle_blue_press.xml(蓝色小圆点)


<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
 android:shape="oval">

<solid android:color="#0000F1"/>

<size android:width="24dp"
   android:height="24dp"/>

</shape>

再来个选择器,直接用setSelected方法就可以切换图片了,为true是切换为shape_circle_blue_press.xml,否则为shape_ring_black_normal.xml,记得选择器的默认item一定要在最后,否则没有效果。你也可以直接在切换页面的时候替换图片资源。

selector_circle.xml(小圆点选择器)


<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:state_selected="true" android:drawable="@drawable/shape_circle_blue_press"/>
 <item android:drawable="@drawable/shape_ring_black_normal"/>

</selector>

页面布局很简单,ViewPage是重点来显示主要内容,再来一排ImageView显示小圆点,由于我们在最后一个页面需要有个按钮来跳转到主界面,这里我们加个Button先隐藏。

activity_guide.xml


<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:gravity="center"
 android:layout_height="match_parent">

<Button
   android:id="@+id/btn_goto"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_alignParentRight="true"
   android:visibility="gone"
   android:text="跳转" />

<android.support.v4.view.ViewPager
   android:id="@+id/vp"
   android:layout_width="match_parent"
   android:layout_height="match_parent" />

<LinearLayout
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_centerHorizontal="true"
   android:layout_alignParentBottom="true"
   android:layout_marginBottom="24dp"
   android:orientation="horizontal">

<ImageView
     android:id="@+id/imgv_circler1"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:src="@drawable/selector_circle"
     android:layout_margin="24dp"/>

<ImageView
     android:id="@+id/imgv_circler2"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:layout_margin="24dp"
     android:src="@drawable/selector_circle"/>

<ImageView
     android:id="@+id/imgv_circler3"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:layout_margin="24dp"
     android:src="@drawable/selector_circle"/>

</LinearLayout>

</RelativeLayout>

还有一步准备工作,添加每个页面的数据源,继承PagerAdapter这个类

GuideAdapter.java


import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
import java.util.List;

public class GuideAdapter extends PagerAdapter {

private List<View> mDatas;

public GuideAdapter(List<View> datas) {
   this.mDatas = datas;
 }

@Override
 public int getCount() {
   return mDatas != null ? mDatas.size() : 0;
 }

@Override
 public Object instantiateItem(ViewGroup container, int position) {
   container.addView(mDatas.get(position), 0);
   return mDatas.get(position);
 }

@Override
 public void destroyItem(ViewGroup container, int position, Object object) {
   container.removeView(mDatas.get(position));
 }

@Override
 public boolean isViewFromObject(View view, Object object) {
   return view == object;
 }
}

接下来就看看如何实现,代码很简单,不难看懂,直接贴出来。

GuideAdapter.java


import android.content.Intent;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.RelativeLayout;

import java.util.ArrayList;
import java.util.List;

public class GuideActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener {

private ViewPager vp;
 private List<View> mDatas = new ArrayList<>();
 private Button btn;
 private GuideAdapter mGuideAdapter;

private int[] res = {
     R.mipmap.ic_launcher,
     R.mipmap.ic_launcher,
     R.mipmap.ic_launcher
 };

private ImageView[] imgv = new ImageView[res.length];

@Override
 protected void onCreate(Bundle savedInstanceState) {
   super.onCreate(savedInstanceState);
   setContentView(R.layout.activity_guide);

initViews();
   initDatas();
   initEvents();
 }

private void initViews() {
   vp = (ViewPager) findViewById(R.id.vp);
   btn = (Button) findViewById(R.id.btn_goto);
   imgv[0] = (ImageView) findViewById(R.id.imgv_circler1);
   imgv[1] = (ImageView) findViewById(R.id.imgv_circler2);
   imgv[2] = (ImageView) findViewById(R.id.imgv_circler3);
   RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,ViewGroup.LayoutParams.WRAP_CONTENT);
   for (int i = 0; i < res.length; i++) {
     ImageView imgv = new ImageView(this);
     imgv.setLayoutParams(params);
     imgv.setImageResource(res[i]);
     mDatas.add(imgv);
   }
 }

private void initDatas() {
   selectedDoto(0);
   mGuideAdapter = new GuideAdapter(mDatas);
   vp.setAdapter(mGuideAdapter);
 }

private void selectedDoto(int index) {
   for (int i = 0; i < res.length; i++) {
     if (i == index) {
       imgv[i].setSelected(true);
     } else {
       imgv[i].setSelected(false);
     }
   }
 }

private void initEvents() {
   vp.setOnPageChangeListener(this);
   btn.setOnClickListener(new View.OnClickListener() {
     @Override
     public void onClick(View v) {
       Intent intent = new Intent(GuideActivity.this, MainActivity.class);
       startActivity(intent);
       finish();
     }
   });
 }

@Override
 public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}

@Override
 public void onPageSelected(int position) {
   if (position == res.length-1) // 如果是最后一个页面显示跳转按钮
     btn.setVisibility(View.VISIBLE);
   else
     btn.setVisibility(View.GONE);
   selectedDoto(position);
 }

@Override
 public void onPageScrollStateChanged(int state) {}
}

那如果每个页面不是一个控件这么简单呢?这时我们用Fragment,布局上还是差不多,但最后页面的按钮我们可以转移到最后一个Fragment布局上,因此直接删除Button,这里就不能继承Activity,要基础FragmentActivity。
接着我们就要弄三个Fragment出来,这里布局只简单放了个TextView,最后的页面还有个Button。我们就看看最后一个Fragment就好了。

fragment_guidec.xml


<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 tools:context="com.newcentury.testdemo.GuidecFragment">

<TextView
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="center"
   android:drawableTop="@mipmap/ic_launcher"
   android:textSize="18sp"
   android:text="页面三"/>

<Button
   android:id="@+id/btn_goto"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="right"
   android:text="跳转"/>

</FrameLayout>

GuidecFragment.java


import android.content.Intent;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class GuidecFragment extends Fragment {

@Override
 public View onCreateView(LayoutInflater inflater, ViewGroup container,
              Bundle savedInstanceState) {
   View view = inflater.inflate(R.layout.fragment_guidec, container, false);
   view.findViewById(R.id.btn_goto).setOnClickListener(new View.OnClickListener() {
     @Override
     public void onClick(View v) {
       Intent intent = new Intent(getActivity(), MainActivity.class);
       startActivity(intent);
       getActivity().finish();
     }
   });
   return view;
 }

}

当然在前面用到的Adapter是用不了了,这里需要继承FragmentPagerAdapter类。

GuideAdapter.java


import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import java.util.List;

public class GuideAdapter extends FragmentPagerAdapter {

private List<Fragment> mDatas;

public GuideAdapter(FragmentManager fm, List<Fragment> datas) {
   super(fm);
   this.mDatas = datas;
 }

@Override
 public Fragment getItem(int position) {
   return mDatas.get(position);
 }

@Override
 public int getCount() {
   return mDatas.size();
 }
}

GuideActivity.java


import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.widget.ImageView;

import java.util.ArrayList;
import java.util.List;

public class GuideActivity extends FragmentActivity implements ViewPager.OnPageChangeListener {

private ViewPager vp;
 private List<Fragment> mDatas = new ArrayList<>();
 private GuideAdapter mGuideAdapter;

private int[] res = {
     R.mipmap.ic_launcher,
     R.mipmap.ic_launcher,
     R.mipmap.ic_launcher
 };

private ImageView[] imgv = new ImageView[res.length];

@Override
 protected void onCreate(Bundle savedInstanceState) {
   super.onCreate(savedInstanceState);
   setContentView(R.layout.activity_guide);

initViews();
   initDatas();
   initEvents();
 }

private void initViews() {
   vp = (ViewPager) findViewById(R.id.vp);
   imgv[0] = (ImageView) findViewById(R.id.imgv_circler1);
   imgv[1] = (ImageView) findViewById(R.id.imgv_circler2);
   imgv[2] = (ImageView) findViewById(R.id.imgv_circler3);
 }

private void initDatas() {
   selectedDoto(0);
   mDatas.add(new GuideaFragment());
   mDatas.add(new GuidebFragment());
   mDatas.add(new GuidecFragment());
   mGuideAdapter = new GuideAdapter(getSupportFragmentManager(), mDatas);
   vp.setAdapter(mGuideAdapter);
 }

private void selectedDoto(int index) {
   for (int i = 0; i < res.length; i++) {
     if (i == index) {
       imgv[i].setSelected(true);
     } else {
       imgv[i].setSelected(false);
     }
   }
 }

private void initEvents() {
   vp.setOnPageChangeListener(this);
 }

@Override
 public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}

@Override
 public void onPageSelected(int position) {
   selectedDoto(position);
 }

@Override
 public void onPageScrollStateChanged(int state) {}
}

实现效果如下:

ViewPager实现带引导小圆点与自动跳转的引导界面       ViewPager实现带引导小圆点与自动跳转的引导界面

从上面还可以看到一个倒计时,那是怎么实现倒计时自动跳转呢?我们可以直接开个线程完成倒计时操作,当计时为0时便自动跳转,但用户很可能会回滑到上一个界面,也可能用户会手动点击跳转按钮进行跳转,因此,要把控好线程的关闭与开启。代码贴出来如下:


public void AutoGotoThread(boolean start) {
 if (start) {
   mGotoMainThread = new GotoMainThread();
   mGotoMainThread.start();
 } else {
   if (mGotoMainThread != null && mGotoMainThread.isAlive()) {
     mGotoMainThread.stopThread();
   }
 }
}

private void startActivity() {
 Intent intent = new Intent(getActivity(), MainActivity.class);
 startActivity(intent);
 mGotoMainThread.stopThread();
 getActivity().finish();
}

private class GotoMainThread extends Thread {
 private volatile boolean isRun = true;
 private Object lock = new Object();

@Override
 public void run() {
   synchronized (lock) {
     while (isRun) {
       try {
         Message msg = Message.obtain();
         msg.what = 101;
         msg.obj = "跳转 " + mTimeValues--;
         mHandler.sendMessage(msg);
         sleep(1000);
       } catch (InterruptedException e) {
         e.printStackTrace();
       }

}
   }
 }

public void stopThread() {
   mTimeValues = 5;
   isRun = false;
 }
}

final Handler mHandler = new Handler() {
 public void handleMessage(Message msg) {
   switch (msg.what) {
     case 101:
       btn.setText((String) msg.obj);
       if (mTimeValues < 0) {
         startActivity();
       }
       break;
   }
 }
};

来源:http://blog.csdn.net/honiler/article/details/78448864

0
投稿

猜你喜欢

手机版 软件编程 asp之家 www.aspxhome.com