Android Tab -- 使用ViewPagerPagerAdapter来实现

Posted 2020-08-03 yarightok

 原文地址：http://blog.csdn.net/crazy1235/article/details/42678877

效果：滑动切换，自动切换。

 

代码：https://github.com/ldb-github/Layout_Tab

1、布局界面通过ViewPager标签来实现视图左右切换。

2、然后通过LinearLayout增加指示器功能，表明当前展示的是第几个视图；其中指示器是通过两种小圆点图片来表示未显示和显示两种状态。

<?xml version="1.0" encoding="utf-8"?>
<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/first_vp"
        android:layout_width="match_parent"
        android:layout_height="250dp" />

    <LinearLayout
        android:id="@+id/point_layout"
        android:layout_width="match_parent"
        android:layout_height="20dip"
        android:layout_alignBottom="@id/first_vp"
        android:background="#B8B8B8"
        android:gravity="center_horizontal"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:background="@drawable/dian"/>

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginLeft="20dip"
            android:background="@drawable/dian"/>

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginLeft="20dip"
            android:background="@drawable/dian"/>

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginLeft="20dip"
            android:background="@drawable/dian"/>

    </LinearLayout>

</RelativeLayout>

viewpager_pageradapter.xml

 

1、在原文的基础上

a、增加了isSlipped控制手动滑动后当前显示图片currentIndex与自动轮播what不一致问题。

b、增加isRunning控制退出Activity后，轮播线程继续在执行的问题。

2、ViewPager与PagerAdapter的一点关系：

viewPager.setCurrentItem() --> viewPager.populate() --> viewPager.addNewItem() --> adapter.instantiateItem()

public class ViewPagerAndPagerAdapterActivity extends Activity{

    private static final String LOG_TAG =
            ViewPagerAndPagerAdapterActivity.class.getSimpleName();

    private ViewPager viewPager;
    private ArrayList<View> list = new ArrayList<>();
    // 底部点的布局
    private LinearLayout pointLayout;
    // 底部的点
    private ImageView[] dots;
    // 当前选中的索引
    private int currentIndex;
    private boolean flag = true;
    // 自增int
    private AtomicInteger what = new AtomicInteger(0);
    private boolean isSlipped;
    // 控制循环播放图片线程
    private boolean isRunning;

    private PagerAdapter pagerAdapter = new PagerAdapter() {
        @Override
        public int getCount() {
            Log.d(LOG_TAG, "In PagerAdapter.getCount()");
            return list.size();
        }

        @Override
        public boolean isViewFromObject(View view, Object object) {
            Log.d(LOG_TAG, "In PagerAdapter.isViewFromObject()");
            return view == object;
        }

        // viewPager.setCurrentItem() --> viewPager.populate() --> viewPager.addNewItem()
        // --> adapter.instantiateItem()

        // 在ViewPager.addNewItem()方法中调用
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            Log.d(LOG_TAG, "In PagerAdapter.instantiateItem()");
            container.addView(list.get(position));
            return list.get(position);
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            Log.d(LOG_TAG, "In PagerAdapter.destroyItem()");
            container.removeView(list.get(position));
        }
    };

    private final Handler viewHandler = new Handler(){
        @Override
        public void handleMessage(Message msg) {
            Log.d(LOG_TAG, "In Handler.handleMessage start");
            viewPager.setCurrentItem(msg.what);
            Log.d(LOG_TAG, "In Handler.handleMessage stop");
            setDots(msg.what);
        }
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        Log.d(LOG_TAG, "In onCreate");
        super.onCreate(savedInstanceState);
        setContentView(R.layout.viewpager_pageradapter);

        init();
        initDots();

    }

    @Override
    protected void onStart() {
        Log.d(LOG_TAG, "In onStart");
        super.onStart();
    }

    @Override
    protected void onResume() {
        Log.d(LOG_TAG, "In onResume");
        super.onResume();
        isRunning = true;
        loopPlay();
    }

    @Override
    protected void onPause() {
        Log.d(LOG_TAG, "In onPause");
        super.onPause();
    }

    @Override
    protected void onStop() {
        Log.d(LOG_TAG, "In onStop");
        super.onStop();
        isRunning = false;
    }

    @Override
    protected void onDestroy() {
        Log.d(LOG_TAG, "In onDestroy");
        super.onDestroy();
    }

    private void init(){
        isSlipped = false;

        viewPager = (ViewPager) findViewById(R.id.first_vp);
        LayoutInflater inflater = LayoutInflater.from(this);
        View view1 = inflater.inflate(R.layout.viewpager_pageradapter_tab1, null);
        View view2 = inflater.inflate(R.layout.viewpager_pageradapter_tab2, null);
        View view3 = inflater.inflate(R.layout.viewpager_pageradapter_tab3, null);
        View view4 = inflater.inflate(R.layout.viewpager_pageradapter_tab4, null);
        list.add(view1);
        list.add(view2);
        list.add(view3);
        list.add(view4);

        viewPager.setAdapter(pagerAdapter);
        // setOnPageChangeListener 弃用了
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset,
                                       int positionOffsetPixels) {
                Log.d(LOG_TAG, "In OnPageChangeListener.onPageScrolled");
            }

            @Override
            public void onPageSelected(int position) {
                Log.d(LOG_TAG, "In OnPageChangeListener.onPageSelected");
                isSlipped = true;
                setDots(position);
            }

            @Override
            public void onPageScrollStateChanged(int state) {
                Log.d(LOG_TAG, "In OnPageChangeListener.onPageScrollStateChanged");
            }
        });
        
    }

    /**
     * 初始化底部的点
     */
    private void initDots(){
        pointLayout = (LinearLayout) findViewById(R.id.point_layout);
        dots = new ImageView[list.size()];
        for(int i = 0; i < list.size(); i++){
            dots[i] = (ImageView) pointLayout.getChildAt(i);
        }
        currentIndex = 0;
        dots[currentIndex].setBackgroundResource(R.drawable.dian_down);
    }

    /**
     * 当滚动时更换点的背景图
     */
    private void setDots(int position){
        if(position < 0 || position > list.size() - 1 || currentIndex == position){
            return;
        }
        dots[position].setBackgroundResource(R.drawable.dian_down);
        dots[currentIndex].setBackgroundResource(R.drawable.dian);
        currentIndex = position;
    }

    /**
     * 循环播放图片
     */
    private void loopPlay() {
        /**
         * 开辟线程来控制图片左右轮播
         */
        new Thread(new Runnable() {
            @Override
            public void run() {
                Log.d(LOG_TAG, "Runnable.run isRunning = " + isRunning);
                while (isRunning) {
                    Log.d(LOG_TAG, "In loopPlay.run isSlipped = " + isSlipped);
                    Log.d(LOG_TAG, "In loopPlay.run currentIndex = " + currentIndex);
                    // 处理手动滑动的情况
                    if (isSlipped) {
                        isSlipped = false;
                        Log.d(LOG_TAG, "In loopPlay.run isSlipped was recovered ");
                        what.set(currentIndex);
                    }
                    viewHandler.sendEmptyMessage(what.get());
                    if (what.get() >= list.size() - 1) {
                        flag = false;
                    }
                    if (what.get() < 1) {
                        flag = true;
                    }
                    if (flag) {
                        what.incrementAndGet();
                    } else {
                        what.decrementAndGet();
                    }
                    try {
                        Thread.sleep(3000);
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                }
            }
        }).start();
    }
}

ViewPagerAndPagerAdapterActivity.java