Android ViewPager simple to use

1.ViewPager automatic scrolling effect

FIG rotation, described by the text background images, navigation dots, picture update adapter which, due to the text, with ViewPager waypoint is displayed, when scrolled to update the current Item, code is as follows:

public class MainActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener {

    private ViewPager viewPager;
    private int[] picres;//轮播的图片数组
    private ArrayList<ImageView> list;
    private LinearLayout ll_points;//跟随轮播图的导航点
    private String[] desc;///跟随轮播图的文字描述
    private TextView tv_desc;
    private boolean isRunning = true;//是否在轮播显示
    private  ImageView imageView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();//初始化View
        initData();//数据初始化
        initAdapter();//初始化适配器
        //轮询(自动轮番)
        new Thread(new Runnable() {
            @Override
            public void run() {
               while (isRunning){
                   try {
                       Thread.sleep(2000);//两秒轮播一次
                   } catch (InterruptedException e) {
                       e.printStackTrace();
                   }
                   runOnUiThread(new Runnable() {
                       @Override
                       public void run() {
                           //设置显示的当前item(每隔2秒自动轮播到下一个)
                           viewPager.setCurrentItem(viewPager.getCurrentItem() + 1);
                       }
                   });
               }
            }
        }).start();
    }

    private void initAdapter() {
        viewPager.setAdapter(new MyAdapter());
        viewPager.setCurrentItem(5000000);//初始当前位置(为了可以左右都可以无限滑动)
    }

    private void initData() {
        for (int i= 0;i < picres.length;i++){
            imageView = new ImageView(this);
            imageView.setBackgroundResource(picres[i]);
            list.add(imageView);
            View view = new View(this);
            view.setBackgroundResource(R.drawable.select_point);
            LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(10, 10);
            ll_points.addView(view,layoutParams);
            if (i!=0) {
                layoutParams.leftMargin = 10;//设置间隙
            }
        }
    }

    private void initView() {
        viewPager = findViewById(R.id.vp);
        viewPager.setOffscreenPageLimit(2);//左右缓存数量
        viewPager.addOnPageChangeListener(this);//监听ViewPager
        ll_points = findViewById(R.id.ll_points);
        tv_desc = findViewById(R.id.tv_desc);//文字描述
        picres = new int[]{R.mipmap.a,R.mipmap.b,R.mipmap.c,R.mipmap.d,R.mipmap.e};     
        desc = new String[]{"读书无疑须有疑","有疑定要求无疑","无疑本自有疑始","有疑方能达无疑","将信将疑"};
        list = new ArrayList<>();
    }
    
     //滚动时调用
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
    }

    //滚动到当前item调用
    @Override
    public void onPageSelected(final int position) {
        tv_desc.setText(desc[position%5]);//文字描述设置
        for (int i=0;i<ll_points.getChildCount();i++){
            ll_points.getChildAt(i).setEnabled(position%5 == i);//对滚到的item设置不同背景
        }
    }

    /*此方法是在状态改变的时候调用,其中state这个参数
     *有三种状态(0,1,2)
     *state=0的时辰默示什么都没做
     *state ==1的时辰默示正在滑动
     *state==2的时辰默示滑动完毕了
     */
    @Override
    public void onPageScrollStateChanged(int state) {

    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        isRunning = false;//结束轮播
    }
}

2.PagerAdapter adapter

    public class MyAdapter extends PagerAdapter {

        @Override
        public int getCount() {
            return Integer.MAX_VALUE;//轮播位置的数量,模拟可以无限滑动
        }
        /**
         * 创建要显示的当前条目内容
         * @param container:ViewPager
         * @param position:当前条目位置
         * @return:显示的当前条目内容
         */
        @NonNull
        @Override
        public Object instantiateItem(@NonNull ViewGroup container, final int position) {
            ImageView imageView = list.get(position%5);//拿到当前对象
            //当前图片点击事件
            imageView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    Toast.makeText(MainActivity.this, desc[position%5], Toast.LENGTH_SHORT).show();
                }
            });
            //将当前对象加到容器
            container.addView(imageView);
            return imageView;
        }


        @Override
        public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
            container.removeView((ImageView)object);
        }

        //判断view是否有缓存复用
        @Override
        public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
            return view == object;
        }
    }

3. Set waypoint

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="true" android:drawable="@drawable/shape_point"/>
    <item android:state_enabled="false" android:drawable="@drawable/shape_point_dark"/>
</selector>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <corners android:radius="20dp"/>
    <solid android:color="#fff" />
</shape>

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <corners android:radius="20dp"/>
    <solid android:color="@android:color/darker_gray" />
</shape>

4. Layout

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    tools:context=".MainActivity">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <androidx.viewpager.widget.ViewPager
            android:id="@+id/vp"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="45dp"
            android:background="#80000000"
            android:padding="5dp"
            android:orientation="vertical"
            android:layout_alignParentBottom="true">

            <TextView
                android:id="@+id/tv_desc"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:maxLines="1"
                android:layout_gravity="center_horizontal"
                android:ellipsize="end"
                android:textColor="@android:color/white"/>

            <LinearLayout
                android:id="@+id/ll_points"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:layout_gravity="center"
                android:layout_marginTop="5dp">
            </LinearLayout>
        </LinearLayout>
    </RelativeLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

To be perfect

Published 28 original articles · won praise 1 · views 522

Guess you like

Origin blog.csdn.net/qq_40575302/article/details/104665084