android中tab组件悬浮,实现导航Tab栏悬浮功能之改进版

最新推荐文章于 2024-06-20 14:48:23 发布
最新推荐文章于 2024-06-20 14:48:23 发布
阅读量299 收藏
点赞数
文章标签： android中tab组件悬浮

博文出处：实现导航Tab栏悬浮功能之改进版，欢迎大家关注我的博客，谢谢！

在上一篇博文中，我们用WindowManager的方法实现了Tab栏的悬浮功能。如果你没有看过上篇博文，请点击[《轻松实现app中的导航Tab栏悬浮功能》][url]。

[url]: /2016/01/12/%E8%BD%BB%E6%9D%BE%E5%AE%9E%E7%8E%B0app%E4%B8%AD%E7%9A%84%E5%AF%BC%E8%88%AATab%E6%A0%8F%E6%82%AC%E6%B5%AE%E5%8A%9F%E8%83%BD/

当然，用WindowManager来实现由一个缺点就是当没有显示悬浮窗的权限时，该功能就无法体现出来。而在本篇博文中，我们用第二种方法，也就是不断地重新设置Tab栏的布局位置来实现悬浮功能，弥补了第一种方法的缺点。效果图这里就不放了，相信大家都看过啦。

不废话了，直接上代码。

activity_main.xml：

android:id="@+id/ll_main"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

android:id="@+id/rl_title"

android:layout_width="match_parent"

android:layout_height="50dp"

android:background="@color/colorPrimary">

android:id="@+id/iv_back"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerVertical="true"

android:layout_marginLeft="10dp"

android:src="@drawable/new_img_back" />

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerInParent="true"

android:text="@string/app_name"

android:textColor="@android:color/white"

android:textSize="18sp" />

android:id="@+id/mScrollView"

android:layout_width="match_parent"

android:layout_height="match_parent">

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:background="#cccccc"

android:orientation="vertical">

android:id="@+id/iv_pic"

android:layout_width="match_parent"

android:layout_height="180dp"

android:scaleType="centerCrop"

android:src="@drawable/ic_bg_personal_page" />

android:layout_width="match_parent"

android:layout_height="90dp"

android:layout_marginBottom="5dp"

android:layout_marginLeft="15dp"

android:layout_marginRight="15dp"

android:layout_marginTop="55dp"

android:background="@android:color/white"

android:orientation="horizontal">

android:layout_width="match_parent"

android:layout_height="90dp"

android:layout_marginBottom="5dp"

android:layout_marginLeft="15dp"

android:layout_marginRight="15dp"

android:layout_marginTop="15dp"

android:background="@android:color/white"

android:orientation="horizontal">

android:layout_width="match_parent"

android:layout_height="90dp"

android:layout_marginBottom="5dp"

android:layout_marginLeft="15dp"

android:layout_marginRight="15dp"

android:layout_marginTop="15dp"

android:background="@android:color/white"

android:orientation="horizontal">

android:layout_width="match_parent"

android:layout_height="90dp"

android:layout_marginBottom="5dp"

android:layout_marginLeft="15dp"

android:layout_marginRight="15dp"

android:layout_marginTop="15dp"

android:background="@android:color/white"

android:orientation="horizontal">

android:layout_width="match_parent"

android:layout_height="90dp"

android:layout_marginBottom="5dp"

android:layout_marginLeft="15dp"

android:layout_marginRight="15dp"

android:layout_marginTop="15dp"

android:background="@android:color/white"

android:orientation="horizontal">

android:layout_width="match_parent"

android:layout_height="90dp"

android:layout_marginBottom="5dp"

android:layout_marginLeft="15dp"

android:layout_marginRight="15dp"

android:layout_marginTop="15dp"

android:background="@android:color/white"

android:orientation="horizontal">

android:layout_width="match_parent"

android:layout_height="90dp"

android:layout_marginBottom="5dp"

android:layout_marginLeft="15dp"

android:layout_marginRight="15dp"

android:layout_marginTop="15dp"

android:background="@android:color/white"

android:orientation="horizontal">

android:layout_width="match_parent"

android:layout_height="90dp"

android:layout_marginBottom="5dp"

android:layout_marginLeft="15dp"

android:layout_marginRight="15dp"

android:layout_marginTop="15dp"

android:background="@android:color/white"

android:orientation="horizontal">

tab_layout.xml：

android:id="@+id/ll_tab"

android:layout_width="match_parent"

android:layout_height="40dp"

android:background="@color/colorPrimary"

android:orientation="horizontal">

android:layout_width="0dp"

android:layout_height="match_parent"

android:layout_weight="1"

android:gravity="center"

android:text="分类"

android:textColor="@android:color/white"

android:textSize="18sp" />

android:layout_width="0dp"

android:layout_height="match_parent"

android:layout_weight="1"

android:gravity="center"

android:text="排序"

