Android 顶部标题栏随滑动时的渐变隐藏和渐变显示效果

各位早上好,话不多说,先上效果图:

注意顶部:首页textview的变化(显示和隐藏)!

首先分析下:ui状态,其是由recyclerview添加头部组成+recyclerview

头部添加和recyclerview分别引用如下:具体的分装数据的过程这里就不在说明,下篇博客会更加深入的写关于

recyclerview总添加多种不同type类型

compile 'com.bartoszlipinski.recyclerviewheader:library:1.2.1'
compile 'com.android.support:recyclerview-v7:25.3.1'

第一步:生成布局视图

<framelayout xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:tools="http://schemas.android.com/tools"
       android:background="#f2f2f2"
       android:layout_width="match_parent"
       android:layout_height="match_parent">
  <android.support.v7.widget.recyclerview
    android:id="@+id/recycler"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>
  <textview
    android:background="#ffffff"
    android:paddingtop="5dp"
    android:paddingbottom="5dp"
    android:gravity="center_horizontal"
    tools:visibility="visible"
    android:textcolor="#000000"
    android:textsize="20sp"
    android:id="@+id/home_text"
    android:visibility="invisible"
    android:text="首页"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>
</framelayout>

第二步:直接上其他主要的代码,其注释很详细,不多说

public class mainactivity extends appcompatactivity {
  private textview mtextview;
  private int mtextviewheight;
  private recyclerview mrecyclerview;
  private recyclerviewheader mrecyclerviewheader;
  //头部图片(轮播图的高度)
  private int mrecyclerheaderbannerheight;
  //头部的高度
  private int mrecyclerheaderheight;
  @override
  protected void oncreate(bundle savedinstancestate) {
    super.oncreate(savedinstancestate);
    setcontentview(r.layout.activity_main);
    mtextview = (textview) findviewbyid(r.id.home_text);
    //recyclerview填充数据(忽略不计)
    initdata();
    mrecyclerview = (recyclerview) findviewbyid(r.id.recycler);
    mrecyclerview.setlayoutmanager(new linearlayoutmanager(this));
    mrecyclerview.setadapter(madapter);
    //获取到文本的高度
    mtextviewheight = mtextview.getheight();
    //轮播图片的高度--和xml图片的高度是一样的
    mrecyclerheaderbannerheight = (int) getresources().getdimension(r.dimen.home_page_banner_height);
    //recyclerview每个item之间的距离,和adapter中设置的距离一样
    final int recycleritemheight = (int) getresources().getdimension(r.dimen.home_page_list_item_margin_top);
    //添加头部视图,其布局文件就忽略
    mrecyclerviewheader = recyclerviewheader.fromxml(this, r.layout.list_item_prime_product_header);

    //设置其滑动事件
    mrecyclerview.addonscrolllistener(new recyclerview.onscrolllistener() {
      @override
      public void onscrolled(recyclerview recyclerview, int dx, int dy) {
        //设置其透明度
        float alpha = 0;
        int scollyheight = getscollyheight(true, mrecyclerheaderheight);
        //起始截止变化高度,如可以变化高度为mrecyclerheaderheight
        int baseheight = mrecyclerheaderbannerheight - recycleritemheight - mtextviewheight;
        if(scollyheight >= baseheight) {
          //完全不透明
          alpha = 1;
        }else {
        //产生渐变效果
          alpha = scollyheight / (baseheight*1.0f);
        }
        mtextview.setalpha(alpha);
        super.onscrolled(recyclerview, dx, dy);
      }
    });
    //将头部视图添加到recyclerview中
    mrecyclerviewheader.attachto(mrecyclerview);
    //第一次进来其状态显示
    mrecyclerviewheader.post(new runnable() {
      @override
      public void run() {
        mrecyclerheaderheight = mrecyclerviewheader.getheight();
        mtextviewheight = mtextview.getheight();
        mtextview.setvisibility(view.visible);
        mtextview.setalpha(0);
      }
    });
  }

第三步:获取其滑动的距离

/**
   * 计算recyclerview滑动的距离
   * @param hashead 是否有头部
   * @param headerheight recyclerview的头部高度
   * @return 滑动的距离
   */
  private int getscollyheight(boolean hashead, int headerheight) {
    linearlayoutmanager layoutmanager = (linearlayoutmanager) mrecyclerview.getlayoutmanager();
    //获取到第一个可见的position,其添加的头部不算其position当中
    int position = layoutmanager.findfirstvisibleitemposition();
    //通过position获取其管理器中的视图
    view firstvisiablechildview = layoutmanager.findviewbyposition(position);
    //获取自身的高度
    int itemheight = firstvisiablechildview.getheight();
    //有头部
    if(hashead) {
      return headerheight + itemheight*position - firstvisiablechildview.gettop();
    }else {
      return itemheight*position - firstvisiablechildview.gettop();
    }
  }

以上:就可以实现其效果!

以上所述是小编给大家介绍的android 顶部标题栏随滑动时的渐变隐藏和渐变显示效果，希望对大家有所帮助