0、准备工作
(1)结构展示
首先由一个主页面来展示三个字页面(“首页”,“推荐”,“我的”),这三个子页面由fragment来显示。
(2)底部tab栏准备
首页底部tab栏用 BottomNavigationView,我们可以创建一个menu文件来给tab栏按钮设置样式
BottomNavigationView 控件引用该menu,来显示底边按钮
bottom_nav_menu.xml
android:icon="@drawable/index" android:title="首页"/> android:icon="@drawable/recommend" android:title="推荐"/> android:icon="@drawable/chicken" android:title="我的"/>
1、创建布局
主页用 ViewPager + BottomNavigationView 来布局
ViewPager控件作用:作为容器,显示子页面
BottomNavigationView控件作用:制作底部按钮
activity_index.xml
android:layout_width="match_parent" android:layout_height="match_parent" xmlns:app="http://schemas.android.com/apk/res-auto" android:orientation="vertical"> android:id="@+id/vp" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"/> android:id="@+id/bottom_nav_menu" android:layout_width="match_parent" android:layout_height="wrap_content" app:menu="@menu/bottom_nav_menu" />
2、创建 VPfragment
(1) 构造 VPfragment 类
我们可以把每个页面当成一个对象,我们要想创建这个对象就要使用fragment里的一些方法。所以要创建一个类并继续fragment,来构建子页面的布局
因为这里是创建最简单的fragment类,所以我们之间选择编译器为我们提供的创建方法就行
主要实现三个方法:
newInstance 接收参数,存放在bundle内
onCreate 设置参数,从bundle内取参数
onCreateView 构建页面
因为我们要在子页面内放一张照片,所以我们要定义一个img参数来接收图片,并在onCreateView方法内进行设置
VPFrament
package com.example.tabfragment.fragment; import android.os.Bundle; import androidx.fragment.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.ImageView; import com.example.tabfragment.R; public class VPFragment extends Fragment { private static final String ARG_PARAM1 = "title"; private static final String ARG_PARAM2 = "img"; private String title; private int img; public static VPFragment newInstance(String title, int img) { VPFragment fragment = new VPFragment(); Bundle args = new Bundle(); args.putString(ARG_PARAM1, title); args.putInt(ARG_PARAM2,img); fragment.setArguments(args); return fragment; } @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); if (getArguments() != null) { title = getArguments().getString(ARG_PARAM1); img = getArguments().getInt(ARG_PARAM2); } } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment_v_p, container, false); Bundle argument = getArguments(); ImageView iv = view.findViewById(R.id.iv); iv.setImageResource(argument.getInt(ARG_PARAM2,R.drawable.ji1)); return view; } }
(2)子页面布局 fragment_v_p.xml
android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> android:id="@+id/iv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center"/>