Android 实现锚点定位

article/2025/8/23 18:26:37

相信做前端的都做过页面锚点定位的功能，通过<a href="#head"> 去设置页面内锚点定位跳转。
本篇文章就使用tablayout、scrollview来实现android锚点定位的功能。
效果图：

实现思路

1、监听scrollview滑动到的位置，tablayout切换到对应标签
2、tablayout各标签点击，scrollview可滑动到对应区域

自定义scrollview

因为我们需要监听到滑动过程中scrollview的滑动距离，自定义scrollview通过接口暴露滑动的距离。

public class CustomScrollView extends ScrollView {public Callbacks mCallbacks;public CustomScrollView(Context context) {super(context);}public CustomScrollView(Context context, AttributeSet attrs) {super(context, attrs);}public CustomScrollView(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);}public void setCallbacks(Callbacks callbacks) {this.mCallbacks = callbacks;}@Overrideprotected void onScrollChanged(int l, int t, int oldl, int oldt) {super.onScrollChanged(l, t, oldl, oldt);if (mCallbacks != null) {mCallbacks.onScrollChanged(l, t, oldl, oldt);}}//定义接口用于回调public interface Callbacks {void onScrollChanged(int x, int y, int oldx, int oldy);}}

布局文件里 tablayout 和 CustomScrollView，内容暂时使用LinearLayout填充。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><android.support.design.widget.TabLayoutandroid:id="@+id/tablayout"android:layout_width="match_parent"android:layout_height="wrap_content"app:tabIndicatorColor="@color/colorPrimary"app:tabMode="scrollable"app:tabSelectedTextColor="@color/colorPrimary" /><com.tabscroll.CustomScrollViewandroid:id="@+id/scrollView"android:layout_width="match_parent"android:layout_height="match_parent"android:fillViewport="true"android:fitsSystemWindows="true"><LinearLayoutandroid:id="@+id/container"android:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical"android:padding="16dp"></LinearLayout></com.tabscroll.CustomScrollView></LinearLayout>

数据模拟

数据模拟，动态添加scrollview内的内容，这里自定义了AnchorView当作每一块的填充内容。

private String[] tabTxt = {"客厅", "卧室", "餐厅", "书房", "阳台", "儿童房"};
//内容块view的集合
private List<AnchorView> anchorList = new ArrayList<>();
//判读是否是scrollview主动引起的滑动，true-是，false-否，由tablayout引起的
private boolean isScroll;
//记录上一次位置，防止在同一内容块里滑动 重复定位到tablayout
private int lastPos;//模拟数据，填充scrollview
for (int i = 0; i < tabTxt.length; i++) {AnchorView anchorView = new AnchorView(this);anchorView.setAnchorTxt(tabTxt[i]);anchorView.setContentTxt(tabTxt[i]);anchorList.add(anchorView);container.addView(anchorView);
}//tablayout设置标签
for (int i = 0; i < tabTxt.length; i++) {tabLayout.addTab(tabLayout.newTab().setText(tabTxt[i]));
}

定义变量标志isScroll，用于判断scrollview的滑动由谁引起的，避免通过点击tabLayout引起的scrollview滑动问题。
定义变量标志lastPos，当scrollview 在同一模块中滑动时，则不再去调用tabLayout.setScrollPosition刷新标签。

自定义的AnchorView：

public class AnchorView extends LinearLayout {private TextView tvAnchor;private TextView tvContent;public AnchorView(Context context) {this(context, null);}public AnchorView(Context context, @Nullable AttributeSet attrs) {this(context, attrs, 0);}public AnchorView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);init(context);}private void init(Context context) {View view = LayoutInflater.from(context).inflate(R.layout.view_anchor, this, true);tvAnchor = view.findViewById(R.id.tv_anchor);tvContent = view.findViewById(R.id.tv_content);Random random = new Random();int r = random.nextInt(256);int g = random.nextInt(256);int b = random.nextInt(256);tvContent.setBackgroundColor(Color.rgb(r, g, b));}public void setAnchorTxt(String txt) {tvAnchor.setText(txt);}public void setContentTxt(String txt) {tvContent.setText(txt);}
}

实现

scrollview的滑动监听：

