使用ViewPager實現幾個界面的切換,類似QQ

這幾天在研究ViewPager,簡單的寫一下如何使用ViewPager實現類似於QQ的“最近聯繫人、好友、羣組”的界面切換(不知道他們是不是用這個方法實現的)。


ViewPager已經在android-sdk中加入了,具體的位置在

%android_sdk_home%\android-compatibility\v4

%android_sdk_home%是你的android-sdk-windows目錄


好,下面放一張效果圖:






步驟一:新建一個工程,我的是Viewpager

步驟二:導入jar包

具體如下:

右鍵工程--Properties--單擊左側Java Build Path--單擊右側Libraries標籤--單擊右側Add External Jars--選擇上面描述位置的jar包,保存


步驟三:編寫一個主界面,加入android.support.v4.view.ViewPager組件

<?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" >

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/hello" />
    
    
    <android.support.v4.view.ViewPager
        android:id="@+id/mViewPager"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        />

    
</LinearLayout>




步驟四:編寫三個要添加進來的界面

界面都很簡單,隨便寫的

界面1

<?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:background="#ff0000"
    android:orientation="vertical" >

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="layout1" />

</LinearLayout>

界面2

<?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:background="#00ff00"
    android:orientation="vertical" >

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="layout2" />

</LinearLayout>

界面3

<?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:background="#0000ff"
    android:orientation="vertical" >

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="layout3" />

</LinearLayout>




步驟五:編寫主類,我的名字是叫ViewpagerActivity

package com.carter.viewpager;

import java.util.ArrayList;
import java.util.List;
import java.util.zip.Inflater;

import android.app.Activity;
import android.app.ActivityGroup;
import android.content.Intent;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class ViewpagerActivity extends ActivityGroup {
    
    /**
     * 能夠支持滑動的組件
     */
    ViewPager mViewPager;
    
    /**
     * ViewPager 需要設置該Adapter才能實現添加界面,
     * 該Adapter繼承自PagerAdapter
     */
    MyPagerAdapter adapter;
    
    /**
     * 用於保存三個界面
     */
    List<View> list; 
    
    /**
     * 用於生成界面
     */
    LayoutInflater mInflater;
    
    
    
    
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        mInflater = this.getLayoutInflater();
        
        /**
         * 添加進來三個界面到List,用於初始化PagerAdapter
         */
        list = new ArrayList<View>();
        list.add(this.getLocalActivityManager().startActivity("layout1", new Intent(ViewpagerActivity.this, Layout1Activity.class)).getDecorView());
        list.add(mInflater.inflate(R.layout.layout2, null));
        list.add(mInflater.inflate(R.layout.layout3, null));
        
        mViewPager = (ViewPager)findViewById(R.id.mViewPager);
        adapter = new MyPagerAdapter(list);
        mViewPager.setAdapter(adapter);
        
        /**
         * 爲ViewPager添加PageChangeListener,在回調的方法中可以完成其他的事情,例如處理一些界面標籤的轉換之類的,如果你有標籤欄的話
         */
        mViewPager.setOnPageChangeListener(new OnPageChangeListener() {
            
            @Override
            public void onPageSelected(int arg0) {
                // TODO Auto-generated method stub
                Log.i("carter", "onPageSelected");
            }
            
            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2) {
                // TODO Auto-generated method stub
                
            }
            
            @Override
            public void onPageScrollStateChanged(int arg0) {
                // TODO Auto-generated method stub
                
            }
        });
        
    }
    
    
    
    
    class MyPagerAdapter extends PagerAdapter
    {
        List<View> mList;
        
        public MyPagerAdapter(List<View> list){
            mList = list;
        }

        @Override
        public int getCount() {
            // TODO Auto-generated method stub
            return mList.size();
        }

        @Override
        public boolean isViewFromObject(View arg0, Object arg1) {
            // TODO Auto-generated method stub
            return arg0 == (arg1);
        }

        @Override
        public void destroyItem(View container, int position, Object object) {
            // TODO Auto-generated method stub
            ((ViewPager)container).removeView(mList.get(position));
        }

        @Override
        public Object instantiateItem(View container, int position) {
            // TODO Auto-generated method stub
            ((ViewPager)container).addView(mList.get(position), 0);
            return mList.get(position);
        }        

        @Override
        public void finishUpdate(ViewGroup container) {
            // TODO Auto-generated method stub
            super.finishUpdate(container);
        }
    }
}




代碼解讀:

1、在上面重寫了PagerAdapter,在裏面最重要的方法就是

@Override
        public Object instantiateItem(View container, int position) {
            // TODO Auto-generated method stub
            ((ViewPager)container).addView(mList.get(position), 0);
            return mList.get(position);
        } 
具體爲什麼每次都是addView到0的位置,目前我還不知道,這個也是從網上找了一個方法看到的。


2、在初始化List的時候,裏面包含的內容是一個個的View元素,在我的瞭解範圍內有兩種方法

第一種就是通過添加Window的getDecorView()來得到一個View

第二種就是通過LayoutInflater,從xml中生成一個View

需要注意的是,第一種方法,需要主類繼承自ActivityGroup,這樣才能在添加時使用getLocalActivityManager以及之後的方法,需要生成的Activity,例如本例中的Layout1Activity,要在AndroidManifest.xml中聲明。

        /**
         * 添加進來三個界面到List,用於初始化PagerAdapter
         */
        list = new ArrayList<View>();
        list.add(this.getLocalActivityManager().startActivity("layout1", new Intent(ViewpagerActivity.this, Layout1Activity.class)).getDecorView());
        list.add(mInflater.inflate(R.layout.layout2, null));
        list.add(mInflater.inflate(R.layout.layout3, null));


3、如果只是從xml生成View來添加的話,完全可以移除繼承ActivityGroup。

4、如果使用startActivity的方法來啓動,需要添加進來的幾個Activity,是一起在加入時就初始化的,可以通過在onCreate()方法中打LOG看出來。



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章