web-dev-qa-db-fra.com

Ajout d'onglets coulissants à l'aide de Support Library v7: 21 avec la barre d'outils dans les outils de développement Android pour le projet existant

J'ai déjà lu les informations contenues dans ce lien: Utiliser l'onglet avec la nouvelle barre d'outils (AppCompat v7-21) et fait beaucoup de recherches sur le même sujet.

Mais le problème est que le projet SlidingTabLayout utilise les fichiers de construction et la structure de Gradle. Je veux ajouter la mise en page à l'aide d'Eclipse. Comment puis-je faire cela?

J'ai cependant lancé le projet SlidingTabLayout dans Android Studio. Mais comment puis-je ajouter des onglets à la barre d'outils dans v7: 21?

Remarque: Tout cela doit être fait dans un projet existant, qui a tout configuré et qui me met en garde contre les API obsolètes comme ActionBar.setNavigationMode, etc. dans l'API 21

android-tabsandroid-5.0-lollipopeclipse-adtandroid-toolbar
10
Amit Trivedi

1 . Copiez SlidingTabLayout.Java depuis https://developer.Android.com/samples/SlidingTabsColors/src/com.example.Android.common/view/SlidingTabLayout.html et collez-le dans votre package.

MainActivity.Java

package com.example.mysliding;

import com.example.Android.common.view.SlidingTabLayout;
import com.example.mysliding.SlidingTabsBasicFragment.SamplePagerAdapter;

import Android.support.v4.app.FragmentTransaction;
import Android.support.v4.view.PagerAdapter;
import Android.support.v4.view.ViewPager;
import Android.support.v7.app.ActionBarActivity;
import Android.support.v7.widget.Toolbar;
import Android.os.Bundle;
import Android.util.Log;
import Android.view.Menu;
import Android.view.MenuItem;
import Android.view.View;
import Android.view.ViewGroup;
import Android.widget.TextView;

public class MainActivity extends ActionBarActivity {

static final String LOG_TAG = "SlidingTabsBasicFragment";
private SlidingTabLayout mSlidingTabLayout;
private ViewPager mViewPager;

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

    mViewPager = (ViewPager) findViewById(R.id.viewpager);
    mViewPager.setAdapter(new SamplePagerAdapter());
    mSlidingTabLayout = (SlidingTabLayout) findViewById(R.id.sliding_tabs);
    mSlidingTabLayout.setViewPager(mViewPager);

    /*
     * FragmentTransaction transaction =
     * getSupportFragmentManager().beginTransaction();
     * SlidingTabsBasicFragment fragment = new SlidingTabsBasicFragment();
     * transaction.replace(R.id.sample_content_fragment, fragment);
     * transaction.commit();
     */

}

@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();
    if (id == R.id.action_settings) {
        return true;
    }
    return super.onOptionsItemSelected(item);
}

class SamplePagerAdapter extends PagerAdapter {

    /**
     * @return the number of pages to display
     */
    @Override
    public int getCount() {
        return 5;
    }

    /**
     * @return true if the value returned from
     *         {@link #instantiateItem(ViewGroup, int)} is the same object
     *         as the {@link View} added to the {@link ViewPager}.
     */
    @Override
    public boolean isViewFromObject(View view, Object o) {
        return o == view;
    }

    // BEGIN_INCLUDE (pageradapter_getpagetitle)
    /**
     * Return the title of the item at {@code position}. This is important
     * as what this method returns is what is displayed in the
     * {@link SlidingTabLayout}.
     * <p>
     * Here we construct one using the position value, but for real
     * application the title should refer to the item's contents.
     */
    @Override
    public CharSequence getPageTitle(int position) {
        return "Item " + (position + 1);
    }

    // END_INCLUDE (pageradapter_getpagetitle)

    /**
     * Instantiate the {@link View} which should be displayed at
     * {@code position}. Here we inflate a layout from the apps resources
     * and then change the text view to signify the position.
     */
    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        // Inflate a new layout from our resources

        View view = getLayoutInflater().inflate(R.layout.pager_item,
                container, false);
        // Add the newly created View to the ViewPager
        container.addView(view);

