Rendering of this part:
New effect (another effect different from the effect of this article is included in this project):
The first figure is realized through RecyclerView+Vlayout multi layout; The second actual effect picture is realized through CoordinatorLayout+RecyclerView;
Layout of the first edition:
At first, considering that TabLayout and RecyclerView (in viewpager) can slide together, it is easy to think of a way to nest them with Scrollview. The effect is realized, but the disadvantages of Scrollview nesting viewpager are obvious!
The second edition of this blog is not to solve the problem of Scrollview nested Viewpager, but to implement it in another way!
The layout structure diagram is very simple, with two floors:
<?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 Search bar.../> </RelativeLayout>
The first and second layers (custom JdScrollVIew) in the first version are placed in the fragment of Tab1:
<?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>
The JdScrollView layout only needs to replace the ViewPager in the original layout with RecyclerView. For details, please refer to the source code!
But this doesn't seem to solve the effect of TabLayout sliding with the list?!
In fact, a coincidence is taken here. There is a TabLayout in MainActivity, and tab1, that is, the Fragment in the home page, also contains a similar TabLayout (nested ScrollView nested TabLayout+RecyclerView). When the position of viewpager = = 0, the TabLayout in MainActivity is hidden and displayed on other pages, All effect operations are transferred from MainActivity to Tab1Fragment, which avoids the mode of using ScrollView nested viewpager!
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/rl_content" android:layout_width="match_parent" android:layout_height="match_parent"> <View android:id="@+id/view" android:layout_width="match_parent" android:layout_height="180dp" android:background="#acddee" /> <ImageView android:id="@+id/iv_ad" android:layout_width="match_parent" android:layout_height="1000dp" android:layout_marginTop="-820dp" android:scaleType="centerCrop" android:src="@mipmap/bg_ad" /> <LinearLayout android:id="@+id/ll_content" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <TextView android:id="@+id/tv_refresh_state" android:layout_width="match_parent" android:layout_height="40dp" android:gravity="center" android:text="Pull down refresh" android:textColor="#dddddd" /> <net.lucode.hackware.magicindicator.MagicIndicator android:id="@+id/magicIndicator" android:layout_width="match_parent" android:layout_height="35dp" /> <com.byl.jdrefresh.v2.CustomRecyclerView android:id="@+id/recyclerView" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginHorizontal="15dp" android:nestedScrollingEnabled="false" /> </LinearLayout> </RelativeLayout>
In addition, this article adds an additional function on the original basis. You can refer to JD app, that is, after the pull-down exceeds a certain distance, the background will automatically expand down the full screen, and then automatically enter the advertising page:
The implementation scheme is to judge the current pull-down distance when the ACTION_UP is raised. When it exceeds a set value, the picture and the overall layout will be in the full screen state within a certain time. In fact, it is to rely on the ValueAnimator to continuously set the marginTop of the background image and the paddingTop of the content:
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("Pull down refresh");
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;
}
......It should be noted that the height of the background image is not the screen height, but the screen height plus
Height of this part:
screenHeight = SysUtils.getScreenHeight(context); topRemainHeight = SysUtils.Dp2Px(context, imageShowHeight) - StatusBarUtil.getStatusBarHeight(context) - SysUtils.Dp2Px(context, 40);//40 is the height of the search bar. Write as much as you want 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);
The reason for this is that if only the background image is set to the screen height, the red box will be stuck at the bottom and will not be completely hidden when the background image is fully expanded by continuously setting marginTop to 0. In fact, the reason is very simple, as shown in the figure:
When the picture reaches the bottom, because the red box is flat with the bottom of the picture, it just leaks out. Therefore, this requires the above method to add the height of the picture to the height of the screen + the height of the red box. In this way, when the background picture is full screen, the visible content area moves out of the screen, and only the background picture is visible on the whole screen!
Github address: https://github.com/baiyuliang...
Original address: https://juejin.cn/post/702168...
end of document
Your favorite collection is my greatest encouragement!
Welcome to follow me, share Android dry goods and exchange Android technology.
If you have any opinions on the article or any technical problems, please leave a message in the comment area for discussion!