带指示器的引导页 ViewPager

第一步:先写布局文件

  //1.最外层为帧布局。

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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:layout_height="match_parent"
    tools:context="com.example.hp.day06testpopupwindow.MainActivity">
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></android.support.v4.view.ViewPager>
    <LinearLayout
        android:id="@+id/linear"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_gravity="bottom"
        android:gravity="center"
        android:layout_marginBottom="20dp"></LinearLayout>
        <Button
            android:id="@+id/btn_jump"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="开启"
            android:layout_gravity="bottom|center"
            android:layout_marginBottom="20dp"
            android:visibility="gone"/>
</FrameLayout>
第二步:在res文件夹下drawable文件下写两个shape。
//未被选择的shape
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
<corners android:radius="30dp"/>
    <solid android:color="#e2e4e6"/>
</shape>
//被选择的shape
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <corners android:radius="30dp"/>
    <solid android:color="#da20ce"/>
</shape>
第三步:
public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private ViewPager viewpager;
    private LinearLayout linear;
    private Button btn_jump;
    //本地图片的数据源。
    private int[] pic={R.mipmap.a,R.mipmap.b,R.mipmap.c,R.mipmap.d,R.mipmap.e};
    private List<ImageView> imageList;
    private List<ImageView> dotList;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
        initData();
        initAdapter();
        initListener();
    }

    private void initListener() {
        //Viewpager的监听事件。
        viewpager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                for (int i = 0; i <dotList.size() ; i++) {
                    if(position==i){
                        dotList.get(i).setImageResource(R.drawable.select);
                    }else{
                        dotList.get(i).setImageResource(R.drawable.normal);
                    }
                    if (position==dotList.size()-1){
                        linear.setVisibility(View.INVISIBLE);
                        btn_jump.setVisibility(View.VISIBLE);
                    }else{
                        linear.setVisibility(View.VISIBLE);
                        btn_jump.setVisibility(View.INVISIBLE);
                    }
                }
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }

    private void initAdapter() {
        //ViewPager的适配器
        MyViewPagerAdapter myViewPagerAdapter = new MyViewPagerAdapter(imageList);
        viewpager.setAdapter(myViewPagerAdapter);
    }

    private void initData() {
        //图片的数据源
        imageList = new ArrayList<>();
        for (int i = 0; i <5 ; i++) {
            ImageView imageView = new ImageView(this);
            imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
            imageView.setImageResource(pic[i]);
            imageList.add(imageView);
        }
        //圆点指示器的数据源。
        dotList = new ArrayList<>();
        for (int i = 0; i < 5; i++) {
            ImageView imageView = new ImageView(this);
            imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
            LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
            layoutParams.height=30;
            layoutParams.width=30;
            layoutParams.rightMargin=20;
            layoutParams.leftMargin=20;
            imageView.setLayoutParams(layoutParams);
            if(i==0){
                imageView.setImageResource(R.drawable.select);
            }else{
                imageView.setImageResource(R.drawable.normal);
            }
            linear.addView(imageView);
            dotList.add(imageView);
        }
    }

    private void initView() {
        viewpager = (ViewPager) findViewById(R.id.viewpager);
        linear = (LinearLayout) findViewById(R.id.linear);
        btn_jump = (Button) findViewById(R.id.btn_jump);

        btn_jump.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.btn_jump:

                break;
        }
    }
}
第四步:
适配器的写法:
//继承PagerAdapter
public class MyViewPagerAdapter extends PagerAdapter{
    private List<ImageView> imageList;

    public MyViewPagerAdapter(List<ImageView> imageList) {
        this.imageList = imageList;
    }

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

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view==object;
    }
//重写的两个方法
    //实例化item
    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        container.addView(imageList.get(position));
        return imageList.get(position);
    }
    //销毁item
    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        //注意必须把这删掉。
        //super.destroyItem(container, position, object);
        container.removeView(imageList.get(position));
    }
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值