标题栏渐变的效果实现

最新推荐文章于 2021-01-28 10:25:31 发布
最新推荐文章于 2021-01-28 10:25:31 发布
阅读量1.7k 收藏 2
点赞数 2
分类专栏： Android 文章标签： android-渐变 app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010786471/article/details/50907314
版权 
最近做APP非要加一个功能就是标题栏随着滑动变色，研究一天终于搞出来，废话少说，直接来干活。我们都知道滑动变色我们必须用到手势的监听，无奈最外层是ScrollView还要加监听，所以呢自己自定义一个ScrollView从写的ScrollView添加的滑动的监听，当然原理就是接口回调，这个大家都知道，这里就不详细多说，直接上图：

首先是我们自定义的ScrollView:
public class PullableScrollView extends ScrollView implements Pullable {

public PullableScrollView(Context context) {
    super(context);
}

public PullableScrollView(Context context, AttributeSet attrs) {
    super(context, attrs);
}

public PullableScrollView(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
}

// 用于判断滑动时上滑动还是下滑动
@Override
public boolean canPullDown() {
    if (getScrollY() == 0)
        return true;
    else
        return false;
}

@Override
public boolean canPullUp() {
    if (getScrollY() >= (getChildAt(0).getHeight() - getMeasuredHeight()))
        return true;
    else
        return false;
}

private boolean mDisableEdgeEffects = true;

// 用于接口回调
public interface OnScrollChangedListener {
    void onScrollChanged(ScrollView who, int l, int t, int oldl, int oldt);
}

private OnScrollChangedListener mOnScrollChangedListener;

// 我们定义的滑动接口，在布局中调用这个接口就可以得到滑动的位置，然后在这个接口里面开始写你的逻辑。
@Override
protected void onScrollChanged(int l, int t, int oldl, int oldt) {
    super.onScrollChanged(l, t, oldl, oldt);
    if (mOnScrollChangedListener != null) {
        mOnScrollChangedListener.onScrollChanged(this, l, t, oldl, oldt);
    }
}

public void setOnScrollChangedListener(OnScrollChangedListener listener) {
    mOnScrollChangedListener = listener;
}

@Override
protected float getTopFadingEdgeStrength() {
    if (mDisableEdgeEffects
            && Build.VERSION.SDK_INT < Build.VERSION_CODES.HONEYCOMB) {
        return 0.0f;
    }
    return super.getTopFadingEdgeStrength();
}

@Override
protected float getBottomFadingEdgeStrength() {
    if (mDisableEdgeEffects
            && Build.VERSION.SDK_INT < Build.VERSION_CODES.HONEYCOMB) {
        return 0.0f;
    }
    return super.getBottomFadingEdgeStrength();

然后就是最主要的渐变代码。可以直接使用，注释很详细：
public class MainActivity extends Activity implements OnClickListener {

private ImageView imageviewLogoFragmentHome,
        imageview_logo_fragment_home_blue;
// 左上角的电话的渐变
private ImageView imageviewTwoDimensionCodeOneOne1,
        imageview_two_dimension_code_blue;

// 搜索背景的渐变变
private ImageView imageview_search_bg_white, imageview_search_bg_gray;

// 这个就是你滑动参考的View，你可以放任何view
private LinearLayout imageviewView;
private RelativeLayout relativeLayoutHometop;
private PullableScrollView scrollview;
// 轮播图的高度变化到哪里了，以便其他界面调回来标题的透明度
int HEIGHT = 0;

@SuppressLint("UseValueOf")
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    initView();

    scrollview
            .setOnScrollChangedListener(new PullableScrollView.OnScrollChangedListener() {

                @Override
                public void onScrollChanged(ScrollView who, int l, int t,
                        int oldl, int oldt) {
                    imageview_logo_fragment_home_blue
                            .setVisibility(View.VISIBLE);
                    imageview_two_dimension_code_blue
                            .setVisibility(View.VISIBLE);
                    // 给标题整体设置白色图片这个才会渐变
                    relativeLayoutHometop
                            .setBackgroundResource(R.drawable.search_bg_white);
                    if (imageviewView != null
                            && imageviewView.getHeight() > 0) {

                        HEIGHT = imageviewView.getHeight();

                        if (t < HEIGHT) {// =
                            int progress = (int) (new Float(t)
                                    / new Float(HEIGHT) * 200);// 255

                            // 底色的渐变
                            relativeLayoutHometop.getBackground().setAlpha(
                                    progress);


                            imageview_logo_fragment_home_blue
                                    .getBackground().setAlpha(progress);
                            imageviewLogoFragmentHome.getBackground()
                                    .setAlpha(255);
                            // 左边的的渐变
                            imageviewTwoDimensionCodeOneOne1
                                    .getBackground().setAlpha(255);
                            imageview_two_dimension_code_blue
                                    .getBackground().setAlpha(progress);
                            // 搜索底灰色的渐变
                            imageview_search_bg_white.getBackground()
                                    .setAlpha(0);

                            imageview_search_bg_gray.getBackground()
                                    .setAlpha(progress);
                            HEIGHT = progress;
                        } else {
                            HEIGHT = 255;
                            imageview_search_bg_white.getBackground()
                                    .setAlpha(0);

                            imageview_search_bg_gray.getBackground()
                                    .setAlpha(255);

                            imageviewTwoDimensionCodeOneOne1
                                    .getBackground().setAlpha(0);
                            imageview_two_dimension_code_blue
                                    .getBackground().setAlpha(255);
                            imageview_logo_fragment_home_blue
                                    .getBackground().setAlpha(255);
                            imageviewLogoFragmentHome.getBackground()
                                    .setAlpha(0);
                            relativeLayoutHometop.getBackground().setAlpha(
                                    255);
                        }
                    }
                }
            });

}

@SuppressLint("CutPasteId")
private void initView() {

    imageviewLogoFragmentHome = (ImageView) findViewById(R.id.imageview_logo_fragment_home);
    imageview_logo_fragment_home_blue = (ImageView) findViewById(R.id.imageview_logo_fragment_home_blue);
    imageviewTwoDimensionCodeOneOne1 = (ImageView) findViewById(R.id.imageview_two_dimension_code_one_one1);
    imageviewTwoDimensionCodeOneOne1.setOnClickListener(this);
    imageview_two_dimension_code_blue = (ImageView) findViewById(R.id.imageview_two_dimension_code_blue);
    imageview_two_dimension_code_blue.setOnClickListener(this);
    imageview_search_bg_white = (ImageView) findViewById(R.id.imageview_search_bg_white);
    imageview_search_bg_gray = (ImageView) findViewById(R.id.imageview_two_dimension_code_blue);

    imageviewView = (LinearLayout) findViewById(R.id.imageviewView);
    relativeLayoutHometop = (RelativeLayout) findViewById(R.id.relativeLayoutHometop);

    scrollview = (PullableScrollView) findViewById(R.id.ptrScrollView_home);

}

@Override
protected void onRestart() {
    // TODO Auto-generated method stub
    super.onRestart();
    relativeLayoutHometop.getBackground().setAlpha(HEIGHT);
}

@Override
public void onClick(View v) {

}

下面就是主要的布局：

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >

        <LinearLayout
            android:id="@+id/imageviewView"
            android:layout_width="match_parent"
            android:layout_height="300dp"
            android:background="#ff00ff"
            android:orientation="vertical" >
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical" >

            <TextView
                android:layout_width="match_parent"
                android:layout_height="90dp"
                android:background="#00ff00"
                android:text="11111111111" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="90dp"
                android:text="11111111111" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="90dp"
                android:text="11111111111" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="90dp"
                android:text="11111111111" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="90dp"
                android:text="11111111111" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="90dp"
                android:text="11111111111" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="90dp"
                android:text="11111111111" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="90dp"
                android:text="11111111111" />
        </LinearLayout>
    </LinearLayout>
</com.example.shade.PullableScrollView>

<include
    android:layout_width="wrap_content"
    android:layout_height="48dp"
    android:layout_alignParentLeft="true"
    layout="@layout/apphead" />

还有标题栏的布局：

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:layout_alignParentTop="true"
        android:gravity="center_vertical" >

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >

            <ImageView
                android:id="@+id/imageview_logo_fragment_home"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="12dp"
                android:background="@drawable/mainlogowhite" />

            <ImageView
                android:id="@+id/imageview_logo_fragment_home_blue"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="12dp"
                android:background="@drawable/logoblue" />
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/imageview_Search"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="12dp"
            android:layout_marginRight="12dp"
            android:layout_weight="1"
            android:focusable="true"
            android:focusableInTouchMode="true" >

            <ImageView
                android:id="@+id/imageview_search_bg_white"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/search_bg_white"
                android:scaleType="fitXY" />

            <ImageView
                android:id="@+id/imageview_search_bg_gray"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/search_bg_gray"
                android:scaleType="fitXY" />

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_centerVertical="true"
                android:layout_marginLeft="5dp"
                android:layout_marginRight="20dp"
                android:src="@drawable/home_naigationbar_search_grey" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginLeft="25dp"
                android:background="@null"
                android:ems="20"
                android:gravity="left"
                android:hint="搜索"
                android:imeOptions="actionSearch"
                android:singleLine="true"
                android:textColorHighlight="#cccccc"
                android:textSize="12sp" />
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="10dp" >

            <ImageView
                android:id="@+id/imageview_two_dimension_code_one_one1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/phone_white"
                android:scaleType="fitXY" />

            <ImageView
                android:id="@+id/imageview_two_dimension_code_blue"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/phone_bule" />
        </RelativeLayout>
    </LinearLayout>
</RelativeLayout>

 其实原理很简单就是放两个相同图片一个蓝色一个白色，两个同时渐变 一个从蓝色变道透明，一个从透明变为蓝色，很简单。

最开始： 透明

滑动中:这里写图片描述

滑动结束：这里写图片描述

 **

最后介绍一个群，每天都有干货。喜欢Lol和android的朋友可以加一下：Android晋级群 225274452

**
最后你们要的链接，一切就是俩字，免费。。。。。。
http://download.csdn.net/detail/u010786471/9463557

夜末的寂寞
关注
专栏目录
标题栏渐变效果
05-12
模仿别人的标题栏渐变不过有bug核心部分
标题渐变
wei844067872的博客
05-22 295
public class ObservableScrollView extends ScrollView { public interface ScrollViewListener { void onScrollChanged(ObservableScrollView scrollView, int x, int y, ...
窗体颜色渐变效果实现
绝望的老猫
07-26 1488
想了一下~~只实现一个蓝屏挺没有意思的需要加点工，自己也玩玩~~最后决定，让RGB中的蓝色值变化，出现渐变的效果首先想到需要一个时间发生器，在google上面搜索了一下，找到了SetTimer函数，在MSDN里面是这样描述的：UINT_PTR SetTimer(          HWND hWnd,    UINT_PTR nIDEvent,    UINT uElapse,    TIMERP
渐变标题栏以及标题栏中的文字动画
ZhangXuxiaoqingnian的博客
03-05 358
一般我们有这种需求,那一定是随着scrollview的移动来渐变,下面就开始 1.肯定我们需要自定义一个scrollview,获取移动的距离 最简单的一个自定义scrollview,就是返回自己所要用到的信息 public class MyScrollView extends ScrollView { public interface ScrollViewListener { ...
Android 顶部标题栏随滑动时的渐变隐藏和渐变显示效果
08-30
该效果主要是通过滑动RecyclerView实现标题栏的渐变隐藏和显示。下面将详细介绍该效果的实现步骤和相关知识点。 布局设计 首先，我们需要设计一个布局文件，包括一个RecyclerView和一个TextView。在这个例子中，...
Android ScrollView滑动实现仿QQ空间标题栏渐变
09-01
在本篇文章中，我们将探讨如何在ScrollView中实现一个类似QQ空间标题栏的渐变效果，即当ScrollView向下滚动时，标题栏的颜色会逐渐变化。 首先，了解ScrollView的一些基本属性： 1. `android:scrollbars`：控制...
Android标题栏颜色渐变效果，上下拉动标题栏渐变
12-08
本文将深入探讨如何实现这样一个Android标题栏颜色渐变效果。 首先，我们要了解Android中的标题栏，它通常是Activity或Fragment顶部的一块区域，用于显示应用的名称或当前页面的标题。在Material Design规范下，...
vb实现窗口背景渐变色
03-02
使用vb实现窗口颜色渐变，如果做成程序界面的主窗口，一定会增色不少！
标题栏渐变效果代码GradationTitleBar
09-14
简单使用，希望帮到有需要的人！如有什么问题希望提出来，我会尽快解决，谢谢大家！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
Anroid Recyclerview仿京东,滚动屏幕标题栏渐变
01-05
Recyclerview 实现标题栏渐变和上拉下拉刷新，需实现onScrollListener，在onscroll中嵌入渐变代码。 参考代码：http://download.csdn.net/download/conglida/9183723
android标题栏颜色渐变效果的实现
05-04
之前又看到网上有朋友做过相关案例，不过是通过滚动listview来监听实现标题栏渐变，但不是我想要的效果，我要的效果是通过滚动scrollview来实现标题栏颜色渐变效果，这才是我要的效果，1个积分意思一下O(∩_∩)O哈哈~，谢谢！
VC++手功实现蓝色渐变的窗口标题栏
03-15
内容索引:VC/C++源码,界面编程,渐变,工具栏　　VC++手功仿写一个蓝色渐变的窗口标题栏，也就是窗体最上边显示标题地方的背景渐变色，如上图所示，不要以为那是固有的，它是用自己的代码一点一点写出来的，挺像的吧。
APP实用开发—ScrollView滑动标题栏颜色渐变
程序病毒小队的博客
02-17 2024
从图中我们应该就能了解到，其实这些好像就那么回事，拿到高度，然后设置透明度就行了，其实，是这个样子的首先，我们要知道设置View的透明度的代码自定义ScrollView + toolbar渐变 1、自定义一个类，继承自ScrollView，并重写它的 onScrollChanged 方法； 2、在 onScrollChanged 中获取 ScrollView 在Y轴的移动距离，并根据此距离改变
标题栏的颜色渐变效果
csclmf的博客
01-25 2118
标题栏的颜色渐变我相信这个效果很常见了，淘宝就有。因为最近的项目中就有这个效果，所以也给大家写一写，希望有帮助。不多说，先上我项目的效果图： 1、先覆写一下ScrollView public class ObservableScrollView extends ScrollView { private ScrollViewListener scrollViewListen
Android 滑动Scrollview标题栏渐变 仿京东toolbar
weixin_43841463的博客
01-28 2588
Android 滑动Scrollview标题栏渐变 仿京东toolbar仿京东样式(上滑显示下滑渐变消失)下滑显示上滑渐变消失 仿京东样式(上滑显示下滑渐变消失) /** * @ClassName MyScrollView * @Author Rex * @Date 2021/1/27 17:38 */ public class MyScrollView extends ScrollView { private TranslucentListener mTranslucentListe
Android精仿淘宝/QQ空间标题栏渐变效果
小嵩的博客
01-18 6103
最近在淘宝上囤年货买买买的时候，注意到淘宝购物详情页的渐变效果，觉得效果还是挺不错的，有种似曾相识的感觉，没错，好像QQ空间的标题栏也是类似的做法。鉴于这种效果在平时可能会用得比较多，所以就自己研究了一下然后把它实现出来了，项目完整demo在文章底部有链接，大家可下载参考研究。文章原创，转载请注明地址：小嵩的CSDN博客，地址：http://blog.csdn.net/qq_22393017本文会详
上滑标题栏渐变效果
qq_29269095的博客
05-23 478
Android仿京东的上滑标题栏渐变效果最近闲来无事，看到京东的的上滑标题栏渐变显示，下滑标题栏渐变消失的效果有些好奇，个人感觉这种效果很Butf，so自己尝试写了一下，先看一下京东的效果图： 先说一下整体思路吧 除了ToolBar（也就是上面的标题栏） 被一个ScrollView包起来。 监听活动距离 根据距离设置标题栏的透明度 好啦，整体思路说完我们就开始说实现吧实现 布局文件编写:
Android笔记：标题栏颜色渐变效果的实现
程龙的博客
12-21 1097
之前经常在网上看到这种效果，猜想是滚动listview来改变标题栏的颜色，担心感觉那个应用的比较少，今天项目里需要这样的效果，我就想用scrollview来实现一下，废话少说，上图为要实现的效果(网易考拉商品详情页)。 直接上代码： 核心类GradationScrollView /** * @author 程龙 * @data 2018/12/21 * 带滚动监听的scroll...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值