标题栏渐变的效果实现

最近做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

已标记关键词 清除标记
【为什么还需要学习C++?】 你是否接触很多语言,但从来没有了解过编程语言的本质? 你是否想成为一名资深开发人员,想开发别人做不了的高性能程序? 你是否经常想要窥探大型企业级开发工程的思路,但苦于没有基础只能望洋兴叹?   那么C++就是你个人能力提升,职业之路进阶的不二之选。 【课程特色】 1.课程共19大章节,239课时内容,涵盖数据结构、函数、类、指针、标准库全部知识体系。 2.带你从知识与思想的层面从0构建C++知识框架,分析大型项目实践思路,为你打下坚实的基础。 3.李宁老师结合4大国外顶级C++著作的精华为大家推出的《征服C++11》课程。 【学完后我将达到什么水平?】 1.对C++的各个知识能够熟练配置、开发、部署; 2.吊打一切关于C++的笔试面试题; 3.面向物联网的“嵌入式”和面向大型化的“分布式”开发,掌握职业钥匙,把握行业先机。 【面向人群】 1.希望一站式快速入门的C++初学者; 2.希望快速学习 C++、掌握编程要义、修炼内功的开发者; 3.有志于挑战更高级的开发项目,成为资深开发的工程师。 【课程设计】 本课程包含3大模块 基础篇 本篇主要讲解c++的基础概念,包含数据类型、运算符等基本语法,数组、指针、字符串等基本词法,循环、函数、类等基本句法等。 进阶篇 本篇主要讲解编程中常用的一些技能,包含类的高级技术、类的继承、编译链接和命名空间等。 提升篇: 本篇可以帮助学员更加高效的进行c++开发,其中包含类型转换、文件操作、异常处理、代码重用等内容。
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页