6

Jak wdrożyć zawaleniem projektowania układu paska narzędzi jak Google IO 2015 użyciem Design Libraryjak wdrożyć zawaleniem zdjęcie Zobacz jak Google IO 2015 aplikacji przy użyciu biblioteka,

W Otwórz kod źródłowy Google IO 2015, nie jest realizowany przy użyciu projekt Biblioteka (CoordinatorLayout, CollapsingToolbarLayout etc)

Google IO 2015 Session Details Layout

Uwaga w ten pasek narzędzi znajduje się na dole w górnej części. Potrzebuję przewijania paska narzędzi tak, aby był on połączony z textview lub inną wersją wyższego segmentu view.

+0

Kod źródłowy aplikacji jest dostępny na https://github.com/google/iosched – akash93

+0

@ akash93 że wiem. Już określiłem przy użyciu biblioteki projektowej iw open source nie jest zaimplementowany przy użyciu biblioteki projektu. –

+0

Czy próbowałeś przenieść pasek narzędzi poza okno CollapseingToolbarLayout, ale wewnątrz AppbarLayout? – GPack

Odpowiedz

8

Wreszcie udało mi się go wdrożyć.

<?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" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    tools:context="com.vipul.myapplication.ScrollingActivity"> 

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

     <android.support.design.widget.CollapsingToolbarLayout 
      android:id="@+id/toolbar_layout" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      app:contentScrim="?attr/colorPrimary" 
      app:layout_scrollFlags="scroll|enterAlwaysCollapsed"> 

      <ImageView 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:background="@drawable/placeholder" 
       android:fitsSystemWindows="true" 
       android:scaleType="centerCrop" 
       app:layout_collapseMode="parallax"/> 

     </android.support.design.widget.CollapsingToolbarLayout> 

     <FrameLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:clipChildren="false" 
      android:clipToPadding="false"> 

      <android.support.v7.widget.Toolbar 
       android:layout_width="match_parent" 
       android:layout_height="?attr/actionBarSize" 
       android:id="@+id/toolbar" 
       app:title=" " 
       app:popupTheme="@style/AppTheme.PopupOverlay"/> 

      <LinearLayout 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:layout_marginTop="?attr/actionBarSize" 
       android:layout_marginLeft="60dp" 
       android:layout_marginStart="60dp" 
       android:layout_marginRight="16dp" 
       android:paddingTop="8dp" 
       android:paddingBottom="8dp" 
       android:orientation="vertical"> 

       <TextView 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:text="@string/app_name" 
        android:textColor="#FFF" 
        android:textSize="18sp" /> 

       <TextView 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:layout_marginTop="5dp" 
        android:text="@string/app_name" 
        android:textColor="#FFF" 
        android:textSize="16sp" /> 

      </LinearLayout> 

     </FrameLayout> 

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

    <!--<include layout="@layout/content_scrolling" />--> 

    <android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android" 
     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" 
     app:layout_behavior="@string/appbar_scrolling_view_behavior"> 

     <TextView 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_margin="@dimen/text_margin" 
      android:text="@string/large_text" /> 

    </android.support.v4.widget.NestedScrollView> 

</android.support.design.widget.CoordinatorLayout> 

Screenshot

+0

Mam pewne problemy z fitsSystemWindows, mój pasek narzędzi znajduje się za paskiem stanu, dodając android: fitsSystemWindows = "true" na układzie koordynatora iw appbarlayout działa jak urok, thnks –

0

Poniższy kod będzie robić to, co chcesz zrobić:

<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:fitsSystemWindows="true"> 

<android.support.design.widget.AppBarLayout 
    android:id="@+id/appbar" 
    android:layout_width="match_parent" 
    android:layout_height="192dp" 
    android:fitsSystemWindows="true" 
    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="match_parent" 
     android:fitsSystemWindows="true" 
     app:expandedTitleGravity="bottom|center_horizontal" 
     app:contentScrim="@android:color/holo_blue_dark" 
     app:expandedTitleMarginBottom="32dp" 
     app:expandedTitleMarginEnd="64dp" 
     app:expandedTitleMarginStart="48dp" 
     app:layout_scrollFlags="scroll|exitUntilCollapsed"> 

     <ImageView 
      android:id="@+id/header" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:background="@drawable/header" 
      android:fitsSystemWindows="true" 
      android:scaleType="centerCrop" 
      app:layout_collapseMode="parallax"/> 

     <android.support.v7.widget.Toolbar 
      android:id="@+id/anim_toolbar" 
      android:layout_width="match_parent" 
      android:layout_height="?attr/actionBarSize" 
      app:layout_collapseMode="pin" 
      app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/> 
    </android.support.design.widget.CollapsingToolbarLayout> 
</android.support.design.widget.AppBarLayout> 

// The rest of the content goes here... 

</android.support.design.widget.CoordinatorLayout> 

Go here Więcej informacji na temat biblioteki projektowania materiału

+0

proszę przeczytać uważnie pytanie przed udzieleniem odpowiedzi, a ten kod nie będzie działać. –

Powiązane problemy