天天看点

仿大总点评浮动效果

在大众点评团购中,有这样一个效果. 在具体的团购页面中商家图片下有一个购买条,当用户滚动团购详情界面的时候,购买条会停留在界面的最上方. 具体效果如图:

仿大总点评浮动效果

      图1                                        

仿大总点评浮动效果

图2

仿大总点评浮动效果

    图3

大家可以看到,大众点评中,为了突出这个购买条,当向上滚动时,该滚动条会显示在最上面(如图2),而当用户滑动回来的时候,又可以恢复回第一张图的样子(如图1).

下面说一下具体的实现思路:

仿大总点评浮动效果

从这张图,我们可以看下具体的布局.实际上在最顶部的位置,有一个购买条1,最开始的时候是隐藏的,而当从上向下滑动到具体位置的时候将购买条1显示,将购买条2隐藏.

相反,当滑动回来的时候,讲购买条2显示,将购买条1隐藏.

核心的部分就是我们要去根据scrollview的滑动高度去控制购买条的显示与隐藏.这里要注意的就是一定要判断好这个滑动的高度,否则会出现不平滑的效果,影响用户体验.

仿大总点评浮动效果

看一下这张图(画得很丑,希望大家不介意),当上面的原始视图滑动到这个位置时,也就是刚好原来上面的部分留在界面中的刚好是购买条的高度时,我们需要将隐藏的购买条显示出来,再将原来的购买条隐藏,这样子就不会有突兀的效果,从而使效果变得平滑.当界面从下向上的时候也是一样,这里不再复述.具体的还是大家看下代码:

布局文件:

activity_main.xml:

<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" >  

    <com.tony.orderview.orderview  

        android:id="@+id/refreshview"  

        android:layout_width="fill_parent"  

        android:layout_height="fill_parent"  

        android:background="#77aaaa" >  

        <scrollview  

            android:id="@+id/scrollview"  

            android:layout_width="fill_parent"  

            android:layout_height="fill_parent"  

            android:background="#accaac" >  

            <linearlayout  

                android:layout_width="fill_parent"  

                android:layout_height="wrap_content"  

                android:orientation="vertical" >  

                <linearlayout  

                    android:layout_width="fill_parent"  

                    android:layout_height="250dip"  

                    android:background="@drawable/upload"  

                    android:text="one"  

                    android:textcolor="#ffccee" />  

                <include  

                    android:id="@+id/theview"  

                    layout="@layout/deal_buy_item" />  

                <textview  

                    android:layout_height="1250dip"  

                    android:background="@drawable/ic_tuan_info_bg_1"  

                    android:text="粥面故事   仅售49元,超值享受哦" />  

                    android:layout_height="50dip"  

                    android:background="#ff0055"  

                    android:text="支持随时退" />  

            </linearlayout>  

        </scrollview>  

    </com.tony.orderview.orderview>  

    <include  

         android:visibility="gone"  

        android:id="@+id/theviewstay"  

        layout="@layout/deal_buy_item" />  

</relativelayout>  

购买条布局:

<?xml version="1.0" encoding="utf-8"?>  

<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"  

    android:layout_width="fill_parent"  

    android:layout_height="65.0dip"  

    android:background="@drawable/ic_tuan_info_bg_1"  

    android:orientation="vertical" >  

    <linearlayout  

        android:layout_height="0.0dip"  

        android:layout_weight="1.0"  

        android:gravity="center_vertical"  

        android:orientation="horizontal"  

        android:paddingleft="10.0dip"  

        android:paddingright="10.0dip" >  

        <linearlayout  

            android:layout_width="0.0dip"  

            android:layout_weight="1.0"  

            android:gravity="center_vertical"  

            android:orientation="vertical" >  

            <textview  

                android:layout_width="wrap_content"  

                android:layout_marginright="8.0dip"  

                android:singleline="true"  

                android:textcolor="#ffe55600"  

                android:textsize="21.0sp" />  

                android:ellipsize="end"  

                android:textcolor="#ff979797"  

                android:textsize="12.0sp" />  

        </linearlayout>  

        <button  

            android:layout_width="wrap_content"  

            android:layout_height="wrap_content"  

            android:ellipsize="end"  

            android:maxlines="1"  

            android:minwidth="150.0dip"  

            android:text="立即抢购"  

            android:textappearance="?android:textappearancemedium" />  

    </linearlayout>  

    <imageview  

        android:layout_height="1.0dip"  

        android:background="@drawable/ic_tuan_info_bg_3" />  

