关闭

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

88人阅读 评论(0) 收藏 举报
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>
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:296次
    • 积分:24
    • 等级:
    • 排名:千里之外
    • 原创:2篇
    • 转载:1篇
    • 译文:0篇
    • 评论:0条
    文章存档