Android Tab -- 使用ViewPager、PagerAdapter来实现

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

效果:滑动切换,自动切换。

代码:

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

时间: 2024-10-28 12:38:30

Android Tab -- 使用ViewPager、PagerAdapter来实现的相关文章

Android Tab类型主界面 Fragment+TabPageIndicator+ViewPager

文章地址: Android项目Tab类型主界面大总结 Fragment+TabPageIndicator+ViewPager 1.使用ViewPager + PagerAdapter 每个页面的内容都在一个Activity中,维护起来会比较麻烦 2.FragmentManager + Fragment 每个页面的内容分开,但是只能点击按钮换页 3.ViewPager + FragmentPagerAdapter 综合前两种方式,比较好 4.TabPageIndicator + ViewPager

Android Tab大总结 Fragment+TabPageIndicator+ViewPager

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/24740977 Android现在实现Tab类型的界面方式越来越多,今天就把常见的实现方式给大家来个总结.目前写了: 1.传统的ViewPager实现 2.FragmentManager+Fragment实现 3.ViewPager+FragmentPagerAdapter实现 4.TabPageIndicator+ViewPager+FragmentPagerAdapter 1

Tab系列 01 ViewPager+PagerAdapter(传统方式)

ViewPager :  左右切换屏幕 PagerAdapter:   ViewPager的适配器, 加载ViewPager内容显示的View 实现四个方法: isViewFromObject(); getCount(); instantiateItem();添加视图 destroyItem()销毁视图 pagerAdapter = new PagerAdapter() { @Override public boolean isViewFromObject(View arg0, Object a

android Tab =viewpager+fragmnet

1.定义几个fragment 的subclass 如fragmentone,fragmenttwo; public class fragmentthree extends Fragment { private View view; /** * */ @Override public View onCreateView(LayoutInflater inflater,ViewGroup container,Bundle SaveInflaterState){ view=inflater.infla

Android开发之ViewPager及PagerAdapter

ViewPager,官网链接--http://developer.android.com/reference/android/support/v4/view/ViewPager.html ViewPager,位于android.support.v4.view.ViewPager. 1.继承自ViewGroups,继承关系请看官网截图 2.主要使用在 a.app的引导页面的展示   b.可左右滑动的框架 ViewPager特点: 1)ViewPager类直接继承了ViewGroup类,所有它是一个

android UI之ViewPager多页面滑动效果

  viewPager实现引导页 ViewPager多页面滑动效果 1.Android的左右滑动在实际编程经常能用到,比如查看多张图片,左右 切换tab页. 2.自android 3.0之后的SDK中提供了android-support-V4包用以实现 版本兼容,让老版本系统下的应用通过加入jar包实现扩展,其中有一 个可以实现左右滑动的类ViewPager 今天我们就用ViewPager类来实现引导页的实战案例 实现功能: 1.实现ViewPager多页面滑动效果. 2.下方的显示当前

Android开发之ViewPager

什么是ViewPager? ViewPager是安卓3.0之后提供的新特性,继承自ViewGroup,专门用以实现左右滑动切换View的效果. 如果想向下兼容就必须要android-support-v4.jar这个包的支持,这是一个来自google提供的一个附加包. 通俗点来讲,就是现在市面上大多数app,安装完第一次打开软件会出现的一个左右滑动的引导界面. 布局代码: 要点1.页面的小圆点的控制,当在当前页时小圆点不可点. 所以有多少个页面就需要添加多少的圆点图片. 1 <RelativeLa

Android控件——ViewPager

摘要 ViewPager最早出自4.0版本,那么低版本如何能使用ViewPager呢?为了兼容低版本安卓设备,谷歌官方给我们提供了一个的软件包android.support.v4.view.这个V4包囊了只有在安卓3.0以上可以使用的api,而viewpager就是其中之一.利用它,我们可以做很多事情,从最简单的引导页导航,到轮转广告,到页面菜单等等,无不出现ViewPager的身影.应用广泛,简单好用,更好的交互性,这也是ViewPager一出现便大受程序员欢迎的原因.如此好用的控件,你是不是

Android PullToRefreshListView和ViewPager的结合使用

其实这个不是什么新东西了,在介绍(一)中我们就知道了PullToRefreshListView的用法,这里只要将其放入到ViewPager中就行啦.ViewPager还是和以往一样的定义和使用,在适配器中存视图的时候放入PullToRefreshListView就行. 1.ViewPager的布局文件 activity_main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xml