scrollView.setOnTouchListener(new View.OnTouchListener() {@Overridepublic boolean onTouch(View v, MotionEvent event) {//当由scrollview触发时，isScroll 置trueif (event.getAction() == MotionEvent.ACTION_DOWN) {isScroll = true;}return false;}
});scrollView.setCallbacks(new CustomScrollView.Callbacks() {@Overridepublic void onScrollChanged(int x, int y, int oldx, int oldy) {if (isScroll) {for (int i = tabTxt.length - 1; i >= 0; i--) {//根据滑动距离，对比各模块距离父布局顶部的高度判断if (y > anchorList.get(i).getTop() - 10) {setScrollPos(i);break;}}}}
});//tablayout对应标签的切换
private void setScrollPos(int newPos) {if (lastPos != newPos) {//该方法不会触发tablayout 的onTabSelected 监听tabLayout.setScrollPosition(newPos, 0, true);}lastPos = newPos;
}

tabLayout的点击切换：

tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {@Overridepublic void onTabSelected(TabLayout.Tab tab) {//点击标签，使scrollview滑动，isScroll置falseisScroll = false;int pos = tab.getPosition();int top = anchorList.get(pos).getTop();scrollView.smoothScrollTo(0, top);}@Overridepublic void onTabUnselected(TabLayout.Tab tab) {}@Overridepublic void onTabReselected(TabLayout.Tab tab) {}
});

至此效果出来了，但是
问题来了 可以看到当点击最后一项时，scrollView滑动到底部时并没有呈现出我们想要的效果，希望滑到最后一个时，全屏只有最后一块内容显示。
所以这里需要处理下最后一个view的高度，当不满全屏时，重新设置他的高度，通过计算让其撑满屏幕。

//监听判断最后一个模块的高度，不满一屏时让最后一个模块撑满屏幕
private ViewTreeObserver.OnGlobalLayoutListener listener;listener = new ViewTreeObserver.OnGlobalLayoutListener() {@Overridepublic void onGlobalLayout() {int screenH = getScreenHeight();int statusBarH = getStatusBarHeight(MainActivity.this);int tabH = tabLayout.getHeight();//计算内容块所在的高度，全屏高度-状态栏高度-tablayout的高度-内容container的padding 16dpint lastH = screenH - statusBarH - tabH - 16 * 3;AnchorView lastView = anchorList.get(anchorList.size() - 1);//当最后一个view 高度小于内容块高度时，设置其高度撑满if (lastView.getHeight() < lastH) {LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT);params.height = lastH;lastView.setLayoutParams(params);}container.getViewTreeObserver().removeOnGlobalLayoutListener(listener);}
};
container.getViewTreeObserver().addOnGlobalLayoutListener(listener);

这样就达到了预期的效果了。

写到这里，tablayout + scrollview的锚点定位成型了，在实际项目中，我们还可以使用tablayout + recyclerview 来完成同样的效果，后续的话会带来这样的文章。

这段时间自己在做一个小程序，包括数据爬取 + 后台 + 小程序的，可能要过段时间才能出来，主要是数据爬虫那边比较麻烦的...期待下！

详细代码见
github地址：https://github.com/taixiang/tabScroll

欢迎关注我的博客：https://blog.manjiexiang.cn/
更多精彩欢迎关注微信号：春风十里不如认识你
image.png

有个「佛系码农圈」，欢迎大家加入畅聊，开心就好！

过期了，可加我微信 tx467220125 拉你入群。


http://chatgpt.dhexx.cn/article/TdWf2QmR.shtml

相关文章

为什么定位不了HTML,css 锚点定位不了

为什么定位不了HTML,css 锚点定位不了

css 锚点定位不了 css 锚点定位不了只有一个原因&#xff0c;就是书写错误&#xff0c;锚点的正确书写方式有两种&#xff0c;下面为各位介绍一下。 1、使用a标签设置锚点&#xff1a; ①&#xff1a;设置一个锚点链接 html&#xff1b;(注意&#xff1a;href属性的属性值最前面…
阅读更多...
vue项目中实现锚点定位

vue项目中实现锚点定位

使用场景&#xff1a;当页面被分割成许多小模块&#xff0c;且页面很长时&#xff0c;锚点功能可以帮助我们快速跳转到想要的模块&#xff1b;而当滑动滚动条时&#xff0c;根据当前视图中的显示的模块自动选中对应的锚点。 思路 锚点的id对应模块的元素的id。点击锚点时&#…
阅读更多...
Vue3项目中锚点定位实现

Vue3项目中锚点定位实现

代码 <!doctype html> <html class"no-js"><head><meta charset"utf-8"><title>锚点</title><script src"https://unpkg.com/vue3/dist/vue.global.js"></script><link rel"styleshee…
阅读更多...
锚点定位——如何设置锚点居页面顶部距离，锚点定位并距离顶部一定偏移

锚点定位——如何设置锚点居页面顶部距离，锚点定位并距离顶部一定偏移

锚点是网页制作中超级链接的一种&#xff0c;又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接&#xff0c;运用相当普遍。 使用命名锚记可以在文档中设置标记&#xff0c;这些标记通常放在文档的特定主题处或顶部。然后可以创建到这些命名锚记的链接&#…
阅读更多...
vue中实现锚点定位

vue中实现锚点定位

vue中实现锚点定位 通过监听滚动事件&#xff0c;高亮显示锚点按钮添加点击事件&#xff0c;根据锚点滚动至对应区域并实现平滑滚动 这里主要是实现了一个简单的滚动触发锚点高亮&#xff0c;以及点击锚点触发滚动的功能 如果是获取浏览器的滚动高度&#xff0c;各个浏览器有所…
阅读更多...
VUE实现锚点定位

VUE实现锚点定位

文章目录 锚点定位功能总述提取标签内的关键词目录的渲染和点击跳转1.目录渲染2.锚点跳转 总结 锚点定位功能总述 在系统中会有管理端和客户端两种&#xff0c;在管理端中通过wangediter发布文章&#xff0c;然后在客户端中获取文章的数据&#xff0c;将其中h1和h2标签中的文字…
阅读更多...
Vue锚点定位

Vue锚点定位

VUE锚点定位 // 点击此处<div click"goDingyue">立即订阅</div>绑定事件 methods: {goDingyue() {// 获取元素在页面中的位置console.log(this.$refs.dingyue_box_ref.getBoundingClientRect());// document// .getElementById("agentTitle&qu…
阅读更多...
jquery锚点定位

jquery锚点定位

jquery实现锚点定位功能 这里主要是通过jquery实现了一个简单的滚动触发锚点高亮&#xff0c;以及点击锚点触发滚动的功能 $leftnav为左侧楼层导航栏(left-nav)&#xff0c;右侧right-content-body为滚动区域。主要是利用了scrollTo()和对滚动区域scroll事件的监听实现锚点定位…
阅读更多...
锚点定位

锚点定位

1. 例如我们在做一个很长的网页时&#xff0c;需要在页面内做一个导航&#xff0c;点击导航里的链接不是新开一个窗口或者跳转到其他网址&#xff0c;而是跳转到当前页的某一个位置。那么所要跳转到的那个位置&#xff0c;我们就叫做锚点&#xff0c;它是一种在页面内部定位的…
阅读更多...
uniapp锚点定位

uniapp锚点定位

uniapp 锚点定位 需求&#xff1a;在 uniapp 写 App 时&#xff0c;根据后端接口返回的数据渲染图文&#xff0c;并且要对图片进行锚点定位。 前提&#xff1a;后端要给每张图片一个单独的参数&#xff0c;用来区分每张图片。 思路&#xff1a;前端将这个特定参数注入到图片标…
阅读更多...
如何设置锚点居页面顶部距离

如何设置锚点居页面顶部距离

锚点是网页制作中超级链接的一种，又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接，运用相当普遍。 使用命名锚记可以在文档中设置标记，这些标记通常放在文档的特定主题处或顶部。然后可以创建到这些命名锚记的链接，这些链接可快速将访问者带到指定位…
阅读更多...
锚点定位的三种解决方法

锚点定位的三种解决方法

因为在项目中遇到锚点定位的问题&#xff0c;觉得有必要单独成文&#xff0c;来介绍锚点定位的解决办法。 一 学习锚点定位之前的知识储备: 1.1 #号的作用 #代表网页中的一个位置。其右面的字符&#xff0c;就是该位置的标识符。比如&#xff0c;http://www.example.com/ind…
阅读更多...
什么是 cookie？ 会话 cookie 与持久性 cookie 之间 有何区别？

什么是 cookie？ 会话 cookie 与持久性 cookie 之间 有何区别？

转载&#xff1a; https://www.cisco.com/c/en/us/products/collateral/security/web-security-appliance/cn/117925-technote-csc-00.html 有 2 种不同类型的 cookie&#xff1a;会话 cookie 和持久性 cookie 简介 本文将介绍什么是 HTTP cookie&#xff0c;以及会话 cookie …
阅读更多...
数据持久化

数据持久化

数据持久化 企业数据架构存储技术存储架构 企业数据架构 持久化&#xff08;Persistence&#xff09;&#xff0c;即把数据&#xff08;如内存中的对象&#xff09;保存到可永久保存的存储设备中&#xff0c;如磁盘等。 数据按存储类型可以分为缓存数据库、关系型数据库、NoSQ…
阅读更多...
事务四大特征：原子性，一致性，隔离性和持久性。

事务四大特征：原子性，一致性，隔离性和持久性。

事务四大特征&#xff1a;原子性&#xff0c;一致性&#xff0c;隔离性和持久性。 1、原子性&#xff08;Atomicity&#xff09; 一个原子事务要么完整执行&#xff0c;要么干脆不执行。这意味着&#xff0c;工作单元中的每项任务都必须正确执行。如果有任一任务执行失败&…
阅读更多...
MySQL事务原子性、一致性和持久性以及回滚是如何实现的？

MySQL事务原子性、一致性和持久性以及回滚是如何实现的？

前言 《MySQL事务详解》一文中详细讲解了事务的概念&#xff0c;包括ACID特性&#xff0c;事务并发引起的问题&#xff0c;事务的四种隔离级别。 在事务的四种特性中&#xff0c;原子性、一致性、持久性通过数据库的redo log和undo log来完成&#xff0c;redo log称为重做日志&…
阅读更多...
InnoDB引擎--事务持久性

InnoDB引擎--事务持久性

事务是指构成单一逻辑工作单元的操作的集合。数据库系统维护事务的ACID四个特性： 原子性：事务的所有操作在数据库中要么全部反映，要么全部不反映。一致性：事务执行前后数据库保持约束一致性和业务逻辑一致性。隔离性：在事务并发执行时，各个事务都感觉不到其他事务的存在。…
阅读更多...
MySQL 是如何保证一致性、原子性和持久性的！

MySQL 是如何保证一致性、原子性和持久性的！

编辑&#xff1a;业余草 来源&#xff1a;https://www.xttblog.com/?p4891 今天&#xff0c;我们来简单的看一下 MySQL 的一致性、原子性和持久性问题。后面还扩展了 15 个简单的面试题&#xff0c;希望大家喜欢&#xff01; 1、Mysql怎么保证一致性的&#xff1f; OK&#xf…
阅读更多...
MySQL InnoDB 存储引擎写入磁盘（落盘）的原理\MySQL怎么保证持久性、原子性?(MySQL中是如何实现事务提交和回滚的)\隔离性

MySQL InnoDB 存储引擎写入磁盘（落盘）的原理\MySQL怎么保证持久性、原子性?(MySQL中是如何实现事务提交和回滚的)\隔离性

文章目录 一、MySQL InnoDB 存储引擎写入磁盘&#xff08;落盘&#xff09;的原理一条 update 语句在写入磁盘的过程为什么必须有“两阶段提交”呢&#xff1f; binlog 的写入机制 二、MySQL怎么保证持久性、原子性?(MySQL中是如何实现事务提交和回滚的)redo log(重做日志) 如…
阅读更多...
MySQL日志(undo log 和 redo log 实现事务的原子性/持久性/一致性)

MySQL日志(undo log 和 redo log 实现事务的原子性/持久性/一致性)

日志的重要性 日志绝对是数据库的核心. 持久化的日志记录了各种重要的信息.数据的恢复需要依赖日志。 慢查询sql语句需要用到慢查询日志。以及错误日志中保存着mysqld数据库服务端在启动过程中发生的重大错误信息... 数据库重要组成 本质上来说是一个文件系统 (两大重要组…
阅读更多...
推荐文章

Copyright @ 2022~2023