ViewPager+Fragment實現(xiàn)頁面滑動效果

簡單使用XML文件,使用ViewPagerAdapter適配器盾计,來適配不同的page

具體實現(xiàn)方法:
  1. 設(shè)置相應的xml文件,幾個page以及title和bottom
  2. 在MainActivity.xml中加入Title和bottom還有viewPager
  3. 在MainActivity中初始化相應的View派敷,實現(xiàn)ViewPager需要實現(xiàn)的Adapter其中需要復寫幾個方法

destroyItem(), 移除指定位置的頁面所刀。該 Adapter 負責在 finishUpdate() 方法返回時從容器刪除視圖。
container.removeView(mViews.get(position));
instantiateItem(), 創(chuàng)建指定位置的頁面瓶埋,該 Adapter 負責將視圖添加進當前的容器(container)希柿,并返回一個鍵(key),用來關(guān)聯(lián)當前的頁面視圖 View.直接在mViews里面取出相應的View养筒,并且在container里面添加進去

View view = mViews.get(position);container.addView(view);return view;```
   getCount(), 返回可用視圖的數(shù)量曾撤。
   isViewFromObject(),判斷instantiateItem(ViewGroup, int) 方法所返回來的 Key 與一個頁面視圖是否是代表的同一個視圖(即它倆是否是對應的,對應的表示同一個View)晕粪。
   ```java
@Override
   public boolean isViewFromObject(View view, Object object) {
   return view == object;
   }```
- 現(xiàn)在實現(xiàn)初始化View的方法
  //初始化View挤悉,包括ViewPager和相應的幾個控件
  private void initView() {
    mViewPager = (ViewPager) findViewById(R.id.view_pager);
    mTabWinxin = (LinearLayout) findViewById(R.id.id_tab_weixin);
    mTabWinAddres = (LinearLayout) findViewById(R.id.id_tab_contacts);
    mTabWinFrd = (LinearLayout) findViewById(R.id.id_tab_friend);
    mTabWinSetting = (LinearLayout) findViewById(R.id.id_tab_setting);

    mWinxinImg = (ImageButton) findViewById(R.id.id_tab_weixin_img);
    mAddresImg = (ImageButton) findViewById(R.id.id_tab_contacts_img);
    mFrdImg = (ImageButton) findViewById(R.id.id_tab_friend_img);
    mSettingImg = (ImageButton) findViewById(R.id.id_tab_setting_img);

    LayoutInflater mInflater = LayoutInflater.from(this);
    View tab01 = mInflater.inflate(R.layout.tab01, null);
    View tab02 = mInflater.inflate(R.layout.tab02, null);
    View tab03 = mInflater.inflate(R.layout.tab03, null);
    View tab04 = mInflater.inflate(R.layout.tab04, null);
    mViews.add(tab01);
    mViews.add(tab02);
    mViews.add(tab03);
    mViews.add(tab04);

    mAdapter = new PagerAdapter() {

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

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            View view = mViews.get(position);
            container.addView(view);
            return view;
        }

        @Override
        public int getCount() {
            return mViews.size();
        }

        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }
    };

    mViewPager.setAdapter(mAdapter);

}```
  • 到現(xiàn)在,我們就實現(xiàn)了Viewpager的滑動巫湘,但是底部欄的變化和點擊事件都沒有寫装悲,下面對LinearLayout寫入點擊事件(如果LinearLayout里面有Button的點擊沖突事件,那么要在Button里面寫入Clickable為false尚氛,因為Layout首先處理有點擊事件的控件)
private void initEvent() {
        //處理每一個的LinearLayout的點擊事件
        mTabWinxin.setOnClickListener(this);
        mTabWinAddres.setOnClickListener(this);
        mTabWinFrd.setOnClickListener(this);
        mTabWinSetting.setOnClickListener(this);

        /**
         * 在設(shè)置好每次點擊Bottom的點擊事件后诀诊,如果想要拖動ViewPager同時bottom也發(fā)生改變
         * 那么就要重寫PageChangeListener的PageSelected方法
         * 讓在PageChange頁面改變的時候,改變Bottom的圖片
         *
         * Notice 注意SetOnPageChangeListener已經(jīng)遺棄阅嘶,用AddOnPageChangeListener替換
         */
        ViewPager.OnPageChangeListener listener = new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                int currentItem = mViewPager.getCurrentItem();
                resetImg();
                switch (currentItem) {
                    case 0:
                        mWinxinImg.setImageResource(R.drawable.tab_weixin_pressed);
                        break;
                    case 1:
                        mFrdImg.setImageResource(R.drawable.tab_find_frd_pressed);

                        break;
                    case 2:
                        mAddresImg.setImageResource(R.drawable.tab_address_pressed);
                        break;
                    case 3:
                        mSettingImg.setImageResource(R.drawable.tab_settings_pressed);
                        break;

                }
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        };
        mViewPager.addOnPageChangeListener(listener);
    } 

