java - 标签栏粘在顶部而不是折叠工具栏下方

Question

我正在尝试创建一个布局，将折叠工具栏与其下方的标签栏集成在一起，该标签栏在用户向上滚动后仍然可见。我的问题是选项卡栏粘在 MainActivity 工具栏下方的屏幕顶部。我正在使用带有 fragment 的滑动窗口 Activity ，这个 fragment 为每个选项卡都有嵌套的 fragment ，每个选项卡都有自己的布局。我正在关注 here 中的示例使用支持设计库来实现这一点。

我的主要 fragment 布局代码如下:

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

为了简化选项卡 fragment 布局，我们假设其中只有一个回收 View :

<?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();
}

fragment 类:

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;
    }
}

查看分页器选项卡适配器:

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

因此折叠工具栏在向上滚动时折叠，只有 fragment 标题工具栏和选项卡可见，然后在向下滚动时返回。我已经尝试过很多解决方案，但它们要么将选项卡固定在底部，要么不起作用，通常会折叠工具栏，这不是这里的选项。

感谢所有建议和感谢。

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 提供的非常有用的引用。