固定可滚动内容之间的按钮

Question

我正在努力使用scrollview。

我想显示内容（1），然后显示按钮（2），最后显示内容（3）。

当我滚动时，我希望按钮固定在我的活动顶部。

我无法发布图片，所以它会是：

1
2
3

我滚动

2 (fixed at top)
3 (this part start to scroll when the 1 disapear at top)

我滚动

2 (fixed at top)
3 (still scrollable).

我正巧用这个：

<ScrollView
    android:id="@+id/sv_entete"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/layout_bar"
    android:background="@color/gris_blanc" >

    <RelativeLayout
        android:id="@+id/layout_conteneur"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        // Some image etc.

    </RelativeLayout>
</ScrollView>


<Button
    android:id="@+id/btn_presentation_has_to_stay_on_top"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_below="@+id/sv_entete" />

<Button
    android:id="@+id/btn_analyze_has_to_stay_on_top"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_below="@+id/sv_entete" />

<ScrollView
    android:id="@+id/sv_presentation"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_below="@+id/btn_presentation"
    android:background="@color/gris_blanc" >

    <RelativeLayout
        android:id="@+id/layout_presentation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

         // Some image etc

    </RelativeLayout>
</ScrollView>

但只有第二部分滚动（3），第一部分（1）（显然）没有与第二个滚动视图链接，但我自己无法想象。

任何帮助PLZ？

Answer 1

看起来没有办法立即实现它。因此，您需要创建自定义组件。 不幸的是，问题中的细节不多，所以我无法建议哪种方式更适合您的情况。 但是，我可以想到以下两种变体：

