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


相关文章
|
23天前
|
缓存 前端开发 Android开发
Android实战之如何截取Activity或者Fragment的内容?
本文首发于公众号“AntDream”,介绍了如何在Android中截取Activity或Fragment的屏幕内容并保存为图片。包括截取整个Activity、特定控件或区域的方法,以及处理包含RecyclerView的复杂情况。
18 3
|
5月前
|
Android开发 容器
35. 【Android教程】视频页面:ViewPager
35. 【Android教程】视频页面:ViewPager
58 3
|
3月前
|
存储 安全 物联网
Android经典实战之跳转到系统设置页面或其他系统应用页面大全
本文首发于公众号“AntDream”,关注获取更多技巧。文章总结了Android开发中跳转至系统设置页面的方法,包括设备信息、Wi-Fi、显示与声音设置等,并涉及应用详情与电池优化页面。通过简单的Intent动作即可实现,需注意权限与版本兼容性。每日进步,尽在“AntDream”。
385 2
|
4月前
|
Android开发 Kotlin
kotlin开发安卓app,如何让布局自适应系统传统导航和全面屏导航
使用`navigationBarsPadding()`修饰符实现界面自适应,自动处理底部导航栏的内边距,再加上`.padding(bottom = 10.dp)`设定内容与屏幕底部的距离,以完成全面的布局适配。示例代码采用Kotlin。
127 15
|
3月前
|
监控 安全 API
Android项目架构设计问题之保证线上用户不会进入到本地配置页面如何解决
Android项目架构设计问题之保证线上用户不会进入到本地配置页面如何解决
30 0
|
3月前
|
Android开发
Android项目架构设计问题之定义一个关闭当前页面的Action如何解决
Android项目架构设计问题之定义一个关闭当前页面的Action如何解决
17 0
|
5月前
|
传感器 Android开发 UED
Android统一设置页面竖屏
【6月更文挑战第4天】
143 8
|
4月前
|
Android开发
Android 开发中跳转到评论页面
Android 开发中跳转到评论页面
63 0
|
5月前
|
编解码 Android开发
Android 解决TextView多行滑动与NestedScrollView嵌套滑动冲突的问题
Android 解决TextView多行滑动与NestedScrollView嵌套滑动冲突的问题
86 0
|
6月前
|
Android开发 容器
安卓和苹果页面和逻辑是否有必要追求百分之百统一
安卓和苹果页面和逻辑是否有必要追求百分之百统一
43 0