android滑动标题栏渐变实现

import android.graphics.Color;import android.os.Build;import android.os.Bundle;import android.support.v4.content.ContextCompat;import android.support.v7.app.AppCompatActivity;import android.support.v7.widget.Toolbar;import android.view.View;import android.widget.ImageView;import android.widget.LinearLayout;import android.widget.Toast;import com.titlebargradient.R;import com.titlebargradient.widget.ObservableScrollView;import butterknife.BindView;import butterknife.ButterKnife;import butterknife.OnClick;public class ScrollViewActivity extends AppCompatActivity {    @BindView(R.id.iv_back)    ImageView ivBack;    @BindView(R.id.toolbar)    Toolbar toolbar;    @BindView(R.id.scrollView)    ObservableScrollView scrollView;    @BindView(R.id.lv_bottom)    LinearLayout lvBottom;    @BindView(R.id.iv_more)    ImageView ivMore;    @BindView(R.id.iv_shopping_cart)    ImageView ivShoppingCart;    @BindView(R.id.content)    LinearLayout content;    @BindView(R.id.spite_line)    View spiteLine;    @BindView(R.id.iv_header)    ImageView ivHeader;    @BindView(R.id.lv_header)    LinearLayout lvHeader;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_scrollview);        ButterKnife.bind(this);        initView();    }    private void initView() {        //获取dimen属性中 标题和头部图片的高度        final float title_height = getResources().getDimension(R.dimen.title_height);        final float head_height = getResources().getDimension(R.dimen.head_height);        //滑动事件回调监听（一次滑动的过程一般会连续触发多次）        scrollView.setOnScrollListener(new ObservableScrollView.ScrollViewListener() {            @Override            public void onScroll(int oldy, int dy, boolean isUp) {                float move_distance = head_height - title_height;                if (!isUp && dy <= move_distance) {//手指往上滑,距离未超过200dp                    //标题栏逐渐从透明变成不透明                    toolbar.setBackgroundColor(ContextCompat.getColor(ScrollViewActivity.this, R.color.color_orange));                    TitleAlphaChange(dy, move_distance);//标题栏渐变                    HeaderTranslate(dy);//图片视差平移                } else if (!isUp && dy > move_distance) {//手指往上滑,距离超过200dp                    TitleAlphaChange(1, 1);//设置不透明百分比为100%，防止因滑动速度过快，导致距离超过200dp,而标题栏透明度却还没变成完全不透的情况。                    HeaderTranslate(head_height);//这里也设置平移，是因为不设置的话，如果滑动速度过快，会导致图片没有完全隐藏。                    ivBack.setImageResource(R.mipmap.ic_back_dark);                    ivMore.setImageResource(R.mipmap.ic_more_dark);                    ivShoppingCart.setImageResource(R.mipmap.ic_shopping_dark);                    spiteLine.setVisibility(View.VISIBLE);                    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {                        getWindow().setStatusBarColor(Color.RED);                    }                } else if (isUp && dy > move_distance) {//返回顶部，但距离头部位置大于200dp                    //不做处理                } else if (isUp && dy <= move_distance) {//返回顶部，但距离头部位置小于200dp                    //标题栏逐渐从不透明变成透明                    TitleAlphaChange(dy, move_distance);//标题栏渐变                    HeaderTranslate(dy);//图片视差平移                    ivBack.setImageResource(R.mipmap.ic_back);                    ivMore.setImageResource(R.mipmap.ic_more);                    ivShoppingCart.setImageResource(R.mipmap.ic_shopping_cart);                    spiteLine.setVisibility(View.GONE);                }            }        });    }    private void HeaderTranslate(float distance) {        lvHeader.setTranslationY(-distance);        ivHeader.setTranslationY(distance/2);    }    private void TitleAlphaChange(int dy, float mHeaderHeight_px) {//设置标题栏透明度变化        float percent = (float) Math.abs(dy) / Math.abs(mHeaderHeight_px);        //如果是设置背景透明度，则传入的参数是int类型，取值范围0-255        //如果是设置控件透明度，传入的参数是float类型，取值范围0.0-1.0        //这里我们是设置背景透明度就好，因为设置控件透明度的话，返回ICON等也会变成透明的。        //alpha 值越小越透明        int alpha = (int) (percent * 255);        toolbar.getBackground().setAlpha(alpha);//设置控件背景的透明度，传入int类型的参数（范围0~255）        ivBack.getBackground().setAlpha(255 - alpha);        ivMore.getBackground().setAlpha(255 - alpha);        ivShoppingCart.getBackground().setAlpha(255 - alpha);    }    @OnClick({R.id.iv_back, R.id.iv_shopping_cart, R.id.iv_more})    public void OnClick(View v) {        switch (v.getId()) {            case R.id.iv_back:                Toast.makeText(this, "点击了返回按键", Toast.LENGTH_SHORT).show();                break;            case R.id.iv_shopping_cart:                Toast.makeText(this, "点击了加入购物车", Toast.LENGTH_SHORT).show();                break;            case R.id.iv_more:                Toast.makeText(this, "点击了更多按键", Toast.LENGTH_SHORT).show();                break;        }    }    @Override    protected void onDestroy() {//        ButterKnife.unbind(this);        super.onDestroy();    }}

import android.content.Context;import android.util.AttributeSet;import android.widget.ScrollView;/** * 自定义监听滑动的ScrollView */public class ObservableScrollView extends ScrollView {    private ScrollViewListener scrollViewListener = null;    public ObservableScrollView(Context context) {        super(context);    }    public ObservableScrollView(Context context, AttributeSet attrs,                                int defStyle) {        super(context, attrs, defStyle);    }    public ObservableScrollView(Context context, AttributeSet attrs) {        super(context, attrs);    }    public void setOnScrollListener(ScrollViewListener scrollViewListener) {        this.scrollViewListener = scrollViewListener;    }    @Override    protected void onScrollChanged(int x, int y, int oldx, int oldy) {        super.onScrollChanged(x, y, oldx, oldy);        if (scrollViewListener != null) {            if (oldy < y ) {// 手指向上滑动，屏幕内容下滑                scrollViewListener.onScroll(oldy,y,false);            } else if (oldy > y ) {// 手指向下滑动，屏幕内容上滑                scrollViewListener.onScroll(oldy,y,true);            }        }    }    public  interface ScrollViewListener{//dy Y轴滑动距离，isUp 是否返回顶部         void onScroll(int oldy,int dy,boolean isUp);    }}

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical">    <LinearLayout        android:id="@+id/content"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:orientation="vertical">        <com.titlebargradient.widget.ObservableScrollView            android:id="@+id/scrollView"            android:layout_width="match_parent"            android:layout_height="match_parent">            <LinearLayout                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:orientation="vertical"                android:paddingTop="250dp">                <TextView                    android:layout_width="match_parent"                    android:layout_height="match_parent"                    android:padding="8dp"                    android:textSize="20sp"                    android:lineSpacingExtra="10dp"                    android:text="@string/TextContent"                    android:gravity="center"/>            LinearLayout>        com.titlebargradient.widget.ObservableScrollView>    LinearLayout>    <LinearLayout        android:id="@+id/lv_header"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:orientation="vertical">        <ImageView            android:id="@+id/iv_header"            android:layout_width="match_parent"            android:layout_height="@dimen/head_height"            android:scaleType="centerCrop"            android:layout_gravity="center"            android:src="@mipmap/bg_header"/>    LinearLayout>    <include layout="@layout/layout_toolbar"/>    <LinearLayout        android:id="@+id/lv_bottom"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:orientation="vertical"        android:layout_alignParentBottom="true">        <include layout="@layout/layout_bottom"/>    LinearLayout>RelativeLayout>

底部布局

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="horizontal"    android:layout_width="match_parent"    android:layout_height="wrap_content">        <TextView            android:layout_width="48dp"            android:layout_height="48dp"            android:background="@drawable/bg_square"            android:gravity="center"            android:padding="8dp"            android:layout_gravity="center"            android:drawableTop="@mipmap/ic_help"            android:drawablePadding="2dp"            android:text="客服"            android:textSize="11sp" />        <TextView            android:layout_width="48dp"            android:layout_height="48dp"            android:background="@drawable/bg_square"            android:gravity="center"            android:padding="8dp"            android:layout_gravity="center"            android:drawableTop="@mipmap/ic_market"            android:drawablePadding="2dp"            android:text="店铺"            android:textSize="11sp"/>        <TextView            android:layout_width="48dp"            android:layout_height="48dp"            android:background="@drawable/bg_square"            android:gravity="center"            android:padding="8dp"            android:layout_gravity="center"            android:drawableTop="@mipmap/ic_collection"            android:drawablePadding="2dp"            android:text="收藏"            android:textSize="11sp"/>        <TextView            android:layout_width="0dp"            android:layout_weight="1"            android:layout_height="48dp"            android:background="@color/color_orange"            android:gravity="center"            android:text="加入购物车"            android:textColor="@android:color/white"/>        <TextView            android:layout_width="0dp"            android:layout_weight="1"            android:layout_height="48dp"            android:background="@color/color_red"            android:gravity="center"            android:text="立即购买"            android:textColor="@android:color/white"/>LinearLayout>

标题栏布局

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:orientation="vertical">    <android.support.v7.widget.Toolbar        android:id="@+id/toolbar"        android:layout_width="match_parent"        android:layout_height="@dimen/title_height"        android:background="@color/color_transparent">                <ImageView            android:id="@+id/iv_back"            android:layout_width="40dp"            android:layout_height="40dp"            android:background="@drawable/bg_circle"            android:padding="8dp"            android:src="@mipmap/ic_back" />        <ImageView            android:id="@+id/iv_more"            android:layout_width="40dp"            android:layout_height="40dp"            android:layout_gravity="right"            android:layout_marginRight="8dp"            android:background="@drawable/bg_circle"            android:padding="10dp"            android:src="@mipmap/ic_more" />        <ImageView            android:id="@+id/iv_shopping_cart"            android:layout_width="40dp"            android:layout_height="40dp"            android:layout_gravity="right"            android:layout_marginRight="8dp"            android:background="@drawable/bg_circle"            android:padding="8dp"            android:src="@mipmap/ic_shopping_cart" />    android.support.v7.widget.Toolbar>    <View        android:id="@+id/spite_line"        android:layout_width="match_parent"        android:layout_height="0.8dp"        android:background="@color/color_light_gray"        android:visibility="gone" />LinearLayout>

效果：

转载于:https://www.cnblogs.com/loaderman/p/10537876.html

更多相关文章

随机推荐