崩溃的工具栏布局与Android中的2选项卡布局

With CollapsingToolbarLayout我想显示两个选项卡一个接一个。崩溃的工具栏布局与Android中的2选项卡布局

这是我的布局文件。

<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:id="@+id/detail_content" 
    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="@dimen/app_bar_height" 
     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" 
      android:theme="@style/ThemeOverlay.AppCompat.Dark" 
      app:contentScrim="?attr/colorPrimary" 
      app:expandedTitleMarginEnd="@dimen/article_keylines" 
      app:expandedTitleMarginStart="@dimen/md_keylines" 
      app:layout_scrollFlags="scroll|exitUntilCollapsed"> 

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

      <android.support.v7.widget.Toolbar 
       android:id="@+id/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.CollapsingToolbarLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      app:layout_scrollFlags="scroll|enterAlways"> 

      <android.support.design.widget.TabLayout 
       android:id="@+id/tabs1" 
       android:layout_width="match_parent" 
       android:layout_height="?attr/actionBarSize" 
       android:background="@color/primary" 
       android:minHeight="?attr/actionBarSize" 
       app:tabIndicatorColor="@android:color/white" 
       app:tabIndicatorHeight="2dp" 
       android:layout_above="@+id/tabs2" 
       /> 

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

     <android.support.design.widget.CollapsingToolbarLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      app:layout_scrollFlags="scroll|enterAlways"> 

      <android.support.design.widget.TabLayout 
       android:id="@+id/tabs2" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:background="@color/primary" 
       android:elevation="6dp" 
       android:minHeight="?attr/actionBarSize" 
       app:tabIndicatorColor="@android:color/white" 
       app:tabIndicatorHeight="2dp" 
       android:layout_gravity="bottom" 
       /> 

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

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

折叠工作正常，但它没有显示任何标签布局。

需要在上面的文件中纠正什么。

来源

2016-09-22 Devesh Agrawal

你的代码在哪里？ – alway5dotcom

首先你要写两种类型CollapsingToolbarLayout来创建两个不同的Tab。所以首先删除。并为此制作ViewPager。像下面的方式。

<android.support.v4.view.ViewPager 
      android:id="@+id/viewpager" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      app:layout_behavior="@string/appbar_scrolling_view_behavior" />

因此，在设置XML时将代码更改为下方。

<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:id="@+id/detail_content" 
    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="@dimen/app_bar_height" 
     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" 
      android:theme="@style/ThemeOverlay.AppCompat.Dark" 
      app:contentScrim="?attr/colorPrimary" 
      app:expandedTitleMarginEnd="@dimen/article_keylines" 
      app:expandedTitleMarginStart="@dimen/md_keylines" 
      app:layout_scrollFlags="scroll|exitUntilCollapsed"> 

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

      <android.support.v7.widget.Toolbar 
       android:id="@+id/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.TabLayout 
       android:id="@+id/tabs1" 
       android:layout_width="match_parent" 
       android:layout_height="?attr/actionBarSize" 
       android:background="@color/primary" 
       android:minHeight="?attr/actionBarSize" 
       app:tabIndicatorColor="@android:color/white" 
       app:tabIndicatorHeight="2dp" 
       android:layout_above="@+id/tabs2" 
       /> 

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

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

     <android.support.v4.view.ViewPager 
      android:id="@+id/viewpager" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      app:layout_behavior="@string/appbar_scrolling_view_behavior" /> 

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

希望这会帮助你。

来源

2016-09-22 04:04:38 Ironman

