【笔记】AndroidViewPagerFragment联合应用

发表于 更新于 分类于 阅读次数：

前言

Android ViewPager+Fragment 实现翻页效果

添加ViewPager2依赖

/app/build.gradle

1
2
3
4
5
dependencies {
    ...

    implementation 'androidx.viewpager2:viewpager2:1.0.0'
}

主体

在主布局中添加ViewPager

app/src/main/res/layout/activity_main.xml

1
2
3
4
5
6
7
8
9
10
11
12
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical">

  <androidx.viewpager2.widget.ViewPager2
    android:id="@+id/vp"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1" />

</LinearLayout>

创建Fragment模板

  • 创建BlankFragment作为Fragment模板

app/src/main/res/layout/fragment_blank.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
<FrameLayout 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=".BlankFragment">

  <TextView
    android:id="@+id/tv"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:text="@string/hello_blank_fragment" />

</FrameLayout>

app/src/main/java/…/BlankFragment.java

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
public class BlankFragment extends Fragment {

    private static final String ARG_PARAM1 = "param1";

    // 从父容器传递的参数
    private String mParam1;

    // 父容器
    private View rootView;

    public BlankFragment() {
        // Required empty public constructor
    }

    public static BlankFragment newInstance(String param1) {
        BlankFragment fragment = new BlankFragment();
        Bundle args = new Bundle();
        args.putString(ARG_PARAM1, param1);

        fragment.setArguments(args);
        return fragment;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        if (getArguments() != null) {
            mParam1 = getArguments().getString(ARG_PARAM1);
        }
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        if (rootView == null) {
            rootView = inflater.inflate(R.layout.fragment_blank, container, false);
        }
        initView();
        return rootView;
    }

    private void initView() {
        TextView textView = rootView.findViewById(R.id.tv);
        textView.setText(mParam1);
    }
}

创建一个适配器

app/src/main/java/…/MyFragmentPagerAdapter.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
public class MyFragmentPagerAdapter extends FragmentStateAdapter {

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

    public MyFragmentPagerAdapter(@NonNull FragmentManager fragmentManager, @NonNull Lifecycle lifecycle, List<Fragment> fragments) {
        super(fragmentManager, lifecycle);
        this.fragments = fragments;
    }

    @NonNull
    @Override
    public Fragment createFragment(int position) {
        return fragments.get(position);
    }

    @Override
    public int getItemCount() {
        return fragments.size();
    }
}

初始化Fragment

  • 在MainActivity中添加init方法，使用init方法初始化Fragment

app/main/java/…/MainActivity.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
private ViewPager2 viewPager2;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    initPager();

}

private void initPager() {
    viewPager2 = findViewById(R.id.vp);
    List<Fragment> fragments = new ArrayList<>();
    fragments.add(BlankFragment.newInstance("微信聊天"));
    fragments.add(BlankFragment.newInstance("通讯录"));
    fragments.add(BlankFragment.newInstance("发现"));
    fragments.add(BlankFragment.newInstance("我的"));
    MyFragmentPagerAdapter pagerAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager(), getLifecycle(), fragments);
    viewPager2.setAdapter(pagerAdapter);
}

底部导航条

创建图片选择器

  • 在drawable目录下创建多个selector，用于切换选中和未选中时的图标

这里示例只创建了一个selector

app/main/res/drawable/wx_selector.xml

1
2
3
4
5
6
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 指定选中时的图标 -->
    <item android:drawable="@drawable/ic_android_blue_24dp" android:state_selected="true" />
    <!-- 指定未选中时的图标 -->
    <item android:drawable="@drawable/ic_android_black_24dp" />
</selector>

创建导航条布局

  • 创建导航条布局bottom_layout.xml