注意Activity實現(xiàn)OnClickListener方法畏梆,重寫OnClick()方法,當每次監(jiān)聽到點擊事件奈懒,都會實現(xiàn)resetImg()方法奠涌,即重置每一個ImageButton成灰色,然后監(jiān)聽到的那個按鈕的點擊磷杏,即將那個ImageButton換成亮色

@Override
    public void onClick(View v) {
        resetImg();
        switch (v.getId()){
            case R.id.id_tab_weixin:
                mViewPager.setCurrentItem(0);
                mWinxinImg.setImageResource(R.drawable.tab_weixin_pressed);
                break;
            case R.id.id_tab_contacts:
                mViewPager.setCurrentItem(2);
                mAddresImg.setImageResource(R.drawable.tab_address_pressed);
                break;
            case R.id.id_tab_friend:
                mViewPager.setCurrentItem(1);
                mFrdImg.setImageResource(R.drawable.tab_find_frd_pressed);
                break;
            case R.id.id_tab_setting:
                mViewPager.setCurrentItem(3);
                mSettingImg.setImageResource(R.drawable.tab_settings_pressed);
                break;
        }
}```

重置每一個Image溜畅,相應的resetImg()方法
```java
private void resetImg() {
        mWinxinImg.setImageResource(R.drawable.tab_weixin_normal);
        mFrdImg.setImageResource(R.drawable.tab_find_frd_normal);
        mAddresImg.setImageResource(R.drawable.tab_address_normal);
        mSettingImg.setImageResource(R.drawable.tab_settings_normal);
    } ```

這樣整個Viewpager配合適配器的滑動界面就完成了

未完待續(xù)(挖坑):ViewPager配合Fragment實現(xiàn)滑動不同界面

-----更新-----
####終極使用ViewPager實現(xiàn)頁面滑動
#####ViewPager結(jié)合Fragment
此方法為上述方法的升級版极祸,在View的管理上慈格,使用Fragment管理會更清晰怠晴,而且更利于后期代碼的修繕
主要是這樣幾個步驟:
1. 初始化View,創(chuàng)建需要的Fragment和xml布局,加入ViewPager布局
```java
<android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

    </android.support.v4.view.ViewPager>
  1. 創(chuàng)建Fragment的List,并且初始化ViewPager和FragmentPagerAdapter
private List<Fragment> mFragments;
onCreate(...){
...
        mFragments = new ArrayList<>();
        Fragment mTab01 = new WeixinFragment();
        Fragment mTab02 = new FrdFragment();
        Fragment mTab03 = new AddressFragment();
        Fragment mTab04 = new SettingFragment();

        mFragments.add(mTab01);
        mFragments.add(mTab02);
        mFragments.add(mTab03);
        mFragments.add(mTab04);
...   }```
3. 設(shè)置ViewPager的監(jiān)聽事件梯捕,重寫onPageSelected()方法
```java
mPagerAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int position) {
                return mFragments.get(position);
            }

            @Override
            public int getCount() {
                return mFragments.size();
            }
        };
