Question

我正在尝试创建一个折叠工具栏布局以及三个选项卡，称为Tab1，Tab2和Tab3。当我运行该程序时，选项卡工作正常，但折叠效果不起作用。这是我的代码。

import android.content.Context;
import android.os.Bundle;
import android.support.design.widget.CollapsingToolbarLayout;
import android.support.design.widget.CoordinatorLayout;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.Toolbar;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import java.util.ArrayList;

public class FourthActivity extends AppCompatActivity {

        // Need this to link with the Snackbar
        private CoordinatorLayout mCoordinator;
        //Need this to set the title of the app bar
        private CollapsingToolbarLayout mCollapsingToolbarLayout;
        private Toolbar mToolbar;
        private ViewPager mPager;
        private YourPagerAdapter mAdapter;
        private TabLayout mTabLayout;

        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_fourth);
            mCoordinator = (CoordinatorLayout) findViewById(R.id.root_coordinator);
            mCollapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar_layout);
            mFab = (FloatingActionButton) findViewById(R.id.fab);
            mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
            mToolbar = (Toolbar) findViewById(R.id.app_bar);
            setSupportActionBar(mToolbar);




            mTabLayout = (TabLayout) findViewById(R.id.tab_layout);
            mAdapter = new YourPagerAdapter(getSupportFragmentManager());
            mPager = (ViewPager) findViewById(R.id.view_pager);
            mPager.setAdapter(mAdapter);


            //Notice how the Tab Layout links with the Pager Adapter
            mTabLayout.setTabsFromPagerAdapter(mAdapter);

            //Notice how The Tab Layout adn View Pager object are linked
            mTabLayout.setupWithViewPager(mPager);
            mPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(mTabLayout));

    class YourPagerAdapter extends FragmentStatePagerAdapter {

        public YourPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            //FourthActivity.MyFragment myFragment = FourthActivity.MyFragment.newInstance(position);
            android.support.v4.app.Fragment fragment = null;

            if (position == 0) {
                fragment = new FragmentA();
            } else if (position == 1) {
                fragment = new FragmentB();

            } else if (position == 2) {
               fragment = new FragmentC();

            }
            return fragment;

        }

        @Override
        public int getCount() {
            return 3;
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return "Tab " + (position + 1);
        }
    }}

这是XML

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/root_coordinator"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="192dp"
                android:scaleType="centerCrop"
                android:src="@drawable/rsz_bg_cover"
                app:layout_collapseMode="parallax" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/app_bar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                app:layout_collapseMode="pin" />

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

        <!--<android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll|enterAlways">-->

            <android.support.design.widget.TabLayout
                android:id="@+id/tab_layout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/colorAccent"
                app:layout_collapseMode="pin"
                app:tabIndicatorColor="@color/colorPrimary"
                app:tabSelectedTextColor="@android:color/white"
                app:tabTextColor="#EEE" />
       <!-- </android.support.design.widget.CollapsingToolbarLayout>-->

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

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


    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|right"
        android:layout_margin="16dp"
        android:src="@drawable/ic_add_black"
        app:borderWidth="0dp"
        app:fabSize="mini" />
</android.support.design.widget.CoordinatorLayout>

<android.support.design.widget.NavigationView
    android:id="@+id/navigation_drawer"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    app:menu="@menu/menu_drawer" />

Answer 1

以下一种方法可以将Toolbar高度设置为2x actionBarSize，这将适应大小为TabLayout的操作栏。

<android.support.design.widget.CollapsingToolbarLayout
    android:id="@+id/collapsing_toolbar_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:contentScrim="?attr/colorPrimary"
    app:layout_scrollFlags="scroll|exitUntilCollapsed">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="256dp"
        android:src="@drawable/rsz_bg_cover"
        android:scaleType="centerCrop"
        app:layout_collapseMode="parallax" />

    <android.support.v7.widget.Toolbar
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="104dp"
        android:gravity="top"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:layout_collapseMode="pin" />

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:background="@color/colorAccent"
        app:tabIndicatorColor="@color/colorPrimary"
        app:tabSelectedTextColor="@android:color/white"
        app:tabTextColor="#EEE" />

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

折叠工具栏效果无法与Tablayout一起使用

1 个答案: