UI实例-->仿支付宝首页头部伸缩效果

《UI实例-->仿支付宝首页头部伸缩效果》” /></p><h1>1. 效果图</h1><p>下面是我们将要实现的效果图:</p><p> <img layer-src=

(2) include_toolbar_close.xml
该布局是头部收缩时toolbar对应的效果图:

《UI实例-->仿支付宝首页头部伸缩效果》” />    头部收缩时toolbar的效果图</p><pre><code><?xml version=

(3) include_open.xml
该布局是头部打开时折叠区对应的效果图:

《UI实例-->仿支付宝首页头部伸缩效果》” />    头部打开时折叠区对应的效果图</p><pre><code><?xml version=

(3) content_zfbhome_telescopic.xml
内容区

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context=".activity.ZFBHomeTelescopicActivity"
    tools:showIn="@layout/activity_zfbhome_telescopic">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/text_margin"
        android:text="@string/large_text" />

</android.support.v4.widget.NestedScrollView>

(3) activity_zfbhome_telescopic.xml
最终的在activity布局里的效果图:

《UI实例-->仿支付宝首页头部伸缩效果》” />    最终效果图</p><pre><code><?xml version=

注:布局中涉及到的一些属性具体的作用就不做阐述了,可以自行查阅。

  • 第三步:主Activity(ZFBHomeTelescopicActivity.java)
    我们需要对AppBarLayout设置偏移监听,需要实现一些背景色缩放效果和收缩展开时toolbar对应布局的显示。
public class ZFBHomeTelescopicActivity extends AppCompatActivity implements AppBarLayout.OnOffsetChangedListener {


    @BindView(R.id.bg_content)
    View bgContent;                 //大布局背景遮罩层
    @BindView(R.id.iv_search)
    ImageView ivSearch;             //
    @BindView(R.id.iv_plus)
    ImageView ivPlus;
    @BindView(R.id.iv_contact)
    ImageView ivContact;
    @BindView(R.id.iv_scan)
    ImageView ivScan;
    @BindView(R.id.iv_pay)
    ImageView ivPay;
    @BindView(R.id.iv_charge)
    ImageView ivCharge;
    @BindView(R.id.bg_toolbar_close)
    View bgToolbarClose;                    //收缩状态下toolbar的遮罩层
    @BindView(R.id.toolbar)
    Toolbar toolbar;
    @BindView(R.id.toolbar_layout)
    CollapsingToolbarLayout toolbarLayout;
    @BindView(R.id.app_bar)
    AppBarLayout appBar;
    @BindView(R.id.bg_toolbar_open)         //展开状态下toolbar的遮罩层
    View bgToolbarOpen;
    private View toolbarOpen;               //展开状态下toolbar显示的内容
    private View toolbarClose;              //收缩状态下toolbar显示的内容

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_zfbhome_telescopic);
        ButterKnife.bind(this);
        toolbarOpen = findViewById(R.id.include_toolbar_open);
        toolbarClose = findViewById(R.id.include_toolbar_close);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        appBar.addOnOffsetChangedListener(this);
    }

    @Override
    public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
        //垂直方向偏移
        int offset = Math.abs(verticalOffset);
        //最大偏移距离
        int scrollRange = appBarLayout.getTotalScrollRange();
        //当滑动没超过一半时,展开状态下toolbar显示内容,根据收缩位置,改变透明值
        if (offset <= scrollRange / 2){
            toolbarOpen.setVisibility(View.VISIBLE);
            toolbarClose.setVisibility(View.GONE);
            //根据偏移百分比,计算透明值
            float scale2 = (float) offset / (scrollRange / 2);
            int alpha2 = (int) (255 * scale2);
            bgToolbarOpen.setBackgroundColor(Color.argb(alpha2,25,131,209));

        }else {//当滑动超过一半,收缩状态下toolbar显示内容,根据收缩位置,改变透明值
            toolbarClose.setVisibility(View.VISIBLE);
            toolbarOpen.setVisibility(View.GONE);
            float scale3 = (float) (scrollRange - offset) / (scrollRange / 2);
            int alpha3 = (int) (255 * scale3);
            bgToolbarClose.setBackgroundColor(Color.argb(alpha3,25,131,209));
        }
        //根据偏移值百分比计算扫一扫布局的透明度值
        float scale = (float) offset / scrollRange;
        int alpha = (int) (255 * scale);
        bgContent.setBackgroundColor(Color.argb(alpha,25,131,209));
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        appBar.removeOnOffsetChangedListener(this);
    }
}

最后献上完整demo:仿支付宝首页头部伸缩效果

    原文作者:想要个李大仁
    原文地址: https://www.jianshu.com/p/658204b937b8
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