閱讀(11.7k) 書簽贊(0) 我要糾錯(cuò)

Android Fragment實(shí)例精講——底部導(dǎo)航欄+ViewPager滑動(dòng)切換頁(yè)面

2023-03-31 13:46 更新

前三節(jié)我們分別用不同的方式實(shí)現(xiàn)了普通底部導(dǎo)航欄的效果，而本節(jié)我們將會(huì)在第二個(gè)實(shí)例的基礎(chǔ)上加上ViewPager來實(shí)現(xiàn)滑動(dòng)切換頁(yè)面的效果！大部分朋友都知道這個(gè)ViewPager是什么東西吧，如果不知道沒關(guān)系，下面我們簡(jiǎn)單的來介紹一個(gè)這個(gè)控件！

1.ViewPager簡(jiǎn)單介紹

1）是怎么樣的一個(gè)控件？

答：一個(gè)頁(yè)面切換的組件，我們可以往里面填充多個(gè)View，然后我們可以通過觸摸屏幕左右滑動(dòng) 切換不同的View，和前面學(xué)習(xí)的ListView一樣，我們需要一個(gè)Adapter(適配器)，將要顯示的View和我們的ViewPager進(jìn)行綁定，而ViewPager有他自己特定的Adapter——PagerAdapter！另外，Google 官方是建議我們使用Fragment來填充ViewPager的,這樣可以更加方便的生成每個(gè)Page以及管理每個(gè)Page的生命周期!當(dāng)然它給我們提供了兩個(gè)不同的Adapter，他們分別是： FragmentPageAdapter和FragmentStatePagerAdapter！而我們本節(jié)用到的則是前者：FragmentPageAdapter！另外要說一點(diǎn)的是ViewPager的緩存機(jī)制： ViewPager會(huì)緩存當(dāng)前頁(yè)，前一頁(yè)，以及后一頁(yè)，比如有1，2，3，4這四個(gè)頁(yè)面：當(dāng)我們處于第一頁(yè)：緩存1，2
——> 處于第二頁(yè)：緩存 1，2，3
——> 處于第三頁(yè)：緩存2，3，4 ——> 處于第四頁(yè)緩存3，4這樣！

2）使用PagerAdapter要重寫相關(guān)方法：

getCount( ):獲得viewpager中有多少個(gè)view

destroyItem( ):移除一個(gè)給定位置的頁(yè)面。適配器有責(zé)任從容器中刪除這個(gè)視圖。這是為了確保在finishUpdate(viewGroup)返回時(shí)視圖能夠被移除。

instantiateItem( ):①將給定位置的view添加到ViewGroup(容器)中,創(chuàng)建并顯示出來 ②返回一個(gè)代表新增頁(yè)面的Object(key),通常都是直接返回view本身就可以了, 當(dāng)然你也可以自定義自己的key,但是key和每個(gè)view要一一對(duì)應(yīng)的關(guān)系

isViewFromObject( ):判斷instantiateItem(ViewGroup, int)函數(shù)所返回來的Key與一個(gè)頁(yè)面視圖是否是代表的同一個(gè)視圖(即它倆是否是對(duì)應(yīng)的，對(duì)應(yīng)的表示同一個(gè)View),通常我們直接寫 return view == object；就可以了,至于為什么要這樣講起來比較復(fù)雜,后面有機(jī)會(huì)進(jìn)行了解吧貌似是ViewPager中有個(gè)存儲(chǔ)view狀態(tài)信息的ArrayList,根據(jù)View取出對(duì)應(yīng)信息的吧!

PS:不一定要重寫所有方法~

2.實(shí)現(xiàn)效果圖以及工程目錄結(jié)構(gòu)：

先來看下我們要實(shí)現(xiàn)的效果吧

接下來看下我們的項(xiàng)目結(jié)構(gòu)：

3.代碼實(shí)現(xiàn)：

Step 1：相關(guān)資源文件的準(zhǔn)備：

PS：我們是在實(shí)現(xiàn)底部導(dǎo)航欄方法2的基礎(chǔ)上來寫的，所以資源文件照搬即可！這里就不貼多次了~！

Step 2：編寫activity_main.xml的布局文件：

PS：只是把前面的FrameLayout替換成了：android.support.v4.view.ViewPager而已：

