1. 程式人生 > >viewpager + fragment實現滑動切換效果

viewpager + fragment實現滑動切換效果

先上一張效果圖(非動圖,但是可以實現滑動切換,點選下方按鈕,也可以進行切換):

MainActivity之中的程式碼

public class Main2Activity extends AppCompatActivity implements View.OnClickListener{
    private TextView title;
    private  oneFragment oFragment;
    private  twoFragment tFragment;
    private  threeFragment thFragment;
    private  fourFragment fFragment;
    private List<Fragment> mFragmentList = new ArrayList<Fragment>();
    private FragmentAdapter mFragmentAdapter;
    private ViewPager vp;
    String[] titles = new String[]{"訊息", "聯絡人", "動態", "設定"};
    private Button btn1,btn2,btn3,btn4;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //去除工具欄
        getSupportActionBar().hide();
        setContentView(R.layout.activity_main2);
        initViews();
        mFragmentAdapter = new FragmentAdapter(this.getSupportFragmentManager(), mFragmentList);
        //該方法用來設定當前顯示頁面左右兩邊各快取的頁面數。
        // ViewPager的快取為4幀
        vp.setOffscreenPageLimit(4);
        //該方法為ViewPager設定介面卡
        vp.setAdapter(mFragmentAdapter);

        //該方法設定顯示item位置的介面。
        // 初始設定ViewPager選中第一幀
        vp.setCurrentItem(0);
        //ViewPager的監聽事件
        vp.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            }

            @Override
            public void onPageSelected(int position) {
                /*此方法在頁面被選中時呼叫*/
                title.setText(titles[position]);
                changeTextColor(position);
            }

            @Override
            public void onPageScrollStateChanged(int state) {
                /*此方法是在狀態改變的時候呼叫,其中arg0這個引數有三種狀態(0,1,2)。
                arg0 ==1的時辰默示正在滑動,
                arg0==2的時辰默示滑動完畢了,
                arg0==0的時辰默示什麼都沒做。*/
            }
        });


    }
    /**
     * 點選底部Text 動態修改ViewPager的內容
     */

    public void onClick(View v) {
        switch (v.getId()){
            case R.id.bb1:
                vp.setCurrentItem(0,true);
                break;
            case R.id.bb2:
                vp.setCurrentItem(1,true);
                break;
            case R.id.bb3:
                vp.setCurrentItem(2,true);
                break;
            case R.id.bb4:
                vp.setCurrentItem(3,true);
                break;
        }
    }
    public class FragmentAdapter extends FragmentPagerAdapter {

        List<Fragment> fragmentList = new ArrayList<Fragment>();

        public FragmentAdapter(FragmentManager fm, List<Fragment> fragmentList) {
            super(fm);
            this.fragmentList = fragmentList;
        }

        @Override
        public Fragment getItem(int position) {
            return fragmentList.get(position);
        }

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

    }
    /**
     * 初始化佈局View
     */
    private void initViews() {
        title = (TextView) findViewById(R.id.title);
        btn1 = findViewById(R.id.bb1);
        btn2 = findViewById(R.id.bb2);
        btn3 = findViewById(R.id.bb3);
        btn4 = findViewById(R.id.bb4);
        btn1.setOnClickListener(this);
        btn2.setOnClickListener(this);
        btn3.setOnClickListener(this);
        btn4.setOnClickListener(this);
        vp = (ViewPager) findViewById(R.id.mainViewPager);
        oFragment = new oneFragment();
        tFragment = new twoFragment();
        thFragment = new threeFragment();
        fFragment = new fourFragment();
        //給FragmentList新增資料
        mFragmentList.add(oFragment);
        mFragmentList.add(tFragment);
        mFragmentList.add(thFragment);
        mFragmentList.add(fFragment);

    }
    /*
        *由ViewPager的滑動修改底部導航Text的顏色
        */
    private void changeTextColor(int position) {
        if (position == 0) {
            btn1.setBackgroundResource(R.drawable.xx);
            btn3.setBackgroundResource(R.drawable.dt1);
            btn2.setBackgroundResource(R.drawable.lxr1);
            btn4.setBackgroundResource(R.drawable.sz1);

        } else if (position == 1) {
            btn1.setBackgroundResource(R.drawable.xx1);
            btn3.setBackgroundResource(R.drawable.dt1);
            btn2.setBackgroundResource(R.drawable.lxr);
            btn4.setBackgroundResource(R.drawable.sz1);
        } else if (position == 2) {
            btn1.setBackgroundResource(R.drawable.xx1);
            btn3.setBackgroundResource(R.drawable.dt);
            btn2.setBackgroundResource(R.drawable.lxr1);
            btn4.setBackgroundResource(R.drawable.sz1);
        } else if (position == 3) {
            btn1.setBackgroundResource(R.drawable.xx1);
            btn3.setBackgroundResource(R.drawable.dt1);
            btn2.setBackgroundResource(R.drawable.lxr1);
            btn4.setBackgroundResource(R.drawable.sz);
        }
    }
}

