标签栏粘贴到顶部而不是折叠工具栏下方

Question

我正在尝试创建一个布局，它将折叠工具栏与其下方的标签栏集成在一起，在用户向上滚动后仍然可见。 我的问题是标签栏粘在MainActivity工具栏下的屏​​幕顶部。 我正在使用带有片段的滑动窗口活动，并且此片段为每个选项卡都有嵌套片段，每个选项卡都有自己的布局。 我正在关注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.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="wrap_content"
        android:fitsSystemWindows="true">

        <android.support.design.widget.AppBarLayout
            android:id="@+id/appbar"
            android:layout_width="match_parent"
            android:layout_height="250dp"
            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:contentScrim="?attr/colorPrimary"
                app:expandedTitleMarginEnd="64dp"
                app:expandedTitleMarginStart="48dp"
                app:layout_scrollFlags="scroll|enterAlwaysCollapsed">

                <ImageView
                    android:id="@+id/header"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@drawable/details_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>

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

        <android.support.design.widget.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="16dp"
            android:clickable="true"
            android:src="@mipmap/ic_action_share"
            app:backgroundTint="@color/primary_dark"
            app:layout_anchor="@+id/appbar"
            app:layout_anchorGravity="bottom|right|end"/>

        <android.support.design.widget.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="16dp"
            android:clickable="true"
            android:src="@mipmap/ic_action_location"
            app:backgroundTint="@color/primary_dark"
            app:layout_anchor="@+id/appbar"
            app:layout_anchorGravity="bottom|center"/>

        <android.support.design.widget.AppBarLayout
            android:id="@+id/tabanim_appbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="false"
            android:baselineAligned="false"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            >

            <TabHost
                android:id="@android:id/tabhost"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <FrameLayout
                    android:id="@android:id/tabcontent"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">

                    <android.support.design.widget.TabLayout
                        android:id="@+id/tabanim_tabs"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"/>
                </FrameLayout>

                <TabWidget
                    android:id="@android:id/tabs"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"/>

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

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

对于此实例来简化选项卡片段布局，我们假设我只有一个循环视图：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    android:id="@+id/dummyfrag_bg"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/background_material_light">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/dummyfrag_scrollableview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</FrameLayout>

MainActivity布局：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
    android:id="@+id/DrawerLayout"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:elevation="7dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <include
            android:id="@+id/toolbar"
            layout="@layout/toolbar"/>

        <FrameLayout
            android:id="@+id/container"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:clickable="true"/>
    </LinearLayout>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/RecyclerView"
        android:layout_width="320dp"
        android:layout_height="match_parent"
        android:layout_gravity="left"
        android:background="@color/white_transparent"
        android:scrollbars="vertical"/>
</android.support.v4.widget.DrawerLayout>

工具栏布局：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    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="wrap_content"
    android:background="?attr/colorPrimary"
    android:minHeight="?attr/actionBarSize"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

MainActivity类：

public class MainActivity extends AppCompatActivity {

private final static int PROFILE_FRAGMENT = 1;
private final static int PRIZES_FRAGMENT = 2;
private final static int SALES_FRAGMENT = 3;
private final static int ABOUT = 4;
private int currentFragment = 1;
private String currentFragmentName = "ProfileFragment";
public int HEADER_IMAGE = R.drawable.avatar; 

private DrawerLayout drawer;
private List<DrawerItem> dataList;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);
    if (mToolbar != null) {
        setSupportActionBar(mToolbar);
    }
    RecyclerView mRecyclerView = (RecyclerView) findViewById(R.id.RecyclerView);
    mRecyclerView.setHasFixedSize(true);

    dataList = new ArrayList<>();
    addItemsToDataList();

    NavDrawerAdapter mAdapter = new NavDrawerAdapter(dataList, this, "Person name", "Person email", HEADER_IMAGE);
    mRecyclerView.setAdapter(mAdapter);
    RecyclerView.LayoutManager mLayoutManager = new LinearLayoutManager(this);
    mRecyclerView.setLayoutManager(mLayoutManager);

    drawer = (DrawerLayout) findViewById(R.id.DrawerLayout);
    drawer.setDescendantFocusability(ViewGroup.FOCUS_BLOCK_DESCENDANTS);
    ActionBarDrawerToggle mDrawerToggle = new ActionBarDrawerToggle(
            this, drawer, mToolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close) {
        @Override
        public void onDrawerOpened(View drawerView) {
            super.onDrawerOpened(drawerView);
        }

        @Override
        public void onDrawerClosed(View drawerView) {
            super.onDrawerClosed(drawerView);
        }
    };
    drawer.setDrawerListener(mDrawerToggle);
    mDrawerToggle.syncState();
    onTouchDrawer(currentFragment);
    final GestureDetector mGestureDetector =
            new GestureDetector(MainActivity.this, new GestureDetector.SimpleOnGestureListener() {
                @Override
                public boolean onSingleTapUp(MotionEvent e) {
                    return true;
                }
            });
    mRecyclerView.addOnItemTouchListener(new RecyclerView.OnItemTouchListener() {
        @Override
        public boolean onInterceptTouchEvent(RecyclerView recyclerView, MotionEvent motionEvent) {
            View child = recyclerView.findChildViewUnder(motionEvent.getX(), motionEvent.getY());

            if (child != null && mGestureDetector.onTouchEvent(motionEvent)) {
                drawer.closeDrawers();
                onTouchDrawer(recyclerView.getChildLayoutPosition(child));
                return true;
            }
            return false;
        }

        @Override
        public void onTouchEvent(RecyclerView rv, MotionEvent e) {

        }

        @Override
        public void onRequestDisallowInterceptTouchEvent(boolean disallowIntercept) {

        }
    });
}

private void addItemsToDataList() {
    dataList.add(new DrawerItem(getString(R.string.title_profile), R.mipmap.ic_action_profile));
    dataList.add(new DrawerItem(getString(R.string.title_prizes), R.mipmap.ic_action_prizes));
    dataList.add(new DrawerItem(getString(R.string.title_sales), R.mipmap.ic_action_sales));
    dataList.add(new DrawerItem(getString(R.string.title_about),R.mipmap.ic_action_about));
}

public void openFragment(final Fragment fragment) {
    int backStackEntryCount = getSupportFragmentManager()
                                      .getBackStackEntryCount();
    if (!fragment.toString().equalsIgnoreCase(currentFragmentName)) {
        switchContent(fragment);
    }
    getSupportFragmentManager()
           .beginTransaction()
           .replace(R.id.container, fragment)
           .commit();
}

private void onTouchDrawer(final int position) {
    currentFragment = position;
    switch (position) {
        case PROFILE_FRAGMENT:
            openFragment(new ProfileFragment());
            setTitle(getString(R.string.title_profile));
            break;
        case PRIZES_FRAGMENT:
            openFragment(new PrizesFragment());
            setTitle(getString(R.string.title_prizes));
            break;
        case SALES_FRAGMENT:
            openFragment(new SalesFragment());
            setTitle(getString(R.string.title_sales));
            break;
        case ABOUT:
            openFragment(new AboutFragment());
            setTitle(getString(R.string.title_about));
            break;
        default:
    }
}

public void switchContent(Fragment fragment) {
    getSupportFragmentManager().beginTransaction()
            .replace(R.id.container, fragment)
            .addToBackStack(fragment.getClass().getSimpleName())
            .commit();
}

}

片段类：

public class SaleFragment extends TemplateFragment {

CollapsingToolbarLayout collapsingToolbar;
ViewPager viewPager;
TabLayout tabLayout;
ViewPagerTabAdaper adapter;

public SaleDetailFragment() {
    // Required empty public constructor
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    View result = inflater.inflate(R.layout.fragment_sale_detail, container, false);
    ViewPager pager = (ViewPager) result.findViewById(R.id.tabanim_viewpager);
    setupViewPager(pager);
    return (result);
}

@Override
public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
    super.onViewCreated(view, savedInstanceState);

    final Toolbar toolbar = (Toolbar) view.findViewById(R.id.anim_toolbar);
    getMainActivity().setSupportActionBar(toolbar);
    getMainActivity().getSupportActionBar().setDisplayHomeAsUpEnabled(true);

    collapsingToolbar = (CollapsingToolbarLayout) view.findViewById(R.id.collapsing_toolbar);
    collapsingToolbar.setTitle("Sale Detail");

    ImageView header = (ImageView) view.findViewById(R.id.header);
    Picasso.with(getActivity().getApplicationContext()).load(R.drawable.details_header).fit().into(header);

    viewPager = (ViewPager) view.findViewById(R.id.tabanim_viewpager);
    tabLayout = (TabLayout) view.findViewById(R.id.tabanim_tabs);
}

