如何在没有列表视图的情况下使用选项卡实现折叠布局？

Question

我正在做一个 android 项目，我必须在其中实现带选项卡的折叠工具栏。选项卡应该包含一个正常的相对布局，它有 4 个文本视图。

我能够成功实现折叠工具栏，但问题是每当我尝试向上滚动时按住我已经实现的选项卡折叠工具栏不起作用。在相同的选项卡上，如果我使用列表视图或网格布局，当我滚动时它工作正常。如果我尝试使用普通布局，例如线性布局或相对布局，我将无法滚动。有什么办法可以在没有列表或网格布局的情况下解决这个问题？

下面是我的 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:fitsSystemWindows="true">

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        style="@style/MyStyle"
        android:layout_width="match_parent"
        app:tabIndicatorColor="#F21757"
        app:tabSelectedTextColor="#F21757"
        android:layout_height="?actionBarSize"
        app:tabTextColor="@android:color/white"
        app:layout_anchor="@+id/MyAppbar"
        app:layout_anchorGravity="bottom"
        android:layout_gravity="bottom"
        app:tabGravity="fill"
        app:tabMode="scrollable"
        android:background="#171C20" />


    <android.support.design.widget.AppBarLayout
    android:id="@+id/MyAppbar"
    android:layout_width="match_parent"
    android:layout_height="256dp"
    android:fitsSystemWindows="true"
    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"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        app:contentScrim="#000000"

        android:fitsSystemWindows="true">

        <ImageView
            android:id="@+id/bgheader"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            android:src="@drawable/load"
            android:fitsSystemWindows="true"
            app:layout_collapseMode="parallax"
             />

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?actionBarSize"
            app:layout_collapseMode="pin"

            />


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

</android.support.design.widget.AppBarLayout>
    
    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:paddingBottom="20dp"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="?attr/actionBarSize"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

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

Answer 1

试试这个

步骤 1.main_activity.xml

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.ncrypted.demoapplications.MainActivity">

<android.support.design.widget.AppBarLayout
    android:id="@+id/app_bar_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fitsSystemWindows="true"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsingToolBar_hotel_details"
        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|exitUntilCollapsed">

        <ImageView
            android:id="@+id/img_hotel_details"
            android:layout_width="match_parent"
            android:layout_height="300dp"
            android:contentDescription="@string/strong_image_of_andorid"
            android:fitsSystemWindows="true"
            android:scaleType="centerCrop"
            android:src="@mipmap/ic_launcher"
            app:layout_collapseMode="parallax" />

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolBar_hotel_detail"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:theme="@style/ThemeOverlay.AppCompat.Light"
            app:layout_scrollFlags="scroll|enterAlways">

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


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

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_collapseMode="pin"
        app:tabGravity="fill"
        app:tabMode="fixed" />
</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">

</android.support.v4.view.ViewPager>

步骤：2 创建片段activity

- FragmentActivity1

fragment1.xml

 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 tools:context="com.ncrypted.demoapplications.FragmentActivity1">

 <!-- TODO: Update blank fragment layout -->
 <TextView
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:text="@string/hello_blank_fragment1" />

FragmentActivity.java

public class FragmentActivity1 extends Fragment {    
public FragmentActivity1() 
{
    // Required empty public constructor
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState)
{
    // Inflate the layout for this fragment
    return inflater.inflate(R.layout.fragment_fragment_activity1, container, false);
}
}

Step:3 取另外两个Fragment 2,3，按上面的代码写

步骤:4 MainActivity.java

public class MainActivity extends AppCompatActivity {
private ViewPager pager;
private TabLayout tabLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolBar_hotel_detail);
    setSupportActionBar(toolbar);
    ViewCompat.setTransitionName(findViewById(R.id.app_bar_layout), "Extra Image");
    CollapsingToolbarLayout collapsingToolbarLayout = (CollapsingToolbarLayout)
            findViewById(R.id.collapsingToolBar_hotel_details);        collapsingToolbarLayout.setContentScrimColor(ContextCompat.getColor(getApplicationContext(), R.color.colorPrimary));
    collapsingToolbarLayout.setTitle("Collaps");
    pager = (ViewPager) findViewById(R.id.viewPager);
    ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
    adapter.addFragment(new FragmentActivity1());
    adapter.addFragment(new FragmentActivity2());
    adapter.addFragment(new FragmentActivity3());
    pager.setAdapter(adapter);
    tabLayout = (TabLayout) findViewById(R.id.tabs);
    tabLayout.setupWithViewPager(pager);
    tabLayout.getTabAt(0).setText("Tab1");
    tabLayout.getTabAt(1).setText("Tab2");
    tabLayout.getTabAt(2).setText("Tab3");
}
class ViewPagerAdapter extends FragmentPagerAdapter {
    private final List<Fragment> mFragmentList = 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) {
        mFragmentList.add(fragment);
    }
    }
}

如何在没有列表视图的情况下使用选项卡实现折叠布局？

How can i implement Collapsing layout with tabs without a list view?

xml

tabs

android

toolbar

collapse