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

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>

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值