@Override
public void onActivityCreated(@Nullable Bundle savedInstanceState) {
    super.onActivityCreated(savedInstanceState);

    List<String> listData = new ArrayList<>();
    int ct = 0;
    for (int i = 0; i < VersionModel.data.length * 2; i++) {
        listData.add(VersionModel.data[ct]);
        ct++;
        if (ct == VersionModel.data.length) {
            ct = 0;
        }
    }
    setupViewPager(viewPager);
    tabLayout.setupWithViewPager(viewPager);
    tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
        @Override
        public void onTabSelected(TabLayout.Tab tab) {

            viewPager.setCurrentItem(tab.getPosition());

            switch (tab.getPosition()) {
                case 0:
                    Toast.makeText(getActivity(), "Sales", Toast.LENGTH_SHORT).show();
                    break;
                case 1:
                    Toast.makeText(getActivity(), "Store Description", Toast.LENGTH_SHORT).show();
                    break;
            }
        }

        @Override
        public void onTabUnselected(TabLayout.Tab tab) {

        }

        @Override
        public void onTabReselected(TabLayout.Tab tab) {

        }
    });
}

private void setupViewPager(ViewPager viewPager) {
    adapter = new ViewPagerTabAdaper(getActivity().getSupportFragmentManager());
    adapter.addFrag(new DummyFragment(getResources().getColor(R.color.accent_material_light)), "Sales");
    adapter.addFrag(new DummyFragment(getResources().getColor(R.color.ripple_material_light)), "Store Description");
    viewPager.setAdapter(adapter);
}

public static class DummyFragment extends android.support.v4.app.Fragment {
    int color;
    SimpleRecyclerAdapter adapter;

    public DummyFragment() {
    }


    @SuppressLint("ValidFragment")
    public DummyFragment(int color) {
        this.color = color;
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.tabs_fragment, container, false);

        final FrameLayout frameLayout = (FrameLayout) view.findViewById(R.id.dummyfrag_bg);
        frameLayout.setBackgroundColor(color);

        RecyclerView recyclerView = (RecyclerView) view.findViewById(R.id.dummyfrag_scrollableview);

        LinearLayoutManager linearLayoutManager = new LinearLayoutManager(getActivity().getBaseContext());
        recyclerView.setLayoutManager(linearLayoutManager);
        recyclerView.setHasFixedSize(true);

        List<String> list = new ArrayList<>();
        for (int i = 0; i < VersionModel.data.length; i++) {
            list.add(VersionModel.data[i]);
        }

        adapter = new SimpleRecyclerAdapter(list);
        recyclerView.setAdapter(adapter);

        return view;
    }
}

}

查看寻呼机标签adaper：

public class ViewPagerTabAdaper extends FragmentPagerAdapter {
private final List<Fragment> mFragmentList = new ArrayList<>();
private final List<String> mFragmentTitleList = new ArrayList<>();

public ViewPagerTabAdaper(FragmentManager manager) {
    super(manager);
}

@Override
public android.support.v4.app.Fragment getItem(int position) {
    return mFragmentList.get(position);
}

@Override
public int getCount() {
    return mFragmentList.size();
}

public void addFrag(android.support.v4.app.Fragment fragment, String title) {
    mFragmentList.add(fragment);
    mFragmentTitleList.add(title);
}

@Override
public CharSequence getPageTitle(int position) {
    return mFragmentTitleList.get(position);
}

}

我的目标是获得一个看起来像 - this -

的布局

因此，向上滚动时折叠工具栏会折叠，只有片段标题工具栏和选项卡可见，然后向下滚动时返回。 我已经尝试了很多解决方案，但是他们要么将标签固定在底部，要么不起作用，一般会折叠工具栏，这不是一个选项。

感谢所有建议和感谢。

Answer 1

