Làm thế nào để di chuyển một TextView vào Thanh công cụ thông qua CoordinatorLayout?

Question

Tôi đang làm việc để xây dựng một coordinator layout được tạo thành từ thanh công cụ, bố cục tương đối để ẩn khi cuộn, bố cục tĩnh luôn bên trên scrollable list và RecyclerView.

Tôi hiện đang có nó đặt ra như tôi muốn nó, như đã thấy ở đây:

• xanh là thanh công cụ
• Orange là cách bố trí tương đối để ẩn trên cuộn
• Màu đỏ là bố trí tĩnh của tôi để ở trên chế độ xem của người tái chế và di chuyển lên nhưng không ẩn.
• trắng là RecyclerView tôi

hình ảnh tiếp theo Đây là những gì nó trông như thế nào khi tôi di chuyển toàn bộ con đường lên quan điểm tái chế.

Vì vậy, chế độ xem màu cam của tôi ẩn như tôi muốn, điều này thật hoàn hảo. Bước duy nhất tôi đang mất là di chuyển văn bản "Tiêu đề 1" trở thành tiêu đề của thanh công cụ. Tôi đã nhìn thấy các ví dụ mà họ đã làm một cái gì đó loại tương tự với một hình ảnh, nhưng đã không thể sao chép nó được nêu ra với một hành vi tùy chỉnh. Tôi giả định rằng điều này sẽ làm gì?

Có ai có lời khuyên nào về cách bố trí của tôi cần thay đổi để thực hiện điều này hay không, và lời khuyên nào cho hành vi tùy chỉnh nếu đó là điều gì sẽ xảy ra?

