布局架构 :Header 加上 ViewPager 使用 tablayout

Question

我想按照图片做。所以基本上

屏幕 - 整个区域是可滚动的。 top 是存在水平滚动的布局。在该选项卡布局和查看寻呼机下方

2.Screen - 当用户向下滚动时 header 水平滚动的部分将会消失（向上不可见）并且选项卡布局将是粘性的 header 它总是在顶部并且只有他的视图寻呼机是可交换的。但是当他再次滚动时然后顶部 header 应该是

我参考了这个 https://github.com/kmshack/Android-ParallaxHeaderViewPager 但它不符合我的需要

Answer 1

activity_tab_layout.xml

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/main_content"
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="wrap_content"
    android:fitsSystemWindows="true"
    android:background="@color/colorPrimary"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapse_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/material_deep_teal_500"
        android:fitsSystemWindows="true"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

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

        <!--<android.support.v7.widget.Toolbar-->
                <!--android:id="@+id/toolbar"-->
                <!--android:layout_width="match_parent"-->
                <!--android:layout_height="?attr/actionBarSize"-->
                <!--android:background="?attr/colorPrimary"-->
                <!--app:layout_scrollFlags="scroll|enterAlways"-->
                  <!--app:popupTheme="@style/ThemeOverlay.AppCompat.Dark">-->

                <!--</android.support.v7.widget.Toolbar>-->

            <HorizontalScrollView
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

            </HorizontalScrollView>


            </LinearLayout>

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

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:foregroundGravity="center_horizontal"
        app:layout_collapseMode="pin"
        app:tabGravity="center"
        app:tabMode="scrollable"
        app:tabSelectedTextColor="@color/colorAccent"
        app:tabTextColor="@color/colorPrimary" />

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

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

ActivityCode.java

public class ActivityCode extends AppCompatActivity {

    TabLayout tabs;
    ViewPager viewPager;

    Toolbar toolbar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_cancer_type);

// your find view by id code

        toolbar.setTitle(title);
        setSupportActionBar(toolbar);
        getSupportActionBar().setHomeButtonEnabled(true);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        setupViewPager(viewPager);
        tabs.setupWithViewPager(viewPager);
    }


    private void setupViewPager(ViewPager viewPager) {

        ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());

        Fragment facts = new FRAGMENT_CLASS();
        adapter.addFragment(facts, "Title");
    Fragment facts = new FRAGMENT_CLASS();
        adapter.addFragment(facts, "Title");
    Fragment facts = new FRAGMENT_CLASS();
        adapter.addFragment(facts, "Title");


        viewPager.setAdapter(adapter);
    }

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

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

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

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

        public void addFragment(Fragment fragment, String title) {
            mFragmentList.add(fragment);
            mFragmentTitleList.add(title);
        }

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

Answer 2

试试这个库：

https://github.com/noties/Scrollable

我想这就是你想要的。

布局架构 :Header 加上 ViewPager 使用 tablayout

layout architecture :Header plus ViewPager using tablayout

android

android-viewpager

android-tablayout