mViewPager.setAdapter(mPagerAdapter);
        mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                //用來監(jiān)聽ViewPager的改變短曾,通常用來改變Tab的樣式
                int current = mViewPager.getCurrentItem();
                setTab(current);
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });```
4. 設(shè)置Tab的點擊事件(如果在點擊或者滑動有特效错英,需要進一步去實現(xiàn))這里只介紹,如何實現(xiàn)ViewPager和Fragment的組合效果
```java
public void setSelect(int select) {
        mViewPager.setCurrentItem(select);
    }```
5. 如果你想實現(xiàn)相應的通過ViewPager的監(jiān)聽碉考,來改變Tab的樣式墙贱,這里提供了代碼參考,對應的是ViewPager的addOnPageChangeListener中onPageSelected()中用到的方法
```java
private void setTab(int select) {
        resetImg();
        switch (select){
            case 0:
                mTabWeixinImg.setImageResource(R.drawable.tab_weixin_pressed);
                break;
            case 1:
                mTabFrdImg.setImageResource(R.drawable.tab_find_frd_pressed);
                break;
            case 2:
                mTabAdressImg.setImageResource(R.drawable.tab_address_pressed);
                break;
            case 3:
                mTabSettingImg.setImageResource(R.drawable.tab_settings_pressed);
                break;
        }
    }```

以上總結(jié)參考自[慕課網(wǎng)](http://www.imooc.com/video/5904)中[hyman](http://www.imooc.com/u/320852/courses?sort=publish)的課程
后續(xù)會更新熱門開源項目[FlycoTabLayout](https://github.com/H07000223/FlycoTabLayout)的使用教程(挖坑)纯蛾,這個相對于ViewPager來說更酷炫,更方便使用堕扶,本文的代碼參考在我的GitHub上,歡迎留言提出意見,感謝您的閱讀
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市多柑,隨后出現(xiàn)的幾起案子竣灌,更是在濱河造成了極大的恐慌初嘹,老刑警劉巖温眉,帶你破解...
    沈念sama閱讀 217,509評論 6 504
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件类溢,死亡現(xiàn)場離奇詭異撩炊,居然都是意外死亡,警方通過查閱死者的電腦和手機褐桌,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,806評論 3 394
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來象迎,“玉大人荧嵌,你說我怎么就攤上這事±剩” “怎么了啦撮?”我有些...
    開封第一講書人閱讀 163,875評論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長汪厨。 經(jīng)常有香客問我赃春,道長,這世上最難降的妖魔是什么劫乱? 我笑而不...
    開封第一講書人閱讀 58,441評論 1 293
  • 正文 為了忘掉前任织中,我火速辦了婚禮锥涕,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘狭吼。我一直安慰自己层坠,他們只是感情好,可當我...
    茶點故事閱讀 67,488評論 6 392
  • 文/花漫 我一把揭開白布刁笙。 她就那樣靜靜地躺著破花,像睡著了一般。 火紅的嫁衣襯著肌膚如雪疲吸。 梳的紋絲不亂的頭發(fā)上座每,一...
    開封第一講書人閱讀 51,365評論 1 302
  • 那天,我揣著相機與錄音摘悴,去河邊找鬼峭梳。 笑死,一個胖子當著我的面吹牛烦租,可吹牛的內(nèi)容都是我干的延赌。 我是一名探鬼主播,決...
    沈念sama閱讀 40,190評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼叉橱,長吁一口氣:“原來是場噩夢啊……” “哼挫以!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起窃祝,我...
    開封第一講書人閱讀 39,062評論 0 276
  • 序言:老撾萬榮一對情侶失蹤掐松,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后粪小,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體大磺,經(jīng)...
    沈念sama閱讀 45,500評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,706評論 3 335
  • 正文 我和宋清朗相戀三年探膊,在試婚紗的時候發(fā)現(xiàn)自己被綠了杠愧。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,834評論 1 347
  • 序言:一個原本活蹦亂跳的男人離奇死亡逞壁,死狀恐怖流济,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情腌闯,我是刑警寧澤绳瘟,帶...
    沈念sama閱讀 35,559評論 5 345
  • 正文 年R本政府宣布,位于F島的核電站姿骏,受9級特大地震影響糖声,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,167評論 3 328
  • 文/蒙蒙 一蘸泻、第九天 我趴在偏房一處隱蔽的房頂上張望琉苇。 院中可真熱鬧,春花似錦蟋恬、人聲如沸翁潘。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,779評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽拜马。三九已至,卻和暖如春沐绒,著一層夾襖步出監(jiān)牢的瞬間俩莽,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,912評論 1 269
  • 我被黑心中介騙來泰國打工乔遮, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留扮超,地道東北人。 一個月前我還...
    沈念sama閱讀 47,958評論 2 370
  • 正文 我出身青樓蹋肮,卻偏偏與公主長得像出刷,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子坯辩,可洞房花燭夜當晚...
    茶點故事閱讀 44,779評論 2 354

推薦閱讀更多精彩內(nèi)容