Tab sliding label, comprehensive ViewPager + Fragment + custom Tab + ActionBar content

Tab sliding label, comprehensive ViewPager + Fragment + custom Tab + ActionBar content
1,

The second menu, TAB1, TAB2, and TAB3, is an online example. The first menu is changed based on it.

2. Menu

Menus are implemented in two ways: Layout files and LinearLayout, a custom component. You only need to input the menu name for customization. You need to listen to the event when switching. The following is a viewpager + fragment implementation. When sliding, the selected tab item is changed.

The bottom line of the custom tab uses the TranslateAnimation animation to implement scrolling. The layout file adopts the viewpager method onPageScrolled and onPageScrollStateChanged.

2.1 customize LinearLayout

Package com. example. actionbar; import java. util. list; import android. annotation. suppressLint; import android. content. context; import android. graphics. color; import android. util. attributeSet; import android. util. displayMetrics; import android. view. gravity; import android. view. view; import android. view. animation. accelerateInterpolator; import android. view. animation. animation; import android. view. animation. animation. animationListener; import android. view. animation. translateAnimation; import android. widget. linearLayout; import android. widget. textView; public class TabView extends LinearLayout {private int screenWidth; private String [] tabNames; private int fontSize; private TextView [] mTextViews; private int lineHight; private View sliderLine; private int tabWidth; private int selectedPage; public TabView (Context context) {super (context); init (context);} public TabView (Context context, String [] tabNames, DisplayMetrics displayMetrics, int fontSize) {super (context); this. tabNames = tabNames; screenWidth = displayMetrics. widthPixels; this. fontSize = fontSize; init (context);} public TabView (Context context, List
 
  
Names, DisplayMetrics displayMetrics, int fontSize) {super (context); if (names! = Null) {tabNames = new String [names. size ()]; for (int I = 0; I <tabNames. length; I ++) {this. tabNames [I] = names. get (I) ;}} screenWidth = displayMetrics. widthPixels; this. fontSize = fontSize; init (context);} public TabView (Context context, AttributeSet attrs) {super (context, attrs); init (context) ;}@ SuppressLint ("NewApi ") public TabView (Context context, AttributeSet attrs, int defStyle) {su Per (context, attrs, defStyle); init (context);} private void init (Context context) {if (tabNames = null | tabNames. length = 0) {return;} lineHight = (int) getResources (). getDimension (R. dimen. cursor_height); tabWidth = screenWidth/tabNames. length; mTextViews = new TextView [tabNames. length]; setOrientation (LinearLayout. VERTICAL); LinearLayout. layoutParams layoutParams = new LinearLayout. layout Params (new LayoutParams (screenWidth/tabNames. length, LayoutParams. MATCH_PARENT); LinearLayout linearLayout = new LinearLayout (context); int height = (int) getResources (). getDimension (R. dimen. tab_height); linearLayout. setLayoutParams (new LayoutParams (LayoutParams. MATCH_PARENT, height); linearLayout. setOrientation (LinearLayout. HORIZONTAL); for (int I = 0; I <tabNames. length; I ++) {TextView tex TView = new TextView (context); textView. setText (tabNames [I] + ""); textView. setLayoutParams (layoutParams); textView. setTextSize (fontSize); textView. setTextColor (Color. BLACK); textView. setGravity (Gravity. CENTER); mTextViews [I] = textView; final int pos = I; textView. setOnClickListener (new OnClickListener () {@ Override public void onClick (View v) {if (selectedPage! = Pos) {isHidden (pos);} if (tabViewListener! = Null) {tabViewListener. currentPos (pos) ;}}); linearLayout. addView (textView);} addView (linearLayout); if (tabNames. length> 1) {LinearLayout. layoutParams lineLayoutParams = new LinearLayout. layoutParams (tabWidth, lineHight); TextView textView = new TextView (context); textView. setBackgroundColor (Color. parseColor ("# FA8653"); textView. setLayoutParams (lineLayoutParams); sliderLine = textView; addView (textView);} isHidden (0);} private TabViewListener tabViewListener; public void setTabViewListener (TabViewListener linListener) {this. tabViewListener = linListener;} public TabViewListener getTabViewListener () {return tabViewListener;} public interface TabViewListener {public void currentPos (int pos );} /** switch the font color */public void isHidden (int pos) {if (pos> = 0 | pos <tabNames. length) {tabScroll (pos); mTextViews [selectedPage]. setTextColor (Color. BLACK); mTextViews [pos]. setTextColor (Color. parseColor ("# FA8653"); selectedPage = pos ;}}/** scroll animation */private void tabScroll (int index) {if (selectedPage = index) {return;} sliderLine. setTranslationX (0); TranslateAnimation animation = new TranslateAnimation (selectedPage * tabWidth, index * tabWidth, 0, 0); animation. setInterpolator (new AccelerateInterpolator (); animation. setDuration (100); animation. setFillEnabled (true); animation. setFillAfter (true); sliderLine. startAnimation (animation); animation. merge (new AnimationListener () {@ Overridepublic void Merge (Animation animation) {}@ Overridepublic void Merge (Animation animation) {sliderLine. clearAnimation (); sliderLine. setTranslationX (selectedPage * tabWidth );}});}}
 

2.2 Use layout files

Package com. example. actionbar; import java. util. arrayList; import android. app. activity; import android. content. context; import android. support. v4.app. fragment; import android. support. v4.app. fragmentActivity; import android. support. v4.app. fragmentManager; import android. support. v4.app. fragmentPagerAdapter; import android. support. v4.view. viewPager; import android. util. attributeSet; import android. util. displayMetrics; import android. view. layoutInflater; import android. view. view; import android. view. view. onClickListener; import android. view. viewGroup; import android. view. animation. accelerateInterpolator; import android. view. animation. animation; import android. view. animation. animation. animationListener; import android. view. animation. translateAnimation; import android. widget. linearLayout; import android. widget. textView; public class TabFragmentIndicator extends LinearLayout implementsViewPager. listener, OnClickListener {OnTabClickListener onTabClickListener; Context mContext; ViewPager mViewPager; View container; private View slider; private int tabNum; private int selectedPage = 0; private int preSelectedPage = 0; private int scrollState; private final int SCROLL_STATE_PRESS = 1; private final int SCROLL_STATE_UP = 2; private float unitWidth; private float currentPositionPix; private boolean isClick = false; SectionsPagerAdapter mSectionsPagerAdapter; private ArrayList
 
  
> FragmentList = new ArrayList
  
   
> (); Public TabFragmentIndicator (Context context, AttributeSet attrs) {super (context, attrs); mContext = context;} public void setViewPager (ViewPager viewPager) {viewPager. setOffscreenPageLimit (3); mViewPager = viewPager; mViewPager. setOnPageChangeListener (this); mSectionsPagerAdapter = new SectionsPagerAdapter (FragmentActivity) mContext ). getsuppfrfragmentmanager (); mViewPager. setAdapter (mSectionsPagerAdapter);}/*** add fragment ** @ param index * @ param claz */public void addFragment (int index, Class
   Claz) {fragmentList. add (index, claz); if (mSectionsPagerAdapter! = Null) mSectionsPagerAdapter. notifyDataSetChanged ();}/*** set the Tab layout ** @ param layoutId */public void setTabContainerView (int layoutId) {container = LayoutInflater. from (mContext ). inflate (layoutId, null); this. addView (container, 0); int height = (int) getResources (). getDimension (R. dimen. tab_height); ViewGroup. layoutParams params = container. getLayoutParams (); params. height = height; container. setLayoutPar Ams (params); if (container instanceof ViewGroup) {tabNum = (ViewGroup) container ). getChildCount (); for (int I = 0; I <tabNum; I ++) {(ViewGroup) container ). getChildAt (I ). setTag (I); (ViewGroup) container ). getChildAt (I ). setOnClickListener (this) ;}}/ *** set the underline ** @ param layoutId */public void setTabSliderView (int layoutId) {slider = LayoutInflater. from (mContext ). inflate (layoutId, null); this. addView (Slider, 1); setCursorWidth ();} public View getIndicatorView () {return container;} public class SectionsPagerAdapter extends FragmentPagerAdapter {public SectionsPagerAdapter (FragmentManager fm) {super (fm );} @ Overridepublic Fragment getItem (int index) {return Fragment. instantiate (mContext, fragmentList. get (index ). getName (), null) ;}@ Overridepublic int getCount () {return fragmentList. size () ;}@ Overridepu Blic void onPageSelected (int position) {(TextView) (ViewGroup) container ). getChildAt (selectedPage )). setTextColor (this. getResources (). getColor (android. r. color. black); (TextView) (ViewGroup) container ). getChildAt (position )). setTextColor (this. getResources (). getColor (R. color. orange); selectedPage = position ;}@ Overridepublic void onPageScrolled (int position, float positionOffset, int positionOffsetP Ixels) {// if (! IsClick & positionOffsetPixels! = 0) {if (scrollState = SCROLL_STATE_PRESS) {// if (selectedPage = position) for the status pressed by the finger {// indicates to pull to the left, and the corresponding tab goes to the right slider. setTranslationX (currentPositionPix + positionOffsetPixels/tabNum);} else {// indicates pulling slider to the right. setTranslationX (currentPositionPix-(unitWidth-positionOffsetPixels/tabNum);} else if (scrollState = SCROLL_STATE_UP) {// The System status when the finger is lifted. out. println ("preSelectedPage ---" + preSelectedPage + "p Osition --- "+ position +" offset "+ positionOffsetPixels); if (preSelectedPage = position) {// pull slider to the left. setTranslationX (currentPositionPix + positionOffsetPixels/tabNum);} else {// indicates pulling slider to the right. setTranslationX (currentPositionPix-(unitWidth-positionOffsetPixels/tabNum) ;}}// the state parameter has three States (0, 1, 2 ). State // = 1, the time is sliding, and the time of state = 2 indicates that the sliding is completed, and the time of state = 0 indicates that nothing is done. @ Overridepublic void onPageScrollStateChanged (int state) {System. out. println ("onPageScrollStateChanged ------ state" + state); if (! IsClick) {currentPositionPix = selectedPage * unitWidth; scrollState = state; preSelectedPage = selectedPage ;}/ ***** move the underline when you click the tab page */@ Overridepublic void onClick (View v) {final int index = (Integer) v. getTag (); onTabClickListener. onTabClick (v); if (selectedPage = index) {return;} isClick = true; slider. setTranslationX (0); TranslateAnimation animation = new TranslateAnimation (selectedPage * unitWidth, index * unitWidth, 0, 0); animation. setInterpolator (new AccelerateInterpolator (); animation. setDuration (100); animation. setFillEnabled (true); animation. setFillAfter (true); slider. startAnimation (animation); animation. setAnimationListener (new AnimationListener () {@ Overridepublic void onAnimationStart (Animation animation) {mViewPager. setCurrentItem (index, true) ;}@ Overridepublic void onAnimationRepeat (Animation animation) {}@ Overridepublic void onAnimationEnd (Animation animation) {slider. clearAnimation (); slider. setTranslationX (selectedPage * unitWidth); isClick = false ;}});}/** set the width of the cursor and obtain the float length of the moving unit **/private void setCursorWidth () {int cursorWidth = get1_wwidth ()/tabNum; unitWidth = (float) get1_wwidth ()/tabNum; int cursorHeight = (int) getResources (). getDimension (R. dimen. cursor_height); ViewGroup. layoutParams params = slider. getLayoutParams (); params. height = cursorHeight; params. width = cursorWidth; slider. setLayoutParams (params);}/** get screen width **/private int get1_wwidth () {DisplayMetrics dm = new DisplayMetrics (); (Activity) mContext ). getWindowManager (). getdefadisplay display (). getMetrics (dm); return dm. widthPixels;} public void setOnTabClickListener (OnTabClickListener onTabClickListener) {this. onTabClickListener = onTabClickListener;} public interface OnTabClickListener {public void onTabClick (View v );}}
  
 

3. Test Call

Public class HomeActivity extends FragmentActivity extends, extends {private ViewPager mViewPager; private audience member; private View categoryTab; private CategoryWindow categoryWindow; private SettingMenuWindow menuWindow; private LinearLayout ll_tab; private TabView tabView; @ Overrideprotected void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); setContentView (R. layout. activity_home); menuWindow = new SettingMenuWindow (this); mViewPager = (ViewPager) findViewById (R. id. viewPager); ll_tab = (LinearLayout) findViewById (R. id. ll_tab); tabFragmentIndicator = (TabFragmentIndicator) findViewById (R. id. tabFragmentIndicator); tabFragmentIndicator. addFragment (0, CountingFragment. class); tabFragmentIndicator. addFragment (1, CountingFragment. class); tabFragmentIndicator. addFragment (2, CountingFragment. class); tabFragmentIndicator. setTabContainerView (R. layout. layout_home_tabindicator); tabFragmentIndicator. setTabSliderView (R. layout. layout_home_tab_slider); tabFragmentIndicator. setOnTabClickListener (this); tabFragmentIndicator. setViewPager (mViewPager); categoryWindow = new CategoryWindow (this, this); DisplayMetrics dm = new DisplayMetrics (); getWindowManager (). getdefadisplay display (). getMetrics (dm); tabView = new TabView (this, new String [] {"menu", "found", "set"}, dm, 20); ll_tab.addView (tabView ); tabView. setTabViewListener (new TabViewListener () {@ Overridepublic void currentPos (int pos) {tabView. isHidden (pos) ;}}) ;}@ Overridepublic boolean onCreateOptionsMenu (Menu menu) {getMenuInflater (). inflate (R. menu. main, menu); return true;} public boolean onOptionsItemSelected (MenuItem item) {switch (item. getItemId () {case R. id. menu_more: menuWindow. showAsDropDown (findViewById (R. id. anchorView), 1800,-25); break;} return super. onOptionsItemSelected (item) ;}@ Overridepublic void onTabClick (View v) {int pos = (Integer) v. getTag (); if (pos = 0) {categoryWindow. showAsDropDown (tabFragmentIndicator,-20, 0);} tabView. getTabViewListener (). currentPos (pos) ;}@ Overridepublic void onCategorySelected (String name, String id) {(TextView) categoryTab ). setText (name); categoryWindow. dismiss ();}}

Source code download