2017-10-12 4 views
1

J'ai l'application avec 5 onglets dans TabLayout. J'ai décidé de l'initialiser dans MainActivity. Chaque onglet est un fragment et chacun d'eux a sa propre barre d'outils, j'ai donc décidé d'initialiser les barres d'outils dans chaque fragment séparément. Mais le problème est que mes barres d'outils sont maintenant sous l'en-tête TabLaout. Je veux demander comment il est possible de les déplacer vers le bas ou peut-être que je devrais organiser d'une autre manière?Comment rendre mon en-tête TabLayout sous ToolBar?

MainActivity:

<RelativeLayout 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=".activity.MainActivity"> 

    <android.support.design.widget.TabLayout 
    android:id="@+id/tabs" 
    style="@style/AppTabLayout" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:background="?attr/colorPrimary" 
    android:elevation="4dp" 
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" /> 

    <android.support.v4.view.ViewPager 
    android:id="@+id/viewpager" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:layout_below="@+id/tabs" /> 

</RelativeLayout> 

Exemple de fragment:

<RelativeLayout 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" 
    tools:context=".activity.MainActivity"> 

    <View 
    android:id="@+id/transparent_view" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:alpha="90" 
    android:background="#20000000" 
    android:visibility="gone" /> 

    <android.support.v7.widget.Toolbar 
    android:id="@+id/toolbar_home" 
    android:layout_width="match_parent" 
    android:layout_height="80dp" 
    android:layout_alignParentTop="true" 
    android:background="?attr/colorPrimary" 
    android:elevation="4dp" 
    android:minHeight="?attr/actionBarSize" 
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" 
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light" 
    app:title="Your Wi-Fi is online"> 

    <Button 
     android:id="@+id/btn_pause" 
     android:layout_width="90dp" 
     android:layout_height="36dp" 
     android:layout_margin="17dp" 
     android:layout_gravity="end" 
     android:background="@color/white" 
     android:text="@string/pause" 
     android:textColor="@color/midPurple" 
     android:textSize="14sp" /> 

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

TabLayout inisialization:

private void initUIComponents() { 
    mViewPager = findViewById(R.id.viewpager); 
    mTabLayout = findViewById(R.id.tabs); 
    mTabLayout.setTabGravity(TabLayout.GRAVITY_FILL); 

    mViewPager.setAdapter(new MenuCategoryAdapter(getSupportFragmentManager())); 
    mTabLayout.setupWithViewPager(mViewPager); 

    for (int i = 0; i < mTabLayout.getTabCount(); i++) { 
     mTabLayout.getTabAt(i).setIcon(R.drawable.homeicon); 
    } 
    } 

Exemple d'initialisation de la barre d'outils:

private void initUIComponents(LayoutInflater inflater, @Nullable ViewGroup container) { 
    mRootView = inflater.inflate(R.layout.fragment_home, container, false); 

    mToolbarHome = mRootView.findViewById(R.id.toolbar_home); 
    mBtnPause = mRootView.findViewById(R.id.btn_pause); 

    if (mToolbarHome != null) { 
     ((AppCompatActivity) getActivity()).setSupportActionBar(mToolbarHome); 
    } 

    mBtnPause.setOnClickListener(new OnClickListener() { 
     @Override 
     public void onClick(View view) { 
     pauseWiFi(mToolbarHome, mBtnPause); 
     } 
    }); 
    } 

Comment il ressemble:

screenshot

+1

@NileshRathod Parce que dans chaque onglet ToolBar devrait être différent, avec différents boutons et continuer. Donc, la seule façon de le résoudre, j'ai décidé de construire ToolBar dans chaque fragment XML. – VolodymyrH

Répondre

1

Une façon est que vous définissez la hauteur de votre de ViewPager-math_parent et mettez TabLayout sur votre ViewPager avec 80dp de marge supérieure à réserver de l'espace pour les fragments barre d'outils

<RelativeLayout 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=".activity.MainActivity"> 

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

    <android.support.design.widget.TabLayout 
     android:id="@+id/tabs" 
     style="@style/AppTabLayout" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_marginTop="80dp" 
     android:background="?attr/colorPrimary" 
     android:elevation="4dp" 
     android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" /> 
</RelativeLayout> 

Et dans votre fragment, placez TabLayout sous la barre d'outils pour réserver l'espace de TabLayout et sous celui-ci vous pouvez mettre vos autres vues

<RelativeLayout 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" 
    tools:context=".activity.MainActivity"> 

    <View 
     android:id="@+id/transparent_view" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:alpha="90" 
     android:background="#20000000" 
     android:visibility="gone" /> 

    <android.support.v7.widget.Toolbar 
     android:id="@+id/toolbar_home" 
     android:layout_width="match_parent" 
     android:layout_height="80dp" 
     android:layout_alignParentTop="true" 
     android:background="?attr/colorPrimary" 
     android:elevation="4dp" 
     android:minHeight="?attr/actionBarSize" 
     android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" 
     app:popupTheme="@style/ThemeOverlay.AppCompat.Light" 
     app:title="Your Wi-Fi is online"> 

     <Button 
      android:id="@+id/btn_pause" 
      android:layout_width="90dp" 
      android:layout_height="36dp" 
      android:layout_gravity="end" 
      android:layout_margin="17dp" 
      android:background="@color/white" 
      android:text="@string/pause" 
      android:textColor="@color/midPurple" 
      android:textSize="14sp" /> 

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

    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:layout_below="@+id/toolbar_home" 
     android:orientation="vertical"> 

     <android.support.design.widget.TabLayout 
      android:id="@+id/fake_tabs" 
      style="@style/AppTabLayout" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:background="?attr/colorPrimary" 
      android:elevation="4dp" 
      android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" /> 

     <!-- Your other views --> 
    </LinearLayout> 
</RelativeLayout> 
+0

C'est juste créer vide et (!) ToolBar visible. Mais celui que je dois déplacer est toujours au sommet. – VolodymyrH

+1

Pourquoi vider ?! Je crée la barre d'outils à l'intérieur du fragment, et vous pouvez le concevoir dans chaque fragment – SiSa

+0

Désolé, j'ai mal compris. Cela fonctionne, merci :) – VolodymyrH