Come cambiare il Viewpager scheda di colore in modo dinamico?

Come modificare il colore di Schede come questa? Quando faccio clic/swipe verso il verde o qualsiasi altra scheda, la scheda di colore di che colore appropriato e il resto di altre schede di colore dovrebbe cambiare di colore nero. Come posso fare questo? Im utilizzando il Viewpager.

Ho provato questo codice all’interno di onpagelistener:

  if(position == 0) {
                   viewpager.getChildAt(position).setBackgroundColour(getResources().getcolor(R.color.red);
         }        
  else if(position == 1) { 
                   viewpager.getChildAt(position).setBackgroundColour(getResources().getcolor(R.color.green);
         }

Ma il codice di cui sopra, non ha alcun effetto.

E Im utilizzando questo codice : Android Viewpager tutorial Androidhive

Come cambiare il Viewpager scheda di colore in modo dinamico?



3 Replies
  1. 0

    Non c’è tutorial Styling schede della barra di azione Android. È possibile scegliere il tuo parent theme come Theme.Holo per API>=3, o Theme.AppCompat per la libreria di supporto V7, etc.

    E oltre, per <item name="android:background">, si potrebbe impostare il selettore di creare per la scheda di cambiamento di stato:

    android:background="@drawable/selector_tab"

    Per selector_tab può essere come:

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:color="@color/pressed_color"
           android:state_pressed="true" />
        <item android:color="@color/selected_color"
           android:state_selected="true" /> 
    
        <item android:color="@color/normal_color" />
    </selector>


    [AGGIORNAMENTO]

    Per cambiare il colore della scheda in modo dinamico, suggerisce di utilizzare la visualizzazione personalizzata con scheda:

    //your_custom_tab.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="wrap_content"
      >
    
    
      <TextView
        android:id="@+id/tab_name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:maxLines="1" />
    
    </LinearLayout>
    
    LinearLayout customView = (LinearLayout) getLayoutInflater().inflate(R.layout.your_custom_tab, null);

    poi setCustomeView(customView) quando aggiungi scheda di ActionBar. E nella tua scheda/pagina cambiamento ascoltatore:

    Tab selectedTab = yourActionBar.getSelectedTab();
    View tabView = selectedTab.getCustomView();
    tabView.setBackgroundColor(your_select_color);  


    Per rimuovere eventuali gap attorno scheda causato da una visualizzazione personalizzata, è possibile impostare lo stile scheda:

    <style name="ActionBarTabStyle" parent="@android:style/Widget.AppCompat.Light.ActionBar.TabView">
       <item name="android:paddingLeft">0dp</item>
       <item name="android:paddingRight">0dp</item>
       <item name="android:paddingTop">0dp</item>
       <item name="android:paddingBottom">0dp</item>
    </style>

    e utilizzare il tema genitore di conseguenza.

    Spero che questo aiuto!

    • Voglio cambiare la scheda di colore in modo dinamico. Così, quando faccio clic sulla scheda verde , il verde della scheda di colore verde.
    • puoi provare il mio aggiornamento in risposta
    • Non è possibile risolvere metodo ‘ selectedTab.setBackgroundColor(?)’
    • Basta aggiornare di nuovo.
    • Il colore è cambiato, ma c’è differenza sulla destra, in alto e a sinistra delle schede. La scheda non è in piena larghezza.
    • Questo è facile, basta scheda personalizzata in stile ActionBarTabStyle, look modificato risposta
    • Ora le lacune sono andato, ma la scheda dell’indicatore è anche andato. 🙁
    • si può verificare da rimuovere paddingTop
    • Non funziona. Questo è il mio codice <style name=”Personalizzato.ActionBar.TabView.Vuoto” parent=”@android:stile/Widget.ActionBar.TabView”> <item name=”android:paddingLeft”>0dp</item> <item name=”android:paddingRight”>0dp</item> <item name=”android:background”>#ffffff</item> </stile>
    • Puoi anche provare con tutte le imbottiture 0dp, I media più paddingTop paddingBottom
    • Grazie bro 🙂 la Tua idea mi ha aiutato a risolvere il mio problema. 🙂 Ho deciso di non guardare per l’indicatore. Accetterà la tua risposta.
    • Ho messo insieme customview(null) in Deselezionata. Così, quando la scheda non è selezionata, si tornerà al suo antico colore nero. Quindi solo scheda selezionata cambia il suo colore.
    • Grande, che è intelligente!
    • Ciao ho postato il codice che ho fatto. 🙂

  2. 2

    Finalmente ho risolto. Grazie a @Xcihnegn per la sua idea. Questa è la soluzione:

    /* For setting default selected tab */
    
        actionBar.setSelectedNavigationItem(0);
        actionBar.getTabAt(0).setCustomView(R.layout.fragmnt_red);  
    
        /**
         * on swiping the viewpager make respective tab selected
         * */
        viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
    
            @Override
            public void onPageSelected(int position) {
    
        /*on changing the page make respected tab selected */           
                actionBar.setSelectedNavigationItem(position);
    
                    if(position == 0)
                    {
    
                        actionBar.getSelectedTab().setCustomView(R.layout.fragmnt_red);
    
                    }else if(position == 1)
                    {
                        actionBar.getSelectedTab().setCustomView(R.layout.fragmnt_orange);
    
                    }else if(position == 2)
                    {
                        actionBar.getSelectedTab().setCustomView(R.layout.fragmnt_green);
                    }
    
                }
    
            }
    
            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2) {
            }
    
            @Override
            public void onPageScrollStateChanged(int arg0) {
            }
        });
    }
    
    @Override
    public void onTabSelected(ActionBar.Tab tab, android.support.v4.app.FragmentTransaction fragmentTransaction) {
        viewPager.setCurrentItem(tab.getPosition());
    }

    Quando una scheda viene deselezionata, setCustomView(null) modifiche del layout originale di colore nero. In modo che solo alcune schede cambierà colore. Deselezionando le schede cambierà il suo layout forma originale.

    @Override
    public void onTabUnselected(ActionBar.Tab tab,     android.support.v4.app.FragmentTransaction fragmentTransaction) {
    
            if(tab.getPosition() == 0)
            {
                actionBar.getTabAt(0).setCustomView(null);
    
            }else if(tab.getPosition() == 1)
            {
                actionBar.getTabAt(1).setCustomView(null);
    
            }else if(tab.getPosition() == 2)
            {
                actionBar.getTabAt(2).setCustomView(null);
            }
        } 
    }

    Per rimuovere inutili imbottitura appare quando si imposta la visualizzazione personalizzata dovremmo utilizzare questo codice styles.xml.

    <style name="Custom.ActionBar.TabView.Empty" parent="@android:style/Widget.ActionBar.TabView">
        <item name="android:paddingLeft">0dp</item>
        <item name="android:paddingRight">0dp</item>
        <item name="android:background">#000000</item>
    </style>
    
    <style name="CustomActionbartab" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="actionBarTabStyle">@style/Custom.ActionBar.TabView.Empty</item>
        <item name="android:actionBarTabStyle">@style/Custom.ActionBar.TabView.Empty</item>
    </style>

    Non dimenticare di aggiungere questo codice appena sopra la chiamata a setcontentview nella vostra attività.

    settheme(R.styles.CustomActionbartab);

    Layout personalizzato per le schede.

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:background="@color/red">
    
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:text="RED"
        android:textStyle="bold"
        android:gravity="center"
        android:textColor="#ffffff"/>
    </RelativeLayout>
    • Questo è bello codici, vi do un upvote.
    • Grazie 🙂 Ciao!!!
  3. 0

    Ho avuto un problema simile. Nel mio caso, ho voluto cambiare il colore della barra di azione quando l’utente fa clic su uno dei frammenti della navigazione cassetto.

    Qui è il codice che ho usato per risolvere questo problema.

    Dal momento che non è possibile accedere alla barra delle Azioni da un frammento, è necessario creare nel menu principale. Qui è il metodo che ho usato.

    public void restoreActionBar(int parsedColor) {
            this.parsedColor = parsedColor;
            ActionBar actionBar = getSupportActionBar();
            actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_STANDARD);
            actionBar.setDisplayShowTitleEnabled(true);
            actionBar.setTitle(mTitle);
            actionBar.setBackgroundDrawable(new ColorDrawable(parsedColor));
    
        } 
    
    public boolean onCreateOptionsMenu(Menu menu) {
            if (!mNavigationDrawerFragment.isDrawerOpen()) {
                //Only show items in the action bar relevant to this screen
                //if the drawer is not showing. Otherwise, let the drawer
                //decide what to show in the action bar.
                getMenuInflater().inflate(R.menu.main_activity_trekkly, menu);
                restoreActionBar(parsedColor);
                return true;
            }
            return super.onCreateOptionsMenu(menu);
        }

    Ora nella tua classe che estende frammento:

    public void onAttach(Activity activity) {
                super.onAttach(activity);
    
                ((MainActivityTrekkly)activity).onSectionAttached(4);
                MainActivityTrekkly mA = ((MainActivityTrekkly)getActivity());
    
                mA.restoreActionBar(Color.parseColor("#028482"));
            }

    Ho ottenuto questo lavoro con la Navigazione cassetto, in modo che si potrebbe avere per adattare questo codice.

    Fatto questo aiuto?

    • Scusate, non è questo quello che volevo. Voglio cambiare la scheda(rosso,verde,arancio) colore non actionbar del colore.
    • Lo so, ho pensato che potrebbe aiutare anche se vedendo come sia la navigazione cassetto e schede di utilizzare frammenti.
    • Voglio solo cambiare il colore delle schede, quando clicco su di esse.

Lascia un commento