版權聲明:本文為部落客原創文章,轉載請标明出處。 https://blog.csdn.net/lyhhj/article/details/52107851
緒論
今天來研究的是ScrollView-滾動視圖,滾動視圖又分橫向滾動視圖(HorizontalScrollView)和縱向滾動視圖(ScrollView),今天主要研究縱向的。相信大家在開發中經常用到,ScrollView的功能已經很強大了,但是仍然滿足不了我們腦洞大開的UI設計師們,是以我們要自定義…本篇文章主要講監聽ScrollView的滑動實作仿QQ空間标題欄漸變,先看一下效果圖:
好了我們切入主題。
有可能你不知道的那些ScrollView屬性
-
android:scrollbars
設定滾動條顯示。none(隐藏),horizontal(水準),vertical(垂直)
-
android:scrollbarStyle
設定滾動條的風格和位置。設定值:insideOverlay、insideInset、outsideOverlay、outsideInset
-
android:scrollbarThumbHorizontal
設定水準滾動條的drawable。
-
android:soundEffectsEnabled
設定點選或觸摸時是否有聲音效果
-
android:fadingEdge
設定拉滾動條時,邊框漸變的放向。none(邊框顔色不變),horizontal(水準方向顔色變淡),vertical(垂直方向顔色變淡)。參照fadingEdgeLength的效果圖 android:fadingEdgeLength 設定邊框漸變的長度
-
android:scrollX
以像素為機關設定水準方向滾動的的偏移值,在GridView中可看的這個效果
-
android:scrollY
以像素為機關設定垂直方向滾動的的偏移值
-
android:scrollbarAlwaysDrawHorizontalTrack
設定是否始終顯示垂直滾動條
-
android:scrollbarDefaultDelayBeforeFade
設定N毫秒後開始淡化,以毫秒為機關。
以上這些屬性有興趣的可以去研究一下,這裡就不詳細講了。很多屬性并不常用,下面說說我們經常用的,怎樣監聽ScrollView的滑動并實作标題欄的漸變?
ScrollView滑動監聽:
Google并沒有給我們提供ScrollView的滑動距離、是否滑動到布局底部、頂部的方法,但是提供了一個onScrollChanged方法:
@Override
protected void onScrollChanged(int x, int y, int oldx, int oldy) {
super.onScrollChanged(x, y, oldx, oldy);
//todo:
}
}
通過檢視源碼注釋,
/**
* This is called in response to an internal scroll in this view (i.e., the
* view scrolled its own contents). This is typically as a result of
* {@link #scrollBy(int, int)} or {@link #scrollTo(int, int)} having been
* called.
*
* @param l Current horizontal scroll origin.
* @param t Current vertical scroll origin.
* @param oldl Previous horizontal scroll origin.
* @param oldt Previous vertical scroll origin.
*/
我們可以知道這個方法的參數分别為:
l:目前橫向滑動距離
t:目前縱向滑動距離
oldl:之前橫向滑動距離
oldt:之前縱向滑動距離
但是這個方法我們不可以調用,我們可以重寫接口或者重寫ScrollView暴露該方法:
package com.hankkin.gradationscroll;
import android.content.Context;
import android.util.AttributeSet;
import android.widget.ScrollView;
/**
* 帶滾動監聽的scrollview
*
*/
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);
}
}
}
設定标題漸變
滾動監聽暴露出來我們就該去設定标題欄随着ScrollView的滑動來改變标題欄的透明度實作漸變:
我們先看一下布局:
<?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>
最外層是我們自定義的ScrollView,包裹着一張背景圖檔和一個ListView(ListView重寫為不可以滑動),然後布局的上面有一個TextView當做标題欄,你也可以用布局。
然後我們需要擷取圖檔的高度,并且設定滾動監聽,随着滾動的距離來設定标題欄的顔色透明度和字型顔色的透明度
/**
* 擷取頂部圖檔高度後,設定滾動監聽
*/
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));
}
}
OK,這就實作了你在最上方看到的效果了。
其實并不難,隻是我們沒有親自動手去實作,相信多動手自己親自去實作一下,UI想要的我們都可以實作。
源碼位址:歡迎Star,fork,有問題多多指正。
https://github.com/Hankkin/GradationTitleBar項目裡面我還添加了一個帶banner的,原理是一樣的。