        // Retrieve a TextView from the inflated View, and update it's text
        TextView title = (TextView) view.findViewById(R.id.item_title);
        title.setText(String.valueOf(position + 1));

        Log.i(LOG_TAG, "instantiateItem() [position: " + position + "]");

        // Return the View
        return view;
    }

    /**
     * Destroy the item from the {@link ViewPager}. In our case this is
     * simply removing the {@link View}.
     */
    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView((View) object);
        Log.i(LOG_TAG, "destroyItem() [position: " + position + "]");
    }

}

}

fragment_sample.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:orientation="vertical" >

    <Android.support.v7.widget.Toolbar
        xmlns:app="http://schemas.Android.com/apk/res-auto"
        Android:id="@+id/my_awesome_toolbar"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content" 
        Android:minHeight="?attr/actionBarSize"

        app:theme="@style/ThemeOverlay.AppCompat.ActionBar">

        <LinearLayout
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content" >

            <com.example.Android.common.view.SlidingTabLayout
                Android:id="@+id/sliding_tabs"
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content" />
        </LinearLayout>
    </Android.support.v7.widget.Toolbar>

    <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" />

</LinearLayout>

Pager_item.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
      Android:layout_width="match_parent"
      Android:layout_height="match_parent"
      Android:orientation="vertical"
      Android:gravity="center">

    <TextView
          Android:id="@+id/item_subtitle"
          Android:layout_width="wrap_content"
          Android:layout_height="wrap_content"
          Android:textAppearance="?android:attr/textAppearanceLarge"
          Android:text="Page:"/>

    <TextView
          Android:id="@+id/item_title"
          Android:layout_width="wrap_content"
          Android:layout_height="wrap_content"
          Android:textSize="80sp" />

</LinearLayout>
15
kunal.c

J'ai aussi eu le même problème. Étant donné qu'Android modifie l'utilisation de ActionBar et de Tabs à plusieurs reprises, il est vraiment difficile de savoir quelle est la mise en œuvre la plus appropriée.

J'ai donc suivi l'exemple qui est présenté ici mais j'ai ajouté quelques fonctionnalités supplémentaires. Vous pouvez voir ma version et son utilisation sur ce Gist .

Ce que j'ai ajouté sont;

  • Activer donner des onglets égaux en largeur (s'il y a deux onglets, ils auront la moitié de la barre d'action)
  • Afficher une image au lieu d'un texte ou afficher les deux (avec votre vue personnalisée) du texte et une image dans des onglets

METTRE À JOUR

Il existe une nouvelle présentation appelée Disposition des onglets dans la bibliothèque de prise en charge. Vous pouvez l'utiliser à la place.

Vous pouvez aussi voir une autre réponse ici en dit plus à ce sujet.

3
eluleci

Je viens de trouver cette bibliothèque qui semble être à peu près ce qui est déjà mentionné ici, mais avec moins de levage manuel. Jetez un coup d'oeil à https://github.com/neokree/MaterialTabs .

Pour me brancher sans vergogne, voici un exemple de ce document en action https://play.google.com/store/apps/details?id=com.snilius.fhstats .

La seule chose qui lui manque au moment de l'écrire, c'est que l'indicateur d'onglet glisse entre les onglets lors de la pagination du viewpager, comme c'est le cas sur Google Play.

0
Victor Häggqvist

Ajoutez simplement ViewPager et SlidingTabLayout à votre fichier xml:

    <com.example.SlidingTabLayout
            Android:id="@+id/sliding_tabs"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            />

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

Dans votre code, créez un adaptateur pour votre ViewPager (comme exemple FragmentPagerAdapter) et liez-les à votre ViewPager, après avoir lié le SlidingTabLayout à votre ViewPager:

mViewPager = (ViewPager) findViewById(R.id.pager);
mViewPager.setAdapter(mSectionsPagerAdapter);

final SlidingTabLayout tabLayout = (SlidingTabLayout)findViewById(R.id.sliding_tabs);
tabLayout.setViewPager(mViewPager);
0
MDXDave