8

Tôi có một dự án sử dụng Action Bar Tabs (với ViewPager). Tab di chuyển thực sự mượt mà khi vuốt giữa chúng, nhưng tôi cần phải thêm hai tab phụ, trong TAB 2, sau đó chuyển sang các tab tiếp theo hoặc tất nhiên trở lại, giống như trên Glassdoor hoặc Flipboard.Nested Action Bar Tabs (với ViewPager)

Vui lòng trợ giúp.

GlassdoorMy App

MainActivity

public class MainActivity extends AppCompatActivity { 


private SectionsPagerAdapter mSectionsPagerAdapter; 
private ViewPager mViewPager; 

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

    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); 
    setSupportActionBar(toolbar); 

    mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager()); 
    mViewPager = (ViewPager) findViewById(R.id.container); 
    mViewPager.setAdapter(mSectionsPagerAdapter); 

    TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs); 
    tabLayout.setupWithViewPager(mViewPager); 

} 


public class SectionsPagerAdapter extends FragmentPagerAdapter { 

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

    @Override 
    public Fragment getItem(int position) { 

      switch (position) { 
       case 0: 
        return Tab1Fragment.newInstance(); 
       case 1: 
        return Tab2Fragment.newInstance(); 
       default: 
        return Tab3Fragment.newInstance(); 
      } 
    } 

    @Override 
    public int getCount() { 
     // Show 3 total pages. 
     return 3; 
    } 

    @Override 
    public CharSequence getPageTitle(int position) { 
     switch (position) { 
      case 0: 
       return "Tab 1"; 
      case 1: 
       return "Tab 2"; 
      case 2: 
       return "Tab 3"; 
     } 
     return null; 
    } 
} 
} 

activity_main.xml

<android.support.design.widget.AppBarLayout 
    android:id="@+id/appbar" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:paddingTop="@dimen/appbar_padding_top" 
    android:theme="@style/AppTheme.AppBarOverlay"> 

    <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/AppTheme.PopupOverlay"> 

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

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

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

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

Tab2Fragment- nơi mà tôi muốn tổ SubTab1Fragment một nd SubTab2Fragment

public class Tab2Fragment extends Fragment { 
private static final String ARG_PARAM1 = "param1"; 
private static final String ARG_PARAM2 = "param2"; 


public Tab2Fragment() { 
    // Required empty public constructor 
} 


// TODO: Rename and change types and number of parameters 
public static Tab2Fragment newInstance() { 
    Tab2Fragment fragment = new Tab2Fragment(); 

    return fragment; 
} 

@Override 
public void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
    if (getArguments() != null) { 

    } 
} 

@Override 
public View onCreateView(LayoutInflater inflater, ViewGroup container, 
         Bundle savedInstanceState) { 
    // Inflate the layout for this fragment 
    return inflater.inflate(R.layout.fragment_tab2, container, false); 
} 

} 

fragment_tab2.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" 
tools:context="com.r3dm4n.testprojectapp.Tab2Fragment"> 

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

Trả lời

5

tôi figured this out. Tôi cũng đã đăng một dự án trình diễn trên Github enter image description here

Trong MainActivity bạn cần phải trả lại một Fragment mới cho một trong những bạn muốn "lồng nhau" như thế này:

@Override 
    public Fragment getItem(int position) { 

     switch (position) { 
      case 0: 
       return Tab1Fragment.newInstance(); 
      case 1: 
       return new Tab2Fragment(); 
      default: 
       return Tab3Fragment.newInstance(); 
     } 

Trong đoạn tab2, nơi bạn muốn các mảnh vỡ lồng khác làm cho những thay đổi sau:

public class Tab2Fragment extends Fragment { 

@Override 
public View onCreateView(LayoutInflater inflater, ViewGroup container, 
         Bundle savedInstanceState) { 


    View view = inflater.inflate(R.layout.fragment_tab2, container, false); 
    ViewPager mViewPager = (ViewPager) view.findViewById(R.id.container_main); 
    SectionsPagerAdapter mSectionsPagerAdapter = new SectionsPagerAdapter(getChildFragmentManager()); 
    mViewPager.setAdapter(mSectionsPagerAdapter); 

    return view; 

} 


private class SectionsPagerAdapter extends FragmentPagerAdapter { 

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

    @Override 
    public Fragment getItem(int position) { 
     switch (position) { 
      case 0: 
       return Nest1Fragment.newInstance(1); 
      default: 
       return Nest2Fragment.newInstance(2); 
     } 

    } 

    @Override 
    public int getCount() { 
     // Show 4 total pages. 
     return 2; 
    } 

    @Override 
    public CharSequence getPageTitle(int position) { 

     switch (position) { 
      case 0: 
       return "Nested 1"; 
      default: 
       return "Nested 2"; 
     } 


    } 
} 


} 

fragment_tab2.xml

<android.support.v4.view.ViewPager 
    android:id="@+id/container_main" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    app:layout_behavior="@string/appbar_scrolling_view_behavior" 
    app:layout_scrollFlags="scroll|enterAlways"> 

    <android.support.design.widget.TabLayout 
     android:id="@+id/tabs2" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:background="@color/colorPrimary" /> 
    <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/AppTheme.PopupOverlay"> 
    </android.support.v7.widget.Toolbar> 
</android.support.v4.view.ViewPager> 

+0

@ r3dm4n tôi đã thử mã của bạn, nó không hiển thị các tab lồng nhau. –

+0

Tôi đã đăng một liên kết với một dự án làm việc đầy đủ trên Github. – r3dm4n

+0

@ r3dm4n tôi đã tải xuống từ đó. –

2

Hãy xem câu trả lời này Nó có thể giúp

ViewPager nested in ViewPager

Ngoài ra khi thêm phụ tab Bạn có thể thêm một điều kiện như thế này trong nghe để chuyển sang tab tiếp theo

if(mPager.getCurrentItem() >=2) 
mParentPager.setCurrentItem()=mParentPager.getCurrenItem()+1 

này để chuyển sang tab trước đó

if(mPager.getCurrentItem() ==0) 
mParentPager.setCurrentItem()=mParentPager.getCurrenItem()-1 
+0

Cảm ơn, nhưng tiếc là nó không giúp tôi rất nhiều. – r3dm4n

Các vấn đề liên quan