Android ScrollView滾動實現大眾點評、網易雲音樂評論懸停效果
阿新 • • 發佈：2017-06-16
ins schema bar 音樂 layout mage for bin andro
今天聽著網易雲音樂，寫著代碼，真是爽翻了。
http://blog.csdn.net/linshijun33/article/details/47910833
網易雲音樂這個產品亮點應該在評論這一模塊，於是我就去看了下評論區，發現一個它是用的一個ScrollView,從上到下可分為三部分。最上面是音樂封面。接著是精彩評論，然後是最新評論。手指在上面滾動一段距離。精彩評論就在布局頂部懸停，再接著滾動，最新評論就替代精彩評論在布局頂部懸停，十分有趣的一個特點。
然後又去翻了一下大眾點評APP，發現也是運用到這個懸停效果。
價格顯示懸停在頂部了
這一個真是非常用心的舉動。價格消費者時時都能夠看得到。多麽良好的用戶體驗，能夠非常好地提高產品的轉化率呢。真是機智。
確實要在用戶交互上面花點功夫呢。
於是想著怎麽去實現這種效果。去找了資料來看。大概是這麽做到的。
老規矩，先上效果圖。
然後是懸停，圖片是截取的。有點變形。
先上布局文件activity_main.xml,設置了控件有四個，一個自己定義MyScrollView(布局後面給出代碼),兩個ImageView,一個TextView( 用來充字數占空間讓屏幕滾動起來的）。
activity_main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" 然後給出的是自己定義控件MyScrollView
MyScrollView
package com.topfloat;
/**
* Created by Linshijun on 2015/8/23.
*/
import android.content.Context;
import android.os.Handler;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.widget.ScrollView;
/*
* ScrollView並沒有實現滾動監聽。所以我們必須自行實現對ScrollView的監聽。
* 我們非常自然的想到在onTouchEvent()方法中實現對滾動Y軸進行監聽
* ScrollView的滾動Y值進行監聽
*/
public class MyScrollView extends ScrollView {
private OnScrollListener onScrollListener;
/**
* 主要是用在用戶手指離開MyScrollView。MyScrollView還在繼續滑動，我們用來保存Y的距離，然後做比較
*/
private int lastScrollY;
public MyScrollView(Context context) {
super(context, null);
}
public MyScrollView(Context context, AttributeSet attrs) {
super(context, attrs, 0);
}
public MyScrollView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
/**
* 設置滾動接口
*
* @param onScrollListener
*/
public void setOnScrollListener(OnScrollListener onScrollListener) {
this.onScrollListener = onScrollListener;
}
/**
* 用於用戶手指離開MyScrollView的時候獲取MyScrollView滾動的Y距離。然後回調給onScroll方法中
*/
private Handler handler = new Handler() {
public void handleMessage(android.os.Message msg) {
int scrollY = MyScrollView.this.getScrollY();
//此時的距離和記錄下的距離不相等，在隔5毫秒給handler發送消息
if (lastScrollY != scrollY) {
lastScrollY = scrollY;
handler.sendMessageDelayed(handler.obtainMessage(), 5);
}
if (onScrollListener != null) {
onScrollListener.onScroll(scrollY);
}
}
};
/**
* 重寫onTouchEvent。 當用戶的手在MyScrollView上面的時候，
* 直接將MyScrollView滑動的Y方向距離回調給onScroll方法中，當用戶擡起手的時候。
* MyScrollView可能還在滑動。所以當用戶擡起手我們隔5毫秒給handler發送消息，在handler處理
* MyScrollView滑動的距離
*/
@Override
public boolean onTouchEvent(MotionEvent ev) {
if (onScrollListener != null) {
onScrollListener.onScroll(lastScrollY = this.getScrollY());
}
switch (ev.getAction()) {
case MotionEvent.ACTION_UP:
handler.sendMessageDelayed(handler.obtainMessage(), 5);
break;
}
return super.onTouchEvent(ev);
}
/**
* 滾動的回調接口
*/
public interface OnScrollListener {
/**
* 回調方法。 返回MyScrollView滑動的Y方向距離
*/
public void onScroll(int scrollY);
}
}
ScrollView並沒有實現滾動監聽，所以必須自行實現對ScrollView的監聽，由於滾動方向在Y軸，能夠使用onTouchEvent()方法實現對滾動Y軸進行監聽，而手指離開屏幕時，滾動還在繼續，這時就須要選擇在用戶手指離開的時候每隔5毫秒來推斷ScrollView是否停止滑動。並將ScrollView的滾動Y值回調給OnScrollListener接口的onScroll(int scrollY)方法中。
然後對ScrollView調用setOnScrollListener方法就能監聽到滾動的Y值。
實現了上面兩步。MainActivity就比較簡單了。主要用了控件的從屬關系來addview和removeview,這樣做使代碼更為簡潔，更有適用性。
MainActivity
package com.topfloat;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
/**
* 實現OnScrollListener接口
*/
public class MainActivity extends AppCompatActivity implements MyScrollView.OnScrollListener{
private ImageView topshow,priceshow;
private MyScrollView myScrollView;
private int buypriceTop;
LinearLayout bind_1,bind_2;
RelativeLayout rlayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//初始化控件
initView();
}
private void initView() {
topshow= (ImageView) findViewById(R.id.top);
priceshow= (ImageView) findViewById(R.id.buy_price);
myScrollView= (MyScrollView) findViewById(R.id.myScrollView);
rlayout= (RelativeLayout) findViewById(R.id.rlayout);
bind_1= (LinearLayout) findViewById(R.id.bing_1);
bind_2= (LinearLayout) findViewById(R.id.bind_2);
myScrollView.setOnScrollListener(this);
}
/**
* 獲取pirce_show的頂部位置，即rlayout的底部位置
* @param hasFocus
*/
@Override
public void onWindowFocusChanged(boolean hasFocus) {
super.onWindowFocusChanged(hasFocus);
if(hasFocus){
buypriceTop=rlayout.getBottom(); //獲取pirce_show的頂部位置。即rlayout的底部位置
}
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
/**
* 監聽滾動Y值變化。通過addView和removeView來實現懸停效果
* @param scrollY
*/
@Override
public void onScroll(int scrollY) {
//推斷滾動距離是否在於圖片高度
if(scrollY>=buypriceTop){
if(priceshow.getParent()!=bind_1) //推斷其現有父類
{
bind_2.removeView(priceshow); //從現有父類移除
bind_1.addView(priceshow); //加入到目標父類
}
}else {
if(priceshow.getParent()!=bind_2)
{
bind_1.removeView(priceshow);
bind_2.addView(priceshow);
}
}
}
}
凝視裏基本都將須要重點都說了，比較好理解。
Android Studio源代碼稍後上傳，有須要的能夠下載來看看。
http://download.csdn.net/detail/linshijun33/9039237
Android ScrollView滾動實現大眾點評、網易雲音樂評論懸停效果