解析ScrollView--仿QQ空间标题栏渐变

Prunella ·

更新时间:2024-09-21

· 684 次阅读

先看一下效果图：


<?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"
 tools:context="com.hankkin.gradationtitlebar.QQSpeakActivity">
 <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" >
   <ImageView
    android:id="@+id/iv_banner"
    android:scaleType="fitXY"
    android:src="@drawable/banner3"
    android:layout_width="match_parent"
    android:layout_height="200dp" />
   <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:paddingBottom="10dp"
  android:id="@+id/textview"
  android:layout_width="match_parent"
  android:layout_height="55dp"
  android:gravity="center|bottom"
  android:text="我是标题"
  android:textSize="18sp"
  android:textColor="@color/transparent"
  android:background="#00000000" />
</RelativeLayout>


public class GradationScrollView extends ScrollView {
 public interface ScrollViewListener {
  void onScrollChanged(GradationScrollView scrollView, int x, int y,
        int oldx, int oldy);
 }
 private ScrollViewListener scrollViewListener = null;
 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);
 }
 public void setScrollViewListener(ScrollViewListener scrollViewListener) {
  this.scrollViewListener = scrollViewListener;
 }
 @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);
  }
 }
}

我们需要获取图片的高度，并且设置滚动监听，随着滚动的距离来设置标题栏的颜色透明度和字体颜色的透明度


/**
 * 获取顶部图片高度后，设置滚动监听
*/
private void initListeners() {
  ViewTreeObserver vto = ivBanner.getViewTreeObserver();
  vto.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
   @Override
   public void onGlobalLayout() {
    textView.getViewTreeObserver().removeGlobalOnLayoutListener(
      this);
    height = ivBanner.getHeight();
    scrollView.setScrollViewListener(QQSpeakActivity.this);
   }
  });
 }
/**
  * 滑动监听
  * @param scrollView
  * @param x
  * @param y
  * @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) { //设置标题的背景颜色
   textView.setBackgroundColor(Color.argb((int) 0, 144,151,166));
  } else if (y > 0 && y <= height) { //滑动距离小于banner图的高度时，设置背景和字体颜色颜色透明度渐变
   float scale = (float) y / height;
   float alpha = (255 * scale);
   textView.setTextColor(Color.argb((int) alpha, 255,255,255));
   textView.setBackgroundColor(Color.argb((int) alpha, 144,151,166));
  } else { //滑动到banner下面设置普通颜色
   textView.setBackgroundColor(Color.argb((int) 255, 144,151,166));
  }
 }

您可能感兴趣的文章:Android ScrollView滑动实现仿QQ空间标题栏渐变Android仿淘宝商品拖动查看详情及标题栏渐变功能Android中实现监听ScrollView滑动事件android TextView不用ScrollViewe也可以滚动的方法在android中ScrollView嵌套ScrollView解决方案android 实现ScrollView自动滚动的实例代码android 自定义ScrollView实现背景图片伸缩的实现代码及思路android开发教程之文本框加滚动条scrollviewAndroid之scrollview滑动使标题栏渐变背景色的实例代码

qq空间 scrollview 标题栏

1024 个赞