欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Android滑动组件悬浮固定在顶部效果

程序员文章站 2024-02-17 16:44:46
要想实现的效果是如下: 场景:有些时候是内容中间的组件当滑动至顶部的时候固定显示在顶部。 实现的思路: 1.目标组件(button)有两套,放在顶部和内容中间...

要想实现的效果是如下:

Android滑动组件悬浮固定在顶部效果

场景:有些时候是内容中间的组件当滑动至顶部的时候固定显示在顶部。

实现的思路:

1.目标组件(button)有两套,放在顶部和内容中间;

2.当内容中间的组件滑动至顶部栏位置时控制显示/隐藏顶部和中间的组件(涉及到组件获取在屏幕的位置知识点);

activity代码:

public class mainactivity extends appcompatactivity implements observablescrollview.scrollviewlistener { 
  private observablescrollview scrollview; 
  private button topbtn1, topbtn2, middlebtn1, middlebtn2; 
  private view toppanel, middlepanel; 
  private int topheight; 
 
  @override 
  protected void oncreate(bundle savedinstancestate) { 
    super.oncreate(savedinstancestate); 
    setcontentview(r.layout.activity_main); 
    initviews(); 
    initlisteners(); 
 
  } 
 
  @override 
  public void onwindowfocuschanged(boolean hasfocus) { 
    super.onwindowfocuschanged(hasfocus); 
 
    rect frame = new rect(); 
    getwindow().getdecorview().getwindowvisibledisplayframe(frame); 
    int statusbarheight = frame.top;//状态栏高度 
 
    int titlebarheight = getwindow().findviewbyid(window.id_android_content).gettop();//标题栏高度 
    topheight = titlebarheight + statusbarheight; 
  } 
 
 
  private void initviews() { 
    scrollview = (observablescrollview) findviewbyid(r.id.scrollview); 
    toppanel = findviewbyid(r.id.toppanel); 
    topbtn1 = (button) toppanel.findviewbyid(r.id.button1); 
    topbtn2 = (button) toppanel.findviewbyid(r.id.button2); 
 
    middlepanel = findviewbyid(r.id.middlepanel); 
    middlebtn1 = (button) middlepanel.findviewbyid(r.id.button1); 
    middlebtn2 = (button) middlepanel.findviewbyid(r.id.button2); 
 
  } 
 
  private void initlisteners() { 
    topbtn1.setonclicklistener(new view.onclicklistener() { 
      @override 
      public void onclick(view view) { 
        middlebtn1.setbackgroundcolor(color.white); 
        topbtn1.setbackgroundcolor(color.white); 
      } 
    }); 
 
    middlebtn1.setonclicklistener(new view.onclicklistener() { 
      @override 
      public void onclick(view view) { 
        middlebtn1.setbackgroundcolor(color.blue); 
        topbtn1.setbackgroundcolor(color.blue); 
      } 
    }); 
 
    scrollview.setscrollviewlistener(this); 
 
 
  } 
 
 
  @override 
  public void onscrollchanged(observablescrollview scrollview, int x, int y, int oldx, int oldy) { 
    int[] location = new int[2]; 
    middlebtn1.getlocationonscreen(location); 
    int locationy = location[1]; 
    log.e("locationy", locationy + "  " + "topheight的值是:" + topheight); 
 
    if (locationy <= topheight && (toppanel.getvisibility() == view.gone || toppanel.getvisibility() == view.invisible)) { 
      toppanel.setvisibility(view.visible); 
    } 
 
    if (locationy > topheight && toppanel.getvisibility() == view.visible) { 
      toppanel.setvisibility(view.gone); 
    } 
 
  } 
} 

要点解析:

1.在onwindowfocuschanged()方法中获取屏幕状态栏和标题栏的高度(在oncreate()方法中是获取是0);

2.因为布局中的scrollview的onscrollchangelistener()方法低版本api不支持——>所以activity实现了自定义scrollview中的onscrollchanged()接口方法——>在此方法中实现组件的显示/隐藏;

自定义scrollview的代码:

public class observablescrollview extends scrollview { 
 
  private scrollviewlistener scrollviewlistener = null; 
 
  public observablescrollview(context context) { 
    super(context); 
  } 
 
  public observablescrollview(context context, attributeset attrs, 
                int defstyle) { 
    super(context, attrs, defstyle); 
  } 
 
  public observablescrollview(context context, attributeset attrs) { 
    super(context, attrs); 
  } 
 
  public void setscrollviewlistener(scrollviewlistener scrollviewlistener) { 
    this.scrollviewlistener = scrollviewlistener; 
  } 
 
  @override 
  protected void onscrollchanged(int x, int y, int oldx, int oldy) { 
    super.onscrollchanged(x, y, oldx, oldy); 
    if (scrollviewlistener != null) { 
      scrollviewlistener.onscrollchanged(this, x, y, oldx, oldy); 
    } 
  } 
 
  public interface scrollviewlistener { 
 
    void onscrollchanged(observablescrollview scrollview, int x, int y, int oldx, int oldy); 
 
  } 
} 

然后是布局文件:

<?xml version="1.0" encoding="utf-8"?> 
<framelayout xmlns:android="http://schemas.android.com/apk/res/android" 
  xmlns:tools="http://schemas.android.com/tools" 
  android:id="@+id/activity_main" 
  android:layout_width="match_parent" 
  android:layout_height="match_parent" 
  tools:context="com.example.administrator.slideholdapp.mainactivity"> 
 
  <com.example.administrator.slideholdapp.observablescrollview 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:id="@+id/scrollview"> 
 
    <linearlayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:orientation="vertical"> 
 
      <textview 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:layout_marginbottom="30dp" 
        android:text="@string/content" /> 
 
      <include android:id="@+id/middlepanel" layout="@layout/middle_item_layout"></include> 
 
      <textview 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:layout_margintop="30dp" 
        android:text="@string/content" /> 
 
 
    </linearlayout> 
 
  </com.example.administrator.slideholdapp.observablescrollview> 
 
  <include android:id="@+id/toppanel" layout="@layout/middle_item_layout" android:visibility="gone"/> 
</framelayout> 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。