总结思路:界面上方设置一个不显示的布局(与需要吸顶的布局一样的布局),当布局滑动直吸顶布局的位置的时候,隐藏滑动的布局,不显示的布局显示出来即可。
实现如下:
正文内容设置标题样式
这里将生成目录
首先在整个布局中自定义一个MyNestedScrollview 继承NestedScrollview 重写该布局方法
public class MyNestedScrollView extends NestedScrollView {
private OnScrollListener listener;
public MyNestedScrollView(@NonNull Context context) {
super(context);
}
public MyNestedScrollView(@NonNull Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
}
public MyNestedScrollView(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
//设置接口
public interface OnScrollListener{
void onScroll(int scrollY);
}
//重写原生onScrollChanged方法,将参数传递给接口,由接口传递出去
@Override
protected void onScrollChanged(int l, int t, int oldl, int oldt) {
super.onScrollChanged(l, t, oldl, oldt);
if(listener != null){
//这里我只传了垂直滑动的距离
listener.onScroll(t);
}
}
}
注意:咱们需要用到一个方法来获取布局的高度,NestedScrollView.getMeasuredHeight()中的这个方法可以获取测量的滑动布局的高度,注意并不是屏幕高度而是滑动布局的高度。 NestedScrollView.scrollTo()可以设置滑动的距离,方法中有两个参数一个是X轴一个是Y轴。这个方法可实现点击某个标题页面跳转到对应的位置。示例如下
ll_tab_sp.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
int flhight = ll_shangpin.getMeasuredHeight();
page_socller.scrollTo(0, flhight/3*1-20);
}
});
ll_tab_pj.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if (GetBargainInfoComBeanList.get(0).getData().getCommentlist().size()!=0){
int flhight = ll_shangpin.getMeasuredHeight();
page_socller.scrollTo(0, flhight-90);
}
}
});
ll_tab_xq.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
int flhight = ll_shangpin.getMeasuredHeight();
if (GetBargainInfoComBeanList.get(0).getData().getCommentlist().size()!=0){
flhight1 = ll_pingjia.getMeasuredHeight();
page_socller.scrollTo(0, flhight+flhight1-60);
}
}
});
ll_tab_tj.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
int flhight = ll_shangpin.getMeasuredHeight();
if (GetBargainInfoComBeanList.get(0).getData().getCommentlist().size()==0&&GetBargainInfoComBeanList.get(0).getData().getContent().size()==0){
flhight1 =0;
flhight3 =0;
page_socller.scrollTo(0, flhight+flhight1+flhight3-50);
}else {
flhight3 = ll_xiangqing.getMeasuredHeight();
flhight1 = ll_pingjia.getMeasuredHeight();
page_socller.scrollTo(0, flhight+flhight1+flhight3-10);
}
}
});
之后呢,咱们需要为滑动布局设置滑动事件监听,也就是page_socller.setOnScrollChangeListener(new NestedScrollView.OnScrollChangeListener() {},来检测滑动的距离,其中有四个参数,分别为x轴滑动之前的位置,y轴之前滑动的位置,和滑动后的X轴和Y轴位置。
千万注意测量出来的布局的大小为px,需要将px转换为dp,方法如下
public static int px2dp(Context context, float pxValue) {
final float scale = context.getResources().getDisplayMetrics().density;
return (int) (pxValue / scale + 0.5f);
}
然后就是咱们的滑动监听事件,咱们根据不同布局的不同高度求出各个布局的距离,用变量存储,实例如下:
public void onScrollChange(NestedScrollView v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
int flhight = ll_shangpin.getMeasuredHeight();
if (GetBargainInfoComBeanList.get(0).getData().getCommentlist().size()==0){
flhight1 =0;
}else {
flhight1 = ll_pingjia.getMeasuredHeight();
}
if (GetBargainInfoComBeanList.get(0).getData().getContent().size()==0){
flhight3 =0;
dp1 = px2dp(NewCommodityDetailsActivity.this, scrollY);
dp2 = px2dp(NewCommodityDetailsActivity.this, flhight)-35;
dp3 = px2dp(NewCommodityDetailsActivity.this, flhight+flhight1)-35 ;
dp4 = px2dp(NewCommodityDetailsActivity.this, flhight+flhight1+flhight3)-25 ;
}else {
flhight3 = ll_xiangqing.getMeasuredHeight();
dp1 = px2dp(NewCommodityDetailsActivity.this, scrollY);
dp2 = px2dp(NewCommodityDetailsActivity.this, flhight)-35;
dp3 = px2dp(NewCommodityDetailsActivity.this, flhight+flhight1)-25 ;
dp4 = px2dp(NewCommodityDetailsActivity.this, flhight+flhight1+flhight3)-5 ;
}
px2dp方法就是咱们定义的px转化为dp的方法,然后咱们根据滑动的具体不同判断布局是否显示出来以及各个子标题的颜色和状态,示例如下:
if(dp1
ll_tab_fl.setVisibility(View.GONE);
}else if (dp1>dp2/3*1&&dp1
ll_tab_fl.setVisibility(View.VISIBLE);
tv_tab_sp.setTextSize(15);
tv_tab_sp.setTextColor(Color.parseColor("#ED290F"));
tv_tab_pj.setTextSize(14);
tv_tab_pj.setTextColor(Color.parseColor("#151515"));
tv_tab_xq.setTextSize(14);
tv_tab_xq.setTextColor(Color.parseColor("#151515"));
tv_tab_tj.setTextSize(14);
tv_tab_tj.setTextColor(Color.parseColor("#151515"));
view_tab_sp.setVisibility(View.VISIBLE);
view_tab_pj.setVisibility(View.GONE);
view_tab_xq.setVisibility(View.GONE);
view_tab_tj.setVisibility(View.GONE);
}else if (dp1>dp2&&dp1
ll_tab_fl.setVisibility(View.VISIBLE);
tv_tab_sp.setTextSize(14);
tv_tab_sp.setTextColor(Color.parseColor("#151515"));
tv_tab_pj.setTextSize(15);
tv_tab_pj.setTextColor(Color.parseColor("#ED290F"));
tv_tab_xq.setTextSize(14);
tv_tab_xq.setTextColor(Color.parseColor("#151515"));
tv_tab_tj.setTextSize(14);
tv_tab_tj.setTextColor(Color.parseColor("#151515"));
view_tab_sp.setVisibility(View.GONE);
view_tab_pj.setVisibility(View.VISIBLE);
view_tab_xq.setVisibility(View.GONE);
view_tab_tj.setVisibility(View.GONE);
}else if (dp1>dp3&&dp1
ll_tab_fl.setVisibility(View.VISIBLE);
tv_tab_sp.setTextSize(14);
tv_tab_sp.setTextColor(Color.parseColor("#151515"));
tv_tab_pj.setTextSize(14);
tv_tab_pj.setTextColor(Color.parseColor("#151515"));
tv_tab_xq.setTextSize(15);
tv_tab_xq.setTextColor(Color.parseColor("#ED290F"));
tv_tab_tj.setTextSize(14);
tv_tab_tj.setTextColor(Color.parseColor("#151515"));
view_tab_sp.setVisibility(View.GONE);
view_tab_pj.setVisibility(View.GONE);
view_tab_xq.setVisibility(View.VISIBLE);
view_tab_tj.setVisibility(View.GONE);
}else if (dp1>dp4){
ll_tab_fl.setVisibility(View.VISIBLE);
tv_tab_sp.setTextSize(14);
tv_tab_sp.setTextColor(Color.parseColor("#151515"));
tv_tab_pj.setTextSize(14);
tv_tab_pj.setTextColor(Color.parseColor("#151515"));
tv_tab_xq.setTextSize(14);
tv_tab_xq.setTextColor(Color.parseColor("#151515"));
tv_tab_tj.setTextSize(15);
tv_tab_tj.setTextColor(Color.parseColor("#ED290F"));
view_tab_sp.setVisibility(View.GONE);
view_tab_pj.setVisibility(View.GONE);
view_tab_xq.setVisibility(View.GONE);
view_tab_tj.setVisibility(View.VISIBLE);
}
}
});
大概如此 后续若是有新的领悟,再更新