利用ViewPager和CiecleIndicator实现App引导滑动页

原创 2016年08月31日 10:13:55
1.主界面:
public class GuideActivity extends Activity {
    CircleIndicator indicator;
    ViewPager vp;
    ArrayList<ImageView> aList;
    GuideAdapter guideAdapter;
    int img[]={
            R.mipmap.zhubeijing,
            R.mipmap.zhuti2,
            R.mipmap.zhuti1,
    };
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_guide);
        vp = (ViewPager) findViewById(R.id.vp);
        indicator = (CircleIndicator) findViewById(R.id.indicator);
        guideAdapter = new GuideAdapter(initData());
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
        vp.setAdapter(guideAdapter);
        indicator.setViewPager(vp);
        vp.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {


            }


            @Override
            public void onPageSelected(int position) {
                if (position == aList.size() - 1) {
                    aList.get(position).setOnClickListener(new View.OnClickListener() {
                        @Override
                        public void onClick(View v) {
                            Intent intent = new Intent(GuideActivity.this, SlidingPaneLayoutActivity.class);
                            startActivity(intent);
                            //若果不要该界面销毁界面
                            finish();
                        }
                    });
                }


            }


            @Override
            public void onPageScrollStateChanged(int state) {


            }
        });


    }


    public ArrayList<ImageView> initData(){
        aList = new ArrayList<>();
        for(int i=0;i<img.length;i++){
            ImageView imageView = (ImageView) LayoutInflater.from(this).inflate(R.layout.tmp_layout,null,false);
//          ImageView imageView = new ImageView(this);
            imageView.setImageResource(img[i]);
            aList.add(imageView);
        }
        return aList;
    }
}
2.界面布局:
<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ccc"
    >


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


    <me.relex.circleindicator.CircleIndicator
        android:id="@+id/indicator"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="40dp"
        app:ci_height="7dp"
        app:ci_width="7dp"
        app:ci_margin="20dp"
        app:ci_drawable="@color/colorAccent"
        />


</RelativeLayout>
3.适配器:
public class GuideAdapter extends PagerAdapter {
    ArrayList<ImageView> viewList;


    public GuideAdapter() {
    }


    public GuideAdapter(ArrayList<ImageView> viewList) {
        this.viewList = viewList;
    }


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


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




    //获取viewpager里面的图片的下标
    @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));
    }


}
4.在values内设置attrs.xml样式,用于布局调用
<?xml version="1.0" encoding="utf-8"?>
<resources>
     <!-- 设置导航页面下面小点style-->
    <declare-styleable name="CircleIndicator">
        <attr name="ci_height" format="dimension"/>
        <attr name="ci_width" format="dimension"/>
        <attr name="ci_margin" format="dimension"/>
        <attr name="ci_drawable" format="reference"/>
        <attr name="ci_drawable_unselected" format="reference"/>


    </declare-styleable>
</resources>

相关文章推荐

Android实现APP引导页四种简单视图滑动切换效果ViewPager

Android实现APP引导页四种简单视图滑动切换效果ViewPager最终的实现效果是这样的 http://7xjqvu.com1.z0.glb.clouddn.com/15-10-8/30797...
  • xyzz609
  • xyzz609
  • 2016年07月21日 23:52
  • 1942

利用 ViewPager 等,实现带小圆球的图片滑动,并且只有第一次安装app时才出现欢迎界面(图片)

利用 ViewPager 等,实现带小圆球的图片滑动,并且只有第一次安装app时才出现欢迎界面(图片)...

自定义指示器 快速实现 ViewPager 滑动页卡切换(可用作整个 app上导航)

我记得在前面,我写了一篇Android 微信6.1 tab栏图标和字体颜色渐变的实现,如果大家仅仅认为这篇文章的功能只是模仿微信颜色渐变效果,那就大错特错了!认真阅读了这篇文章的朋友,应该知道,这里面...
  • pjbwan
  • pjbwan
  • 2015年04月27日 23:15
  • 301

Android 快速实现 ViewPager 滑动页卡切换(可用作整个 app上导航)

http://blog.csdn.net/jxxfzgy/article/details/44162211 效果: 今天这篇 blog的内容同样可以拿来做 app 的整体架构,但与前面那篇 b...
  • jdsjlzx
  • jdsjlzx
  • 2015年03月10日 22:23
  • 10640

Android 快速实现 ViewPager 滑动页卡切换(可用作整个 app上导航)

我记得在前面,我写了一篇Android 微信6.1 tab栏图标和字体颜色渐变的实现,如果大家仅仅认为这篇文章的功能只是模仿微信颜色渐变效果,那就大错特错了!认真阅读了这篇文章的朋友,肯定知道,这里面...
  • jxxfzgy
  • jxxfzgy
  • 2015年03月10日 08:16
  • 4223

Android ViewPager简单实现 - 倒计时、引导页左右滑动

说明: ViewPager简单实现,方便以后用。做的是一个全屏的引导页。 截图: 代码: GuideActivity.java package...

Android开发模板------ViewPager(一)用PagerAdapter实现图片滑动作为引导页

viewpager可以做很多事情,从最简单的导航,到页面菜单等等。那如何使用它呢,与ListView类似,我们也需要一个适配器,就是PagerAdapter。 首先看布局文件: ...
  • dsc114
  • dsc114
  • 2015年03月27日 09:08
  • 1230

引导页的实现,用ViewPager,底下有小圆点显示以及滑动进入主页面

实习的第一个经理布置的任务就是实现引导页功能,在这和大家分享下 1.布局采用相对布局中有ViewPager和LinearLayout 代码如下:...

Android 利用ViewPager实现导航页滑动效果

刚开始搞导航页时从网上找到个叫

ViewPager左右滑动引导页

  • 2016年06月28日 11:16
  • 2.26MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:利用ViewPager和CiecleIndicator实现App引导滑动页
举报原因:
原因补充:

(最多只允许输入30个字)