当前位置： 移动技术网 > 移动技术>移动开发>Android > 解析ScrollView--仿QQ空间标题栏渐变

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

2019年07月24日  | 移动技术网移动技术  | 我要评论

先看一下效果图：

<?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));
  }
 }

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持移动技术网!

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网