利用ViewPager实现引导界面+底部小圆点

时间:2022-02-13 16:34:21

Viewpager可以实现左右滑动切换当前显示的图片,Viewpager的内容既可以是多个布局,也可以是多个Drawable资源。
两者没有太多的区别,真正的区别在于使用自定义布局文件作为活动界面的时候需要使用布局引导器将布局文件转换成View类型的变量。
使用Viewpager就要有PagerAdpter,当然在滑动不同的界面的时候底部小圆点进行切换的时候就需要有页面的监听事件。OnPageChangeListener
小圆点是采用动态加载的,所以一定一定要有个Viewgroup来进行容纳这些小圆点,而小圆点本身是个ImageView

下面的代码包含了直接使用drawable文件和使用自定义布局进行制作的代码

public class MainActivity extends Activity implements OnPageChangeListener {

    LayoutInflater inflater;
    ViewPager viewPager;
    ImageView[] imageViews;
    int[] ids = { R.drawable.p1, R.drawable.p2, R.drawable.p3, R.drawable.p4,
            R.drawable.p5 };
    ImageView[] tips;
    ViewGroup group;

    View[] views;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        viewPager = (ViewPager) findViewById(R.id.viewpager);
        group = (ViewGroup) findViewById(R.id.group);
        inflater = LayoutInflater.from(this);

        //使用自定义布局文件作为活动界面
        View v1 = inflater.inflate(R.layout.v1, null);
        View v2 = inflater.inflate(R.layout.v2, null);
        View v3 = inflater.inflate(R.layout.v3, null);
        views = new View[] { v1, v2, v3 };

        tips = new ImageView[ids.length];
        for (int i = 0; i < ids.length; i++) {
            ImageView imageView = new ImageView(this);
            imageView.setLayoutParams(new LayoutParams(10, 10));
            tips[i] = imageView;
            if (i == 0) {
                tips[i].setBackgroundResource(R.drawable.page_indicator_focused);
            } else {
                tips[i].setBackgroundResource(R.drawable.page_indicator_unfocused);
            }
            group.addView(imageView);
        }

        //直接使用drawable文件作为活动界面
        // imageViews = new ImageView[ids.length];
        // for (int i = 0; i < ids.length; i++) {
        // ImageView imageView = new ImageView(this);
        // imageViews[i] = imageView;
        // imageViews[i].setBackgroundResource(ids[i]);
        // }
        viewPager.setAdapter(new Adp());
        viewPager.setOnPageChangeListener(this);
        viewPager.setCurrentItem(0);

    }

    class Adp extends PagerAdapter {

        @Override
        public void destroyItem(View container, int position, Object object) {
            ((ViewPager) container).removeView(views[position % ids.length]);
        }

        @Override
        public Object instantiateItem(View container, int position) {
            ((ViewPager) container).addView(views[position % ids.length]);
            return views[position];
        }

        @Override
        public int getCount() {
            return views.length;
        }

        @Override
        public boolean isViewFromObject(View arg0, Object arg1) {
            return arg1 == arg0;
        }

    }

    @Override
    public void onPageScrollStateChanged(int arg0) {
    }

    @Override
    public void onPageScrolled(int arg0, float arg1, int arg2) {
    }

    @Override
    public void onPageSelected(int arg0) {
        pagerSelect(arg0 % ids.length);

    }

    private void pagerSelect(int index) {
        for (int i = 0; i < ids.length; i++) {
            if (i == index) {
                tips[i].setBackgroundResource(R.drawable.page_indicator_focused);
            } else {
                tips[i].setBackgroundResource(R.drawable.page_indicator_unfocused);
            }
        }
    }

}

布局文件

<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/viewpager" android:layout_width="match_parent" android:layout_height="match_parent" />

    <LinearLayout  android:id="@+id/group" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:orientation="horizontal" >
    </LinearLayout>

</RelativeLayout>

如果是使用布局文件作为活动界面,那就要新建布局文件,然后在里面放置控件(看需求),当然也可以是一个空的布局然后加个背景