ViewPager巢狀fragment簡單使用

最近在公司沒有什麼新的開發任務，就複習一下以前的知識，Android大多數應用都是ViewPager+fragment實現主頁面的框架結構，今天就簡單的介紹一下ViewPager和fragment的簡單使用。
首先看一下activity的佈局：

1
2
3

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_view_pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="ledon.com.servicedemo.ViewPagerActivity">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        >

    </android.support.v4.view.ViewPager>
</RelativeLayout>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

在佈局檔案中新增ViewPager的控制元件，這裡需要說明一下ViewPager要在v4包裡引用，並且在ViewPager需要用到介面卡，一般情況下單獨使用ViewPager的時候我們使用pagerAdapter,這裡我們要使用fragment的時候，我們就需要使用FagmentPagerAdapter,這裡說一下FragmentPagerAdapter繼承PagerAdapter。

1
2

下面看看Adapter適配的使用：

package ledon.com.servicedemo.adapter;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

import java.util.List;

/**
 * Created by Administrator on 2017/3/30.
 */

public class FragmentAdapter extends FragmentPagerAdapter {
    //存放fragment的集合
    private List<Fragment> mFragments;

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

FragmentManager 頁面管理器，使用這個管理器的時候一定要注意，如果你匯入的是支援v4的，以後用到的都要是v4相容的，不然會出現問題。

接下來建立三個fragment：OneFragment,TwoFragment,ThreeFagment的原始碼;

   在這裡xml檔案和Java檔案都差不多，我們只需要貼上一個就可以：
   xml檔案：

1
2
3

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

        android:text="我是第一個fragment"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>

1
2
3
4
5
6
7
8
9
10
11
12

java檔案：

package ledon.com.servicedemo.fragment;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.Toast;

import ledon.com.servicedemo.R;

/**
 * Created by Administrator on 2017/3/30.
 */

public class OneFragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.layout_one, container, false);

        return view;

    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

最後看看我們是怎麼讓ViewPager巢狀fragment動起來的：

package ledon.com.servicedemo;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.RelativeLayout;

import java.util.ArrayList;
import java.util.List;

import butterknife.ButterKnife;
import butterknife.InjectView;
import ledon.com.servicedemo.adapter.FragmentAdapter;
import ledon.com.servicedemo.fragment.OneFragment;
import ledon.com.servicedemo.fragment.ThreeFragment;
import ledon.com.servicedemo.fragment.TwoFragment;

public class ViewPagerActivity extends AppCompatActivity {

    @InjectView(R.id.viewpager)
    ViewPager viewpager;
    @InjectView(R.id.activity_view_pager)
    RelativeLayout activityViewPager;
    private View one;
    private View two;
    private View three;
    private List<Fragment> list;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_view_pager);
        ButterKnife.inject(this);
        initData();
    }

    /**
     * 初始化資料
     */
    private void initData() {
        //建一個存放fragment的集合，並且把新的fragment放到集合中
        list = new ArrayList<Fragment>();
        list.add(new OneFragment());
        list.add(new TwoFragment());
        list.add(new ThreeFragment());
        //初始化adapter
        FragmentAdapter adapter = new FragmentAdapter(getSupportFragmentManager(), list);
       //將介面卡和ViewPager結合
        viewpager.setAdapter(adapter);
    }

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

效果圖：
這裡寫圖片描述

ViewPager巢狀fragment簡單使用

相關文章