仿QQ空间标题栏显示隐藏

最新推荐文章于 2021-05-07 09:31:21 发布

快乐的金豆

最新推荐文章于 2021-05-07 09:31:21 发布

阅读量582

点赞数 1

本文链接：https://blog.csdn.net/lijinweii/article/details/72897126

版权

在QQ空间中我们经常会看到一种效果：标题栏或者状态栏在下拉或者上拉时的“渐变显示隐藏功能” ，今天我们就看看他是怎么实现的。

先看下效果图:

一:那么我们就先来说下“带Banner样式”的：

通过效果图了解到：
1.整体是个上下滑动的ScrollView
2.当ScrollView上滑时，标题栏随着向上滑动轮播图开始隐藏掉时，标题栏开始显示，随着轮播图逐渐隐藏标题栏逐渐显示，颜色逐渐变深，直到轮播图全部隐藏标题栏的颜色变为最深。
3.当ScrollView下拉时，标题栏开始逐渐隐藏，并且颜色逐渐变暗，直至轮播图完全显标题栏最后消失
所以:首先要获取轮播图的高度。
其次要自定义一个ScrollView ,当ScrollView上下滑动时，结合顶部轮播图的高度的变化设置滚动监听对状态栏的显示隐藏做出操作。

ok,分析完了，直接上代码。
先自定义个ScrollView，看下整体的代码：GradationScrollView ，再解释

public class GradationScrollView extends ScrollView {

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

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

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

	private ScrollViewListener scrollViewListener = null;

	//滚动监听
	public void setScrollViewListener(ScrollViewListener scrollViewListener) {
		this.scrollViewListener = scrollViewListener;
	}

	public interface ScrollViewListener {
		void onScrollChanged(GradationScrollView scrollView, int x, int y, int oldx, int oldy);
	}


	@Override
	protected void onScrollChanged(int x, int y, int oldx, int oldy) {
		super.onScrollChanged(x, y, oldx, oldy);
		if (scrollViewListener != null) {
			scrollViewListener.onScrollChanged(this, x, y, oldx, oldy);
		}
	}

}

1.ScrollView中有一个方法：ScrollView改变时的方法：

onScrollChanged(int x, int y, int oldx, int oldy){}

参数：X oldx 分别代表水平位移，X当前的横坐标，oldx 改变前的横坐标
Y oldY 代表当前左上角距离Scrollview顶点的距离 , Y当前的纵坐标，oldy 改变前的纵坐标

@Override
	protected void onScrollChanged(int x, int y, int oldx, int oldy) {
		super.onScrollChanged(x, y, oldx, oldy);
		if (scrollViewListener != null) {
			scrollViewListener.onScrollChanged(this, x, y, oldx, oldy);
		}
	}

2.我们看到ScrollView中定义了一个滚动的监听：当ScrollView 发生改变时调用

private ScrollViewListener scrollViewListener = null;

	//滚动监听
	public void setScrollViewListener(ScrollViewListener scrollViewListener) {
		this.scrollViewListener = scrollViewListener;
	}

	public interface ScrollViewListener {
		void onScrollChanged(GradationScrollView scrollView, int x, int y, int oldx, int oldy);
	}

我们所用到的就是当ScrollView 改变时，y 与oldy 变化时对标题栏的状态做出改变。

之后我们再看下调用的类;BannerActivity，及xml文件

xml文件：

<?xml version="1.0" encoding="utf-8"?>
<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"
    android:orientation="vertical"
    tools:context="com.hankkin.gradationtitlebar.BannerActivity">

    <com.hankkin.gradationscroll.GradationScrollView
        android:id="@+id/scrollview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="none">

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

            <android.support.v4.view.ViewPager
                android:id="@+id/viewPager"
                android:layout_width="match_parent"
                android:layout_height="200dp" />

            <com.hankkin.gradationscroll.MaterialIndicator
                android:id="@+id/indicator"
                style="@style/MaterialIndicator.Demo"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:paddingBottom="16dp"
                android:paddingLeft="16dp"
                android:paddingRight="16dp"
                android:paddingTop="16dp" />

            <com.hankkin.gradationscroll.NoScrollListview
                android:id="@+id/listview"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
            </com.hankkin.gradationscroll.NoScrollListview>

        </LinearLayout>

    </com.hankkin.gradationscroll.GradationScrollView>

    <TextView
        android:id="@+id/textview"
        android:layout_width="match_parent"
        android:layout_height="55dp"
        android:background="@color/transparent"
        android:gravity="center|bottom"
        android:paddingBottom="10dp"
        android:text="我是标题"
        android:textColor="@color/transparent"
        android:textSize="18sp" />


</RelativeLayout>

文件中我们主要关注的是有标注的部分

再看下Banner类：

public class BannerActivity extends AppCompatActivity  implements GradationScrollView.ScrollViewListener {
    private GradationScrollView scrollView;
    private ListView listView;
    private TextView textView;
    private int imageHeight;
    private ViewPager viewPager;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        getWindow().requestFeature(Window.FEATURE_NO_TITLE);
        StatusBarUtil.setImgTransparent(this);//
        setContentView(R.layout.activity_banner);

        scrollView = (GradationScrollView) findViewById(R.id.scrollview);
        listView = (ListView) findViewById(R.id.listview);
        textView = (TextView) findViewById(R.id.textview);
        viewPager = (ViewPager) findViewById(R.id.viewPager);

        viewPager.setFocusable(true);
        viewPager.setFocusableInTouchMode(true);
        viewPager.requestFocus();

        MaterialIndicator indicator = (MaterialIndicator) findViewById(R.id.indicator);
        ViewPager viewPager = (ViewPager) findViewById(R.id.viewPager);
        viewPager.setAdapter(new MyPagerAdapter());
        viewPager.addOnPageChangeListener(indicator);
        indicator.setAdapter(viewPager.getAdapter());