<?xml version="1.0" encoding="utf-8"?> 
<android.support.design.widget.CoordinatorLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

    <android.support.design.widget.AppBarLayout 
     android:id="@+id/appBarLayout" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> 
     <android.support.design.widget.CollapsingToolbarLayout 
      android:id="@+id/collapsing_toolbar" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"> 
      <!-- HEADER --> 
      <RelativeLayout 
       android:id="@+id/rel1" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       app:layout_collapseMode="parallax" 
       android:background="@color/lightGreen" 
       android:layout_marginTop="?attr/actionBarSize" 
       android:paddingTop="10dp" 
       android:paddingBottom="10dp"> 
       <TextView 
        android:id="@+id/title1" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_centerHorizontal="true" 
        android:text="Resist the urge" 
        android:textSize="35sp" 
        android:includeFontPadding="true" 
        android:layout_centerInParent="true"/> 

       <TextView 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_below="@id/resistUrgeTitleTextView" 
        android:layout_centerHorizontal="true" 
        android:text="Use a method below to help." 
        android:includeFontPadding="true"/> 
      </RelativeLayout> 

      <FrameLayout 
       android:id="@+id/main.framelayout.title" 
       android:layout_width="match_parent" 
       android:layout_height="100dp" 
       android:layout_gravity="bottom|center_horizontal" 
       android:background="@color/lightOrange" 
       android:orientation="vertical" 
       app:layout_collapseMode="parallax" 
       > 

       <LinearLayout 
        android:id="@+id/main.linearlayout.title" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_gravity="center" 
        android:orientation="vertical" 
        > 

        <TextView 
         android:layout_width="wrap_content" 
         android:layout_height="wrap_content" 
         android:layout_gravity="center_horizontal" 
         android:gravity="bottom|center" 
         android:text="Title 1" 
         android:textColor="@android:color/white" 
         android:textSize="30sp" 
         app:layout_behavior="com.uhg.ent.mobile.quit4life.UrgeIntervention.TitleTextViewBehavior" 
         /> 

        <TextView 
         android:layout_width="wrap_content" 
         android:layout_height="wrap_content" 
         android:layout_gravity="center_horizontal" 
         android:layout_marginTop="4dp" 
         android:text="Subtitle" 
         android:textColor="@android:color/white" 
         /> 

       </LinearLayout> 
      </FrameLayout> 

      <android.support.v7.widget.Toolbar 
       android:id="@+id/toolbar" 
       android:layout_width="match_parent" 
       android:layout_height="?attr/actionBarSize" 
       android:background="?attr/colorPrimary" 
       android:backgroundTint="@color/lightGreen" 
       app:layout_collapseMode="pin" 
       app:title=""/> 
      <!--<TextView 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_gravity="center_vertical|center_horizontal" 
       android:text="Resist the urge" 
       android:textColor="@android:color/black" 
       android:textSize="30sp" 
       app:layout_behavior="com.uhg.ent.mobile.quit4life.UrgeIntervention.TitleTextViewBehavior" 
       />--> 


     </android.support.design.widget.CollapsingToolbarLayout> 
     <android.support.constraint.ConstraintLayout 
      android:id="@+id/cardConstraintLayout" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      app:layout_constraintTop_toTopOf="parent" 
      app:layout_constraintStart_toStartOf="parent" 
      app:layout_constraintEnd_toEndOf="parent" 
      android:background="@android:color/holo_red_dark" 
      android:layout_marginTop="0dp"> 

      <android.support.v4.view.ViewPager 
       android:id="@+id/pager" 
       android:layout_width="0dp" 
       android:layout_height="175dp" 
       android:layout_alignParentStart="true" 
       android:layout_alignParentTop="true" 
       app:layout_constraintBottom_toBottomOf="parent" 
       app:layout_constraintEnd_toEndOf="parent" 
       app:layout_constraintStart_toStartOf="parent" 
       app:layout_constraintTop_toTopOf="parent" 
       app:layout_constraintVertical_bias="0" 
       android:paddingBottom="50dp"/> 
      <android.support.design.widget.TabLayout 
       android:layout_width="wrap_content" 
       android:layout_height="20dp" 
       android:id="@+id/viewPagerIndicator" 
       app:tabBackground="@drawable/pager_indicator_selector_gray" 
       app:tabGravity="center" 
       app:tabIndicatorHeight="0dp" 
       app:layout_constraintStart_toStartOf="parent" 
       app:layout_constraintEnd_toEndOf="parent" 
       app:layout_constraintBottom_toBottomOf="parent" 
       app:layout_constraintTop_toBottomOf="@id/interventionCategoryViewPager" 
       android:layout_marginBottom="10dp"/> 
     </android.support.constraint.ConstraintLayout> 
     <!-- </android.support.design.widget.CollapsingToolbarLayout>--> 
     <!--<android.support.v7.widget.Toolbar 
      android:id="@+id/main.toolbar" 
      android:layout_width="match_parent" 
      android:layout_height="?attr/actionBarSize" 
      android:background="@color/colorPrimary" 
      app:layout_anchor="@id/main.framelayout.title" 
      app:theme="@style/ThemeOverlay.AppCompat.Dark" 
      app:title="" 
      app:layout_collapseMode="pin"> 
     </android.support.v7.widget.Toolbar>--> 
    </android.support.design.widget.AppBarLayout> 
    <android.support.v7.widget.RecyclerView 
     android:id="@+id/recyclerView" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:background="@android:color/white" 
     app:layout_behavior="@string/appbar_scrolling_view_behavior"> 
    </android.support.v7.widget.RecyclerView> 
    </android.support.design.widget.CoordinatorLayout> 

EDIT:

Tôi đã có một chút tiến bộ đạt được. Tôi nghĩ rằng tôi có cách bố trí như thế nào tôi muốn, và tôi đã có một hành vi bắt đầu. Tôi có thể di chuyển TextView, nhưng nó bị mất sau thanh công cụ. Tôi muốn nó lên trên thanh công cụ. Mục tiêu của tôi là di chuyển tiêu đề từ khối màu vàng sang khối màu xanh lục.

Tôi có cần điều chỉnh bố cục của mình để có thể cho chế độ xem văn bản xuất hiện trên đầu thanh tiêu đề không?

