效果圖
如果你要的不是以下的效果,請停止瀏覽文章,不要浪費時間!
從上打下動漫依次是:《東京喰種》《魁拔》《海賊王》《名偵探柯南》《學院默示錄》《你的名字》《神兵小將》《鐵臂阿童木》《貓和老鼠》《虹貓藍兔七俠傳》《太空歷險記》《洛洛歷險記》《超獸武裝》《風雲決》這些都是我非常喜歡的動漫
實現思路
重寫ScrollView中的onScrollChanged方法,通過接口回調計算滑動距離,控制控件的顯示隱藏達到這種效果,在佈局中,注意魁拔那張圖片(第二張),其實在佈局中存在兩個完全一樣的這張圖片,這時候ScrollView滑動便會通過接口,計算出滑動距離,當滑動距離大於這張圖高度時候,便會出現,反之隱藏!
代碼佈局、邏輯
佈局文件
給出簡單的佈局
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<com.northernbrain.myapplication.NorthernScrollView
android:id="@+id/northernScrollView"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:id="@+id/view1"
android:layout_width="match_parent"
android:layout_height="180dp"
android:scaleType="centerCrop"
android:src="@mipmap/photo11"/>
<ImageView
android:id="@+id/view2"
android:layout_width="match_parent"
android:layout_height="180dp"
android:scaleType="centerCrop"
android:src="@mipmap/photo10"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="180dp"
android:scaleType="centerCrop"
android:src="@mipmap/photo12"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="180dp"
android:scaleType="centerCrop"
android:src="@mipmap/photo13"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="180dp"
android:scaleType="centerCrop"
android:src="@mipmap/photo14"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="180dp"
android:scaleType="centerCrop"
android:src="@mipmap/photo15"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="180dp"
android:scaleType="centerCrop"
android:src="@mipmap/photo16"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="180dp"
android:scaleType="centerCrop"
android:src="@mipmap/photo17"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="180dp"
android:scaleType="centerCrop"
android:src="@mipmap/photo18"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="180dp"
android:scaleType="centerCrop"
android:src="@mipmap/photo19"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="180dp"
android:scaleType="centerCrop"
android:src="@mipmap/photo20"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="180dp"
android:scaleType="centerCrop"
android:src="@mipmap/photo21"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="180dp"
android:scaleType="centerCrop"
android:src="@mipmap/photo22"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="180dp"
android:scaleType="centerCrop"
android:src="@mipmap/photo23"/>
</LinearLayout>
</com.northernbrain.myapplication.NorthernScrollView>
<ImageView
android:id="@+id/title"
android:layout_width="match_parent"
android:layout_height="180dp"
android:scaleType="centerCrop"
android:src="@mipmap/photo10"
android:visibility="gone"
app:layout_constraintTop_toTopOf="parent"
tools:layout_editor_absoluteX="0dp" />
</android.support.constraint.ConstraintLayout>
自定義ViewNorthernScrollViewListener.java
繼承自ScrollView重寫onScrollChanged方法
package com.northernbrain.myapplication;
import android.content.Context;
import android.util.AttributeSet;
import android.widget.ScrollView;
public class NorthernScrollView extends ScrollView {
private NorthernScrollViewListener scrollViewListener = null;
public void setScrollViewListener(NorthernScrollViewListener scrollViewListener) {
this.scrollViewListener = scrollViewListener;
}
public NorthernScrollView(Context context) {
super(context);
}
public NorthernScrollView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public NorthernScrollView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
@Override
protected void onScrollChanged(int l, int t, int oldl, int oldt) {
super.onScrollChanged(l, t, oldl, oldt);
if (scrollViewListener != null) {
scrollViewListener.onScrollChanged(this, l, t, oldl, oldt);
}
}
public interface NorthernScrollViewListener {
void onScrollChanged(NorthernScrollView scrollView, int x, int y, int oldx, int oldy);
}
}
MainActivity.java
在此要實現NorthernScrollView.NorthernScrollViewListener這個接口
package com.northernbrain.myapplication;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.ViewTreeObserver;
import android.widget.ImageView;
public class MainActivity extends AppCompatActivity implements NorthernScrollView.NorthernScrollViewListener {
private NorthernScrollView northernScrollView;
private ImageView title;
private ImageView view1;
int height;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//實力化控件
initView();
//計算控件高度
getHetght();
}
private void getHetght() {
ViewTreeObserver vto = view1.getViewTreeObserver();
vto.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
@Override
public void onGlobalLayout() {
height = view1.getHeight();
northernScrollView.setScrollViewListener(MainActivity.this);
}
});
}
private void initView() {
northernScrollView = (NorthernScrollView) findViewById(R.id.northernScrollView);
title = (ImageView) findViewById(R.id.title);
view1 = (ImageView) findViewById(R.id.view1);
}
@Override
public void onScrollChanged(NorthernScrollView scrollView, int x, int y, int oldx, int oldy) {
if (y <= height) {
title.setVisibility(View.GONE);
} else {
title.setVisibility(View.VISIBLE);
}
}
}