Android粘性控件，滑動停留StickLayout（導航欄滑動停留）

  
我們平時在使用APP的時候，經常可以見到一些導航欄滑到頂端就停留，而下面的控件可以接着滑動；今天，我就給大家介紹一個非常好用的滑動粘性控件StickLayout，它不僅可以讓其任意一個直接子控件滑動停留在頂端，而且還可以設置滑動到指定直接子控件，並且配有滑動改變監聽，可以輕鬆實現滑動時的聯動操作；我們用該控件就可以輕鬆實現像支付寶“所有應用”界面效果，下面我們就一起學習一下吧。

   首先，我們來看一下效果演示圖：

Note：圖1爲設置屬性wkp_canScrollToEndViewTop=true，圖2沒有；圖3爲設置滑動改變監聽。

  接下來，我們講解一下控件功能及其使用：

1.功能

滑動停留控件，可以讓其任意一個直接子控件滑動時停留在頂部，只需指定一個屬性而已，操作便捷。

2.Android Studio使用方法

dependencies{
      compile 'com.wkp:StickLayout:1.0.4'
      //Android Studio3.0+可用以下方式
      //implementation 'com.wkp:StickLayout:1.0.4'
}

Note：使用版本請以Github爲準。

3.使用詳解

• 屬性講解

        <!--是否粘性停留(用於直接子控件)-->
        <attr name="wkp_stick" format="boolean"/>
        <!--是否開啓滑動到最後一個控件的頂部，默認不開啓(用於控件本身)-->
        <attr name="wkp_canScrollToEndViewTop" format="boolean"/>

• 佈局示例

<?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">

    <TextView
        android:clickable="true"
        android:onClick="addView"
        android:gravity="center"
        android:padding="5dp"
        android:text="添加條目"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

        <!--app:wkp_canScrollToEndViewTop="true"-->
    <com.wkp.sticklayout_lib.widget.StickLayout
        android:id="@+id/sl"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:onClick="click"
            android:id="@+id/tv1"
            android:text="第1行"
            android:gravity="center"
            android:layout_width="match_parent"
            android:layout_height="200dp"/>

        <LinearLayout
            app:wkp_stick="true"
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="40dp">

            <TextView
                android:onClick="scrollTo"
                android:background="@android:color/holo_blue_light"
                android:text="NUM2"
                android:gravity="center"
                android:layout_weight="1"
                android:layout_width="0dp"
                android:layout_height="match_parent"/>

            <TextView
                android:onClick="scrollTo3"
                android:background="@android:color/holo_green_light"
                android:text="NUM3"
                android:gravity="center"
                android:layout_weight="1"
                android:layout_width="0dp"
                android:layout_height="match_parent"/>

            <TextView
                android:onClick="scrollTo4"
                android:background="@android:color/holo_red_light"
                android:text="NUM4"
                android:gravity="center"
                android:layout_weight="1"
                android:layout_width="0dp"
                android:layout_height="match_parent"/>

            <TextView
                android:onClick="scrollTo7"
                android:background="@android:color/holo_orange_light"
                android:text="NUM7"
                android:gravity="center"
                android:layout_weight="1"
                android:layout_width="0dp"
                android:layout_height="match_parent"/>

        </LinearLayout>

        <TextView
            android:id="@+id/tv2"
            android:text="第2行"
            android:background="@android:color/holo_blue_light"
            android:gravity="center"
            android:layout_width="match_parent"
            android:layout_height="200dp"/>

        <TextView
            android:id="@+id/tv3"
            app:wkp_stick="true"
            android:text="第3行"
            android:background="@android:color/holo_green_light"
            android:gravity="center"
            android:layout_width="match_parent"
            android:layout_height="200dp"/>

        <TextView
            android:background="@android:color/holo_red_light"
            android:id="@+id/tv4"
            android:text="第4行"
            android:gravity="center"
            android:layout_width="match_parent"
            android:layout_height="200dp"/>

        <TextView
            android:id="@+id/tv5"
            android:text="第5行"
            android:gravity="center"
            android:layout_width="match_parent"
            android:layout_height="200dp"/>

        <TextView
            android:id="@+id/tv6"
            android:text="第6行"
            android:gravity="center"
            android:layout_width="match_parent"
            android:layout_height="200dp"/>

        <TextView
            android:background="@android:color/holo_orange_light"
            android:id="@+id/tv7"
            android:text="第7行"
            android:gravity="center"
            android:layout_width="match_parent"
            android:layout_height="200dp"/>

    </com.wkp.sticklayout_lib.widget.StickLayout>

</LinearLayout>

• 代碼示例

  public class MainActivity extends AppCompatActivity {
  
  private StickLayout mSl;
  private TextView mTv2;
  private View mTv3;
  private View mTv7;
  private View mTv4;
  private int currentPosition = -1;
  
  @Override
  protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
      mSl = findViewById(R.id.sl);
      mTv2 = findViewById(R.id.tv2);
      mTv3 = findViewById(R.id.tv3);
      mTv4 = findViewById(R.id.tv4);
      mTv7 = findViewById(R.id.tv7);
  //        mSl.setStickView(findViewById(R.id.tv2)); //設置粘性控件
  //        mSl.setStickView(findViewById(R.id.tv3));
  //        mSl.canScrollToEndViewTop(true);      //設置是否開啓最後控件滑動到頂部
      //設置滑動改變監聽（一滑動就會有回調）
      mSl.setOnScrollChangeListener(new StickLayout.OnScrollChangeListener() {
          @Override
          public void onScrollChange(StickLayout v, View currentView, int position, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
              //直到當前控件改變在做事情
              if (currentPosition != position) {
                  Toast.makeText(v.getContext(), ((TextView) currentView).getText().toString(), Toast.LENGTH_SHORT).show();
                  currentPosition = position;
              }
          }
      });
  }
  
  public void addView(View view) {
      TextView textView = new TextView(view.getContext());
      textView.setGravity(Gravity.CENTER);
      textView.setPadding(10, 10, 10, 10);
      textView.setText("新條目");
      mSl.addView(textView, 0);
  }
  
  public void scrollTo2(View view) {
      //滑動到指定子控件
      mSl.scrollToView(mTv2);
  }
  
  public void scrollTo3(View view) {
      mSl.scrollToView(mTv3);
  }
  
  public void scrollTo4(View view) {
      mSl.scrollToView(mTv4);
  }
  
  public void scrollTo7(View view) {
      mSl.scrollToView(mTv7);
  }
  }

  結語

控件支持直接代碼創建，還有更多API請觀看StickLayout.java內的註釋說明。

歡迎大家使用Github地址，感覺好用請給個Star鼓勵一下，謝謝！

大家如果有更好的意見或建議以及好的靈感，請郵箱作者，謝謝！

QQ郵箱：
[email protected]

163郵箱：
[email protected]

Gmail郵箱：
[email protected]