天天看點
傳回

Android Scrollview上滑停靠—懸浮框停靠在标題欄下方（防微網誌詳情頁）

最近做項目過程中遇到上滑停靠的效果，網上先百度了一波，有各種方法，下面把我自己用到的一種方法寫出來，做個筆記。效果圖如下：

先看微網誌詳情頁效果：

Android Scrollview上滑停靠—懸浮框停靠在标題欄下方（防微網誌詳情頁）
然後我實作的效果：
Android Scrollview上滑停靠—懸浮框停靠在标題欄下方（防微網誌詳情頁）

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
Android基礎 android 上滑停靠 防微網誌詳情頁 ScrollView滑動監聽 懸浮框
上一篇: 每日一面 - MySQL 的雙一設定是什麼？
下一篇: 請你談談為什麼分布式系統需要限流器為什麼需要限流器

繼續閱讀