• 在同一布局中有两个按钮面板。最初只能看到一个面板（一个在滚动视图内）。在滚动期间，第一个面板到达顶部，您需要使第二个面板可见。向上滚动时（第一个在ScrollView内可见），使其不可见。它会增加布局的复杂性和一点点（例如，你需要听两组按钮而不是一组）。在简单的测试应用程序中，我没有观察到使用此实现的任何关键问题/ UI工件， 为此，您需要为按钮面板创建单独的布局，例如的 buttons_panel.xml ：

  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:orientation="horizontal"
      android:layout_width="match_parent"
      android:layout_height="wrap_content">
  
      <Button
          android:id="@+id/btn_presentation_has_to_stay_on_top"
          android:layout_width="0dp"
          android:layout_height="wrap_content"
          android:layout_weight="1"
          android:text="left button"/>
  
      <Button
          android:id="@+id/btn_analyze_has_to_stay_on_top"
          android:layout_width="0dp"
          android:layout_height="wrap_content"
          android:layout_weight="1"
          android:text="right button"/>
  </LinearLayout>
  

  然后主要活动布局可能如下所示（ activity_main.xml ）：

  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="match_parent"
      android:layout_height="match_parent">
  
      <com.alexstarc.testapp.ObservableScrollView
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:id="@+id/sv_entete">
  
          <RelativeLayout
              android:id="@+id/layout_conteneur"
              android:layout_width="match_parent"
              android:layout_height="wrap_content" >
  
              <TextView
                  android:layout_width="match_parent"
                  android:layout_height="300dp"
                  android:id="@+id/image_1"
                  android:layout_alignParentTop="true"
                  android:background="@android:color/holo_blue_dark"
                  android:gravity="center"
                  android:textSize="30sp"
                  android:text="Image 1"/>
  
              <ImageView
                  android:layout_width="match_parent"
                  android:layout_height="250dp"
                  android:id="@+id/image_1_1"
                  android:layout_centerHorizontal="true"
                  android:layout_below="@id/image_1"
                  android:src="@drawable/img1"/>
  
              <include
                  layout="@layout/buttons_panel"
                  android:layout_width="match_parent"
                  android:layout_height="wrap_content"
                  android:id="@+id/middle_button_panel"
                  android:layout_below="@id/image_1_1" />
  
              <TextView
                  android:layout_width="match_parent"
                  android:layout_height="100dp"
                  android:id="@+id/image_2"
                  android:layout_below="@id/middle_button_panel"
                  android:background="@android:color/holo_green_dark"
                  android:gravity="center"
                  android:textSize="30sp"
                  android:text="Image 2"/>
  
              <ImageView
                  android:layout_width="match_parent"
                  android:layout_height="350dp"
                  android:id="@+id/image_3"
                  android:layout_below="@id/image_2"
                  android:src="@drawable/img3"/>
  
              <TextView
                  android:layout_width="match_parent"
                  android:layout_height="250dp"
                  android:id="@+id/image_4"
                  android:layout_below="@id/image_3"
                  android:background="@android:color/holo_orange_dark"
                  android:gravity="center"
                  android:textSize="30sp"
                  android:text="Image 4 (1)"/>
  
              <TextView
                  android:layout_width="match_parent"
                  android:layout_height="100dp"
                  android:id="@+id/image_5"
                  android:layout_below="@id/image_4"
                  android:background="@android:color/holo_purple"
                  android:gravity="center"
                  android:textSize="30sp"
                  android:text="Image 5"/>
  
              <TextView
                  android:layout_width="match_parent"
                  android:layout_height="350dp"
                  android:id="@+id/image_6"
                  android:layout_below="@id/image_5"
                  android:background="@android:color/holo_blue_dark"
                  android:gravity="center"
                  android:textSize="30sp"
                  android:text="Image 6"/>
  
              <TextView
                  android:layout_width="match_parent"
                  android:layout_height="250dp"
                  android:id="@+id/image_7"
                  android:layout_below="@id/image_6"
                  android:background="@drawable/img1"
                  android:gravity="center"
                  android:textSize="30sp"
                  android:text="Image 7"/>
  
              <TextView
                  android:layout_width="match_parent"
                  android:layout_height="250dp"
                  android:id="@+id/image_8"
                  android:layout_below="@id/image_7"
                  android:background="@android:color/holo_orange_dark"
                  android:gravity="center"
                  android:textSize="30sp"
                  android:text="Image 8"/>
  
              <TextView
                  android:layout_width="match_parent"
                  android:layout_height="100dp"
                  android:id="@+id/image_9"
                  android:layout_below="@id/image_8"
                  android:background="@android:color/holo_purple"
                  android:gravity="center"
                  android:textSize="30sp"
                  android:text="Image 9"/>
  
              <TextView
                  android:layout_width="match_parent"
                  android:layout_height="350dp"
                  android:id="@+id/image_10"
                  android:layout_below="@id/image_9"
                  android:background="@android:color/holo_blue_dark"
                  android:gravity="center"
                  android:textSize="30sp"
                  android:text="Image 10"/>
  
              <TextView
                  android:layout_width="match_parent"
                  android:layout_height="250dp"
                  android:id="@+id/image_11"
                  android:layout_below="@id/image_10"
                  android:background="@drawable/img1"
                  android:gravity="center"
                  android:textSize="30sp"
                  android:text="Image 11"/>
          </RelativeLayout>
      </com.alexstarc.testapp.ObservableScrollView>
  
      <include
          layout="@layout/buttons_panel"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:id="@+id/top_button_panel"
          android:layout_alignParentTop="true"
          android:visibility="gone" />
  
  </RelativeLayout>
  

  有特殊自定义ViewGroup - ObservableScrollView。这是必要的，因为ScrollView没有任何用于观察滚动位置的侦听器，但我们需要检测其中的按钮面板是否可见。这是其草案代码（请注意，我还没有完成任何优化或全面测试）：

  public class ObservableScrollView extends ScrollView {
  
      private int mTrackViewId = 0;
      private View mTrackView = null;
      private int mTrackViewTop = 0;
      private int mTrackViewDown = 0;
      private OnViewReachTop mTopReachListener = null;
  
      /* Helper interface to notify listener about */
      public interface OnViewReachTop {
          /**
           * Called then View riches top
           */
          void onReachTop();
  
          /**
           * Called then view leaves top position
           */
          void onLeaveTop();
      }
  
      public ObservableScrollView(final Context context) {
          super(context);
      }
  
      public ObservableScrollView(final Context context, final AttributeSet attrs) {
          super(context, attrs);
      }
  
      public ObservableScrollView(final Context context, final AttributeSet attrs, final int defStyle) {
          super(context, attrs, defStyle);
      }
  
      /**
       * Sets view id to be tracked and corresponding callback
       *
       * @param viewId id of view to be trackked
       * @param listener {@link com.alexstarc.testapp.ObservableScrollView.OnViewReachTop} to be called
       */
      public void setViewTopTracking(final int viewId, final OnViewReachTop listener) {
  
          mTrackView = findViewById(viewId);
  
          if (mTrackView == null) {
              throw new IllegalArgumentException("Passed view id should be from child of this scroll view");
          }
  
          mTrackViewId = viewId;
          mTopReachListener = listener;
      }
  
      @Override
      protected void onScrollChanged(final int l, final int t, final int oldl, final int oldt) {
  
          if (mTrackViewDown == 0 && mTrackViewTop == 0) {
              mTrackViewDown = mTrackView.getBottom();
              mTrackViewTop = mTrackView.getTop();
          }
  
          super.onScrollChanged(l, t, oldl, oldt);
  
          if (getScrollY() >= mTrackViewTop) {
              mTopReachListener.onReachTop();
          } else if (getScrollY() <= mTrackViewDown) {
              mTopReachListener.onLeaveTop();
          }
      }
  }
  

  活动代码，它将观察当前滚动位置并显示/隐藏第二个按钮面板：

  public class MyActivity extends Activity implements ObservableScrollView.OnViewReachTop {
  
      private static final String TAG = "MyActivity";
      private View mButtonsPanel;
  
      @Override
      protected void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
  
          setContentView(R.layout.activity_main);
          mButtonsPanel = findViewById(R.id.top_button_panel);
          ((ObservableScrollView)findViewById(R.id.sv_entete)).setViewTopTracking(R.id.middle_button_panel, this);
      }
  
      @Override
      public boolean onCreateOptionsMenu(final Menu menu) {
          getMenuInflater().inflate(R.menu.action_bar, menu);
          return true;
      }
  
      @Override
      public void onReachTop() {
          mButtonsPanel.setVisibility(View.VISIBLE);
      }
  
      @Override
      public void onLeaveTop() {
          mButtonsPanel.setVisibility(View.GONE);
      }
  }
  

• 第二种方式：获取ScrollView代码，对其进行分析，并在顶部修复一些视图。这种方式更复杂，但可以实现。请调查一下（如果第一个不适用于您的代码/布局），如果遇到一些特殊问题，请提出其他问题。