当前位置： 移动技术网 > IT编程>移动开发>Android > Android滑动组件悬浮固定在顶部效果

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

2019年07月24日  | 移动技术网IT编程  | 我要评论

恶劣的近义词,天剑群侠之重头再来,离宫别馆

要想实现的效果是如下：

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

实现的思路：

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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网