试试这个

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

    <android.support.design.widget.AppBarLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:fitsSystemWindows="true" 
     android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> 

     <android.support.design.widget.CollapsingToolbarLayout 
      android:id="@+id/collapse_toolbar" 
      android:layout_width="match_parent" 
      android:layout_height="200dp" 
      android:fitsSystemWindows="true" 
      app:contentScrim="@color/zxing_transparent" 
      android:paddingBottom="2dip" 
      app:layout_scrollFlags="scroll|exitUntilCollapsed" 
      app:expandedTitleGravity="bottom|center_horizontal" 
      app:expandedTitleMarginBottom="50dip" 
      app:collapsedTitleGravity="top|center_vertical" 
      app:collapsedTitleTextAppearance="@style/collapseTitle"> 

      <ImageView 
       android:id="@+id/header" 
       android:layout_width="match_parent" 
       android:layout_height="match_parent" 
       android:fitsSystemWindows="true" 
       android:alpha="0.5" 
       android:scaleType="fitCenter" 
       app:layout_collapseMode="parallax" /> 

      <android.support.v7.widget.Toolbar 
       android:id="@+id/toolbar1" 
       android:layout_width="match_parent" 
       android:layout_height="80dip" 
       android:gravity="top" 
       android:minHeight="?attr/actionBarSize" 
       app:layout_collapseMode="pin" 
       app:titleTextAppearance="@style/AppTheme.Toolbar.Title" 
       app:popupTheme="@style/ThemeOverlay.AppCompat.Light" 
       > 

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

      <android.support.design.widget.TabLayout 
       android:paddingTop="5dip" 
       android:id="@+id/tabs" 
       android:layout_width="match_parent" 
       android:layout_height="?attr/actionBarSize" 
       android:layout_gravity="bottom" 
       app:tabMode="scrollable" 
       app:tabGravity="center" 
       app:tabIndicatorHeight="4dip" 
       app:tabTextAppearance="@style/NavigationTabTextAppeareance" 
       app:tabIndicatorColor="@color/white" /> 

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

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

    <android.support.v4.view.ViewPager 
     android:id="@+id/viewpager" 
     android:background="@color/semiwhite" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     app:layout_behavior="@string/appbar_scrolling_view_behavior" /> 

    <ImageView 
     android:id="@+id/fab" 
     android:visibility="gone" 
     android:layout_width="90dip" 
     android:layout_height="90dip" 
     android:layout_gravity="bottom|left" 
     app:elevation="6dp" 
     app:backgroundTint="@color/selected" 
     app:pressedTranslationZ="12dp" 
     android:layout_margin="@dimen/fab_margin" 
     android:src="@drawable/black"/> 


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

来源

2016-09-22 05:01:37

这是工作，你可以试试。这一个甚至有导航抽屉

<?xml version="1.0" encoding="utf-8"?> 
    <android.support.v4.widget.DrawerLayout 
     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" 
     tools:context="com.example.abhinav.tsdhub.MainActivity" 
     android:layout_width="match_parent" 
     android:id="@+id/main_layout" 
     android:layout_height="match_parent" 
     android:fitsSystemWindows="true" 
     > 
    <android.support.design.widget.CoordinatorLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content"> 

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

    <android.support.design.widget.CollapsingToolbarLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:id="@+id/mainActivityCollapsingBar" 
     app:titleEnabled="true" 
     app:layout_scrollFlags="scroll|enterAlways"> 

     <ImageView 
      android:layout_width="match_parent" 
      android:layout_height="200dp" 
      android:id="@+id/toolbarImage" 
      android:scaleType="centerCrop" 
      app:layout_collapseMode="parallax" 
      android:src="@drawable/scribbled"/> 

     <android.support.v7.widget.Toolbar 
      android:id="@+id/toolbar" 
      app:layout_collapseMode="pin" 
      android:layout_width="match_parent" 
      android:layout_height="?attr/actionBarSize" 
      android:elevation="4dp" 
      android:layout_marginBottom="43dp" 
      android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" 
      app:popupTheme="@style/ThemeOverlay.AppCompat.Dark" /> 

     <android.support.design.widget.TabLayout 
      android:id="@+id/main_tabs" 
      android:layout_width="fill_parent" 
      android:layout_height="wrap_content" 
      app:tabTextColor="#d6cece" 
      app:tabSelectedTextColor="#ffffff" 
      app:layout_collapseMode="pin" 
      app:tabIndicatorColor="@color/cardview_light_background" 
      app:tabContentStart="50dp" 
      android:layout_gravity="bottom" 
      app:tabMode="fixed" 
      app:tabGravity="fill"/> 

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

     <android.support.v4.view.ViewPager 
      android:id="@+id/main_viewPager" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      app:layout_behavior="@string/appbar_scrolling_view_behavior" /> 
     <FrameLayout 
      android:id="@+id/container_body" 
      android:layout_width="fill_parent" 
      android:layout_height="0dp" 
      android:layout_weight="1" /> 

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


     <!--navigation drawer attributes 
     <android.support.design.widget.NavigationView 
      android:id="@+id/navigation_view" 
      android:layout_height="match_parent" 
      android:layout_width="300dp" 
      android:layout_gravity="start" 
      app:headerLayout="@layout/navigation_header" 
      app:menu="@menu/menu_navigation"/> 
    --> 

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

来源

2016-12-27 21:26:38

崩溃的工具栏布局与Android中的2选项卡布局

回答

相关问题