app/main/res/layout/bottom_layout.xml

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="55dp"
  android:orientation="horizontal"
  android:background="#E0E0E0">
  
  <LinearLayout
    android:id="@+id/wx_ll"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:layout_gravity="center"
    android:gravity="center"
    android:orientation="vertical">

    <ImageView
      android:id="@+id/wx_iv"
      android:layout_width="32dp"
      android:layout_height="32dp"
      android:background="@drawable/wx_selector" />
    <TextView
      android:id="@+id/wx_tv"
      android:layout_width="32dp"
      android:layout_height="wrap_content"
      android:text="微信" />
  </LinearLayout>

  <LinearLayout
    android:id="@+id/txl_ll"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:layout_gravity="center"
    android:gravity="center"
    android:orientation="vertical">

    <ImageView
      android:id="@+id/txl_iv"
      android:layout_width="32dp"
      android:layout_height="32dp"
      android:background="@drawable/wx_selector" />
    <TextView
      android:id="@+id/txl_tv"
      android:layout_width="48dp"
      android:layout_height="wrap_content"
      android:text="通讯录" />
  </LinearLayout>

  <LinearLayout
    android:id="@+id/fx_ll"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:layout_gravity="center"
    android:gravity="center"
    android:orientation="vertical">

    <ImageView
      android:id="@+id/fx_iv"
      android:layout_width="32dp"
      android:layout_height="32dp"
      android:background="@drawable/wx_selector" />
    <TextView
      android:id="@+id/fx_tv"
      android:layout_width="32dp"
      android:layout_height="wrap_content"
      android:text="发现" />
  </LinearLayout>

  <LinearLayout
    android:id="@+id/w_ll"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:layout_gravity="center"
    android:gravity="center"
    android:orientation="vertical">

    <ImageView
      android:id="@+id/w_iv"
      android:layout_width="32dp"
      android:layout_height="32dp"
      android:background="@drawable/wx_selector" />
    <TextView
      android:id="@+id/w_tv"
      android:layout_width="32dp"
      android:layout_height="wrap_content"
      android:text="我" />
  </LinearLayout>

</LinearLayout>

将导航条布局添加到主布局

app/main/res/layout/activity_main.xml

1
<include layout="@layout/bottom_layout" />

在MainActivity添加联动

app/main/java/…/MainActivity.java

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private ViewPager2 viewPager2;

    private LinearLayout layout_wx, layout_txl, layout_fx, layout_w;
    private ImageView image_wx, image_txl, image_fx, image_w;
    // 当前选中的图标
    private ImageView image_current;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initPager();
        initTabView();

    }

    private void initTabView() {
        // 绑定UI
        layout_wx = findViewById(R.id.wx_ll);
        layout_txl = findViewById(R.id.txl_ll);
        layout_fx = findViewById(R.id.fx_ll);
        layout_w = findViewById(R.id.w_ll);

        image_wx = findViewById(R.id.wx_iv);
        image_txl = findViewById(R.id.txl_iv);
        image_fx = findViewById(R.id.fx_iv);
        image_w = findViewById(R.id.w_iv);

        // 绑定点击事件
        layout_wx.setOnClickListener(this);
        layout_txl.setOnClickListener(this);
        layout_fx.setOnClickListener(this);
        layout_w.setOnClickListener(this);

        // 初始化微信图标为选中状态
        image_wx.setSelected(true);
        image_current = image_wx;

    }

    private void initPager() {
        viewPager2 = findViewById(R.id.vp);
        List<Fragment> fragments = new ArrayList<>();
        fragments.add(BlankFragment.newInstance("微信聊天"));
        fragments.add(BlankFragment.newInstance("通讯录"));
        fragments.add(BlankFragment.newInstance("发现"));
        fragments.add(BlankFragment.newInstance("我的"));
        MyFragmentPagerAdapter pagerAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager(), getLifecycle(), fragments);
        viewPager2.setAdapter(pagerAdapter);
        // 监听页面被滑动
        viewPager2.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                super.onPageScrolled(position, positionOffset, positionOffsetPixels);
            }

            @Override
            public void onPageSelected(int position) {
                super.onPageSelected(position);
                changeTab(position);
            }

            @Override
            public void onPageScrollStateChanged(int state) {
                super.onPageScrollStateChanged(state);
            }
        });
    }
    
    // 监听按钮被点击
    @Override
    public void onClick(View view) {
        changeTab(view.getId());
    }

    // 切换页面方法
    private void changeTab(int position) {
        // 将当前图标设置为未选中
        image_current.setSelected(false);
        switch (position) {
            case R.id.wx_ll:
                viewPager2.setCurrentItem(0);
            case 0:
                image_wx.setSelected(true);
                image_current = image_wx;
                break;
            case R.id.txl_ll:
                viewPager2.setCurrentItem(1);
            case 1:
                image_txl.setSelected(true);
                image_current = image_txl;
                break;
            case R.id.fx_ll:
                viewPager2.setCurrentItem(2);
            case 2:
                image_fx.setSelected(true);
                image_current = image_fx;
                break;
            case R.id.w_ll:
                viewPager2.setCurrentItem(3);
            case 3:
                image_w.setSelected(true);
                image_current = image_w;
                break;
        }
    }

}

完成

参考文献

哔哩哔哩——Android架构解析