scrollview实现美团商家详情的导航栏渐变效果

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/liyan147/article/details/51542117

第一次在博客上分享我的经验,虽然是拿大神的代码改的一些东西但是自己也是思考了的,也算是小小的进步吧.在此把代码贴出来希望对你们有帮助.关于scrollview的详细介绍及美团的悬浮框设计请参照http://blog.csdn.net/xiaanming/article/details/17374599点击打开链接.这个列子的主要实现思路是,通scrollview的onscroll方法获取控件滑动的scroll Y,通过设置scroll Y和控件透明度的函数关系来实现导航栏中的按钮和文字显示隐藏的渐变效果.不多说了直接上代码吧.

一,布局界面

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <net.lhsoft.wifi.view.MyScrollView
        android:id="@+id/scrollView"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="fill_parent"
            android:orientation="horizontal">

            <com.loopj.android.image.SmartImageView
                android:id="@+id/picUrls"
                android:layout_width="fill_parent"
                android:layout_height="180dp" />


            <TextView
                android:id="@+id/pic"
                android:layout_width="30dp"
                android:layout_height="wrap_content"
                android:layout_marginLeft="300dp"
                android:layout_marginTop="100dp"
                android:background="#8f000000"
                android:text="28张"
                android:textColor="@color/white" />

            <include
                android:id="@+id/buy"
                layout="@layout/buy_layout"
                android:layout_marginLeft="10dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@+id/picUrls" />

            <WebView
                android:id="@+id/web"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/buy"
                 />
        </RelativeLayout>

    </net.lhsoft.wifi.view.MyScrollView>
    <LinearLayout
        android:id="@+id/title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@null"
        >
        <ImageView
            android:id="@+id/rt"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_margin="10dp"
            android:clickable="true"
            android:src="@drawable/fanhui" />
        <TextView
            android:id="@+id/name"
            android:layout_width="220dp"
            android:layout_height="wrap_content"
            android:text=""
            android:layout_margin="10dp"
            android:textSize="20dp"/>
        <ImageView
            android:id="@+id/sc"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_marginLeft="230dp"
            android:layout_marginTop="10dp"
            android:src="@drawable/xiangqing_icon"
            android:visibility="gone" />

        <ImageView
            android:layout_weight="1"
            android:id="@+id/collect"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_marginRight="20dp"
            android:layout_marginTop="10dp"
            android:src="@drawable/xiangqing_icon" />
    </LinearLayout>
</FrameLayout>

二,新建一个MyScrollView

package net.lhsoft.wifi.view;

import android.content.Context;
import android.os.Handler;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.widget.ScrollView;

/**
 * Created by feynman on 2016/5/26.
 */
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);
    }

    /**
     * 设置滚动接口
     * @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);
        }
    }



    /**
     *
     * 滚动的回调接口
     *
     * @author xiaanming
     *
     */
    public interface OnScrollListener{
        /**
         * 回调方法， 返回MyScrollView滑动的Y方向距离
         * @param scrollY
         *              、
         */
        public void onScroll(int scrollY);
    }



}

三,主界面

/**
 * Created by feynman on 2016/4/29.
 */
public class DetailsActivity extends Activity implements OnScrollListener {
    private ImageView rt;
    private ImageView collect;
    private SmartImageView picUrls;
    private WebView web;
    private ImageView phone;
    private TextView shop_name;
    private TextView address;
    private TextView pic;
    private TextView name;
    private boolean mbDisplayFlg = false;
    Gson gson;
    /**
     * 自定义的MyScrollView
     */
    private MyScrollView myScrollView;
    /**
     * 在MyScrollView里面的购买布局
     */
    private RelativeLayout mBuyLayout;
    /**
     * 位于顶部的购买布局
     */
    private RelativeLayout mTopBuyLayout;
    private LinearLayout title;

    @TargetApi(Build.VERSION_CODES.M)
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.layout_details);
        title = (LinearLayout) findViewById(R.id.title);
        myScrollView = (MyScrollView) findViewById(R.id.scrollView);
        mBuyLayout = (RelativeLayout) findViewById(R.id.buy);
        myScrollView.setOnScrollListener(this);
        shop_name = (TextView) findViewById(R.id.shop_name);
        name = (TextView) findViewById(R.id.name);
