1. Zuhause
  2. Frage und Antwort
  3. Wie verschiebe ich einen TextView über CoordinatorLayout in die Toolbar?

Wie verschiebe ich einen TextView über CoordinatorLayout in die Toolbar?

2017-12-14 8 views
10

Ich arbeite an dem Erstellen einer coordinator layout, die aus einer Symbolleiste, einem relativen Layout, das bei Bildlauf ausgeblendet wird, ein Layout, das immer über der scrollable list statisch ist, und einem RecyclerView.Wie verschiebe ich einen TextView über CoordinatorLayout in die Toolbar?

Ich habe es zur Zeit angelegt, wie ich es will, wie hier zu sehen:

  • Grün ist die Symbolleiste
  • Orange ist die relative Anordnung auf Blättern zu verbergen
  • Rot ist mein statisches Layout das heißt, über der Recycleransicht zu bleiben und nach oben zu bewegen, aber nicht zu verbergen.
  • Weiß ist mein RecyclerView

Das nächste Bild ist, wie es aussieht, wenn ich den ganzen Weg bewegen die Recycler Ansicht.

So verbirgt sich meine orange Ansicht, wie ich es will, die perfekt ist. Der einzige Schritt, den ich vermisse, ist das Verschieben der Textansicht "Titel 1" in den Titel der Symbolleiste. Ich habe Beispiele gesehen, in denen sie etwas Ähnliches mit einem Bild gemacht haben, aber noch nicht in der Lage waren, es mit einem benutzerdefinierten Verhalten zu duplizieren. Ich nehme an, dass das ist, was das braucht?

Hat jemand einen Ratschlag darüber, ob mein Layout geändert werden muss, um dies zu ermöglichen, und einen Ratschlag für ein benutzerdefiniertes Verhalten, wenn das der Fall ist?

enter image description here

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

ich ein wenig Fortschritte gemacht haben. Ich denke, ich habe das Layout, wie ich will, und ich habe ein Verhalten gestartet. Ich kann das TextView verschieben, aber es geht hinter der Symbolleiste verloren. Ich möchte, dass es oben auf der Symbolleiste angezeigt wird. Mein Ziel ist es, den Titel vom gelben Block in den grünen Block zu verschieben.

Muss ich mein Layout anpassen, damit die Textansicht oben auf der Titelleiste angezeigt wird?

enter image description here

Neues Code-Layout

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

Quelle

2017-12-14 Kyle

+0

https://github.com/adeelturk/Collapsing-Tool-viewpager-and-tabs Seine Ein Beispielcode Ich habe einen Toolbar-View-Pager und einen Pager-Thin enthält ein Fragmnets Jedes Fragment hat eine Recyclerview –

Antwort

2

Mein Ziel ist es, den Titel aus dem gelben Block in den grünen Block zu bewegen.

Als Ihr Ziel ist es, den Titel aus dem gelben Block in das grün gesetzt gibt es keine Notwendigkeit Textview in gelbem Block zu bewegen ist, dass Sie Titel in gelbem Block mit setTitle Eigenschaft der Symbolleiste festlegen.

setCollapseMode mit Toolbar können Sie es zu 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

Implementieren AppBarLayout.OnOffsetChangedListener Zuhörer auf Ihrem AppBarLayout um festzustellen, CollpasingToolbar ist zusammengebrochen oder nicht und Titel in der Toolbar entsprechend eingestellt.

Rufen Sie unten die Methode OnCreate() von 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; 
       } 
      } 
     }); 

    }

Quelle

2017-12-18 05:47:25

+0

Ich denke, dies könnte als Backup-Plan funktionieren, aber mein Ideal-Szenario ist eigentlich den Titel animieren sich bewegen aus einem Block in die Titelleiste. Damit könnte ich es erscheinen lassen, aber es wäre nicht ganz so perfekt, als wenn ich es sehen könnte, wenn es zusammenbrach. – Kyle

+0

@Kyle, Sie können die Animation auch so auf die 'Textansicht' des grünen Blocks setzen, dass sie sich von Position x nach y bewegt. Willst du, dass ich das zeige? –

4

Sie müssen TextView innerhalb der Symbolleiste machen und Schwerkraft wie Sie wollen. Für Ihr Problem ist es nicht notwendig, Symbolleiste zu nehmen, Sie können auch Layout verwenden. Das ist mein Koordinatenlayout. In dem Sie TextView innerhalb der Symbolleiste leicht anpassen können.

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

Quelle

2017-12-23 07:26:49 farhana

1

Sie haben ein benutzerdefiniertes Verhalten für jedes Element, das Sie verschieben, skalieren möchten, schreiben, verstecken und etc ...

nur eine Klasse erstellen, die von CoordinatorLayout.Behavior<View> und implementieren erstreckt, was zu tun Wenn Sie möchten, setzen Sie die Widget-App: layout_behavior auf das benutzerdefinierte Verhalten, das Sie geschrieben haben.

Siehe meine Quellcode auf git Nabe CoordinatorBehavior

Für weitere Informationen finden Sie in diesem Projekt GitHub saulmm CoordinatorExamples

Quelle

2017-12-24 13:39:34 FarshidABZ

Verwandte Themen

 Verwandte Themen