Android ScrollView 슬라이딩 으로 QQ 공간 제목 표시 줄 그 라 데 이 션 실현

오늘 연구 한 것 은 ScrollView-스크롤 보기 입 니 다.스크롤 보 기 는 가로 스크롤 보기(Horizontal ScrollView)와 세로 스크롤 보기(ScrollView)로 나 뉘 는데 오늘 은 주로 세로 스크롤 보 기 를 연구 합 니 다.여러분 들 이 개발 에 자주 사용 하 실 것 이 라 고 믿 습 니 다.ScrollView 의 기능 은 이미 매우 강하 지만 우리 의 뇌 가 크게 열 린 UI 디자이너 들 을 만족 시 키 지 못 합 니 다.그래서 우 리 는 사용자 정의 해 야 합 니 다.이 글 은 주로 ScrollView 의 미끄럼 을 감청 하여 QQ 공간 제목 표시 줄 의 점진 적 인 변 화 를 실현 하 는 것 을 말 합 니 다.먼저 효과 도 를 보 겠 습 니 다.

자,본론 으로 들 어가 자.
모 를 수도 있 는 ScrollView 속성 들.
 •android:scrollbars
스크롤 바 표시 설정.none(숨 김),수평(수평),수직(수직)
 •android:scrollbarStyle
스크롤 바 의 스타일 과 위 치 를 설정 합 니 다.설정 값:insideOverlay,insideInset,outsideOverlay,outsideInset
 •android:scrollbarThumbHorizontal
수평 스크롤 바 의 drawable 을 설정 합 니 다.
 •android:soundEffectsEnabled
클릭 이나 터치 시 소리 효과 가 있 는 지 설정
 •android:fadingEdge
스크롤 바 를 설정 할 때 테두리 의 점차 적 인 방향 을 설정 합 니 다.none(테두리 색상 이 변 하지 않 음),horizontal(수평 방향 색상 이 옅 어 짐),vertical(수직 방향 색상 이 옅 어 짐).fadingEdgeLength 효과 그림 참조 android:fadingEdgeLength 테두리 그 라 데 이 션 길이 설정
 •android:scrollX
그림%1 개의 캡 션 을 편 집 했 습 니 다.
 •android:scrollY
픽 셀 단위 로 수직 방향 으로 굴 러 가 는 오프셋 값 을 설정 합 니 다.
 •android:scrollbarAlwaysDrawHorizontalTrack
수직 스크롤 바 를 항상 표시 할 지 설정 합 니 다.
 •android:scrollbarDefaultDelayBeforeFade
N 밀리초 를 설정 하면 밀리초 단위 로 희석 이 시 작 됩 니 다. 
이상 의 이러한 속성 에 관심 이 있 는 것 은 연구 해 볼 수 있 습 니 다.여 기 는 상세 하 게 말 하지 않 겠 습 니 다.많은 속성 이 자주 사용 되 지 않 습 니 다.다음은 우리 가 자주 사용 하 는 스크롤 뷰 의 미끄럼 을 어떻게 감청 하고 제목 표시 줄 의 그 라 데 이 션 을 실현 하 는 지 말씀 드 리 겠 습 니 다.
스크롤 뷰 슬라이딩 감청:
Google 은 스크롤 뷰 의 슬라이딩 거리,레이아웃 아래쪽,맨 위로 미 끄 러 지 는 방법 을 제공 하지 않 았 지만,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:현재 세로 슬라이딩 거리
이전 가로 슬라이딩 거리
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 가 원 하 는 것 은 저희 가 모두 이 룰 수 있 습 니 다.
원본 주소:https://github.com/Hankkin/GradationTitleBar
프로젝트 에 나 는 배 너 가 달 린 것 도 추 가 했 는데 원 리 는 같다.
미끄럼 기능 에 관 한 글 은 주 제 를 클릭 하 십시오《안 드 로 이 드 슬라이딩 기능》
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.