【Android UI設計與開發】第01期：引導界面（一）ViewPager介紹和使用詳解

轉載出處：http://blog.csdn.net/yangyu20121224/article/details/8980917

轉載，請自覺註明！

  

  做Android開發加起來差不多也有一年多的時間了，總是想寫點自己在開發中的心得體會與大家一起交流分享、共同進步，剛開始寫也不知該如何下手，仔細想了一下，既然是剛開始寫，那就從一個軟件給人最直觀的感受——UI設計開始寫起吧，循序漸進，娓娓道來。博主在這裏和大家一起學習，希望能多多支持，話不多說，下面就開始講解UI設計的第一篇。           

   在講解如何實現引導界面的效果之前，我想先詳細介紹一下ViewPager類的使用和說明，因爲這是開發引導界面最重要的類，沒有之一。

一、ViewPager實現的效果圖

 

 

二、ViewPager實現的功能

       看到上面的效果圖，想必大家已經猜出了這個類是幹嗎用的了，ViewPager類提供了多界面切換的新效果，

新效果有如下特徵：

<1>當前顯示一組界面中的其中一個界面；

<2>當用戶通過左右滑動界面時，當前的屏幕顯示當前界面和下一個界面的一部分；

<3>滑動結束後，界面自動跳轉到當前選擇的界面中。

 

三、ViewPager詳細說明

     這是谷歌官方給我們提供的一個兼容低版本安卓設備的軟件包，裏面包囊了只有在安卓3.0以上可以使用的api。而viewpager就是其中之一利用它，我們可以做很多事情，從最簡單的導航，到頁面菜單等等。那如何使用它呢，與LisstView類似，我們也需要一個適配器，他就是PagerAdapter。看一下API的圖片：

          

四、ViewPager的使用

既然我們已經知道了ViewPager類的功能和介紹，那麼這個類到底怎麼使用呢？這裏我們分三個步驟來使用它：

1、在住佈局文件里加入。

<android.support.v4.view.ViewPager   //注意這個組件是用來顯示左右滑動的界面的,如果不加載xml佈局文件,他是不會顯示內容的。
 android:id="@+id/viewpager"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_gravity="center" >

2、加載要顯示的頁卡。

LayoutInflater lf = getLayoutInflater().from(this);
        view1 = lf.inflate(R.layout.layout1, null);
        view2 = lf.inflate(R.layout.layout2, null);
        view3 = lf.inflate(R.layout.layout3, null);

        viewList = new ArrayList<View>();// 將要分頁顯示的View裝入數組中
        viewList.add(view1);
        viewList.add(view2);
        viewList.add(view3);

3、在Activity裏實例化ViewPager組件，並設置它的Adapter（就是PagerAdapter，方法與ListView一樣的），在這裏

一般需要重寫PagerAdapter。

PagerAdapter pagerAdapter = new 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);
            }

            @Override
            public Object instantiateItem(ViewGroup container, int position) {
                container.addView(viewList.get(position));
                weibo_button=(Button) findViewById(R.id.button1);
                weibo_button.setOnClickListener(new OnClickListener() {

                    public void onClick(View v) {
                        intent=new Intent(ViewPagerDemo.this,WeiBoActivity.class);
                        startActivity(intent);
                    }
                });
                return viewList.get(position);
            }

        };
        viewPager.setAdapter(pagerAdapter);

這是重寫PagerAdapter的一個方法，我們還可以這樣做：

public class MyViewPagerAdapter extends PagerAdapter{
        private List<View> mListViews;

        public MyViewPagerAdapter(List<View> mListViews) {
            this.mListViews = mListViews;//構造方法，參數是我們的頁卡，這樣比較方便。
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object)   {
            container.removeView(mListViews.get(position));//刪除頁卡
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {  //這個方法用來實例化頁卡
             container.addView(mListViews.get(position), 0);//添加頁卡
             return mListViews.get(position);
        }

        @Override
        public int getCount() {
            return  mListViews.size();//返回頁卡的數量
        }

        @Override
        public boolean isViewFromObject(View arg0, Object arg1) {
            return arg0==arg1;//官方提示這樣寫
        }
    }

        從上面的圖片可以看到，ViewPager的適配器是PagerAdapter，它是基類提供適配器來填充頁面ViewPager內

部，你很可能想要使用一個更具體的實現,如FragmentPagerAdapter或FragmentStatePagerAdapter。在這裏需要說明一

下，其實ViewPager應該和Fragment一起使用，至少谷歌官方是這麼想的，但是在3.0之下，我們沒有必要這麼做。下

面要注意，當你實現一個PagerAdapter,你必須至少覆蓋以下方法:

• instantiateItem(ViewGroup, int)
• destroyItem(ViewGroup, int, Object)
• getCount()
• isViewFromObject(View, Object)
  

    這一篇講解完ViewPager之後，相信大家也應該對它有了一個初步的認識，那麼在後面的幾篇文章我們將繼續圍
  繞這個類展開下去，希望能幫助大家對於UI的設計和開發也會有一個更加深入的瞭解。