24

我目前在 main.xml 中有一个 DrawerLayout。AppBarLayout 中包含了一个 Toolbar，然后是一个简单的 LinearLayout 来交换片段。

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

一个可能的解决方案是从我的片段中膨胀 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>
4

7 回答 7

12

您可以为每个片段拥有单独的工具栏。可以将片段工具栏设置为活动操作栏。示例代码：

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

应该可以有标题、图标和其他东西。有了它，您可以在棒棒糖之前的设备上模拟阴影，无论您有什么。

于 2015-07-07T17:35:32.397 回答
5

我修改了bleeding182给出的解决方案，并让它也适用于 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 来替换对 getSupportActionBar() 的调用，然后对其调用 findViewById() ，然后对其结果调用 setElevation 。在 API 23 上测试。

于 2015-12-29T09:35:20.907 回答
4

我有一个类似的问题，我想要TabLayout一个片段的内部。

在不更改任何其他代码的情况下，您可以通过在片段内部使用 TabLayoutonAttach来解决此问题。onDetach

@Override
public void onAttach(Activity activity) {
    super.onAttach(activity);

    // todo add some further checks, e.g. 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

于 2015-08-10T09:41:34.663 回答
3

您可以简单地从 Fragment 以编程方式添加 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();
}
于 2016-04-21T09:50:29.090 回答
2

为了解决我的问题，我最终将 Toolbar、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.

于 2015-07-20T17:37:22.760 回答
1

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();
}
于 2016-08-22T19:03:24.067 回答
0

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">
于 2017-05-01T18:25:23.060 回答