使用 TabLayout 和 Navigation Drawer 设置 Fragments

Question

我的项目有一个 NavigationDrawer 和一个 TabLayout。我只是想在特定选项卡的特定菜单中设置特定片段。

我的意思是，几乎每个菜单项都有 3 个不同的选项卡（不是特别相同），我想设置一个片段，每个菜单项的每个选项卡都不同。

每个菜单项中的 3 个选项卡相同。

我必须做什么？我想到了 setContentView() 但我无法使其正常工作。

这是我的应用程序的屏幕截图：

Navigation Drawer with all menu items

Sliding Tabs of a menu item

这是我的 MainActivity.java:

public class MainActivity extends AppCompatActivity
    implements NavigationView.OnNavigationItemSelectedListener {

/**
 * ATTENTION: This was auto-generated to implement the App Indexing API.
 * See https://g.co/AppIndexing/AndroidStudio for more information.
 */
private GoogleApiClient client;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);

    // Get the ViewPager and set it's PagerAdapter so that it can display items
    ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
    viewPager.setAdapter(new SampleFragmentPagerAdapter(getSupportFragmentManager(),
            MainActivity.this));

    // Give the TabLayout the ViewPager
    TabLayout tabLayout = (TabLayout) findViewById(R.id.sliding_tabs);
    tabLayout.setupWithViewPager(viewPager);

    findViewById(R.id.viewpager).setVisibility(View.GONE);
    findViewById(R.id.sliding_tabs).setVisibility(View.GONE);


    FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
    fab.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            Snackbar.make(view, "Pourquoi tu touches à ce bouton ?", Snackbar.LENGTH_SHORT)
                    .setAction("Action", null).show();
        }
    });

    /*
        Début Drawer Menu
    */
    DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
    ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
            this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
    drawer.setDrawerListener(toggle);
    toggle.syncState();

    NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
    navigationView.setNavigationItemSelectedListener(this);
    // ATTENTION: This was auto-generated to implement the App Indexing API.
    // See https://g.co/AppIndexing/AndroidStudio for more information.
    client = new GoogleApiClient.Builder(this).addApi(AppIndex.API).build();
    /*
        Fin Drawer Menu
    */
}

@Override
public void onBackPressed() {
    DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
    if (drawer.isDrawerOpen(GravityCompat.START)) {
        drawer.closeDrawer(GravityCompat.START);
    } else {
        super.onBackPressed();
    }
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.main, menu);
    return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    // Handle action bar item clicks here. The action bar will
    // automatically handle clicks on the Home/Up button, so long
    // as you specify a parent activity in AndroidManifest.xml.
    int id = item.getItemId();

    //noinspection SimplifiableIfStatement
    if (id == R.id.action_settings) {
        return true;
    }

    return super.onOptionsItemSelected(item);
}

@SuppressWarnings("StatementWithEmptyBody")
@Override
public boolean onNavigationItemSelected(MenuItem item) {
    // Handle navigation view item clicks here.
    int id = item.getItemId();


    if (id == R.id.content_main) {
        findViewById(R.id.viewpager).setVisibility(View.GONE);
        findViewById(R.id.sliding_tabs).setVisibility(View.GONE);
    } else if (id == R.id.nav_equations) {
        findViewById(R.id.viewpager).setVisibility(View.VISIBLE);
        findViewById(R.id.sliding_tabs).setVisibility(View.VISIBLE);
    } else if (id == R.id.nav_lois) {
        findViewById(R.id.viewpager).setVisibility(View.VISIBLE);
        findViewById(R.id.sliding_tabs).setVisibility(View.VISIBLE);
    } else if (id == R.id.nav_stats) {
        findViewById(R.id.viewpager).setVisibility(View.VISIBLE);
        findViewById(R.id.sliding_tabs).setVisibility(View.VISIBLE);
    } else if (id == R.id.nav_tests) {
        findViewById(R.id.viewpager).setVisibility(View.VISIBLE);
        findViewById(R.id.sliding_tabs).setVisibility(View.VISIBLE);
    } else if (id == R.id.nav_partager) {

    } else if (id == R.id.nav_parametres) {

    }

    DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
    drawer.closeDrawer(GravityCompat.START);
    return true;
}

@Override
public void onStart() {
    super.onStart();

    // ATTENTION: This was auto-generated to implement the App Indexing API.
    // See https://g.co/AppIndexing/AndroidStudio for more information.
    client.connect();
    Action viewAction = Action.newAction(
            Action.TYPE_VIEW, // TODO: choose an action type.
            "Main Page", // TODO: Define a title for the content shown.
            // TODO: If you have web page content that matches this app activity's content,
            // make sure this auto-generated web page URL is correct.
            // Otherwise, set the URL to null.
            Uri.parse("http://host/path"),
            // TODO: Make sure this auto-generated app deep link URI is correct.
            Uri.parse("android-app://com.example.slabre.mathix/http/host/path")
    );
    AppIndex.AppIndexApi.start(client, viewAction);
}

