Skip to content

Whatsapp come la barra degli strumenti che crolla

Questo team specializzato dopo alcuni giorni di ricerca e raccolta dati, abbiamo ottenuto la soluzione, speriamo che possa esserti utile nel tuo lavoro.

Soluzione:

Per ottenere questa funzionalità non è necessario un layout CollapsingToolbarLayout, ma è sufficiente collassare la barra degli strumenti impostata come ActionBar.

Ecco un esempio di codice che utilizza una barra degli strumenti per l'ActionBar che collassa e un TabLayout con un ViewPager.

Assicurarsi innanzitutto che lo stile utilizzato per MainActivity sia uno che non abbia una barra d'azione, ad esempio:


MainActivity.java che ha il FragmentPagerAdapter e imposta le schede:

public class MainActivity extends AppCompatActivity {

    @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);
        PagerAdapter pagerAdapter =
                new PagerAdapter(getSupportFragmentManager(), MainActivity.this);
        viewPager.setAdapter(pagerAdapter);

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

        // Iterate over all tabs and set the custom view
        for (int i = 0; i < tabLayout.getTabCount(); i++) {
            TabLayout.Tab tab = tabLayout.getTabAt(i);
            tab.setCustomView(pagerAdapter.getTabView(i));
        }

    }

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

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        int id = item.getItemId();

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

        return super.onOptionsItemSelected(item);
    }

    class PagerAdapter extends FragmentPagerAdapter {

        String tabTitles[] = new String[] { "Tab One", "Tab Two", "Tab Three" };
        Context context;

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

        @Override
        public int getCount() {
            return tabTitles.length;
        }

        @Override
        public Fragment getItem(int position) {

            switch (position) {
                case 0:
                    return new BlankFragment();
                case 1:
                    return new BlankFragment();
                case 2:
                    return new BlankFragment();
            }

            return null;
        }

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

        public View getTabView(int position) {
            View tab = LayoutInflater.from(MainActivity.this).inflate(R.layout.custom_tab, null);
            TextView tv = (TextView) tab.findViewById(R.id.custom_text);
            tv.setText(tabTitles[position]);
            return tab;
        }

    }
}

attività_principale.xml

Le parti importanti:

  • Utilizzare un layout coordinatore
  • Utilizzare app:layout_scrollFlags="scroll|enterAlways|snap" nelle proprietà della barra degli strumenti
    proprietà
  • Utilizzare app:layout_behavior="@string/appbar_scrolling_view_behavior" nelle
    le proprietà del ViewPager

Ecco il attività_principale.xml file:



    
    

    

    

    


tabella_personalizzata.xml:




    

BlankFragment.java Questo aggiunge semplicemente un numero sufficiente di elementi per farli scorrere:

import android.support.v4.app.Fragment;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;;

public class BlankFragment extends Fragment {

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

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

    }

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

        RecyclerView rv = (RecyclerView) rootView.findViewById(R.id.rv_recycler_view);
        rv.setHasFixedSize(true);
        MyAdapter adapter = new MyAdapter(new String[]{"test one", "test two", "test three", "test four", "test five" , "test six" , "test seven", "test eight" , "test nine"});
        rv.setAdapter(adapter);

        LinearLayoutManager llm = new LinearLayoutManager(getActivity());
        rv.setLayoutManager(llm);

        return rootView;
    }

}

fragment_blank.xml è importante usare una RecyclerView, o qualsiasi altra vista che supporti lo scorrimento annidato, come ad esempio una vista NestedScrollView

(nota a margine: si può chiamare setNestedScrollingEnabled(true) a partire da api-21, per farlo funzionare con una ListView):




    
    

    
    

MyAdapter.java l'adattatore RecyclerView:

import android.support.v7.widget.CardView;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class MyAdapter extends RecyclerView.Adapter {
    private String[] mDataset;

    // Provide a reference to the views for each data item
    // Complex data items may need more than one view per item, and
    // you provide access to all the views for a data item in a view holder
    public static class MyViewHolder extends RecyclerView.ViewHolder {
        public CardView mCardView;
        public TextView mTextView;
        public MyViewHolder(View v) {
            super(v);

            mCardView = (CardView) v.findViewById(R.id.card_view);
            mTextView = (TextView) v.findViewById(R.id.tv_text);
        }
    }

    // Provide a suitable constructor (depends on the kind of dataset)
    public MyAdapter(String[] myDataset) {
        mDataset = myDataset;
    }

    // Create new views (invoked by the layout manager)
    @Override
    public MyAdapter.MyViewHolder onCreateViewHolder(ViewGroup parent,
                                                     int viewType) {
        // create a new view
        View v = LayoutInflater.from(parent.getContext())
                .inflate(R.layout.card_item, parent, false);
        // set the view's size, margins, paddings and layout parameters
        MyViewHolder vh = new MyViewHolder(v);
        return vh;
    }

    @Override
    public void onBindViewHolder(MyViewHolder holder, int position) {
        holder.mTextView.setText(mDataset[position]);
    }

    @Override
    public int getItemCount() {
        return mDataset.length;
    }
}

card_item.xml l'immagine del cerchio e la stringa "bla bla bla" sono entrambi contenuti statici, solo il file tv_text TextView viene aggiornata dall'origine dati per questo semplice esempio:




    

        

        
        

        
        

            
            

        
    


build.gradle dipendenze:

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:23.0.1'
    compile 'com.android.support:design:23.0.1'
    compile 'com.android.support:cardview-v7:23.0.1'
    compile 'com.android.support:recyclerview-v7:23.0.1'
}

Risultato:

enter image description here

Questa libreria vi aiuterà

Si tratta di una libreria molto semplice per Android che consente di attaccare un'intestazione a una vista scrollabile e di applicarvi facilmente un'animazione

EDIT:
Per utilizzare la libreria StikkyHeader, sono sufficienti 3 righe:

StikkyHeaderBuilder.stickTo(mListView)
.setHeader(R.id.header, containerLayout)
.minHeightHeader(250)
.build();

Esempio:

public class IconAnimator extends HeaderStikkyAnimator {

@Override
public AnimatorBuilder getAnimatorBuilder() {

    View viewToAnimate = getHeader().findViewById(R.id.icon);
    Point point = new Point(50,100) // translate to the point with coordinate (50,100);
    float scaleX = 0.5f //scale to the 50%
    float scaleY = 0.5f //scale to the 50%
    float fade = 0.2f // 20% fade

    AnimatorBuilder animatorBuilder = AnimatorBuilder.create()
        .applyScale(viewToAnimate, scaleX, scaleY)
        .applyTranslation(viewToAnimate, point)
        .applyFade(viewToAnimate, fade);

    return animatorBuilder;
}
}

e poi impostare l'animatore su StikkyHeader:

 StikkyHeaderBuilder.stickTo(mListView)
.setHeader(R.id.header, containerLayout)
.minHeightHeader(250)
.animator(new IconAnimator())
.build();

Ok, quindi per passare l'evento di scorrimento dell'elemento listview/recyclerview all'elemento appbarlayoutè necessario inserire il seguente flag nel file framelayout/relativelayout/linearlayout che contiene la vista a scorrimento, cioè listview/recyclerview :

app:layout_behavior="@string/appbar_scrolling_view_behavior"

per esempio, nel vostro caso dovrebbe essere come:


  
                         
            
            
                ..........
            
        
    

    

     // Frame containing your listview/recyclerview/ scrollingview

    


recensioni e valutazioni

Se sei soddisfatto di quanto sopra, puoi lasciare una cronaca su cosa pensi di questa cronaca.



Utilizzate il nostro motore di ricerca

Ricerca
Generic filters

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.