bố trí Code mới

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="vertical"> 
    <android.support.v7.widget.Toolbar 
     android:id="@+id/toolbar" 
     android:layout_width="match_parent" 
     android:layout_height="60dp" 
     android:background="?attr/colorPrimary" 
     android:backgroundTint="@color/lightOrange" 
     app:title="" 
     android:layout_marginTop="20dp"/> 
    <android.support.design.widget.CoordinatorLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:layout_below="@id/toolbar"> 
     <TextView 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_gravity="center_horizontal" 
      android:gravity="bottom|center" 
      android:text="Test 1" 
      android:textColor="@android:color/white" 
      android:textSize="30sp" 
      app:layout_behavior="com.uhg.ent.mobile.quit4life.UrgeIntervention.TitleTextViewBehavior" 
      android:elevation="100dp"/> 
     <android.support.design.widget.AppBarLayout 
      android:id="@+id/appBarLayout" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> 

      <android.support.design.widget.CollapsingToolbarLayout 
       android:id="@+id/collapsing_toolbar" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"> 
       <LinearLayout 
        android:id="@+id/main.framelayout.title" 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:layout_gravity="bottom|center_horizontal" 
        android:background="@color/lightGreen" 
        android:orientation="vertical" 
        app:layout_collapseMode="parallax" 
        android:paddingTop="50dp"> 
        <!--<TextView 
         android:layout_width="wrap_content" 
         android:layout_height="wrap_content" 
         android:layout_gravity="center_horizontal" 
         android:gravity="bottom|center" 
         android:text="Resist The Urge" 
         android:textColor="@android:color/white" 
         android:textSize="30sp" 
         app:layout_behavior="com.uhg.ent.mobile.quit4life.UrgeIntervention.TitleTextViewBehavior" 
         android:paddingTop="20dp"/>--> 
        <TextView 
         android:layout_width="wrap_content" 
         android:layout_height="wrap_content" 
         android:layout_gravity="center_horizontal" 
         android:layout_marginTop="4dp" 
         android:text="Test 2." 
         android:textColor="@android:color/white" 
         android:paddingBottom="20dp" 
         /> 
       </LinearLayout> 
      </android.support.design.widget.CollapsingToolbarLayout> 
      <android.support.constraint.ConstraintLayout 
       android:id="@+id/cardConstraintLayout" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       app:layout_constraintTop_toTopOf="parent" 
       app:layout_constraintStart_toStartOf="parent" 
       app:layout_constraintEnd_toEndOf="parent" 

       android:layout_marginTop="0dp"> 

       <android.support.v4.view.ViewPager 
        android:id="@+id/viewPager" 
        android:layout_width="0dp" 
        android:layout_height="175dp" 
        android:layout_alignParentStart="true" 
        android:layout_alignParentTop="true" 
        app:layout_constraintBottom_toBottomOf="parent" 
        app:layout_constraintEnd_toEndOf="parent" 
        app:layout_constraintStart_toStartOf="parent" 
        app:layout_constraintTop_toTopOf="parent" 
        app:layout_constraintVertical_bias="0" 
        android:paddingBottom="50dp"/> 
       <android.support.design.widget.TabLayout 
        android:layout_width="wrap_content" 
        android:layout_height="20dp" 
        android:id="@+id/viewPagerIndicator" 
        app:tabBackground="@drawable/pager_indicator_selector_gray" 
        app:tabGravity="center" 
        app:tabIndicatorHeight="0dp" 
        app:layout_constraintStart_toStartOf="parent" 
        app:layout_constraintEnd_toEndOf="parent" 
        app:layout_constraintBottom_toBottomOf="parent" 
        app:layout_constraintTop_toBottomOf="@id/interventionCategoryViewPager" 
        android:layout_marginBottom="10dp"/> 
      </android.support.constraint.ConstraintLayout> 
     </android.support.design.widget.AppBarLayout> 

     <android.support.v7.widget.RecyclerView 
      android:id="@+id/recyclerView" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:background="@android:color/white" 
      app:layout_behavior="@string/appbar_scrolling_view_behavior"> 
     </android.support.v7.widget.RecyclerView> 
    </android.support.design.widget.CoordinatorLayout> 
</RelativeLayout> 

Answer 1

Mục tiêu của tôi là để di chuyển danh hiệu từ khối vàng vào khối màu xanh lá cây.

Là mục tiêu của bạn là để thiết lập các đề từ khối vàng vào màu xanh lá cây không có nhu cầu để di chuyển Textview trong khối vàng bạn có thể đặt Tiêu đề trong khối màu vàng với setTitle tài sản của Thanh công cụ.

setCollapseMode với Toolbar bạn có thể thiết lập nó để COLLAPSE_MODE_OFF/COLLAPSE_MODE_PARALLAX/COLLAPSE_MODE_PIN