@Override
public void onStop() {
    super.onStop();

    // ATTENTION: This was auto-generated to implement the App Indexing API.
    // See https://g.co/AppIndexing/AndroidStudio for more information.
    Action viewAction = Action.newAction(
            Action.TYPE_VIEW, // TODO: choose an action type.
            "Main Page", // TODO: Define a title for the content shown.
            // TODO: If you have web page content that matches this app activity's content,
            // make sure this auto-generated web page URL is correct.
            // Otherwise, set the URL to null.
            Uri.parse("http://host/path"),
            // TODO: Make sure this auto-generated app deep link URI is correct.
            Uri.parse("android-app://com.example.slabre.mathix/http/host/path")
    );
    AppIndex.AppIndexApi.end(client, viewAction);
    client.disconnect();
} }

这是 SampleFragmentPagerAdapter.java，用于管理片段，但仅在每个选项卡上：

public class SampleFragmentPagerAdapter extends FragmentPagerAdapter {
    final int PAGE_COUNT = 3;
    private String tabTitles[] = new String[] { "Calcul", "Résultat", "Infos" };
    private Context context;

    public SampleFragmentPagerAdapter(FragmentManager fm, Context context) {
        super(fm);
        this.context = context;
    }

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

    @Override
    public Fragment getItem(int position) {
        return PageFragment.newInstance(position);
    }

    @Override
    public CharSequence getPageTitle(int position) {
        // Generate title based on item position
        return tabTitles[position];
    }
}

所以 PageFragment.java :

public class PageFragment extends Fragment{
    public static final String ARG_PAGE = "ARG_PAGE";

    private int mPage;

    public static PageFragment newInstance(int page) {
        Bundle args = new Bundle();
        args.putInt(ARG_PAGE, page);
        PageFragment fragment = new PageFragment();
        fragment.setArguments(args);
        return fragment;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mPage = getArguments().getInt(ARG_PAGE);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_page, container, false);
        TextView textView = (TextView) view;
        textView.setText("Fragment #" + mPage);
        return view;
    }
}

最后这是 activity_main.xml 包含的 app_bar_main.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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.example.slabre.mathix.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        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:popupTheme="@style/AppTheme.PopupOverlay" />

        <android.support.design.widget.TabLayout
            android:id="@+id/sliding_tabs"
            style="@style/MyCustomTabLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabMode="scrollable" />

        <android.support.v4.view.ViewPager
            android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="0px"
            android:layout_weight="1"
            android:background="@android:color/white" />

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


    <include layout="@layout/content_main" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        android:src="@drawable/ic_add_black_24dp" />

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

我真的不知道你是否需要更多文件，如果你想要更多，请问我。

Answer 1

如果我对问题的理解正确，您只需在 ViewPager 适配器中实现 getItem(int position) 以针对适配器中每个可能的位置 return 不同的片段。目前它只有 returns 1 种类型的 Fragment，但将位置作为参数传递，因此所有菜单项都显示 "Fragment #X"。

您可以做的第一步是创建具有不同布局的不同 Fragment classes 和 return getItem 方法中的那些。

例如，复制 PageFragment 的整个 class 并创建一个 PageTwoFragment class。然后在 PagerAdapter class 中，你可以做类似

的事情

@Override
public int getCount() {
    return PAGE_COUNT; // TODO: Change how many pages 
}

@Override
public Fragment getItem(int position) {
    if (position == 1) { 
        return new PageTwoFragment(); // TODO: Implement 
    } else { 
        return PageFragment.newInstance(position);
    }
    // TODO: Return other Fragments for other positions 
}

下一步是为 NavigationView 中的每个菜单项创建新的 ViewPager Adapter classes 并在 onNavigationItemSelected 方法中重置 ViewPager 的适配器，就像这样

if (id == R.id.nav_equations) {
    ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
    // TODO: Implement EquationsFragmentPagerAdapter 
    viewPager.setAdapter(new EquationsFragmentPagerAdapter(getSupportFragmentManager(), MainActivity.this));

    TabLayout tabLayout = (TabLayout) findViewById(R.id.sliding_tabs);
    tabLayout.setupWithViewPager(viewPager);
}

注意：如果您为 ViewPager 和 TabLayout 创建字段变量，您的重复代码会更少

这应该会让您获得不同数量的选项卡和各种 Fragments，以便为每个菜单项滑动浏览。

使用 TabLayout 和 Navigation Drawer 设置 Fragments

Set Fragments with TabLayout and Navigation Drawer

android

android-fragments

android-studio

android-tablayout