//        String shop_name = this.getIntent().getStringExtra("shop_name");
        shop_name.setText(this.getIntent().getStringExtra("shop_name"));
        pic = (TextView) findViewById(R.id.pic);
        String[] pics = (String[]) getIntent().getExtras().get("picUrls");
        pic.setText(pics.length + "" + "张");
        address = (TextView) findViewById(R.id.address);
        address.setText(this.getIntent().getStringExtra("prove") +
                this.getIntent().getStringExtra("city") +
                this.getIntent().getStringExtra("dist") +
                this.getIntent().getStringExtra("address"));
        rt = (ImageView) findViewById(R.id.rt);
        collect = (ImageView) findViewById(R.id.collect);
        phone = (ImageView) findViewById(R.id.phone);
        final String phoneNumber = this.getIntent().getStringExtra("phone");
        phone.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                Intent intent = new Intent(Intent.ACTION_DIAL, Uri
                        .parse("tel:" + phoneNumber));
                // 去调用那些可以处理拨号行为的Activity
                startActivity(intent);
            }
        });
        web = (WebView) findViewById(R.id.web);
        WebSettings webSettings = web.getSettings();
        webSettings.setJavaScriptEnabled(true);
        // 创建WebViewClient对象
        WebViewClient wvc = new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                // 使用自己的WebView组件来响应Url加载事件，而不是使用默认浏览器器加载页面
                web.loadUrl(url);
                // 消耗掉这个事件。Android中返回True的即到此为止吧,事件就会不会冒泡传递了，我们称之为消耗掉
                return true;
            }
        };
        web.setWebViewClient(wvc);
        String url = this.getIntent().getStringExtra("detailUrl");
        web.loadUrl(url);
        picUrls = (SmartImageView) findViewById(R.id.picUrls);
        final String[] value = (String[]) getIntent().getExtras().get("picUrls");
        picUrls.setImageUrl(value[0]);
        picUrls.setScaleType(ImageView.ScaleType.FIT_XY);
        picUrls.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent(DetailsActivity.this, PhotoActivity.class);
                intent.putExtra("value", value);
                startActivity(intent);
            }
        });
        collect.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                collectShop();//收藏
            }
        });
        rt.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                finish();
            }
        });

    }

    public void collectShop() {
        RequestParams params = new RequestParams(ServerSetting.URLS.get("collectShop"));
        params.addQueryStringParameter("uid", BaseApplication.getInstance().getUserBean().getId());
        params.addQueryStringParameter("shopid", this.getIntent().getIntExtra("id", -1) + "");
        params.setHeader(Constants.SESSION_ID_NAME, CommonUtils.getPreferenceString(x.app(), Constants.SESSION_ID_NAME, ""));
        x.http().get(params, new Callback.CommonCallback<String>() {
            @Override
            public void onSuccess(String result) {

                RetData<List<CollectBean>> retData = gson.fromJson(result, new TypeToken<RetData<List<CollectBean>>>() {
                }.getType());
                if (retData.isCode()) {
                    collect.setImageResource(R.drawable.user_icon1);
                    Toast.makeText(DetailsActivity.this, "收藏成功", Toast.LENGTH_LONG).show();
                } else {
                    collect.setImageResource(R.drawable.xiangqing_icon);
                    Toast.makeText(DetailsActivity.this, "取消收藏", Toast.LENGTH_LONG).show();

                }
            }

            @Override
            public void onError(Throwable ex, boolean isOnCallback) {
                if (mbDisplayFlg) {
                    collect.setImageResource(R.drawable.xiangqing_icon);
                    Toast.makeText(DetailsActivity.this, "取消收藏", Toast.LENGTH_LONG).show();

                } else {

                    collect.setImageResource(R.drawable.user_icon1);
                    Toast.makeText(DetailsActivity.this, "收藏成功", Toast.LENGTH_LONG).show();

                }
                mbDisplayFlg = !mbDisplayFlg;
                collect.postInvalidate();
//                Toast.makeText(x.app(), "请求失败,:" + ex.getMessage(), Toast.LENGTH_LONG).show();
            }

            @Override
            public void onCancelled(CancelledException cex) {
                Toast.makeText(x.app(), "cancelled", Toast.LENGTH_LONG).show();//取消请求
            }

            @Override
            public void onFinished() {
                CustomProgressDialog.dismissCustomProgressDialog();
            }
        });
    }

    @Override
    public void onScroll(int scrollY) {
        float sc = myScrollView.getScrollY();
        float sc1 = sc / (mBuyLayout.getTop()-title.getHeight());
        if(sc1>1.0){
            sc1= (float) 1.0;

        }else {
            sc1=sc / (mBuyLayout.getTop()-title.getHeight());
        }
        int sc2 = (int) (sc1 * 255);
        if (sc != 0) {
            title.setBackgroundColor(Color.argb(sc2, 255, 255, 255));

            name.setText(this.getIntent().getStringExtra("shop_name"));
        } else {
            title.setBackgroundColor(Color.argb(0, 255, 255, 255

            ));
            rt.setImageResource(R.drawable.fanhui);
            collect.setImageResource(R.drawable.xiangqing_icon);
            name.setText("");
        }if(sc1==1.0){
            rt.setImageResource(R.drawable.fanhui1);
            collect.setImageResource(R.drawable.xiangqing_icon4);
        }

    }
}