仿电商App：笔记（七）：主界面-通用底部导航设计与一键式封装

最新推荐文章于 2025-02-02 14:30:44 发布

qq_41853047

最新推荐文章于 2025-02-02 14:30:44 发布

阅读量528

点赞数 1

分类专栏： latte项目

本文链接：https://blog.youkuaiyun.com/qq_41853047/article/details/107418271

版权

本文介绍了如何实现电商App的主界面通用底部导航，包括整体根布局设置，底部导航BottomBar的设计与实现，每个Fragment与子Tab的关联，以及使用入口。详细讲解了BottomTabBean用于保存Tab样式，BottomItemDelegate实现双击退出功能，ItemBuilder用于存储fragment与tab的对应关系，而BaseBottomDelegate负责绑定并处理点击事件。最后展示了实际应用的效果图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

3.1 存储每个fragment与对应的tab--建造者模式

3.2 绑定每个fragment与对应的tab

4、使用入口

4.1 效果图

1、整体根布局设置

包含两部分：上面的页面显示和底部的tab。根据不同的tab切换上面的页面。

布局实现

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout//上面的fragment
        android:id="@+id/bottom_bar_delegate_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/bottom_bar" />

    <androidx.appcompat.widget.LinearLayoutCompat//底部的tab
        android:id="@+id/bottom_bar"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal" />
</RelativeLayout>

2、底部导航BottomBar设计与实现

点击每个底部导航tab（tab变色）就会切换到对应的fragment页面，双击tab图标会退出应用（因为只有一个Activity）。

1.1 底部导航tab的设置

位于latte-core模块delegates->bottom包下的BottomTabBean。

主要作用：保存和获取每个tab的字体和图片样式。

public final class BottomTabBean {
    private final CharSequence ICON;
    private final CharSequence TITLE;

    public BottomTabBean(CharSequence icon, CharSequence title) {
        this.ICON = icon;
        this.TITLE = title;
    }

    public CharSequence getIcon() {
        return ICON;
    }

    public CharSequence getTitle() {
        return TITLE;
    }
}

位于latte-core模块delegates->bottom包下的BottomItemDelegate，抽象类（继承LatteDelegate，增加了自己的功能）。

主要作用：每个tab双击退出Activity功能。

public abstract class BottomItemDelegate extends LatteDelegate{

    // 再点一次退出程序时间设置
    private static final long WAIT_TIME = 2000L;
    private long TOUCH_TIME = 0;

    @Override
    public boolean onBackPressedSupport() {
        if (System.currentTimeMillis() - TOUCH_TIME < WAIT_TIME) {//双击两次，时间间隔小

最低0.47元/天解锁文章