1.先對onCreat中的函式進行詳細解釋:

//去除工具欄
        getSupportActionBar().hide();

這個函式可以隱藏介面中的最上方藍色標題框!

2.  呼叫了initViews();

這個函式是對佈局檔案進行初始化的一個函式,函式體在Activity的後面,如下:

 /**
     * 初始化佈局View
     */
    private void initViews() {
        title = (TextView) findViewById(R.id.title);
        btn1 = findViewById(R.id.bb1);
        btn2 = findViewById(R.id.bb2);
        btn3 = findViewById(R.id.bb3);
        btn4 = findViewById(R.id.bb4);
        btn1.setOnClickListener(this);
        btn2.setOnClickListener(this);
        btn3.setOnClickListener(this);
        btn4.setOnClickListener(this);
        vp = (ViewPager) findViewById(R.id.mainViewPager);
        oFragment = new oneFragment();
        tFragment = new twoFragment();
        thFragment = new threeFragment();
        fFragment = new fourFragment();
        //給FragmentList新增資料
        mFragmentList.add(oFragment);
        mFragmentList.add(tFragment);
        mFragmentList.add(thFragment);
        mFragmentList.add(fFragment);

    }
3.
mFragmentAdapter = new FragmentAdapter(this.getSupportFragmentManager(), mFragmentList);

為mFragmentAdapter初始化。

this.getSupportFragmentManager()
是為了獲取能管理和當前Activity有關聯的Fragment的FragmentManager
4.
vp.setOffscreenPageLimit(4);
//該方法用來設定當前顯示頁面左右兩邊各快取的頁面數。
        // ViewPager的快取為4幀
        vp.setOffscreenPageLimit(4);

5.

//該方法為ViewPager設定介面卡
        vp.setAdapter(mFragmentAdapter);

6.

//該方法為ViewPager設定介面卡
        vp.setAdapter(mFragmentAdapter);

其實Activity裡面都是有註釋的。Activity裡面出現了4個Fragment,程式碼如下(oneFragment.class):

public class oneFragment extends Fragment {
    public oneFragment() {
        // Required empty public constructor
    }


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.layout_fragment, container, false);
    }
}
layout_fragment.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:orientation="vertical"
    android:gravity="center">
    <TextView
        android:id="@+id/tx1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="我是訊息"
        android:textSize="40dp"
        android:gravity="center"/>

</LinearLayout>

main.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:orientation="vertical"
  >
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="#ddd">

        <TextView
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="訊息"
            android:textColor="@android:color/black"
            android:textSize="25sp"/>
    </RelativeLayout>
    <android.support.v4.view.ViewPager
        android:id="@+id/mainViewPager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:background="@drawable/bg_rb"
        android:paddingBottom="1dp"        >
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_weight="1">
            <Button
                android:id="@+id/bb1"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:background="@drawable/xx"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="訊息"
                android:textSize="35sp"/>
        </LinearLayout>
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_weight="1">
            <Button
                android:id="@+id/bb2"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:background="@drawable/lxr1"
                />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="聯絡人"
                android:textSize="35sp"/>
        </LinearLayout>
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_weight="1">
            <Button
                android:id="@+id/bb3"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:background="@drawable/dt1"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="動態"
                android:textSize="35sp"/>
        </LinearLayout>
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_weight="1">
            <Button
                android:id="@+id/bb4"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:background="@drawable/sz1"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="設定"
                android:textSize="35sp"/>
        </LinearLayout>

    </LinearLayout>

</LinearLayout>

ok,最基本最核心的東西都已經貼上去了!good  luck!