스크롤 가능한 내용 사이의 고정 된 버튼

Question

나는 scrollview에 어려움을 겪고있다.

콘텐츠 (1), 버튼 (2) 및 콘텐츠 (3)를 표시하고 싶습니다.

스크롤 할 때 버튼이 내 활동 상단에 고정되도록하고 싶습니다.

:

1 
2 
3 

을 나는 curently이 사용하고

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

내가 스크롤

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

스크롤 :이 될 수 있도록

나는, 이미지를 게시 할 수 없습니다

<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) (두 번째 스크롤 뷰와 연결되어 있지는 않지만 분명히 알아낼 수는 없습니다.)

도움이 필요하십니까?

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)처럼 보일 수는 : - ObservableScrollView

  <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을있다. 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 개 받아 분석하고 상단의 일부보기를 수정할 수있게하십시오. 이 방법은 더 복잡하지만 구현이 가능합니다.먼저 코드/레이아웃에 적용 할 수없는 경우 조사하고 특정 문제가있는 경우 추가 질문을하십시오.