标题栏滑动渐变效果的实现

最新推荐文章于 2024-04-22 07:45:00 发布

xinychan

最新推荐文章于 2024-04-22 07:45:00 发布

阅读量1k

点赞数 1

分类专栏： UI 文章标签： UI

本文链接：https://blog.csdn.net/xinychan/article/details/51490198

版权

UI 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本文实现顶部标题栏在页面滑动过程中，从透明渐变到有颜色的效果。
Demo原型来源于：http://download.csdn.net/download/u010786471/9463557
此文为简化后的直接实现，相比Demo结构更清晰易懂。

以此为例，实现渐变效果最关键的是重写ScrollView，通过ScrollView的监听事件，对标题栏的背景进行设置。
故首先，要重写一个ScrollView。

重写一个ScrollView之前，定义一个接口，判断下拉和上拉。

package com.example.shadedemo1;


public interface Pullable {
    /**
     * 判断是否可以下拉，如果不需要下拉功能可以直接return false
     * 
     * @return true如果可以下拉否则返回false
     */
    boolean canPullDown();

    /**
     * 判断是否可以上拉，如果不需要上拉功能可以直接return false
     * 
     * @return true如果可以上拉否则返回false
     */
    boolean canPullUp();
}

重写ScrollView，实现Pullable接口。

package com.example.shadedemo1;

import android.content.Context;
import android.os.Build;
import android.util.AttributeSet;
import android.widget.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();
    }
}

mainactivity布局xml：

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

    <com.example.shadedemo1.PullableScrollView
        android:id="@+id/scrollView_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

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

            <ImageView
                android:id="@+id/imageView_main"
                android:layout_width="match_parent"
                android:layout_height="300dp"
                android:src="@drawable/ic_launcher" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="90dp"
                android:background="#e3e3e3"
                android:text="upost"
                android:textSize="16sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="90dp"
                android:text="upost"
                android:textSize="16sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="90dp"
                android:text="upost"
                android:textSize="16sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="90dp"
                android:text="upost"
                android:textSize="16sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="90dp"
                android:text="upost"
                android:textSize="16sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="90dp"
                android:text="upost"
                android:textSize="16sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="90dp"
                android:text="upost"
                android:textSize="16sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="90dp"
                android:text="upost"
                android:textSize="16sp" />
        </LinearLayout>
    </com.example.shadedemo1.PullableScrollView>

    <RelativeLayout
        android:id="@+id/relativeLayout_main"
        android:layout_width="match_parent"
        android:layout_height="50dp" >
        <!--  
        <ImageView
            android:id="@+id/imageview_logo_white"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="10dp"
            android:background="@drawable/mainlogowhite" />
        这里是RelativeLayout中图片的渐变，同一个位置需要放两个除颜色外其他均一致的图片，用于渐变
        上面是渐变前，下面是渐变后
        在这里只实现RelativeLayout背景的渐变，故注释掉，要实现这里的图片渐变，解除这里的注释和mainactivity中关于这两个图片的注释，即可实现
        <ImageView
            android:id="@+id/imageview_logo_blue"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="10dp"
            android:background="@drawable/logoblue" />
        -->
    </RelativeLayout>

</RelativeLayout>

MainActivity 中的代码：

package com.example.shadedemo1;

import com.example.shadedemo1.PullableScrollView.OnScrollChangedListener;

import android.app.Activity;
import android.os.Bundle;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.ScrollView;

public class MainActivity extends Activity {
    //渐变的图片
    //ImageView imageview_logo_blue,imageview_logo_white;
    //渐变的标题栏布局
    RelativeLayout relativeLayout_main;
    // 这个就是你滑动参考的View，可以用任何view替代，实际中一般是ViewPager
    ImageView imageView_main;
    //重写的滚动视图
    PullableScrollView scrollView_main;

    // 滑动参考的View的高度变化到哪里了，以便其他界面调回来标题的透明度
    int HEIGHT = 0; 

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //已经注释掉的渐变图片
//      imageview_logo_blue = (ImageView) findViewById(R.id.imageview_logo_blue);
//      imageview_logo_white = (ImageView) findViewById(R.id.imageview_logo_white);

        imageView_main = (ImageView) findViewById(R.id.imageView_main);
        scrollView_main = (PullableScrollView) findViewById(R.id.scrollView_main);
        relativeLayout_main = (RelativeLayout) findViewById(R.id.relativeLayout_main);

        scrollView_main.setOnScrollChangedListener(new OnScrollChangedListener() {
            @Override
            public void onScrollChanged(ScrollView who, int l, int t, int oldl, int oldt) {
                //已经注释掉的渐变图片
                //imageview_logo_blue.setVisibility(View.VISIBLE);
                //这里必须先对标题栏背景进行设置，不设置则在scrollView下拉后报空指针异常，同样，渐变的图片也需要先设置成可见，这里要设置成渐变后的图片或背景
            relativeLayout_main.setBackgroundResource(R.drawable.search_bg_white);
                if (imageView_main!=null
                        &&imageView_main.getHeight()>0) {
                    HEIGHT = imageView_main.getHeight();
                    if (t<HEIGHT) {
                        int progress = (int) 
                                (new Float(t)/new Float(HEIGHT)*200);
                        relativeLayout_main.getBackground().setAlpha(progress);
                        //已经注释掉的渐变图片
//                      imageview_logo_blue.getBackground().setAlpha(progress);
//                      imageview_logo_white.getBackground().setAlpha(255);
                    }else {
                        HEIGHT = 255;
                        //已经注释掉的渐变图片
//                      imageview_logo_blue.getBackground().setAlpha(255);
//                      imageview_logo_white.getBackground().setAlpha(0);
                        relativeLayout_main.getBackground().setAlpha(255);
                    }
                }

            }
        });


    }

    @Override
    protected void onRestart() {
        // TODO Auto-generated method stub
        super.onRestart();
        //relativeLayout_main.getBackground().setAlpha(HEIGHT);
        //原Demo在onRestart方法中，将relativeLayout_main设置了渐变
        //经过测试，注释掉该语句后并没有影响
        //同时，如果是在fragment中，因没有onRestart方法，故若是在onResume或onStart方法实现这个渐变，则会因找不到relativeLayout_main而报空指针异常
    }

}