最近做项目过程中遇到上滑停靠的效果,网上先百度了一波,有各种方法,下面把我自己用到的一种方法写出来,做个笔记。效果图如下:
先看微博详情页效果:
然后我实现的效果:
1. 先上xml布局。
布局中最外层LinearLayout,里面嵌套一个标题栏Layout和一个需要滚动FrameLayout,FrameLayout里面是上层悬浮的Layout 和自定义的一个MyScrollView。
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context="guopush.android.com.myheaderview.MainActivity"> <LinearLayout android:layout_width="match_parent" android:layout_height="46dp" android:background="@color/color_white_ffffff" android:gravity="center" android:orientation="horizontal"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingLeft="16dp" android:text="返回" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center" android:text="微博正文" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingRight="16dp" android:text="分享" /> </LinearLayout> <View android:layout_width="match_parent" android:layout_height="1px" android:background="@color/color_gray_c4c4c4" /> <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent"> <guopush.android.com.myheaderview.MyScrollView android:id="@+id/my_scrollview" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/color_gray_f6f6f6"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <TextView android:id="@+id/tv_headerView" android:layout_width="match_parent" android:layout_height="200dp" android:layout_marginBottom="10dp" android:layout_marginTop="10dp" android:background="@color/color_white_ffffff" android:gravity="center" android:text="我是微博正文" android:textSize="14sp" /> <LinearLayout android:id="@+id/ll_tabView" android:layout_width="match_parent" android:layout_height="50dp" android:gravity="center" android:orientation="vertical"> <LinearLayout android:id="@+id/tv_topView" android:layout_width="match_parent" android:layout_height="50dp" android:gravity="center" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" android:background="@android:color/white" android:gravity="center" android:orientation="horizontal" android:paddingLeft="16dp" android:paddingRight="16dp"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:text="转发112" android:textSize="14sp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="start" android:paddingLeft="20dp" android:text="评论238" android:textColor="@android:color/black" android:textSize="14sp" android:textStyle="bold" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:padding="5dp" android:text="赞55" android:textSize="14sp" /> </LinearLayout> <View android:layout_width="match_parent" android:layout_height="1px" android:background="@color/color_gray_c4c4c4" /> </LinearLayout> </LinearLayout> <TextView android:id="@+id/tv_contentView" android:layout_width="match_parent" android:layout_height="1500dp" android:layout_marginTop="10dp" android:background="@color/color_white_ffffff" android:gravity="top|center_horizontal" android:paddingTop="160dp" android:text="我是评论1111\n\n\n\n\n\n\n\n\n我是评论2222\n\n\n\n\n\n\n\n\n我是评论3333\n\n\n\n\n\n\n\n\n我是评论4444\n\n\n\n\n\n\n\n\n我是评论5555\n\n\n\n\n\n\n\n\n" android:textSize="14sp" /> </LinearLayout> </guopush.android.com.myheaderview.MyScrollView> <LinearLayout android:id="@+id/ll_tabTopView" android:layout_width="match_parent" android:layout_height="50dp" android:orientation="vertical" /> </FrameLayout> </LinearLayout>
2. 在看自定义的ScrollView。
import android.content.Context; import android.util.AttributeSet; import android.widget.ScrollView; /** * Created by jkloshhm on 2017/11/24. * * @author jkloshhm */ public class MyScrollView extends ScrollView { private OnScrollListener mOnScrollListener; public MyScrollView(Context context) { super(context); } public MyScrollView(Context context, AttributeSet attrs) { super(context, attrs); } public MyScrollView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); } /** * 监听ScroView的滑动情况 * * @param l 变化后的X轴位置 * @param t 变化后的Y轴的位置 * @param oldl 原先的X轴的位置 * @param oldt 原先的Y轴的位置 */ @Override protected void onScrollChanged(int l, int t, int oldl, int oldt) { super.onScrollChanged(l, t, oldl, oldt); if (null != mOnScrollListener) { mOnScrollListener.onScroll(t); } } /** * 设置滚动接口 * * @param listener */ public void setOnScrollListener(OnScrollListener listener) { this.mOnScrollListener = listener; } /** * 滚动的回调接口 */ public interface OnScrollListener { /** * MyScrollView滑动的Y方向距离变化时的回调方法 * * @param scrollY */ void onScroll(int scrollY); } }
3. 最后来看主Activity:MainActivity。import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.widget.LinearLayout; /** * Created by jkloshhm on 2017/11/24. * * @author jkloshhm */ public class MainActivity extends AppCompatActivity implements MyScrollView.OnScrollListener { /** * 顶部固定的TabViewLayout */ private LinearLayout mTopTabViewLayout; /** * 跟随ScrollView的TabviewLayout */ private LinearLayout mTabViewLayout; /** * 要悬浮在顶部的View的子View */ private LinearLayout mTopView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); MyScrollView mMyScrollView = (MyScrollView) findViewById(R.id.my_scrollview); mTabViewLayout = (LinearLayout) findViewById(R.id.ll_tabView); mTopTabViewLayout = (LinearLayout) findViewById(R.id.ll_tabTopView); mTopView = (LinearLayout) findViewById(R.id.tv_topView); //滑动监听 mMyScrollView.setOnScrollListener(this); } @Override public void onScroll(int scrollY) { int mHeight = mTabViewLayout.getTop(); //判断滑动距离scrollY是否大于0,因为大于0的时候就是可以滑动了,此时mTabViewLayout.getTop()才能取到值。 if (scrollY > 0 && scrollY >= mHeight) { if (mTopView.getParent() != mTopTabViewLayout) { mTabViewLayout.removeView(mTopView); mTopTabViewLayout.addView(mTopView); } } else { if (mTopView.getParent() != mTabViewLayout) { mTopTabViewLayout.removeView(mTopView); mTabViewLayout.addView(mTopView); } } } }
3. 完整demo下载:http://download.csdn.net/download/jkloshhm/10135271