        initListeners();
        initData();
    }

    /**
     * viewpager适配器
     */
    private  class MyPagerAdapter extends PagerAdapter {
        public int[] drawables = {R.drawable.banner1,R.drawable.banner2,R.drawable.banner3,R.drawable.banner4};
        @Override
        public int getCount() {
            return 4;
        }

        @Override
        public boolean isViewFromObject(View view, Object object) {
            return object == view;
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            ImageView view = new ImageView(container.getContext());
            view.setImageResource(drawables[position]);
            view.setScaleType(ImageView.ScaleType.FIT_XY);
            container.addView(view);
            return view;
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView(((View) object));
        }
    }

    /**
     * 获取顶部图片高度后，设置滚动监听
     */
    private void initListeners() {

        ViewTreeObserver vto = viewPager.getViewTreeObserver();
        vto.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {
                viewPager.getViewTreeObserver().removeGlobalOnLayoutListener(this);
                imageHeight = viewPager.getHeight();

                //设置滚动监听
                scrollView.setScrollViewListener(BannerActivity.this);
            }
        });
    }



    private void initData() {
        ArrayAdapter<String> adapter = new ArrayAdapter<String>(BannerActivity.this, android.R.layout.simple_list_item_1, getResources().getStringArray(R.array.data));
        listView.setAdapter(adapter);
    }


    /**
     * 滑动监听
     * @param scrollView
     * @param x  X oldx 分别代表水平位移
     * @param y  Y oldY  代表当前左上角距离Scrollview顶点的距离
     * @param oldx
     * @param oldy
     */
    @Override
    public void onScrollChanged(GradationScrollView scrollView, int x, int y, int oldx, int oldy) {
        // TODO Auto-generated method stub
        if (y <= 0) {   //设置标题的背景颜色  0 透明度  （144,151,166）颜色:透明色
            textView.setBackgroundColor(Color.argb((int) 0, 144,151,166));
        } else if (y > 0 && y <= imageHeight) { //滑动距离小于banner图的高度时，设置背景和字体颜色颜色透明度渐变
            float scale = (float) y / imageHeight;
            float alpha = (255 * scale);
            textView.setTextColor(Color.argb((int) alpha, 255,255,255)); //(255,255,255)颜色:白色
//            textView.setBackgroundColor(Color.argb((int) alpha, 144,151,166));
            textView.setBackgroundColor(Color.argb((int) alpha, 255,132,0));
        } else {    //滑动到banner下面设置普通颜色
//            textView.setBackgroundColor(Color.argb((int) 255, 144,151,166));
            textView.setBackgroundColor(Color.argb((int) 255, 255,132,0));
        }
    }
}

类中我们所关注的就就两个方法：

1.获取高度，并设置监听

  /**
     * 获取顶部图片高度后，设置滚动监听
     */
    private void initListeners() {
       //getViewTreeObserver() 是用来帮助我们监听某些View的某些变化的。
        //获得getViewTreeObserverd对象
        ViewTreeObserver vto = viewPager.getViewTreeObserver();
        // addOnGlobalLayoutListener用于监听布局之类的变化，比如某个空间消失了
        vto.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {

                imageHeight = viewPager.getHeight();
                viewPager.getViewTreeObserver().removeGlobalOnLayoutListener(this);

                //设置滚动监听
                scrollView.setScrollViewListener(BannerActivity.this);
            }
        });
    }

关于方法中getViewTreeObserver() 方法，及addOnGlobalLayoutListener监听请参考： http://blog.csdn.net/linghu_java/article/details/46544811

2.重写滑动监听的方法

 /**
     * 滑动监听
     * @param scrollView
     * @param x  X oldx 分别代表水平位移
     * @param y  Y oldY  代表当前左上角距离Scrollview顶点的距离
     * @param oldx
     * @param oldy
     */
    @Override
    public void onScrollChanged(GradationScrollView scrollView, int x, int y, int oldx, int oldy) {
        // TODO Auto-generated method stub
        if (y <= 0) {   //设置标题的背景颜色  0 透明度  （144,151,166）颜色:透明色
            textView.setBackgroundColor(Color.argb((int) 0, 144,151,166));
        } else if (y > 0 && y <= imageHeight) { //滑动距离小于banner图的高度时，设置背景和字体颜色颜色透明度渐变
            float scale = (float) y / imageHeight;
            float alpha = (255 * scale);
            textView.setTextColor(Color.argb((int) alpha, 255,255,255)); //(255,255,255)颜色:白色
//            textView.setBackgroundColor(Color.argb((int) alpha, 144,151,166));
            textView.setBackgroundColor(Color.argb((int) alpha, 255,132,0));
        } else {    //滑动到banner下面设置普通颜色
//            textView.setBackgroundColor(Color.argb((int) 255, 144,151,166));
            textView.setBackgroundColor(Color.argb((int) 255, 255,132,0));
        }
    }

以上方法通过 y 与 imageHeight 的关系做出操作，方法中已作出注释。

以上就是我们实现效果图的关键步骤了，源码我还没上传至github,敬请期待。。。

快乐的金豆

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
仿QQ空间标题栏显示隐藏

在QQ空间中我们经常会看到一种效果：标题栏或者状态栏在下拉或者上拉时的“渐变显示隐藏功能” ，今天我们就看看他是怎么实现的。先看下效果图:一:那么我们就先来说下“带Banner样式”的：通过效果图了解到：1.整体是个上下滑动的ScrollView 2.当ScrollView上滑时，标题栏随着向上滑动轮播图开始隐藏掉时，标题栏开始显示，随着轮播图逐渐隐藏标题栏逐渐显示，颜
复制链接

扫一扫