Android 实现锚点定位思路详解

相信做前端的都做过页面锚点定位的功能,通过<a href="#head" rel="external nofollow" > 去设置页面内锚点定位跳转。

本篇文章就使用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;
 }
 @Override
 protected 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.TabLayout
  android: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.CustomScrollView
  android:id="@+id/scrollView"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:fillViewport="true"
  android:fitsSystemWindows="true">
  <LinearLayout
   android: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() {
 @Override
 public boolean onTouch(View v, MotionEvent event) {
  //当由scrollview触发时,isScroll 置true
  if (event.getAction() == MotionEvent.ACTION_DOWN) {
   isScroll = true;
  }
  return false;
 }
});
scrollView.setCallbacks(new CustomScrollView.Callbacks() {
 @Override
 public 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() {
 @Override
 public void onTabSelected(TabLayout.Tab tab) {
  //点击标签,使scrollview滑动,isScroll置false
  isScroll = false;
  int pos = tab.getPosition();
  int top = anchorList.get(pos).getTop();
  scrollView.smoothScrollTo(0, top);
 }
 @Override
 public void onTabUnselected(TabLayout.Tab tab) {
 }
 @Override
 public void onTabReselected(TabLayout.Tab tab) {
 }
});

至此效果出来了,但是

问题来了 可以看到当点击最后一项时,scrollView滑动到底部时并没有呈现出我们想要的效果,希望滑到最后一个时,全屏只有最后一块内容显示。

所以这里需要处理下最后一个view的高度,当不满全屏时,重新设置他的高度,通过计算让其撑满屏幕。

//监听判断最后一个模块的高度,不满一屏时让最后一个模块撑满屏幕
private ViewTreeObserver.OnGlobalLayoutListener listener;
listener = new ViewTreeObserver.OnGlobalLayoutListener() {
 @Override
 public void onGlobalLayout() {
  int screenH = getScreenHeight();
  int statusBarH = getStatusBarHeight(MainActivity.this);
  int tabH = tabLayout.getHeight();
  //计算内容块所在的高度,全屏高度-状态栏高度-tablayout的高度-内容container的padding 16dp
  int 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

总结

以上所述是小编给大家介绍的Android 实现锚点定位思路详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • Android tabLayout+recyclerView实现锚点定位的示例

    在上一篇文章Android 实现锚点定位中,我们介绍了tablayout+scrollView实现的锚点定位,今天我们使用tablayout+recyclerView 来实现同样的效果. 效果图: 实现思路 实现的思路与上一篇文章是一致的: 1.监听recyclerView滑动到的位置,tablayout切换到对应标签  2.tablayout各标签点击,recyclerView可滑动到对应区域 数据模拟 数据模拟,使用上一文章的AnchorView作为recyclerView的每个字view,

  • Android 实现锚点定位思路详解

    相信做前端的都做过页面锚点定位的功能,通过<a href="#head" rel="external nofollow" > 去设置页面内锚点定位跳转. 本篇文章就使用tablayout.scrollview来实现android锚点定位的功能. 效果图: 实现思路 1.监听scrollview滑动到的位置,tablayout切换到对应标签 2.tablayout各标签点击,scrollview可滑动到对应区域 自定义scrollview 因为我们需要监听

  • 基于Android实现百度地图定位过程详解

    一.问题描述 LBS位置服务是android应用中重要的功能,应用越来越广泛,下面我们逐步学习和实现lbs相关的应用如定位.地图.导航等,首先我们看如何基于百度地图实现定位功能 二.配置环境 1.注册密钥:地址http://developer.baidu.com/map/ 2.下载定位SDK,并导入SDK如图所示: 三.编写MyApplication类 编写MyApplication类,为了使用方便我们可以将实现定位的方法封装的Application组件中 封装下列方法 1.  获取定位信息--

  • Android开发之无痕过渡下拉刷新控件的实现思路详解

    相信大家已经对下拉刷新熟悉得不能再熟悉了,市面上的下拉刷新琳琅满目,然而有很多在我看来略有缺陷,接下来我将说明一下存在的缺陷问题,然后提供一种思路来解决这一缺陷,废话不多说!往下看嘞! 1.市面一些下拉刷新控件普遍缺陷演示 以直播吧APP为例: 第1种情况: 滑动控件在初始的0位置时,手势往下滑动然后再往上滑动,可以看到滑动到初始位置时滑动控件不能滑动. 原因: 下拉刷新控件响应了触摸事件,后续的一系列事件都由它来处理,当滑动控件到顶端的时候,滑动事件都被下拉刷新控件消费掉了,传递不到它的子控件

  • Android仿京东淘宝自动无限循环轮播控件思路详解

    在App的开发中,很多的时候都需要实现类似京东淘宝一样的自动无限轮播的广告栏,所以就自己写了一个,下面是我自定义控件的思路和过程. 一.自定义控件属性 新建自定义控件SliderLayout继承于RelativeLayout,首先要考虑的就是自定义的控件需要扩展那些属性,把这些属性列出来.在这里是要实现类似于京东淘宝的无限轮播广告栏,那么首先想到的就是轮播的时长.轮播指示器的样式等等.我在这里列举了一些并且结合到了代码中. 1.扩展属性 (1)是否开启自动轮播的功能. (2)指示器的图形样式,一

  • Android仿知乎客户端关注和取消关注的按钮点击特效实现思路详解

    先说明一下,项目代码已上传至github,不想看长篇大论的也可以先去下代码,对照代码,哪里不懂点哪里. 代码在这https://github.com/zgzczzw/ZHFollowButton 前几天发现知乎关注的点击效果确实赞,查了一下实现方式,刚好看到这个问题,花了一天时间终于把这个效果实现了,现在来回答一下,很不幸,楼上各位的答案都不全对,且听我一一道来. 首先,我先详细观察了一些知乎的效果,其中有一个很神奇的地方,如图: 注意看第二张图,这个圆形在扩散的时候,圆形底下的字还在,而且新的

  • 基于Android studio3.6的JNI教程之helloworld思路详解

    jdk环境变量配置: path中增加下面2个路径,也就是android studio的路径,android有自带的jdk. E:\Android\Android Studio\jre\bin E:\Android\Android Studio\bin 新建工程: 一定要选择Native c++类型,最后要选c++11支持. SDK设置: File->Settings File->Project Structure 首先确定工程的目录结构,然后尝试运行一下工程,使用模拟器,确保工程没问题, 在M

  • Android 实现抖音小游戏潜艇大挑战的思路详解

    <潜水艇大挑战>是抖音上的一款小游戏,以面部识别来驱动潜艇通过障碍物,最近特别火爆,相信很多人都玩过. 一时兴起自己用Android自定义View也撸了一个,发现只要有好的创意,不用高深的技术照样可以开发出好玩的应用.开发过程现拿出来与大家分享一下. 项目地址: https://github.com/vitaviva/ugame 基本思路 整个游戏视图可以分成三层: camera(相机):处理相机的preview以及人脸识别 background(后景):处理障碍物相关逻辑 foregroun

  • Android EditText输入框实现下拉且保存最近5个历史记录思路详解

    文章结构: 后面又添加了清空历史记录的标签,就是在每一次添加更新后台数组后,数组的下一个标签为清空历史记录. s_btnDown.setOnClickListener(this); //对其进行焦点监听 case R.id.btnDown: showListPopulWindow(); //调用显示PopuWindow 函数 break; 点击后触发PopuWindow函数,也就是将其下拉框,绑定到TextBox标签的下面. private void showListPopulWindow()

  • Android Compose实现伸缩ToolBar的思路详解

    目录 ScrollableAppBar 效果图 主要思路 布局预览 实现过程 ScrollableAppBar 效果图 当列表向上移动时,会先带动ToolBar向上位移,等ToolBar向上移动到最大位移量时列表向上滑动 当列表向下移动时,会先带动ToolBar向下位移,等ToolBar向下移动到最大位移量时列表向下滑动 主要思路 布局预览 伸缩前布局: 伸缩后布局: 实现过程 布局实现 首先我们要定义两个尺寸变量 // 应用栏高度 private val toolBarHeight = 56.

  • Android 开发与代码无关技巧详解

    目录 1.如何找到代码 (1)无敌搜索大法 (2)log输出大法 (3)profiler查看大法 (4)万能法找到页面 2.如何解决bug (1)先看再想最后动手 (2)改变现状 (3)是技术问题还是业务问题 (4)张张嘴远胜于动动手 (5)bug解决不了,那就解决提出bug的人 (6)解决了bug之后 3.如何实现不会的功能 (1)不要急着拒绝 (2)大事化小小事化了 心态要稳,天塌了有个高的顶着 1.如何找到代码 作为客户端的开发,工作中经常遇到,后端的同事来帮忙找接口详情.产品经理来询问之

随机推荐