</linearlayout>  

mainactivity:

package com.tony.orderview;  

import android.app.activity;  

import android.os.bundle;  

import android.view.menu;  

import android.view.view;  

import android.widget.scrollview;  

import com.example.stayview.r;  

import com.tony.orderview.orderview.stayviewlistener;  

public class mainactivity extends activity {  

    @override  

    public void oncreate(bundle savedinstancestate) {  

        super.oncreate(savedinstancestate);  

        setcontentview(r.layout.activity_main);  

        orderview refreshableview = (orderview) findviewbyid(r.id.refreshview);  

        refreshableview.setstayview(findviewbyid(r.id.theview), (scrollview)findviewbyid(r.id.scrollview),new stayviewlistener() {  

            @override  

            public void onstayviewshow() {  

                //从下往上拉的时候回复显示  

                findviewbyid(r.id.theviewstay).setvisibility(view.visible);  

            }  

            public void onstayviewgone() {  

                //从上往下拉隐藏布局  

                findviewbyid(r.id.theviewstay).setvisibility(view.gone);  

        });  

    }  

    public boolean oncreateoptionsmenu(menu menu) {  

        getmenuinflater().inflate(r.menu.activity_main, menu);  

        return true;  

}  

接着是最核心的部分,具体控制高度显示隐藏,我是这样做的,重写了一个orderview,套在整个布局外面,然后计算scrollview的滑动高度:

import android.content.context;  

import android.util.attributeset;  

import android.widget.linearlayout;  

import android.widget.scroller;  

public class orderview extends linearlayout {  

    private scroller scroller;  

    private context mcontext;  

    private view stayview;  

    private stayviewlistener stayviewlistener;  

    private scrollview scrollview;  

    public void setstayview(view stayview,scrollview scrollview,stayviewlistener stayviewlistener){  

        this.stayview = stayview;  

        this.scrollview = scrollview;  

        this.stayviewlistener = stayviewlistener;  

    public orderview(context context) {  

        super(context);  

        mcontext = context;  

    public orderview(context context, attributeset attrs) {  

        super(context, attrs);  

        init();  

    private void init() {  

        setorientation(linearlayout.vertical);  

        scroller = new scroller(mcontext);  

    /** 

     *  

     */  

    boolean up = true;  

    public void computescroll() {  

        if(stayview!=null&&scrollview!=null&&stayviewlistener!=null){  

            int y = scrollview.getscrolly();  

            if(up){  

                int top = stayview.gettop();  

                if(y>=top){  

                    stayviewlistener.onstayviewshow();  

                    up = false;  

                }  

            if(!up){  

                int bottom = stayview.getbottom();  

                if(y<=bottom-stayview.getheight()){  

                    stayviewlistener.onstayviewgone();  

                    up = true;  

        }  

    public interface stayviewlistener{  

        public void onstayviewshow();  

        public void onstayviewgone();  

       其实关于这种类似大众点评购买条的停留效果,具体还可以有很多的做法,并不一定像我这样自已定义view. 不过整体的思路还是不变,肯定还是要根据scrollview的滚动高度来进行判断.  无论用何种方式实现,一定要注意位置的控制,使该效果变得平滑,而不是突然购买条出现在界面上. 具体的细节还有很多,回头有时间再补上吧.

继续阅读