最近在做一个商城项目 详情页和淘宝的基本一致，主要功能包括顶部滑动渐变，顶部显示商品，详情，评论然后点击跳转到指定位置，滑动提示文字变幻。讲的再多不如一张gif图看的明白下面上图。
项目地址：https://github.com/CreatNameFy/slide
untitled.gif
此布局使用的是RecyclerView 在此使用的是框架LRecyclerView
功能介绍
1.滑动渐变
采用addOnScrollListener监听滑动距离 ，顶部图片是固定高度 可以使用dp转px算出图片在屏幕的高度 然后根据滑动距离做出渐变效果，接下来上代码
<!--图片布局-->
<ImageView
android:id="@+id/convenientBanner"
android:layout_width="match_parent"
android:layout_height="180dp"
/>
//获取控件在手机的px高度 这里减去了状态栏的高度
(DensityUtil.dp2px(this, 180.0F) - DensityUtil.getStatusBarHeight(this));
/**
*
* @param context 上下文
* @param dpValue dp数值
* @return dp to px
*/
public static int dp2px(Context context, float dpValue) {
final float scale = context.getResources().getDisplayMetrics().density;
return (int) (dpValue * scale + 0.5f);
}
/**
* 获取状态栏高度
*
* @param context context
* @return 状态栏高度
*/
public static int getStatusBarHeight(Context context) {
// 获得状态栏高度
int resourceId = context.getResources().getIdentifier("status_bar_height", "dimen", "android");
return context.getResources().getDimensionPixelSize(resourceId);
}
//滑动监听
// 设置渐变的主要代码
recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
@Override
public void onScrolled(RecyclerView recycler, int dx, int dy) {
super.onScrolled(recycler, dx, dy);
//滑动的距离
totaldy += dy;
//当滑动的距离 <= toolbar高度的时候，改变Toolbar背景色的透明度，达到渐变的效果
if (totaldy <= mRecyclerFactor) {
// 如果在显示图片中显示圆图标
// 算出透明度
float scale = (float) totaldy / mRecyclerFactor;
float alpha = scale * 255;
if (alpha < 160) {
// 如果透明度小于160设置为顶部是图片
StatusBarUtil.setTranslucentForImageView(DetailsActivity.this, (int) alpha, titleBar);
} else {
StatusBarUtil.setColor(DetailsActivity.this, Color.argb((int) alpha, 255, 255, 255));
}
titleBar.setBackgroundColor(Color.argb((int) alpha, 255, 255, 255));
} else {
// 已经不显示图片
titleBar.setBackgroundColor(Color.parseColor("#ffffff"));
}
}
});
2.滑动改变标题文字颜色 也就是滑到详情详情字体颜色是橙色 具体看gif图。
在adapter布局计算每个item的高度 我这里每个item的高度都是不固定的
/**
* 获取每个item的高度
* @param view item的跟布局
* @param type 用于判断是那个item的高度
*/
public void getMeasureHeight(final View view, final int type) {
view.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
@Override
public void onGlobalLayout() {
if (listener!=null){
if(type==1003||type==1004){
if(height!=0){
height+=view.getHeight();
listener.setOnItemHeightListener(height,type);
}else{
height=view.getHeight();
}
}else{
listener.setOnItemHeightListener(view.getHeight(),type);
}
}
}
});
}
//这里使用监听返回给activity页面
/**获取到每个item的高度主要用到前两个*/
adapter.setListener(new DetailsAdapter.OnItemHeightListener() {
@Override
public void setOnItemHeightListener(int height, int type) {
if(height!=0){
if(type==1001){
//这里加了顶部图片 我将图片作为head给了RecyclerView
item1=(int) (height+mRecyclerFactor);
}else if(type==1002){
item2=item1+ (height-DensityUtil.getWidth(mContext));
}else{
item3=item2+height;
}
}
}
});
recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
@Override
public void onScrolled(RecyclerView recycler, int dx, int dy) {
super.onScrolled(recycler, dx, dy);
//判断滑动到的位置来提示目前文字显示的位置
//滑动的距离
totaldy += dy;
if(item2!=0&&item1!=0&&item3!=0){
if(totaldy<item1){
title.setTextColor(res.getColor(R.color.orange));
titlel.setTextColor(res.getColor(R.color.black));
titler.setTextColor(res.getColor(R.color.black));
}else if(totaldy>item1&&totaldy<item2){
titlel.setTextColor(res.getColor(R.color.orange));
title.setTextColor(res.getColor(R.color.black));
titler.setTextColor(res.getColor(R.color.black));
}else if(totaldy>item2){
titler.setTextColor(res.getColor(R.color.orange));
title.setTextColor(res.getColor(R.color.black));
titlel.setTextColor(res.getColor(R.color.black));
}
}
}
});
3.点击按钮滑动到指定位置
通过recyclerView.scrollBy()；来滑动到指定位置
//当点击商品
//totaldy是已经滑动的距离 改为负数就是减去相应的长度
recyclerView.scrollBy(0, (int) -totaldy);
//点击详情
// 判断滑动距离是否超过商品
if (totaldy > item1)
recyclerView.scrollBy(0, (int) -(totaldy - item1) + 20);
else
recyclerView.scrollBy(0, (int) (item1 - totaldy) + 20);
//点击评论
recyclerView.scrollBy(0, item2);