activity_mian.xml：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <RelativeLayout
        android:id="@+id/ly_top_bar"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:background="@color/bg_topbar">

        <TextView
            android:id="@+id/txt_topbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_centerInParent="true"
            android:gravity="center"
            android:text="提醒"
            android:textColor="@color/text_topbar"
            android:textSize="18sp" />

        <View
            android:layout_width="match_parent"
            android:layout_height="2px"
            android:layout_alignParentBottom="true"
            android:background="@color/div_white" />

    </RelativeLayout>

    <RadioGroup
        android:id="@+id/rg_tab_bar"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:layout_alignParentBottom="true"
        android:background="@color/bg_white"
        android:orientation="horizontal">

        <RadioButton
            android:id="@+id/rb_channel"
            style="@style/tab_menu_item"
            android:drawableTop="@drawable/tab_menu_channel"
            android:text="@string/tab_menu_alert" />

        <RadioButton
            android:id="@+id/rb_message"
            style="@style/tab_menu_item"
            android:drawableTop="@drawable/tab_menu_message"
            android:text="@string/tab_menu_profile" />

        <RadioButton
            android:id="@+id/rb_better"
            style="@style/tab_menu_item"
            android:drawableTop="@drawable/tab_menu_better"
            android:text="@string/tab_menu_pay" />

        <RadioButton
            android:id="@+id/rb_setting"
            style="@style/tab_menu_item"
            android:drawableTop="@drawable/tab_menu_setting"
            android:text="@string/tab_menu_setting" />

    </RadioGroup>

    <View
        android:id="@+id/div_tab_bar"
        android:layout_width="match_parent"
        android:layout_height="2px"
        android:layout_above="@id/rg_tab_bar"
        android:background="@color/div_white" />

    <android.support.v4.view.ViewPager
        android:id="@+id/vpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/div_tab_bar"
        android:layout_below="@id/ly_top_bar" />

</RelativeLayout>

Step 3：編寫Fragment的布局以及代碼：

PS：這里為了順便演示ViewPager的機(jī)制，特意寫成了四個(gè)Fragment！在onCreateView中打印創(chuàng)建Log！

fg_content.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/bg_white"
    android:orientation="vertical">

    <TextView
        android:id="@+id/txt_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="呵呵"
        android:textColor="@color/text_yellow"
        android:textSize="20sp" />

</LinearLayout>

MyFragment1.java:

/**
 * Created by Jay on 2015/8/28 0028.
 */
public class MyFragment1 extends Fragment {

    public MyFragment1() {
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fg_content, container, false);
        TextView txt_content = (TextView) view.findViewById(R.id.txt_content);
        txt_content.setText("第一個(gè)Fragment");
        Log.e("HEHE", "1日狗");
        return view;
    }
}

其他三個(gè)照葫蘆畫瓢，換點(diǎn)東西就好！

Step 4：自定義FragmentPagerAdapter類：

代碼很簡(jiǎn)單，只需傳遞一個(gè)FragmentManager過來，其他都在這里完成！

/**
 * Created by Jay on 2015/8/31 0031.
 */
public class MyFragmentPagerAdapter extends FragmentPagerAdapter {

    private final int PAGER_COUNT = 4;
    private MyFragment1 myFragment1 = null;
    private MyFragment2 myFragment2 = null;
    private MyFragment3 myFragment3 = null;
    private MyFragment4 myFragment4 = null;

    public MyFragmentPagerAdapter(FragmentManager fm) {
        super(fm);
        myFragment1 = new MyFragment1();
        myFragment2 = new MyFragment2();
        myFragment3 = new MyFragment3();
        myFragment4 = new MyFragment4();
    }

    @Override
    public int getCount() {
        return PAGER_COUNT;
    }

    @Override
    public Object instantiateItem(ViewGroup vg, int position) {
        return super.instantiateItem(vg, position);
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        System.out.println("position Destory" + position);
        super.destroyItem(container, position, object);
    }

    @Override
    public Fragment getItem(int position) {
        Fragment fragment = null;
        switch (position) {
            case MainActivity.PAGE_ONE:
                fragment = myFragment1;
                break;
            case MainActivity.PAGE_TWO:
                fragment = myFragment2;
                break;
            case MainActivity.PAGE_THREE:
                fragment = myFragment3;
                break;
            case MainActivity.PAGE_FOUR:
                fragment = myFragment4;
                break;
        }
        return fragment;
    }

}

