高仿京东2020版首页效果2

倨傲的王者

本篇结果图：
GitHub：https://github.com/baiyuliang/JdRefresh

上一篇：下仿京东2020版尾页规划及革新结果，缺陷是用了NestedScrollView嵌套了ViewPager，结果能够完成，但实践使用中体验仿佛依旧有面好的，缘故原由能够检察该篇专客尾部分析。
初版得规划规划图：

开初考虑到TabLayout战RecyclerView（ViewPager中）能够一同滑动，以是很随便念到的法子便是用Scrollview将二者嵌套出来，结果是完成了，可是Scrollview嵌套Viewpager的短处不言而喻！
而第两版即本篇专客并非为了解决Scrollview嵌套Viewpager的成绩，而是换一种思绪来完成！
规划规划图，很简朴，便两层：

<?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:background="#f7f7f7"
android:focusable="true"
android:focusableInTouchMode="true">
<LinearLayout
android:id="@+id/ll_content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<net.lucode.hackware.magicindicator.MagicIndicator
android:id="@+id/magicIndicator"
android:layout_width="match_parent"
android:layout_height="35dp"
android:background="#acddee"
android:visibility="gone" />
<com.byl.jdrefresh.v1.CustomViewPager
android:id="@+id/customViewPager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<RelativeLayout 搜刮栏.../>
</RelativeLayout>

复造代码

而初版中的第一层战第两层（自界说JdScrollVIew）放正在了Tab1的fragment中：

<?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="match_parent"
android:orientation="vertical">
<com.byl.jdrefresh.v2.JdScrollView2
android:id="@+id/jdScrollView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>

复造代码

JdScrollVIew规划仅需求将本来规划中的ViewPager换成RecyclerView便可，详细可参考源码！
但如许做仿佛并出有处理TabLayout战列表一同滑动的结果啊？！
实在，那里与了一个巧，MainActivity中的有一个TabLayout，而tab1也便是尾页中的Fragment也包罗了一个一摸一样的TabLayout（NestedScrollview嵌套TabLayout+RecyclerView），当viewpager的position==0时，MainActivity中的TabLayout躲藏，别的页里时显现，一切的结果操纵由MainActivity转移到了Tab1Fragment中，如许也便制止了利用ScrollView嵌套Viewpager这类形式！

<?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="match_parent"
android:orientation="vertical">
<com.byl.jdrefresh.v2.JdScrollView2
android:id="@+id/jdScrollView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>

复造代码

此外，本篇再本来的根底上多减了一个功用，能够参考京东app，即下推超出必然间隔后，布景会主动背下齐屏睁开，然后主动进进到告白页里：

完成计划，便是正在脚势抬起（ACTION_UP）时，判定当前下推的间隔，超出某一设定值时，则主动正在必然工夫内乱让图片及团体规划处于齐屏形态，实在便是依托ValueAnimator，不竭的设置布景图的marginTop和内乱容的paddingTop：

case MotionEvent.ACTION_UP:
if (adScrollDistance > 500) {
isInterceptTouch = true;
AnimUtils.start(-(int) (marginTop + adScrollDistance), 500, new AnimUtils.OnAnimListener() {
@Override
public void onUpdate(int value) {
layoutAd(marginTop + adScrollDistance + value);
ll_content.setPadding(0, (int) (paddingTop + adScrollDistance + AD_START_SCROLL_DISTANCE) + value, 0, 0);
}
@Override
public void onEnd() {
context.startActivity(new Intent(context, AdActivity.class));
new Handler().postDelayed(() -> {
tv_refresh_state.setText("下推革新");
isInterceptTouch = false;
recyclerView.setRefreshing(false);
isInterceptScroll = false;
REFRESH_STATUS = REFRESH_DONE;
layoutAd(marginTop);
iv_ad.setImageAlpha(0);
if (onPullListener != null) onPullListener.onPull(255);
ll_content.setPadding(0, paddingTop, 0, 0);
reset();
}, 300);
}
});
return true;
}
......

复造代码

有一面需求留意的是，图片的下度，并非屏幕下度，而是屏幕的下度+

那一部分的下度：

screenHeight = SysUtils.getScreenHeight(context);
topRemainHeight = SysUtils.Dp2Px(context, imageShowHeight) - StatusBarUtil.getStatusBarHeight(context) - SysUtils.Dp2Px(context, 40);//40是搜刮栏下度，是几便写几
RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, screenHeight + topRemainHeight);
marginTop = -(screenHeight + topRemainHeight - SysUtils.Dp2Px(context, imageShowHeight));
layoutParams.topMargin = marginTop;
iv_ad.setLayoutParams(layoutParams);

复造代码

如许做的缘故原由是，假设只把布景图设为屏幕下度，则布景图经由过程不竭设置marginTop曲至为0完整睁开时，白框部分（地点内乱容区团体不竭设置paddingTop）会恰好卡正在底部，其实不会完整躲藏失落，缘故原由实在很简朴，如图：

图片抵达底部时，因为白框取图片底部是持仄的，以是恰好漏正在了里面，因而，需求便需求上里所道的办法，将图片下度正在屏幕下度根底上再+白框部分下度，如许图片齐屏时，全部屏幕内乱容便只要图片显现了！
GitHub：https://github.com/baiyuliang/JdRefresh

免责声明：假如进犯了您的权益，请联络站少，我们会实时删除侵权内乱容，感谢协作！