Android開發之ViewPager滑動頁面效果實現

jopen 10年前發布 | 55K 次閱讀 Android Android開發 移動開發

       我們先來谷歌官方文檔對viewpager的介紹，該類允許用戶通過頁面翻轉左右的數據，需要通過實現PagerAdapter適配器來生成視圖顯示的 頁面。因為注意這個類是早期設計和開發的，API可能會改變，并在以后更新兼容庫,到時候我們需要做相應的處理。ViewPager最常用于結合 Fragment,這是一個方便的方式來供應和管理每個頁面的生命周期,我們后面的博客介紹相關的內容，今天我們先來簡單實現viewpager的功能。

MainAcitivity的代碼

    package com.example.f10_viewpager;  

    import java.util.ArrayList;  
    import java.util.List;  
    import android.os.Bundle;  
    import android.app.Activity;  
    import android.support.v4.view.PagerAdapter;  
    import android.support.v4.view.PagerTabStrip;  
    import android.support.v4.view.ViewPager;  
    import android.view.LayoutInflater;  
    import android.view.View;  
    import android.view.ViewGroup;  

    public class MainActivity extends Activity {  

        private View view1, view2, view3;// 需要滑動的頁卡  
        private ViewPager viewPager;  
        private PagerTabStrip pagerTabStrip;  
        private List<View> viewList;// 把需要滑動的頁卡添加到這個list中  
        private List<String> titleList;// viewpager的標題  

        @Override  
        public void onCreate(Bundle savedInstanceState) {  
            super.onCreate(savedInstanceState);  
            setContentView(R.layout.activity_main);  
            // 像普通控件一樣先初始化  
            viewPager = (ViewPager) findViewById(R.id.viewpager);  
            pagerTabStrip = (PagerTabStrip) findViewById(R.id.pagertab);  
            pagerTabStrip.setDrawFullUnderline(false);//設置下劃線不整頁顯示  
            pagerTabStrip.setTextSpacing(1000);//設置標題之間的距離  
            initView();  
            MyAdapter pagerAdapter = new MyAdapter();  
            viewPager.setAdapter(pagerAdapter);  
        }  
        //填充布局，設置每一頁的標題  
        private void initView() {  
            view1 = findViewById(R.layout.layout1);  
            view2 = findViewById(R.layout.layout2);  
            view3 = findViewById(R.layout.layout3);  
            viewList = new ArrayList<View>();// 將要分頁顯示的View裝入數組中  
            viewList.add(view1);  
            viewList.add(view2);  
            viewList.add(view3);  
            titleList = new ArrayList<String>();// 每個頁面的Title數據  
            titleList.add("第一個頁面");  
            titleList.add("第二個頁面");  
            titleList.add("第三個頁面");  
        }  

        public class MyAdapter extends PagerAdapter {  
            @Override  
            public boolean isViewFromObject(View arg0, Object arg1) {  

                return arg0 == arg1;  
            }  

            @Override  
            public int getCount() {  

                return viewList.size();  
            }  

            @Override  
            public void destroyItem(ViewGroup container, int position, Object object) {  
                container.removeView(viewList.get(position));  

            }  

            @Override  
            public int getItemPosition(Object object) {  

                return super.getItemPosition(object);  
            }  

            @Override  
            public CharSequence getPageTitle(int position) {  

                return titleList.get(position);  

            }  

            // 將每一頁的布局填充如ViewGroup容器中  
            @Override  
            public Object instantiateItem(ViewGroup container, int position) {  
                container.addView(viewList.get(position));  

                return viewList.get(position);  
            }  

        };  

    }

   在我之間瀏覽博文的時候，有人提到過第30行代碼設置標題的距離效果沒有實現，不知道為什么，后來我調試了一下，發現應該是這個值要設置的大一些，我這 里設置的就是1000就實現了一個頁面只顯示一個標題的效果。在layout布局文件下，我們首先得先創建三個簡單的布局文件，來實現滑動效果，當然最重 要的是main.xml的代碼書寫
<?xml version="1.0" encoding="utf-8"?>    
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    
    android:layout_width="fill_parent"    
    android:layout_height="fill_parent"    
    android:orientation="vertical" >    

   <android.support.v4.view.ViewPager    
        android:id="@+id/viewpager"    
        android:layout_width="wrap_content"    
        android:layout_height="wrap_content"    
        android:layout_gravity="center" >    

        <android.support.v4.view.PagerTabStrip      
            android:id="@+id/pagertab"      
            android:layout_width="wrap_content"      
            android:layout_height="wrap_content"      
            android:layout_gravity="top"/>     





    </android.support.v4.view.ViewPager>    

</LinearLayout>
 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！