Step 5：MainActivity的編寫：

邏輯很簡(jiǎn)單，自己看~

MainActivity.java:

package com.jay.fragmentdemo4;

import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.TextView;

/**
 * Created by Coder-pig on 2015/8/28 0028.
 */
public class MainActivity extends AppCompatActivity implements RadioGroup.OnCheckedChangeListener,
        ViewPager.OnPageChangeListener {

    //UI Objects
    private TextView txt_topbar;
    private RadioGroup rg_tab_bar;
    private RadioButton rb_channel;
    private RadioButton rb_message;
    private RadioButton rb_better;
    private RadioButton rb_setting;
    private ViewPager vpager;

    private MyFragmentPagerAdapter mAdapter;

    //幾個(gè)代表頁(yè)面的常量
    public static final int PAGE_ONE = 0;
    public static final int PAGE_TWO = 1;
    public static final int PAGE_THREE = 2;
    public static final int PAGE_FOUR = 3;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager());
        bindViews();
        rb_channel.setChecked(true);
    }

    private void bindViews() {
        txt_topbar = (TextView) findViewById(R.id.txt_topbar);
        rg_tab_bar = (RadioGroup) findViewById(R.id.rg_tab_bar);
        rb_channel = (RadioButton) findViewById(R.id.rb_channel);
        rb_message = (RadioButton) findViewById(R.id.rb_message);
        rb_better = (RadioButton) findViewById(R.id.rb_better);
        rb_setting = (RadioButton) findViewById(R.id.rb_setting);
        rg_tab_bar.setOnCheckedChangeListener(this);

        vpager = (ViewPager) findViewById(R.id.vpager);
        vpager.setAdapter(mAdapter);
        vpager.setCurrentItem(0);
        vpager.addOnPageChangeListener(this);
    }

    @Override
    public void onCheckedChanged(RadioGroup group, int checkedId) {
        switch (checkedId) {
            case R.id.rb_channel:
                vpager.setCurrentItem(PAGE_ONE);
                break;
            case R.id.rb_message:
                vpager.setCurrentItem(PAGE_TWO);
                break;
            case R.id.rb_better:
                vpager.setCurrentItem(PAGE_THREE);
                break;
            case R.id.rb_setting:
                vpager.setCurrentItem(PAGE_FOUR);
                break;
        }
    }

    //重寫ViewPager頁(yè)面切換的處理方法
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
    }

    @Override
    public void onPageSelected(int position) {
    }

    @Override
    public void onPageScrollStateChanged(int state) {
        //state的狀態(tài)有三個(gè)，0表示什么都沒做，1正在滑動(dòng)，2滑動(dòng)完畢
        if (state == 2) {
            switch (vpager.getCurrentItem()) {
                case PAGE_ONE:
                    rb_channel.setChecked(true);
                    break;
                case PAGE_TWO:
                    rb_message.setChecked(true);
                    break;
                case PAGE_THREE:
                    rb_better.setChecked(true);
                    break;
                case PAGE_FOUR:
                    rb_setting.setChecked(true);
                    break;
            }
        }
    }
}

PS：嘿嘿，上面我把導(dǎo)包部分的代碼也貼出來了，就是害怕你們導(dǎo)錯(cuò)包，然后出現(xiàn)一些莫名其妙的錯(cuò)誤！因?yàn)閂iewPager是v4包下面的，所以Fragment，F(xiàn)ragmentManager，F(xiàn)ragmentTransaction都是需要使用 V4包下的哦！另外獲取FragmentManager的方法不是直接用getFragmentManager()而是使用 getSupportFragmentManager(）哦！

4.代碼下載：

FragmentDemo4：下載FragmentDemo4.zip

本節(jié)小結(jié)：

好的，上面就是底部導(dǎo)航欄 + ViewPager實(shí)現(xiàn)簡(jiǎn)單滑動(dòng)切換Fragment的實(shí)現(xiàn)過程了！就說這么多，謝謝~

以上內(nèi)容是否對(duì)您有幫助：

← Android Fragment實(shí)例精講——底部導(dǎo)航欄的實(shí)現(xiàn)(方法3)

Android Fragment實(shí)例精講——新聞(購(gòu)物)類App列表Fragment的簡(jiǎn)單實(shí)現(xiàn) →

寫筆記

我要補(bǔ)充