android ViewPager + Fragment + Tablayout 实现嵌套页面导航(一)

简介: android ViewPager + Fragment + Tablayout 实现嵌套页面导航

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"/>


相关文章
|
24天前
|
Android开发 容器
35. 【Android教程】视频页面:ViewPager
35. 【Android教程】视频页面:ViewPager
24 3
|
1月前
|
Android开发
Android WindowFeature小探究,Android客户端Web页面通用性能优化实践
Android WindowFeature小探究,Android客户端Web页面通用性能优化实践
|
19天前
|
传感器 Android开发 UED
Android统一设置页面竖屏
【6月更文挑战第4天】
|
6天前
|
编解码 Android开发
Android 解决TextView多行滑动与NestedScrollView嵌套滑动冲突的问题
Android 解决TextView多行滑动与NestedScrollView嵌套滑动冲突的问题
11 0
|
1月前
|
XML 存储 Android开发
Android技能树 — Fragment总体小结,2024年最新腾讯面试gm
Android技能树 — Fragment总体小结,2024年最新腾讯面试gm
|
1月前
|
Android开发
Android使用ViewPager实现图片轮播系列之三:手动滑动 + 左右箭头(1)
Android使用ViewPager实现图片轮播系列之三:手动滑动 + 左右箭头(1)
|
1月前
|
Android开发 容器
安卓和苹果页面和逻辑是否有必要追求百分之百统一
安卓和苹果页面和逻辑是否有必要追求百分之百统一
21 0
|
1月前
|
XML Android开发 数据格式
Fragment的使用,零基础入门android逆向视频课程
Fragment的使用,零基础入门android逆向视频课程