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>
效果：