android:textColor="@android:color/white"

android:textSize="18sp" />

android:layout_width="0dp"

android:layout_height="match_parent"

android:layout_weight="1"

android:gravity="center"

android:text="筛选"

android:textColor="@android:color/white"

android:textSize="18sp" />

我们发现在activity_main.xml里Tab栏悬浮窗的布局放在了最后，这是因为当悬浮窗悬浮在顶部时，应该在所有的UI控件上方，所以在xml里放在了最后。

接下来看看MainActivity：

public class MainActivity extends AppCompatActivity implements MyScrollView.OnScrollListener {

private static final String TAG = "MainActivity";

private MyScrollView mScrollView;

private LinearLayout ll_tab;

private ImageView iv_pic;

private int picBottom;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

getSupportActionBar().hide();

mScrollView = (MyScrollView) findViewById(R.id.mScrollView);

mScrollView.setOnScrollListener(this);

ll_tab = (LinearLayout) findViewById(R.id.ll_tab);

iv_pic = (ImageView) findViewById(R.id.iv_pic);

findViewById(R.id.ll_main).getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {

@Override

public void onGlobalLayout() {

onScroll(mScrollView.getScrollY());

}

});

}

@Override

public void onWindowFocusChanged(boolean hasFocus) {

super.onWindowFocusChanged(hasFocus);

if (hasFocus) {

picBottom = iv_pic.getBottom();

}

}

@Override

public void onScroll(int scrollY) {

int top = Math.max(scrollY, picBottom);

ll_tab.layout(0, top, ll_tab.getWidth(), top + ll_tab.getHeight());

}

}

我们惊奇地发现在Activity里的代码竟然这么短！但是这是这么短，实现了一模一样的功能。

首先在父布局中添加了OnGlobalLayoutListener，以便当布局的状态或者控件的可见性改变时去重新设置Tab栏的布局。之后在onWindowFocusChanged(boolean hasFocus)里得到iv_pic.getBottom()的值，也就是iv_pic的高度。也就是说你一开始想把ll_tab布局在iv_pic的下面。因此可以当作Tab栏距离ScrollView顶部的距离。

最后在onScroll(int scrollY)中比较scrollY，picBottom的最大值。当scrollYpicBottom时，ll_tab布局的顶部的坐标始终是ScrollView的滑动距离，这样就造成了ll_tab悬浮在顶部的“假象”。

好了，一起来看看效果吧：

b5385f2939bd

效果图gif

是不是和第一种方法的效果一样呢，相信大家都学会了。如果有问题可以在下面留言。

最后，放出源码：

~have fun!~

