模仿美團(tuán)點評的Android應(yīng)用中價格和購買欄懸浮固定的效果
隨著移動互聯(lián)網(wǎng)的快速發(fā)展，它已經(jīng)和我們的生活息息相關(guān)了，在公交地鐵里面都能看到很多人的人低頭看著自己的手機(jī)屏幕，從此“低頭族”一詞就產(chǎn)生了，作為一名移動行業(yè)的開發(fā)人員，我自己也是一名“低頭族”，上下班時間在公交地鐵上看看新聞來打發(fā)下時間，有時候也會看看那些受歡迎的App的一些界面效果，為什么人家的app那么受歡迎？跟用戶體驗跟UI設(shè)計也有直接的關(guān)系，最近在美團(tuán)和大眾點評的App看到如下效果，我感覺用戶好，很人性化，所以自己也嘗試著實現(xiàn)了下，接下來就講解下實現(xiàn)思路！
如上圖(2)我們看到了，當(dāng)立即搶購布局向上滑動到導(dǎo)航欄布局的時候，立即搶購布局就貼在導(dǎo)航欄布局下面，下面的其他的布局還是可以滑動，當(dāng)我們向下滑動的時候，立即搶購的布局又隨著往下滑動了，看似有點復(fù)雜，但是一說思路可能你就頓時恍然大悟了。
當(dāng)我們向上滑動過程中，我們判斷立即搶購的布局是否滑到導(dǎo)航欄布局下面，如果立即搶購的上面頂?shù)搅藢?dǎo)航欄，我們新建一個立即搶購的懸浮框來顯示在導(dǎo)航欄下面，這樣子就實現(xiàn)了立即搶購貼在導(dǎo)航欄下面的效果啦，而當(dāng)我們向下滑動的時候，當(dāng)立即搶購布局的下面剛好到了剛剛新建的立即搶購懸浮框的下面的時候，我們就移除立即搶購懸浮框，可能說的有點拗口，既然知道了思路，接下來我們就來實現(xiàn)效果。
新建一個Android項目，取名MeiTuanDemo,先看立即搶購（buy_layout.xml）的布局，這里為了方便我直接從美團(tuán)上面截去了圖片
<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="@+id/buy_layout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@drawable/buy" />
</LinearLayout>
立即搶購的布局實現(xiàn)了，接下來實現(xiàn)主界面的布局，上面是導(dǎo)航欄布局，為了方便還是直接從美團(tuán)截取的圖片，然后下面的ViewPager布局，立即搶購布局，其他布局 放在ScrollView里面，界面還是很簡單的
<LinearLayout 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"
android:orientation="vertical" >
<ImageView
android:id="@+id/imageView1"
android:scaleType="centerCrop"
android:layout_width="match_parent"
android:layout_height="45dip"
android:src="@drawable/navigation_bar" />
<com.example.meituandemo.MyScrollView
android:id="@+id/scrollView"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageView
android:id="@+id/iamge"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/pic"
android:scaleType="centerCrop" />
<include
android:id="@+id/buy"
layout="@layout/buy_layout" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/one"
android:scaleType="centerCrop" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/one"
android:scaleType="centerCrop" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/one"
android:scaleType="centerCrop" />
</LinearLayout>
</com.example.meituandemo.MyScrollView>
</LinearLayout>
你會發(fā)現(xiàn)上面的主界面布局中并不是ScrollView,而是自定義的一個MyScrollView,接下來就看看MyScrollView類中的代碼
package com.example.meituandemo;
import android.content.Context;
import android.os.Handler;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.widget.ScrollView;
/**
* 博客地址:http://blog.csdn.net/xiaanming
*
* @author xiaanming
*
*/
public class MyScrollView extends ScrollView {
private OnScrollListener onScrollListener;
/**
* 主要是用在用戶手指離開MyScrollView，MyScrollView還在繼續(xù)滑動，我們用來保存Y的距離，然后做比較
*/
private int lastScrollY;
public MyScrollView(Context context) {
this(context, null);
}
public MyScrollView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public MyScrollView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
/**
* 設(shè)置滾動接口
* @param onScrollListener
*/
public void setOnScrollListener(OnScrollListener onScrollListener) {
this.onScrollListener = onScrollListener;
}
/**
* 用于用戶手指離開MyScrollView的時候獲取MyScrollView滾動的Y距離，然后回調(diào)給onScroll方法中
*/
private Handler handler = new Handler() {
public void handleMessage(android.os.Message msg) {
int scrollY = MyScrollView.this.getScrollY();
//此時的距離和記錄下的距離不相等，在隔5毫秒給handler發(fā)送消息
if(lastScrollY != scrollY){
lastScrollY = scrollY;
handler.sendMessageDelayed(handler.obtainMessage(), 5);
}
if(onScrollListener != null){
onScrollListener.onScroll(scrollY);
}
};
};
/**
* 重寫onTouchEvent， 當(dāng)用戶的手在MyScrollView上面的時候，
* 直接將MyScrollView滑動的Y方向距離回調(diào)給onScroll方法中，當(dāng)用戶抬起手的時候，
* MyScrollView可能還在滑動，所以當(dāng)用戶抬起手我們隔5毫秒給handler發(fā)送消息，在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);
}
/**
*
* 滾動的回調(diào)接口
*
* @author xiaanming
*
*/
public interface OnScrollListener{
/**
* 回調(diào)方法， 返回MyScrollView滑動的Y方向距離
* @param scrollY
* 、
*/
public void onScroll(int scrollY);
}
}
一看代碼你也許明白了，就是對ScrollView的滾動Y值進(jìn)行監(jiān)聽，我們知道ScrollView并沒有實現(xiàn)滾動監(jiān)聽，所以我們必須自行實現(xiàn)對ScrollView的監(jiān)聽，我們很自然的想到在onTouchEvent()方法中實現(xiàn)對滾動Y軸進(jìn)行監(jiān)聽，可是你會發(fā)現(xiàn)，我們在滑動ScrollView的時候，當(dāng)我們手指離開ScrollView。它可能還會繼續(xù)滑動一段距離，所以我們選擇在用戶手指離開的時候每隔5毫秒來判斷ScrollView是否停止滑動，并將ScrollView的滾動Y值回調(diào)給OnScrollListener接口的onScroll(int scrollY)方法中，我們只需要對ScrollView調(diào)用我們只需要對ScrollView調(diào)用setOnScrollListener方法就能監(jiān)聽到滾動的Y值。
實現(xiàn)了對ScrollView滾動的Y值進(jìn)行監(jiān)聽，接下來就簡單了，我們只需要顯示立即搶購懸浮框和移除懸浮框了，接下來看看主界面Activity的代碼編寫
package com.example.meituandemo;
import android.app.Activity;
import android.content.Context;
import android.graphics.PixelFormat;
import android.os.Bundle;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.WindowManager;
import android.view.WindowManager.LayoutParams;
import android.widget.LinearLayout;
import com.example.meituandemo.MyScrollView.OnScrollListener;
/**
* 博客地址:http://blog.csdn.net/xiaanming
*
* @author xiaanming
*
*/
public class MainActivity extends Activity implements OnScrollListener{
private MyScrollView myScrollView;
private LinearLayout mBuyLayout;
private WindowManager mWindowManager;
/**
* 手機(jī)屏幕寬度
*/
private int screenWidth;
/**
* 懸浮框View
*/
private static View suspendView;
/**
* 懸浮框的參數(shù)
*/
private static WindowManager.LayoutParams suspendLayoutParams;
/**
* 購買布局的高度
*/
private int buyLayoutHeight;
/**
* myScrollView與其父類布局的頂部距離
*/
private int myScrollViewTop;
/**
* 購買布局與其父類布局的頂部距離
*/
private int buyLayoutTop;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
myScrollView = (MyScrollView) findViewById(R.id.scrollView);
mBuyLayout = (LinearLayout) findViewById(R.id.buy);
myScrollView.setOnScrollListener(this);
mWindowManager = (WindowManager) getSystemService(Context.WINDOW_SERVICE);
screenWidth = mWindowManager.getDefaultDisplay().getWidth();
}
/**
* 窗口有焦點的時候，即所有的布局繪制完畢的時候，我們來獲取購買布局的高度和myScrollView距離父類布局的頂部位置
*/
@Override
public void onWindowFocusChanged(boolean hasFocus) {
super.onWindowFocusChanged(hasFocus);
if(hasFocus){
buyLayoutHeight = mBuyLayout.getHeight();
buyLayoutTop = mBuyLayout.getTop();
myScrollViewTop = myScrollView.getTop();
}
}
/**
* 滾動的回調(diào)方法，當(dāng)滾動的Y距離大于或者等于 購買布局距離父類布局頂部的位置，就顯示購買的懸浮框
* 當(dāng)滾動的Y的距離小于 購買布局距離父類布局頂部的位置加上購買布局的高度就移除購買的懸浮框
*
*/
@Override
public void onScroll(int scrollY) {
if(scrollY >= buyLayoutTop){
if(suspendView == null){
showSuspend();
}
}else if(scrollY <= buyLayoutTop + buyLayoutHeight){
if(suspendView != null){
removeSuspend();
}
}
}
/**
* 顯示購買的懸浮框
*/
private void showSuspend(){
if(suspendView == null){
suspendView = LayoutInflater.from(this).inflate(R.layout.buy_layout, null);
if(suspendLayoutParams == null){
suspendLayoutParams = new LayoutParams();
suspendLayoutParams.type = LayoutParams.TYPE_PHONE; //懸浮窗的類型，一般設(shè)為2002，表示在所有應(yīng)用程序之上，但在狀態(tài)欄之下
suspendLayoutParams.format = PixelFormat.RGBA_8888;
suspendLayoutParams.flags = LayoutParams.FLAG_NOT_TOUCH_MODAL
| LayoutParams.FLAG_NOT_FOCUSABLE; //懸浮窗的行為，比如說不可聚焦，非模態(tài)對話框等等
suspendLayoutParams.gravity = Gravity.TOP; //懸浮窗的對齊方式
suspendLayoutParams.width = screenWidth;
suspendLayoutParams.height = buyLayoutHeight;
suspendLayoutParams.x = 0; //懸浮窗X的位置
suspendLayoutParams.y = myScrollViewTop; ////懸浮窗Y的位置
}
}
mWindowManager.addView(suspendView, suspendLayoutParams);
}
/**
* 移除購買的懸浮框
*/
private void removeSuspend(){
if(suspendView != null){
mWindowManager.removeView(suspendView);
suspendView = null;
}
}
}
上面的代碼比較簡單，根據(jù)ScrollView滑動的距離來判斷顯示和移除懸浮框，懸浮框的實現(xiàn)主要是通過WindowManager這個類來實現(xiàn)的，調(diào)用這個類的addView方法用于添加一個懸浮框，removeView用于移除懸浮框。
通過上述代碼就實現(xiàn)了美團(tuán)，大眾點評的這種效果，在運行項目之前我們必須在AndroidManifest.xml中加入<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />
我們運行下項目看下效果吧
一個修改版
上面的代碼，其實我自己感覺效果并不是很好，如果快速滑動界面，顯示懸浮框的時候會出現(xiàn)一卡的現(xiàn)象，有些朋友說有時候會出現(xiàn)兩個布局的情況，特別是對ScrollView滾動的Y值得監(jiān)聽，我還使用了Handler來獲取，還有朋友給我介紹了Scrolling Tricks這個東西，我下載試了下，確實美團(tuán)網(wǎng)，大眾點評的購買框用的是這種效果，但是Scrolling Tricks只能在API11以上使用，這個有點小悲劇，然后我做了下修改，并將實現(xiàn)思路分享給大家，實現(xiàn)起來很簡單
首先還是要先對ScrollView進(jìn)行滾動監(jiān)聽，直接在onScrollChanged()方法中就能獲取滾動的Y值，之前那里使用了Handler，走彎路了，直接看代碼吧
package com.example.meituandemo;
import android.content.Context;
import android.util.AttributeSet;
import android.widget.ScrollView;
public class MyScrollView extends ScrollView {
private OnScrollListener onScrollListener;
public MyScrollView(Context context) {
this(context, null);
}
public MyScrollView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public MyScrollView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
/**
* 設(shè)置滾動接口
* @param onScrollListener
*/
public void setOnScrollListener(OnScrollListener onScrollListener) {
this.onScrollListener = onScrollListener;
}
@Override
public int computeVerticalScrollRange() {
return super.computeVerticalScrollRange();
}
@Override
protected void onScrollChanged(int l, int t, int oldl, int oldt) {
super.onScrollChanged(l, t, oldl, oldt);
if(onScrollListener != null){
onScrollListener.onScroll(t);
}
}
/**
*
* 滾動的回調(diào)接口
*/
public interface OnScrollListener{
/**
* 回調(diào)方法， 返回MyScrollView滑動的Y方向距離
* @param scrollY
* 、
*/
public void onScroll(int scrollY);
}
}
接下來看看主界面的布局文件
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/parent_layout"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ImageView
android:id="@+id/imageView1"
android:layout_width="match_parent"
android:layout_height="45dip"
android:scaleType="centerCrop"
android:src="@drawable/navigation_bar" />
<com.example.meituandemo.MyScrollView
android:id="@+id/scrollView"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageView
android:id="@+id/iamge"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/pic"
android:scaleType="centerCrop" />
<include
android:id="@+id/buy"
layout="@layout/buy_layout" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/one"
android:scaleType="centerCrop" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/one"
android:scaleType="centerCrop" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/one"
android:scaleType="centerCrop" />
</LinearLayout>
<include
android:id="@+id/top_buy_layout"
layout="@layout/buy_layout" />
</FrameLayout>
</com.example.meituandemo.MyScrollView>
</LinearLayout>
下面是布局的效果圖
從主界面的布局你可以看出，我們在上面放置了一個購買的布局，可能你會想，先讓上面的布局隱藏起來，等下面的布局滑動上來就將其顯示出來，如果這樣子就跟我之前寫的那篇文章差不多，效果不是很棒，所以這篇修改版的肯定不是這樣子的，我們還是先看主界面的代碼吧
package com.example.meituandemo;
import android.app.Activity;
import android.os.Bundle;
import android.view.ViewTreeObserver.OnGlobalLayoutListener;
import android.widget.LinearLayout;
import com.example.meituandemo.MyScrollView.OnScrollListener;
public class MainActivity extends Activity implements OnScrollListener{
/**
* 自定義的MyScrollView
*/
private MyScrollView myScrollView;
/**
* 在MyScrollView里面的購買布局
*/
private LinearLayout mBuyLayout;
/**
* 位于頂部的購買布局
*/
private LinearLayout mTopBuyLayout;
@SuppressWarnings("deprecation")
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
myScrollView = (MyScrollView) findViewById(R.id.scrollView);
mBuyLayout = (LinearLayout) findViewById(R.id.buy);
mTopBuyLayout = (LinearLayout) findViewById(R.id.top_buy_layout);
myScrollView.setOnScrollListener(this);
//當(dāng)布局的狀態(tài)或者控件的可見性發(fā)生改變回調(diào)的接口
findViewById(R.id.parent_layout).getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
@Override
public void onGlobalLayout() {
//這一步很重要，使得上面的購買布局和下面的購買布局重合
onScroll(myScrollView.getScrollY());
}
});
}
@Override
public void onScroll(int scrollY) {
int mBuyLayout2ParentTop = Math.max(scrollY, mBuyLayout.getTop());
mTopBuyLayout.layout(0, mBuyLayout2ParentTop, mTopBuyLayout.getWidth(), mBuyLayout2ParentTop + mTopBuyLayout.getHeight());
}
}
主界面就短短的幾行代碼，可能看完這些代碼你還是沒有明白到底是怎么做到的，沒關(guān)系，我給大家說說，其實我們是讓上面的購買布局和下面的購買布局重合起來了，layout()這個方法是確定View的大小和位置的，然后將其繪制出來，里面的四個參數(shù)分別是View的四個點的坐標(biāo)，他的坐標(biāo)不是相對屏幕的原點，而且相對于他的父布局來說的，
我們在主頁面最外層的ViewGroup添加了布局狀態(tài)改變的監(jiān)聽器，當(dāng)繪制完了屏幕會回調(diào)到方法onGlobalLayout()中，我們在onGlobalLayout()方法中手動調(diào)用了下onScroll()方法，剛開始myScrollView.getScrollY()等于0，所以說當(dāng)scrollY小于mBuyLayout.getTop()的時候，上面的購買布局的上邊緣到myScrollView的上邊緣的距離等于mBuyLayout.getTop()(即下面布局的上邊緣到myScrollView的上邊緣）所以剛開始上面的購買布局和下面的購買布局重合了。
當(dāng)myScrollView向上滾動，而上面購買布局的上邊緣始終要和myScrollView的上邊緣保持mBuyLayout.getTop()這個距離，所以上面的購買布局也跟著向上滾動，當(dāng)scrollY大于mBuyLayout.getTop()的時候，表示購買布局上邊緣滑動到了導(dǎo)航欄布局，所以此時購買布局的上邊緣與myScrollView的上邊緣始終要保持scrollY這個距離，所以購買布局才會一直在導(dǎo)航欄下面，就好像粘住了一樣，不知道你了解了沒有？好了，不過根據(jù)這種思路你也可以剛開始使用一個懸浮框來覆蓋在下面的購買布局上面，然后onScroll()方法中更新懸浮框的位置，不過懸浮框的x,y不是相對于父布局的，這點要注意下，這樣子也能實現(xiàn)效果，不過相對于此，要復(fù)雜的多，所以我們遇到類似的功能直接使用這種就行了，簡潔明了，好了，你是不迫不及待的想看下效果，那我們接下來就運行下程序吧
含有多個購買布局的效果，下一個購買布局會將上一個購買布局頂上去，使用方法也很簡單，只需要將你需要設(shè)置的布局設(shè)置Tag為sticky， 如
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="100dip"
android:background="#ff00ffff"
android:tag="sticky" >
<Button
android:id="@+id/button"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Button" />
</FrameLayout>
這樣子這個布局滾動到了頂部就會粘在頂部，大家可以試試！
相關(guān)文章
探究Android中ListView復(fù)用導(dǎo)致布局錯亂的解決方案
這篇文章主要介紹了探究Android中ListView復(fù)用導(dǎo)致布局錯亂的解決方案，非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-10-10
Android使用onCreateOptionsMenu()創(chuàng)建菜單Menu的方法詳解
這篇文章主要介紹了Android使用onCreateOptionsMenu()創(chuàng)建菜單Menu的方法,結(jié)合實例形式較為詳細(xì)的分析了Android基于onCreateOptionsMenu創(chuàng)建菜單的具體步驟與相關(guān)操作技巧,需要的朋友可以參考下2016-11-11
這篇文章主要介紹了Android模仿To圈兒個人資料界面層疊淡入淡出顯示效果的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-07-07
android實現(xiàn)倒計時功能（開始、暫停、0秒結(jié)束）
這篇文章主要為大家詳細(xì)介紹了android實現(xiàn)倒計時功能，開始、暫停、0秒結(jié)束，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
這篇文章主要為大家詳細(xì)介紹了Android仿京東首頁畫軸效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要為大家詳細(xì)介紹了Android實現(xiàn)簡易版彈鋼琴效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-05-05
Jetpack是一套庫、工具和指南的集合，幫助開發(fā)者更輕松地編寫優(yōu)質(zhì)應(yīng)用，這篇文章主要介紹了Android Jetpack簡介,需要的朋友可以參考下2022-09-09
抽獎活動有很多種形式，轉(zhuǎn)盤抽獎，九宮格抽獎，刮刮卡抽獎，這篇文章主要為大家詳細(xì)介紹了如何打造流暢九宮格抽獎活動效果,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
這篇文章主要為大家詳細(xì)介紹了Flutter質(zhì)感設(shè)計之表單輸入，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-08-08
自從微信添加搶紅包的功能，微信的電商之旅算是正式開始正式火爆起來。但是作為Android開發(fā)者來說，我們首先考慮的是如何實現(xiàn)Android微信自動搶紅包呢，下面我們來一起看看吧。2016-08-08