自设标题栏随着布局向上滚动实现透明渐变

原创 2015年11月21日 14:37:07

有些时候,安卓要向IOS一样,将安卓自己的actionbar隐藏自设一个标题栏,而且有时需求又要将这个自设的标题栏实现内容滚动后能够跟着透明渐变。我在百度搜索了一大堆废话文章后,找了一个类似的功能改造成自己需求的效果。demo实现的简陋,见谅!

首先我们看看布局,非常简单:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <ListView
        android:id="@+id/ma_listview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="none"
        android:divider="@android:color/black"
        android:dividerHeight="0.5dp"
        android:cacheColorHint="@android:color/transparent"
        android:headerDividersEnabled="false"
        android:footerDividersEnabled="false"
        android:listSelector="@android:color/transparent" >
    </ListView>

    <LinearLayout
        android:id="@+id/title_view"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:background="#E42F47"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/tt_t1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="left|center"
            android:text="《《《"
            android:textSize="18sp"
            android:layout_margin="10dp"
            android:textAppearance="?android:attr/textAppearanceMedium" />

        <TextView
            android:id="@+id/tt_t2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="Test_Title"
            android:gravity="center"
            android:textSize="16sp"
            android:textAppearance="?android:attr/textAppearanceMedium" />
    </LinearLayout>
</FrameLayout>

其中,id为title_view的LinearLayout即是自设的一个标题栏,我们要实现的就是随着listview的滚动,它能够跟着透明渐变。


那么开始!首先findViewById找出标题栏和listview,然后listview去setAdapter(),重点来了,给listview实现setOnScrollListener的监听事件。我们的思路就是通过获取被监听的控件即listview的第一个item的顶点(top)所在的位置,用它所在顶点的相反值(为什么要相反值?因为获取的这个值往往是个负数,需要取反)去被标题栏控件的高度除,得出一个float的值作为透明的百分比,实时设置标题栏的透明度变化。同时要注意,只有listview第一个item在标题栏周围时才去实现透明渐变。


关键代码在此:


OnScrollListener scrolListener = new OnScrollListener() {

@Override
public void onScrollStateChanged(AbsListView view, int scrollState) {

}

@Override
public void onScroll(AbsListView view, int firstVisibleItem,
int visibleItemCount, int totalItemCount) {
// 判断当前最上面显示的是不是头布局
if(firstVisibleItem == 0) {
if(title != null) {
View head_child = view.getChildAt(0);
if(head_child!=null) {
int top = -head_child.getTop();
// 获取头布局的高度
int height = title.getHeight();
// 满足这个条件的时候,只有这个时候,我们才调整透明度
if (top <= height && top >= 0) {
// 获取当前位置占头布局高度的百分比
float alpha = (float)top/(float)height;
title.getBackground().setAlpha((int) (alpha * 255));
// 通知标题栏刷新显示
title.invalidate();
}
}
}
}else if(firstVisibleItem > 0) {
title.getBackground().setAlpha(255);
}else {
title.getBackground().setAlpha(0);
}
}
};


demo地址在这里:

http://download.csdn.net/detail/u014436704/9284861

GradationTitleBar渐变得标题样式

整理得网上资料 如图 下载地址
  • qq_34709056
  • qq_34709056
  • 2017年05月27日 11:37
  • 117

随着RecycleView的滑动实现标题栏透明度渐变:

让标题栏透明度随着recycleview的滑动而渐变
  • zsr0526
  • zsr0526
  • 2017年03月25日 20:43
  • 2350

使用RecyclerView滑动时设置标题栏渐变或隐藏效果

上次自己做了个简单的RecyclerView+SwipeRefrashLayou滑动demo,做完后又给加了个隐藏的效果。 需要学习RecyclerView的请查看我上篇博客http://www.j...
  • wapchief
  • wapchief
  • 2017年01月19日 14:43
  • 2434

android Recyclerview仿京东,滚动屏幕标题栏渐变

Recyclerview实现标题栏渐变和上拉下拉刷新。如果需要listview,等其他控件,需实现onScrollListener,在onscroll中嵌入渐变代码。...
  • jdsjlzx
  • jdsjlzx
  • 2015年11月21日 17:23
  • 20712

android Recyclerview仿京东,滚动屏幕标题栏渐变

版权声明:分享技术,传播快乐。如果本博客对你有帮助,请在我的博客首页为我打赏吧! 首先,本文代码部分参考了conglida博主写的自定义scrollview 实现标题栏渐变: ht...
  • puhaibo_skynet
  • puhaibo_skynet
  • 2016年06月16日 16:47
  • 1039

【商城开发一】Android高仿京东标题栏渐变,下拉隐藏(RecyclerView)

开始工作了,第一个项目是一个商城app,分享一下京东商城滑动标题栏渐变,下拉刷新隐藏标题栏的效果。先看看再说 1.先看一下布局文件,是一个刷新控件嵌套一个RecyclerView,head_sear...
  • LuckKissMo
  • LuckKissMo
  • 2017年02月24日 18:56
  • 884

简单记录下Android ListView滑动时标题逐渐变色的实现方法

今天闲来无事,用一个比较简单的方法实现了ListView滑动时标题逐渐变色,这里简单的做下记录,以后用到的时候可以直接拿来就用了。 因为我有点懒,不像鸿洋和郭林那般勤奋,所以没完整上传DEMO,这里只...
  • wei1583812
  • wei1583812
  • 2016年04月06日 17:53
  • 1974

Android科普知识之recyclerView与标题栏的滑动变色

一个滑动变色的标题栏
  • csdn_loveQingQing
  • csdn_loveQingQing
  • 2017年05月13日 09:53
  • 630

RecyclerView滑动时使toolsbar渐变

先看效果(由于本人不会制作动图,只能给静态图) RecyclerView随着滑动toolsbar颜色开始变化 布局文件: xml version="1.0" encoding="ut...
  • Smart_YC
  • Smart_YC
  • 2016年09月18日 16:40
  • 2878

android 仿京东,滚动屏幕标题栏渐变+(启动页面动画)

  • 2016年03月17日 10:30
  • 7.37MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:自设标题栏随着布局向上滚动实现透明渐变
举报原因:
原因补充:

(最多只允许输入30个字)