愚夫股份
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
TabLayout滑动到顶部悬浮（一种很简单的方法，代码少，便于理解，不用协调者布局）
03-28
仿美团app，浮动layout滑动到顶部悬停效果,监听滑动距离，根据距离大小设置是否悬浮。。。
Android实现App中导航Tab栏悬浮的功能
01-06
首先是“饿了么”导航Tab栏悬浮的效果图。 大家可以看到上图中的“分类”、“排序”、“筛选”会悬浮在app的顶部，状态随着ScrollView(也可能不是ScrollView，在这里姑且把这滑动的UI控件当作ScrollView吧)的滚动而变化。像这种导航Tab栏悬浮的作用相信大家都能体会到，Tab栏不会随着ScrollView等的滚动而被滑出屏幕外，增加了与用户之间的交互性和方便性。 看到上面的效果，相信大家都跃跃欲试了，那就让我们开始吧。 首先大家要明白一点：Tab栏的状态变化是要监听ScrollView滑动距离的。至于如何得到ScrollView的滑动距离？可以看看另一篇： 《Andr
SwiftUI 6.0（iOS/iPadOS 18）中全新的 Tab 以及 Sidebar+悬浮 TabView 样式
最新发布
享受开发，颠倒银河
06-20 1898
在本篇博文中，我们介绍了 SwiftUI 6.0（iPadOS 18/iOS 18）新标签页中新增的 Tab 和 TabSection 原生视图，并进一步讨论了如何让 TabView 支持 Sidebar 样式以及其它有趣的新特性。
Android小技巧之最快速简单的悬浮TAB
weixin_34321753的博客
08-23 178
先看效果图吧 image 原理 其实实现这样的效果是十分的简单的，继承ScrollView，监听onScrollChanged，根据滑动的距离，不断的layout需要悬浮的tab的位置。这只是一个简单的demo，主要提供的是一种思路，利用到实际中还是有点距离。 编码 继承ScrollView，暴...
Android学习之Tab控件
Viktor的专栏
12-16 284
本文来自http://blog.csdn.net/hellogv/      介绍的是Android的Tab控件，Tab控件可以达到分页的效果，让一个屏幕的内容尽量丰富，当然也会增加开发的复杂程度，在有必要的时候再使用。Android的Tab控件使用起来有点奇怪，必须包含和按照以下的顺序：   TabHost控件->TabWidget(必须命名为tabs)->FrameLayout(必须命名为
Android项目Tab类型主界面大总结 Fragment+TabPageIndicator+ViewPager
2401_84545747的博客
04-30 505
针对Android程序员，我这边给大家整理了一些资料，包括不限于高级UI、性能优化、架构师课程、NDK、混合式开发（ReactNative+Weex）微信小程序、Flutter等全方面的Android进阶实践技术；希望能帮助到大家，也节省大家在网上搜索资料的时间来学习，也可以分享动态给身边好友一起学习！Android前沿技术大纲全套体系化高级架构视频Android高级架构资料、源码、笔记、视频。
Android滚动多TAB悬浮头效果
03-20
总的来说，实现“Android滚动多TAB悬浮头效果”需要深入理解Android设计支持库的组件以及它们之间的交互。通过巧妙地组合和配置`CoordinatorLayout`、`AppBarLayout`和`CollapsingToolbarLayout`，开发者可以创建出...
Android Listview多tab上滑悬浮效果
09-01
本文将详细介绍如何在Android中实现ListView的这种特殊效果。 首先，上滑悬浮效果指的是当用户上滑ListView时，位于顶部的Tab区域会悬浮在屏幕上方，不再随列表一起滚动。当用户向下滑动，Tab区域则会重新回到初始...
Android仿蘑菇街TAB悬浮控件
02-23
"Android仿蘑菇街TAB悬浮控件"是一个实现特定UI效果的项目，它模仿了知名电商应用蘑菇街中的一个特色功能——悬浮式标签（Tab）导航。这个控件允许用户在应用的不同页面间轻松切换，同时保持对屏幕下方主要内容的...
[Android] 选项卡组件TabHost
sam___1的博客
04-24 5237
Tab选项卡实现多个分页之间的快速切换，每个分页可以显示不同的内容，在Android平台提供了TabHost组件实现Tab选项卡的功能，选项卡组件的主要功能是可以进行应用程序分类管理。 每个选项卡称为一个Tab，而包含这多个选项卡的容器称为TabHost。 1.TabHost的常用方法 public TabHost (Context context)： 创建TabHost类对象 public void addTab(TabHost.TabSpec tabSpec)：增加一个tab public Tab.
Android TestTab 选项卡Tab组件示例代码
03-31
包含多个类型的Android Tab示例，经过测试运行。
android tab新控件,全新android Tab控件PagerSlidingTabStrip最简使用方法
weixin_36299482的博客
05-27 261
众所周知Android的Tab控件不是很好用，因此Github上的PagerSlidingTabStrip项目被广为使用，该项目地址为：https://github.com/astuetz/PagerSlidingTabStrip其示例图如下：由于其demo代码较长，难以理解，因此我总结了一个最简的使用方法。第一，在ADT中导入PagerSlidingTabStrip中的library项目，若使用...
android tab切换 悬浮选择器
卡伦啊
09-28 476
本文基于Android Tablayout、CoordinatorLayout、AppBarLayout的使用 实现悬停 页面切换_徐玮的博客-CSDN博客 做一些特殊说明 <androidx.coordinatorlayout.widget.CoordinatorLayout android:layout_width="match_parent" android:layout_height="match_parent">.
android学习--TabHost选项卡组件
zhixinhuacom的专栏
08-10 1432
android学习之TabHost
Android TabLayout控件
假装你是大灰狼的专栏
11-19 5201
在配置文件中指定TabItem
Android控件-TabLayout使用介绍
热门推荐
csdnxia的博客
05-08 6万+
TabLayout简述简单示例属性介绍tabIndicatorFullWidthtabRippleColortabTextAppearancetabModetabIndicatorColortabIndicatorHeighttabIndicatorGravity 简述 TabLayout是Android support中的一个控件android.support.design.widget.Tab...
android tab新控件,Android Tab 控件详解及实例
weixin_39524882的博客
05-27 490
Android Tab 控件详解及实例在桌面应用中Tab控件使用得非常普遍，那么我们经常在Android中也见到以Tab进行布局的客户端。那么Android中的Tab是如何使用的呢？1.Activitypackage com.wicresoft.activity;import com.wicresoft.myandroid.R;import android.app.TabActivity;impo...
悬浮TabBar的实现--此段代码来自网络
weixin_33943836的博客
11-25 224
悬浮TabBar的实现 这个TabBar看着像是用自定义TabBar做的，但事实上它还是用的系统的TabBar,给系统的tabBar.backgroundImage设置一张设计好的背景图片。 TabBar.8 添加后会发现顶部有一条阴影线，并且TabBar的高度也不够。阴影线与上图绿色线条之间变成了透明颜色，实现下面方法隐藏阴影线，并且调高TabBar的高度。 T...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值