我可以通过发布here发布的示例来解决这个问题。 主要问题是app：layout_collapseMode =“parallax”属性使图像填满整个空间并覆盖其中的元素，因为我发现AppBarLayout扩展了LinearLayout，因此它接受了TabLayout上的属性android：layout_gravity =“bottom”因此迫使它到底。 然后我添加了元素，因为我需要获得下面的最终布局：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    android:id="@+id/main_content"
    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/appbar"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        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"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:id="@+id/header"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginBottom="?attr/actionBarSize"
                android:background="@drawable/details_header"/>


            <LinearLayout
                android:id="@+id/smth"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                android:layout_marginBottom="?attr/actionBarSize"
                android:background="#f8f5ee"
                android:orientation="vertical">


                <TextView
                    android:id="@+id/text_store_page_name"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="18dp"
                    android:layout_marginTop="35dp"
                    android:text="LEITARIA QUINTA DO PAÇO"
                    android:textColor="#000000"
                    android:textSize="20sp"
                    android:textStyle="bold"/>

                <TextView
                    android:id="@+id/textView14"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="13dp"
                    android:layout_marginTop="3dp"
                    android:drawableLeft="@mipmap/ic_action_profile"
                    android:text="Pastelaria caseira"
                    android:textAppearance="?android:attr/textAppearanceMedium"
                    android:textColor="#000000"/>
            </LinearLayout>

            <android.support.design.widget.FloatingActionButton
                android:id="@+id/fab"
                android:layout_width="45dp"
                android:layout_height="45dp"
                android:layout_gravity="right"
                android:layout_marginTop="115dp"
                android:elevation="0dp"
                android:src="@mipmap/ic_action_share"/>

            <android.support.design.widget.FloatingActionButton
                android:id="@+id/fab_location"
                android:layout_width="45dp"
                android:layout_height="45dp"
                android:layout_gravity="right"
                android:layout_marginEnd="68dp"
                android:layout_marginTop="115dp"
                android:elevation="0dp"
                android:src="@mipmap/ic_action_location"/>

            <android.support.design.widget.FloatingActionButton
                android:id="@+id/fab_share"
                android:layout_width="45dp"
                android:layout_height="45dp"
                android:layout_gravity="right"
                android:layout_marginEnd="130dp"
                android:layout_marginTop="115dp"
                android:elevation="0dp"
                android:src="@mipmap/ic_action_share"/>

            <de.hdodenhof.circleimageview.CircleImageView
                android:id="@+id/prize_icon"
                android:layout_width="70dp"
                android:layout_height="70dp"
                android:layout_marginStart="16dp"
                android:layout_marginTop="115dp"
                android:src="@drawable/eclair"/>


            <android.support.v7.widget.Toolbar
                android:id="@+id/anim_toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="@color/transparent"
                app:layout_collapseMode="parallax"
                app:layout_scrollFlags="scroll|enterAlways"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>


            <android.support.design.widget.TabLayout
                android:id="@+id/tabanim_tabs"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:layout_gravity="bottom"
                android:gravity="center"
                app:tabGravity="center"
                app:tabIndicatorColor="#F1514A"
                app:tabMode="scrollable"
                app:tabSelectedTextColor="@android:color/white"
                app:tabTextColor="#99ffffff"/>

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

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


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

感谢@skynet提供了非常有用的参考资料。

Answer 2

检查一下：

<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">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#181E80"
        android:orientation="vertical">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:minHeight="?attr/actionBarSize" />

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="48dp"
            android:paddingTop="8dp">

            <ImageView
                android:id="@android:id/icon"
                android:layout_width="54dp"
                android:layout_height="54dp"
                android:layout_alignParentStart="true"
                android:layout_marginStart="16dp"
                android:importantForAccessibility="no"
                android:src="@drawable/logo" />

            <TextView
                android:id="@android:id/text1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignTop="@android:id/icon"
                android:layout_marginStart="14dp"
                android:layout_toEndOf="@android:id/icon"
                android:text="HeaderText"
                android:textColor="@android:color/white"
                android:textSize="24sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignStart="@android:id/text1"
                android:layout_below="@android:id/text1"
                android:text="SubText"
                android:textColor="@android:color/white"
                android:textSize="12sp" />

        </RelativeLayout>

        <FrameLayout
            android:id="@+id/tab_container"
            android:layout_width="match_parent"
            android:layout_height="90dp"
            android:background="#272F93">

            <android.support.design.widget.TabLayout
                android:id="@+id/tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                app:tabContentStart="70dp"
                app:tabGravity="center"
                app:tabIndicatorColor="#F1514A"
                app:tabMode="scrollable"
                app:tabSelectedTextColor="@android:color/white"
                app:tabTextColor="#99ffffff" />

        </FrameLayout>

        <android.support.v4.view.ViewPager
            android:id="@+id/pager"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

    </LinearLayout>

    <android.support.design.widget.FloatingActionButton
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_margin="16dp"
        android:src="@drawable/ic_star_white_24dp"
        app:backgroundTint="#F1514A"
        app:borderWidth="0dp"
        app:elevation="8dp"
        app:layout_anchor="@id/tab_container"
        app:layout_anchorGravity="top|right|end" />

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

Of Interest 1

Of Interest2