使用工具栏+ TabLayout对AppBarLayout进行充气

我目前在我的main.xml中有一个DrawerLayout。 有一个工具栏包装在AppBarLayout中,然后是一个简单的LinearLayout来交换片段。

我导航到的片段之一,我希望它包含片段ViewPager的TabLayout。 目前,我有这两个在片段的布局文件,但这会导致工具栏和TabLayout之间出现阴影,这是我不想要的东西。 我也不想使用setElevation(),因为它不适用于前棒棒糖设备。

一个可能的解决scheme是从我的片段充气AppBarLayout,以便它拥有工具栏+选项卡。 但是,我不确定如何做到这一点,所以任何帮助,将不胜感激。

这是我的main.xml文件:

<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" android:id="@+id/drawerLayout" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.lumivote.lumivote.ui.MainActivity"> <android.support.design.widget.CoordinatorLayout android:id="@+id/rootLayout" 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.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" /> </android.support.design.widget.AppBarLayout> <LinearLayout android:id="@+id/flContent" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" app:layout_behavior="@string/appbar_scrolling_view_behavior"/> </android.support.design.widget.CoordinatorLayout> <android.support.design.widget.NavigationView android:id="@+id/navigation" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="start" app:headerLayout="@layout/nav_header" app:itemIconTint="#333" app:itemTextColor="#333" app:menu="@menu/navigation_drawer_items" /> </android.support.v4.widget.DrawerLayout> 

这里是我的片段的XML文件:

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context="com.alexdao.democracy.ui.candidate_tab.CandidateListFragment"> <android.support.design.widget.TabLayout android:id="@+id/tabLayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/myPrimaryColor" app:tabMode="fixed" app:tabGravity="fill" app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@android:color/white" /> </LinearLayout> 

您可以为每个片段分别设置工具栏。 可以将分段工具栏设置为活动操作栏。 示例代码:

 Toolbar toolbar = (Toolbar) v.findViewById(R.id.toolbar); ((AppCompatActivity) getActivity()).setSupportActionBar(toolbar); 

应该有可能有标题,图标和其他的东西。 有了它,你可以模仿前棒棒糖设备上的阴影,不pipe你有什么。

我修改了bleeding182给出的解决scheme,并且也为AppBarLayout工作(解决了bopa指出的问题)。

 @Override public void onAttach(Context context) { if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { getActivity().findViewById(R.id.appbar).setElevation(0); } super.onAttach(context); } @Override public void onDetach() { super.onDetach(); if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { getActivity().findViewById(R.id.appbar).setElevation(R.dimen.toolbar_elevation); } } 

我所做的是通过为我的AppBarLayout提供一个ID,然后调用findViewById(),然后调用setElevation的结果来replace对getSupportActionBar()的调用。 testingAPI 23。

我有一个类似的问题,我想在一个片段内的TabLayout

在不改变任何其他代码的情况下,你可以通过在TabLayout的片段中使用onAttachonDetach来解决这个问题。

 @Override public void onAttach(Activity activity) { super.onAttach(activity); // todo add some further checks, eg instanceof, actionbar != null if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { ((AppCompatActivity) activity).getSupportActionBar().setElevation(0); } } @Override public void onDetach() { super.onDetach(); if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { ((AppCompatActivity) getActivity()).getSupportActionBar() .setElevation(getResources().getDimension(R.dimen.toolbar_elevation)); } } 

一定要在你的TabLayout上设置相同的高程,一切工作正常! ; d

您可以简单地从片段中以编程方式添加TabLayout,以便您需要TabLayout

 tabLayout = (TabLayout) inflater.inflate(R.layout.tablay, null); appBarLayout = (AppBarLayout) getActivity().findViewById(R.id.appbar); appBarLayout.addView(tabLayout, new LinearLayoutCompat.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT)); 

并从onDetach()中的AppBar中移除TabLayout

 @Override public void onDetach() { appBarLayout.removeView(tabLayout); super.onDetach(); } 

为了解决我的问题,我最终把工具栏,TabLayout和ViewPager都放在了我的MainActivity中。

main_activity.xml:

 <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" android:id="@+id/drawerLayout" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.widget.CoordinatorLayout android:id="@+id/rootLayout" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" /> <android.support.design.widget.TabLayout android:id="@+id/tabLayout" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabMode="fixed" app:tabGravity="fill" app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@android:color/white" /> </android.support.design.widget.AppBarLayout> <RelativeLayout android:id="@+id/flContent" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" app:layout_behavior="@string/appbar_scrolling_view_behavior"/> </android.support.design.widget.CoordinatorLayout> <android.support.design.widget.NavigationView android:id="@+id/navigation" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="start" app:headerLayout="@layout/nav_header" app:itemIconTint="#333" app:itemTextColor="#333" app:menu="@menu/navigation_drawer_items" /> </android.support.v4.widget.DrawerLayout> 

然后,在我的所有片段中,我在onCreateView中以编程方式设置TabLayout和ViewPager的可见性:

 public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { TabLayout tabLayout = (TabLayout) getActivity().findViewById(R.id.tabLayout); tabLayout.setVisibility(View.GONE); ViewPager mViewPager = (ViewPager) getActivity().findViewById(R.id.viewpager); mViewPager.setVisibility(View.GONE); return inflater.inflate(R.layout.fragment_layout, container, false); } 

当然,在带有选项卡的片段中,您需要将可见性设置为View.VISIBLE而不是View.GONE

Artem_lens的方法为我工作了一些修改。

 @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { ... mTabLayout = (TabLayout) inflater.inflate( R.layout.partial_tab_layout, container, false); mAppBarLayout = (AppBarLayout) getActivity().findViewById(R.id.app_bar); mAppBarLayout.addView(mTabLayout, new LinearLayoutCompat.LayoutParams( ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT)); ... } 

并删除onDestroyView()的视图

 @Override public void onDestroyView() { mAppBarLayout.removeView(mTabLayout); super.onDestroyView(); } 

这个解决scheme在XML中很简单。 只需将以下代码添加到您的AppBarLayout: app:elevation="0dp" 。 所以AppBarLayout应该是这样的:

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