More Detail on CollapseMode

<android.support.v7.widget.Toolbar 
      android:id="@+id/toolbar" 
      android:layout_width="match_parent" 
      android:layout_height="?attr/actionBarSize" 
      app:layout_scrollFlags="scroll|enterAlways" 
      app:layout_collapseMode="pin" /> // to pin in place until it reaches the bottom of the layout 

---

Thực hiện AppBarLayout.OnOffsetChangedListener nghe trên bạn AppBarLayout để xác định CollpasingToolbar bị thu gọn hoặc không và đặt Tiêu đề trong Toolbar tương ứng.

Gọi phương thức dưới đây theo số OnCreate() của Activity.

private void setTitleOfLayout() { 
     AppBarLayout appBarLayout = findViewById(R.id.appbar_layout); 
     appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() { 
      boolean isShow; 
      int scrollRange = -1; 

      @Override 
      public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) { 
       if (scrollRange == -1) { 
        scrollRange = appBarLayout.getTotalScrollRange(); 
       } 
       if (scrollRange + verticalOffset == 0) { 

        // orange part is not visible so set The title 

        if (myTitleName != null) 
         toolbar.setTitle(myTitleName); 

        isShow = true; 
       } else if (isShow) { 
        // orange part is visible so remove the title with 

         space here make sure your are not setting null in toolbar. 

        toolbar.setTitle(" "); 

        isShow = false; 
       } 
      } 
     }); 

    } 

Answer 2

Bạn phải tạo TextView bên trong thanh công cụ và đặt trọng số theo ý muốn. cho vấn đề của bạn nó không phải là cần thiết để có thanh công cụ, bạn cũng có thể sử dụng bố trí. Đây là bố cục phối hợp của tôi. Trong đó bạn có thể dễ dàng điều chỉnh TextView bên trong thanh công cụ.

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:ads="http://schemas.android.com/apk/res-auto" 
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:fitsSystemWindows="true" 
tools:context="com.sashwati.metrimonial.activity.MainActivity"> 

<android.support.design.widget.AppBarLayout 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:theme="@style/AppTheme.AppBarOverlay" 
    app:elevation="0dp"> 

    <android.support.v7.widget.Toolbar 
     android:id="@+id/toolbar" 
     android:layout_width="match_parent" 
     android:layout_height="?attr/actionBarSize" 
     android:background="@drawable/gradientcolor" 
     app:layout_collapseMode="pin" 
     app:popupTheme="@style/AppTheme.PopupOverlay"> 
     <!-- app:layout_scrollFlags="scroll|enterAlways"--> 
     <com.sashwati.metrimonial.utils.CustomFontTextView 
      android:id="@+id/toolbar_title" 
      style="@style/TextAppearance.AppCompat.Widget.ActionBar.Title" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_gravity="center" 
      android:text="Dhakar Matrimonial" 
      android:textColor="@android:color/white" 
      android:textSize="@dimen/middium_text_size" 
      app:fontName="raleway_regular" /> 

     <ImageView 
      android:id="@+id/iv_chat" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_gravity="right" 
      android:layout_marginRight="@dimen/middium_padding" 
      android:padding="@dimen/small_padding" 
      android:src="@android:drawable/stat_notify_chat" /> 

     <ImageView 
      android:id="@+id/iv_universerch" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_gravity="right" 
      android:padding="@dimen/small_padding" 
      android:src="@mipmap/search" /> 

    </android.support.v7.widget.Toolbar> 
</android.support.design.widget.AppBarLayout> 

<include layout="@layout/content_main" /> 

Answer 3

Bạn phải viết một hành vi tùy chỉnh cho mỗi yếu tố bạn muốn di chuyển, thay đổi kích thước, ẩn và vv ...

chỉ cần tạo một lớp mà kéo dài từ CoordinatorLayout.Behavior<View> và thực hiện những gì bạn muốn, cuối cùng thiết lập ứng dụng widget: layout_behavior cho hành vi tùy chỉnh mà bạn đã viết.

Xem mã nguồn của tôi trên git hub CoordinatorBehavior

Và để biết thêm thông tin, xem dự án này GitHub saulmm CoordinatorExamples