程序猿媛一：Android滑動翻頁+區域點擊事件

          滑動翻頁+區域點擊事件

                          ViewPager+GrideView

聲明：博文爲原創，文章內容爲，效果展現，思路闡述，及代碼片斷。文尾附註源碼獲取途徑。

  轉載請保留原文出處「http://my.oschina.net/gluoyer/blog」，謝謝！

本文介紹，利用GrideView擴展，結合ViewPager設置FragmentPagerAdapter，實現以下功能：

• 九宮格樣式顯示列表項，可左右滑動切換頁面；

• 點擊空白區域，顯示和隱藏懸浮內容。

首先，看下實現效果：

 

下面介紹實現思路及部分代碼，文尾附錄所有源碼獲取途徑。

1、九宮格樣式顯示列表，左右滑動切換頁面

    九宮格樣式，天然想到GrideView；而左右滑動切換，又是ViewPager的強項。此例結合了這二者來實現。

    ViewPager的內容能夠設置FragmentPagerAdapter，即：每一項均可以是一個Fragment。再爲每一個Fragment設置一個包含3x3的GrideView，就是功能實現的基礎。

    代碼實現了ChapterAdapter，繼承字FragmentPagerAdapter：

public class ChapterAdapter extends FragmentPagerAdapter{
    public final static int CHAPTER_PAGE_NUM = 9;
    private ArrayList<Fragment> mFragments;
    
    public ChapterAdapter(FragmentManager fm,
				ArrayList<ArrayList<String>> arrayLists) {
        super(fm);
        mFragments = new ArrayList<Fragment>();
        int startPos = 0; // count the click offset
        for(ArrayList<String>list : arrayLists) {
            mFragments.add(ChapterFragment
			.getNewInstance(startPos * CHAPTER_PAGE_NUM, list));
            startPos ++;
        }
    }
}

    並在其間建立並保存了每一個頁面的ChapterFragment。

    ChapterFragment中，定義了GetView的ChapterGvAdapter，以及點擊事件監聽onChapterPageClickListener：用於屏蔽自身點擊事件，以及後續將要介紹的，顯示和隱藏懸浮內容的空白處點擊事件。

public class ChapterFragment extends Fragment {
    public void onCreate(Bundle savedInstanceState) {
        // 這裏很重要，填充空白內容
        if(mNameList.size() < ChapterAdapter.CHAPTER_PAGE_NUM) {
            for(int i=mNameList.size(); 
                i<ChapterAdapter.CHAPTER_PAGE_NUM; i++) {
                mNameList.add(null);
            }
        }
    private class ChapterGvAdapter extends BaseAdapter {
        // 稍後介紹
    ｝
   // 各項及空白處點擊事件監聽
   public interface onChapterPageClickListener {
        public abstract void onChapterItemClick(int position, String name);
        public abstract void onChapterSpaceClick();
    }
｝

    其中，onCreate中，填充空白處很重要，請注意瞭解。由於，不可能保證每頁剛好9項內容，因此，添加特殊的null內容，在添加View的時候，設置其點擊事件，避免點擊無響應的狀況。

2、點擊空白區域，顯示和隱藏懸浮內容

    此部分關鍵部有兩個：

     1. 佈局文件嵌套空白區域；

2. ChapterGvAdapter的getView中設置事件監聽。

    Ⅰ、佈局文件嵌套空白區域

<LinearLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="16dip"
    android:paddingRight="16dip"
    android:paddingTop="20dip"
    android:paddingBottom="20dip"
    android:gravity="center" >    
    <LinearLayout
        android:id="@+id/cpt_gv_item_select_region"
        android:clickable="true" >
        <!-- set default background, to hold the sapce for empty item -->
        <ImageView
            android:id="@+id/cpt_gv_item_img"
            android:src="@drawable/ic_launcher"/>    
        <TextView
            android:id="@+id/cpt_gv_item_name" />
    </LinearLayout>
</LinearLayout>

    能夠看到，最外層的LinearLayout（L1）設置了padding屬性（大小根據實際需求調整）。將內層的LinearLayout（L2）表明的實際內容區域的範圍壓縮。

    這樣，咱們設置了L1和L2的點擊事件以後，點擊在L2區域，就觸發了L2的點擊事件，處理onChapterItemClick回調事件，模擬GrideView項點擊事件；而點擊在L1的padding區域，就觸發了L1的點擊事件，去處理onChapterSpaceClick事件，就是增長的空白區域點擊事件響應了。

    下面，看一下點擊事件的設置。（對了，要記得前面提到的沒有9個子項時候null內容的設置）

    Ⅱ、ChapterGvAdapter的getView中設置事件監聽

private class ChapterGvAdapter extends BaseAdapter {
    public View getView(final int position, View convertView, ViewGroup parent) {
    // shadow the default GridView item click event
    convertView.setOnClickListener(new OnClickListener() {
        @Override
        public void onClick(View v) {
            mClickListener.onChapterSpaceClick();
        }
    });
    // Has content, set its click listener
    if(null != mNameList.get(position)) {
        holder.mSelectRegion.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                mClickListener.onChapterItemClick(mStartPos + position,
					mNameList.get(position));
            }
        });
        Utils.setVisible(holder.mSelectRegion);
        holder.mName.setText(mNameList.get(position));
    }
    // no content, do the same as convertView do.
    // if not set this listener, click no content space will no response.
    else {
        holder.mSelectRegion.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                mClickListener.onChapterSpaceClick();
            }
        });
        Utils.setInvisible(holder.mSelectRegion);
    }
    // Default image, do transfer and set what your want, like i set name upside.
    holder.mIcon.setImageResource(R.drawable.ic_launcher);
    return convertView;
    }
｝

    代碼中，能夠比較明確的看到，各個區域監聽事件的設置狀況。同時，演示應用背景也作了設置，能夠明確看到點擊時的狀況。

    至此，主要思路闡述完畢。

    另外，點擊空白區域，懸浮內容的顯示和隱藏，在回調事件中進行處理。其實現比較簡單，回調事件的處理，和內容的設置，請查看源碼的ChapterSlideActivity.java，和ChapterToggleView.java，不贅述，謝謝！

  ----------------------------------------------------------------------------------

    由於涉及到後續的更新，爲了方便源碼的管理和更新，採起了應用的方式來獲取源碼，保證可用。

   應用下載連接：「http://mail.sina.com.cn/netdisk/download.php?id=21a861dbceca3ee79e1afa0341fa3f04fa」。

      （哎，沒有本身的服務器，依託網絡資源，你們體諒一下）

    應用運行後，按鈕「章節左右滑動，點擊空白事件」，點擊可進入效果演示，如文初截圖所示；

    按手機的菜單鍵，顯示「關於」，點擊進入筆者相關頁面，並在底部提供按鈕「獲取源碼」。

    下面附錄，運行初始頁面；獲取源碼成功提示頁面；及打開源碼壓縮文件截圖：

   

   全文完，但願對您有幫助，謝謝！

應用下載連接：「http://mail.sina.com.cn/netdisk/download.php?id=21a861dbceca3ee79e1afa0341fa3f04fa」

轉載請保留原文地址「http://my.oschina.net/gluoyer/blog/175195」，謝謝！另：博客園同步發佈。