1. घर
  2. सवाल और जवाब
  3. CoordinatorLayout के माध्यम से टूलबार में टेक्स्ट व्यू को कैसे स्थानांतरित करें?

CoordinatorLayout के माध्यम से टूलबार में टेक्स्ट व्यू को कैसे स्थानांतरित करें?

2017-12-14 4 views
10

मैं एक coordinator layout बनाने पर काम कर रहा हूं जो एक टूलबार से बना है, एक रिश्तेदार लेआउट जो स्क्रॉल पर छिपाना है, एक लेआउट जो scrollable list से ऊपर स्थिर है, और RecyclerView है।CoordinatorLayout के माध्यम से टूलबार में टेक्स्ट व्यू को कैसे स्थानांतरित करें?

मैं वर्तमान में यह बाहर रखा के रूप में मैं यह करना चाहते हैं, के रूप में यहाँ देखा है:

  • ग्रीन उपकरण पट्टी है
  • ऑरेंज स्क्रॉल पर छिपाने के लिए रिश्तेदार लेआउट है
  • लाल मेरी स्थिर लेआउट है यह रीसाइक्लिंग व्यू के ऊपर रहना है और ऊपर बढ़ना है लेकिन छिपाना नहीं है।
  • व्हाइट मेरी RecyclerView

है यह अगली छवि यह कैसा एक बार मैं recycler दृश्य पूरी तरह से ऊपर स्क्रॉल दिखता है।

तो मेरा नारंगी दृश्य छुपाता है जैसा मैं चाहता हूं, जो सही है। एकमात्र कदम जो मैं याद कर रहा हूं वह टूलबार का शीर्षक बनने के लिए "शीर्षक 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 इसकी देखना एक नमूना कोड है जिसमें मैंने ui thused टूलबार व्यू पेजर देखा है और पेजर में एक टुकड़े होते हैं जिसमें प्रत्येक खंड में रीसाइक्लर्विव होता है –

उत्तर

2

मेरा लक्ष्य हरी ब्लॉक में पीला ब्लॉक से शीर्षक ले जाने के लिए है।

अपने लक्ष्य के रूप में हरे रंग में पीला ब्लॉक से शीर्षक सेट करने के लिए पीले रंग ब्लॉक यदि आप टूलबार के setTitle संपत्ति के साथ पीला ब्लॉक में शीर्षक सेट कर सकते हैं में Textview स्थानांतरित करने के लिए कोई जरूरत नहीं है है।

setCollapseModeToolbar साथ आप 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

अपने AppBarLayout पर लागू AppBarLayout.OnOffsetChangedListener श्रोता CollpasingToolbar को निर्धारित करने के लिए Toolbar में शीर्षक को सेट किया गया है या सेट नहीं किया गया है।

के OnCreate() पर विधि के नीचे कॉल करें।

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

मुझे लगता है कि यह बैक अप प्लान के रूप में काम कर सकता है, लेकिन मेरा आदर्श परिदृश्य वास्तव में एक ब्लॉक से आगे बढ़ने वाला शीर्षक है शीर्षक पट्टी में। इसके साथ में, मैं इसे प्रकट कर सकता हूं, लेकिन यह उतना ही सही नहीं होगा जितना इसे गिरने के रूप में वहां जाने के लिए सक्षम हो सकता है। – Kyle

+0

@ केली, आप एनीमेशन को हरे रंग के ब्लॉक के 'टेक्स्टव्यू' में भी इस तरह से सेट कर सकते हैं कि यह स्थिति x से y तक बढ़ रहा है। क्या आप मुझे यह दिखाना चाहते हैं? –

4

आपको टूलबार के अंदर टेक्स्टव्यू बनाना होगा और गुरुत्वाकर्षण को अपनी इच्छानुसार सेट करना होगा। आपकी समस्या के लिए टूलबार लेना आवश्यक नहीं है, आप लेआउट का भी उपयोग कर सकते हैं। यह मेरा समन्वय लेआउट है। जिसमें आप आसानी से टूलबार के अंदर 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> तक फैली हुई है बना सकते हैं और क्या कर लागू आप चाहते हैं, आखिरकार विजेट एप सेट करें: लेआउट_बिवियर आपके द्वारा लिखे गए कस्टम व्यवहार के लिए।

Git हब CoordinatorBehavior

पर अपने स्रोत कोड देखें और अधिक जानकारी के लिए इस GitHub परियोजना saulmm CoordinatorExamples

स्रोत

2017-12-24 13:39:34 FarshidABZ

संबंधित मुद्दे
नवीनतम प्रश्न

 संबंधित मुद्दे