1. ホーム
  2. 質問と答え
  3. CoordinatorLayoutを使用してTextViewをツールバーに移動するにはどうすればよいですか？

CoordinatorLayoutを使用してTextViewをツールバーに移動するにはどうすればよいですか？

2017-12-14 25 views
10

私は、scrollable listの上に常に静的であるレイアウトと、RecyclerViewと、ツールバー、スクロールで非表示にする相対レイアウトで構成されるcoordinator layoutを構築しています。私はそれがしたいとここに見られるように、私は現在、それは、レイアウトされているCoordinatorLayoutを使用してTextViewをツールバーに移動するにはどうすればよいですか？

：

  • グリーンツールバー
  • オレンジレッドは私の静的なレイアウトでスクロール
  • に非表示にするには、相対的なレイアウトでありますリサイクラビューの上に留まり、 は上に移動しますが、非表示にはなりません。
  • ホワイトは私RecyclerView

です。この次の画像は、私はリサイクルビューアップ全体の方法をスクロールしたら、それは次のようになります。

私のオレンジ色の眺めは、私が望むように隠れるので完璧です。私が欠けている唯一のステップは、 "タイトル1"のテキストビューをツールバーのタイトルにすることです。私は彼らが画像と似たような何かをした例を見てきましたが、まだカスタム動作でそれを複製することはできませんでした。私はこれが何を取るだろうと仮定していますか？

これを可能にするために私のレイアウトを変更する必要があるかどうかについてのアドバイスはありますか？

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>

編集：私が作った進歩の少しを持っている

。私は私が望むレイアウトを持っていると思うし、私は行動を開始している。私はTextViewを移動することができますが、ツールバーの後ろに失われています。私はツールバーの上に移動したい。私の目標は、タイトルを黄色のブロックから緑色のブロックに移動することです。

レイアウトを調整して、タイトルバーの上にテキストビューを表示できるようにする必要がありますか？

enter image description here

新しいコードのレイアウト

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

出典

2017-12-14 Kyle

+0

https://github.com/adeelturk/Collapsing-Tool-viewpager-and-tabs そのサンプルコード私はツールバービューのページャを薄くし、ビューのページャにfragmnetsが含まれているフラグメントをリサイクルビュー –

答えて

2

私の目標は、緑 ブロックに黄色のブロックからタイトルを移動することです。

あなたの目標は、あなたがツールバーのsetTitleプロパティと黄色のブロックにタイトルを設定することができ、黄色のブロックでTextviewを移動する必要がない緑に黄色のブロックからタイトルを設定することです。Toolbarと

setCollapseModeあなたAppBarLayout上AppBarLayout.OnOffsetChangedListenerリスナーを実装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

にそれを設定することができますCollpasingToolbarが崩壊しているかどうかを判断し、それに応じてToolbarのタイトルを設定します。

OnCreate()の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; 
       } 
      } 
     }); 

    }

出典

2017-12-18 05:47:25

+0

私はこれがバックアップ計画として機能すると思うが、私の理想的なシナリオは実際には1つのブロックタイトルバーに挿入します。これで、私はそれを現れさせることができましたが、それが崩壊してそこに上がるのを見ることができるほど完全ではありません。 – Kyle

+0

@Kyleアニメーションを、緑色のブロックの「Textview」に設定して、位置xからyに移動するように見えるようにすることもできます。私はそれを見せたいですか？ –

4

ツールバー内でTextViewを作成し、必要に応じて重力を設定する必要があります。あなたの問題のために、それはツールバーを取る必要はありません、あなたもレイアウトを使用することができます。これは私の座標レイアウトです。ツールバー内でTextViewを簡単に調整できます。あなたは、移動、サイズ変更、非表示となどする各要素のカスタム動作を記述する必要が

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

出典

2017-12-23 07:26:49 farhana

1

...

だけCoordinatorLayout.Behavior<View>から拡張するクラスを作成し、何をすべきかを実装最後にウィジェットapp：layout_behaviorをあなたが書いたカスタムビヘイビアに設定します。

このGitHubのプロジェクトを参照してくださいCoordinatorBehavior

、より多くの情報のためのGitのハブに私のソースコードを参照してくださいsaulmm CoordinatorExamples

出典

2017-12-24 13:39:34 FarshidABZ

 関連する問題

  • 関連する問題はありません^_^