首页 > 系统 > Android > 正文

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

2019-10-22 18:35:27
字体:
来源:转载
供稿:网友

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

android标题栏滑动显示隐藏,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 顶部标题栏随滑动时的渐变隐藏和渐变显示效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对VEVB武林网网站的支持!


注:相关教程知识阅读请移步到Android开发频道。
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表