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

Luí*_*nha 5 java xml android android-layout android-fragments

我正在尝试创建一个布局,该布局将折叠工具栏与其下方的标签栏集成在一起,该标签栏在用户向上滚动后仍然可见。我的问题是标签栏粘在 MainActivity 工具栏下的屏​​幕顶部。我正在使用带有片段的滑动窗口活动,并且这个片段为每个选项卡嵌套了片段,每个选项卡都有自己的布局。我正在按照此处的示例使用支持设计库来实现此目的。

我的主片段布局代码如下:

<?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>
Run Code Online (Sandbox Code Playgroud)

对于这个简化选项卡片段布局的实例,让我们假设我只有一个回收视图:

<?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>
Run Code Online (Sandbox Code Playgroud)

主活动布局:

<?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>
Run Code Online (Sandbox Code Playgroud)

工具栏布局:

<?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"/>
Run Code Online (Sandbox Code Playgroud)

主活动类:

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();
}
Run Code Online (Sandbox Code Playgroud)

}

片段类:

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;
    }
}
Run Code Online (Sandbox Code Playgroud)

}

视图寻呼机选项卡适配器:

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);
}
Run Code Online (Sandbox Code Playgroud)

}

我的目标是获得一个看起来像——这个——的布局

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

感谢所有的建议和感谢。

Luí*_*nha 4

我能够按照此处发布的示例解决此问题发布的示例解决此问题。\n主要问题是 app:layout_collapseMode="parallax" 属性使图像填充整个空间并覆盖其中的元素,并且我发现 AppBarLayout 扩展了 LinearLayout 所以它接受 TabLayout 上的属性 android:layout_gravity="bottom" ,因此将其强制到底部。\n然后我根据需要添加了元素以获得下面的最终布局:

\n\n
<?xml version="1.0" encoding="utf-8"?>\n<android.support.design.widget.CoordinatorLayout\n    android:id="@+id/main_content"\n    xmlns:android="http://schemas.android.com/apk/res/android"\n    xmlns:app="http://schemas.android.com/apk/res-auto"\n    android:layout_width="match_parent"\n    android:layout_height="match_parent">\n\n    <android.support.design.widget.AppBarLayout\n        android:id="@+id/appbar"\n        android:layout_width="match_parent"\n        android:layout_height="300dp"\n        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">\n\n        <android.support.design.widget.CollapsingToolbarLayout\n            android:id="@+id/collapsing_toolbar"\n            android:layout_width="match_parent"\n            android:layout_height="match_parent"\n            app:layout_scrollFlags="scroll|exitUntilCollapsed">\n\n            <ImageView\n                android:id="@+id/header"\n                android:layout_width="match_parent"\n                android:layout_height="match_parent"\n                android:layout_marginBottom="?attr/actionBarSize"\n                android:background="@drawable/details_header"/>\n\n\n            <LinearLayout\n                android:id="@+id/smth"\n                android:layout_width="match_parent"\n                android:layout_height="wrap_content"\n                android:layout_gravity="bottom"\n                android:layout_marginBottom="?attr/actionBarSize"\n                android:background="#f8f5ee"\n                android:orientation="vertical">\n\n\n                <TextView\n                    android:id="@+id/text_store_page_name"\n                    android:layout_width="wrap_content"\n                    android:layout_height="wrap_content"\n                    android:layout_marginStart="18dp"\n                    android:layout_marginTop="35dp"\n                    android:text="LEITARIA QUINTA DO PA\xc3\x87O"\n                    android:textColor="#000000"\n                    android:textSize="20sp"\n                    android:textStyle="bold"/>\n\n                <TextView\n                    android:id="@+id/textView14"\n                    android:layout_width="wrap_content"\n                    android:layout_height="wrap_content"\n                    android:layout_marginStart="13dp"\n                    android:layout_marginTop="3dp"\n                    android:drawableLeft="@mipmap/ic_action_profile"\n                    android:text="Pastelaria caseira"\n                    android:textAppearance="?android:attr/textAppearanceMedium"\n                    android:textColor="#000000"/>\n            </LinearLayout>\n\n            <android.support.design.widget.FloatingActionButton\n                android:id="@+id/fab"\n                android:layout_width="45dp"\n                android:layout_height="45dp"\n                android:layout_gravity="right"\n                android:layout_marginTop="115dp"\n                android:elevation="0dp"\n                android:src="@mipmap/ic_action_share"/>\n\n            <android.support.design.widget.FloatingActionButton\n                android:id="@+id/fab_location"\n                android:layout_width="45dp"\n                android:layout_height="45dp"\n                android:layout_gravity="right"\n                android:layout_marginEnd="68dp"\n                android:layout_marginTop="115dp"\n                android:elevation="0dp"\n                android:src="@mipmap/ic_action_location"/>\n\n            <android.support.design.widget.FloatingActionButton\n                android:id="@+id/fab_share"\n                android:layout_width="45dp"\n                android:layout_height="45dp"\n                android:layout_gravity="right"\n                android:layout_marginEnd="130dp"\n                android:layout_marginTop="115dp"\n                android:elevation="0dp"\n                android:src="@mipmap/ic_action_share"/>\n\n            <de.hdodenhof.circleimageview.CircleImageView\n                android:id="@+id/prize_icon"\n                android:layout_width="70dp"\n                android:layout_height="70dp"\n                android:layout_marginStart="16dp"\n                android:layout_marginTop="115dp"\n                android:src="@drawable/eclair"/>\n\n\n            <android.support.v7.widget.Toolbar\n                android:id="@+id/anim_toolbar"\n                android:layout_width="match_parent"\n                android:layout_height="?attr/actionBarSize"\n                android:background="@color/transparent"\n                app:layout_collapseMode="parallax"\n                app:layout_scrollFlags="scroll|enterAlways"\n                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>\n\n\n            <android.support.design.widget.TabLayout\n                android:id="@+id/tabanim_tabs"\n                android:layout_width="match_parent"\n                android:layout_height="?attr/actionBarSize"\n                android:layout_gravity="bottom"\n                android:gravity="center"\n                app:tabGravity="center"\n                app:tabIndicatorColor="#F1514A"\n                app:tabMode="scrollable"\n                app:tabSelectedTextColor="@android:color/white"\n                app:tabTextColor="#99ffffff"/>\n\n        </android.support.design.widget.CollapsingToolbarLayout>\n    </android.support.design.widget.AppBarLayout>\n\n    <android.support.v4.view.ViewPager\n        android:id="@+id/tabanim_viewpager"\n        android:layout_width="match_parent"\n        android:layout_height="match_parent"\n        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>\n\n\n</android.support.design.widget.CoordinatorLayout>\n
Run Code Online (Sandbox Code Playgroud)\n\n

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

\n