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

来源:互联网 发布:金乌玉兔命 知乎 编辑:程序博客网 时间:2024/03/29 23:52

第一次在博客上分享我的经验,虽然是拿大神的代码改的一些东西但是自己也是思考了的,也算是小小的进步吧.在此把代码贴出来希望对你们有帮助.关于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);        }    }}

0 0
原创粉丝点击