微博的详情页效果
我们要实现的效果:
1.自定义MyScrollView
import android.content.Context;
import android.util.AttributeSet;
import android.widget.ScrollView;
/**
* 自定义ScrollView
*/
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);
}
}
2.MainActivity
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.LinearLayout;
/**
*折叠布局,实现页面滑动悬停布局 测试类
*/
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.activity_main布局类
<?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>