Bottom bar tab Toggle fragment, with corner indicator display effect

Similar to the mobile phone version of the bottom bar tab effect has a lot of implementation methods, such as tabactivity, custom radiogroup and so on. Because Tabactivity has been deprecated in the high version and activity is more heavyweight, tabactivity is generally not used. Here's a way to share a custom bottom tab that I've written, incidentally, with the bottom label's corner display. The effect is as follows:

About the demo needs to explain several points:

1. The demo does not fit the dimensions, and it is necessary to adjust the size-related code in the code to run on different models of the phone.

2. The angle mark effect is only a demonstration effect, logic may not be reasonable, specific display or change, hidden logic can be set in the actual application.

The following is a description from the code perspective:

First look at the main Fragmentindicator class, this class inherits from LinearLayout implements the Onclicklistener interface:

/** * @Instruction: * @FragmentIndicator. java * @com. example.tabindicator.views * @Tab &indicator * @author Donz 2015 August 26 Morning 11:40:46 * @qq 457901706 */public class Fragmentindicator extends LinearLayout implements Onclicklistener {Priva te int mdefaultindicator = 0;private static int mcurindicator;private Context context;private static view[] Mindicators;pr Ivate onindicatelistener monindicatelistener;public static int[] imageresources = new Int[]{r.drawable.ic_launcher, R.drawable.ic_launcher,r.drawable.ic_launcher,r.drawable.ic_launcher}; public static string[] nameresources = new string[]{"Fragment_a", "Fragment_b", "Fragment_c", "Fragment_d"};p rivate Fragmentindicator (Context context) {super (context); this.context = context;} Public Fragmentindicator (context context, AttributeSet Attrs) {Super (context, attrs); this.context = context; Mcurindicator = Mdefaultindicator;setorientation (linearlayout.horizontal); SetBackgroundColor (0xfff3f6ed); Init ( imageresources,nameresources);}

The overridden construction method completes a series of initialization operations, where the core operation is Init (imageresources,nameresources) method, the initialization of the icon and display text for the bottom tab bar to be displayed is done in this method. To see what this method has done:

private void Init (int[] imageresources, string[] nameresources) {int length = 0;length = Math.max (Imageresources.length, n Ameresources.length); mindicators = new View[length];for (int i = 0;i<length;i++) {Mindicators[i] = CreateIndicator ( Imageresources[i], Nameresources[i], ThemeColor, "Tag_icon_" +i, "Tag_text_" +i); Mindicators[i].settag (i); Mindicators[i].setonclicklistener (this); AddView (Mindicators[i]);}

Very simple, inFragmentindicator has a view array that stores each label and corresponding text at the bottom of the list calledMindicators, here is the initialization of mindicators for its assignment, from the above code can be seen also involves a core method createindicator (int iconresid, String name, int Stringcolor, String Icontag, String TextTag), this method is really to initialize each bottom bar label and text method, to see his internal implementation:

Private View createindicator (int iconresid, string stringresid, int stringcolor, string icontag, String texttag) {Linearla yout view = new LinearLayout (GetContext ()) view.setpadding (0, 0, N); view.setorientation (linearlayout.vertical); View.setlayoutparams (New Linearlayout.layoutparams (Layoutparams.match_parent, layoutparams.match_parent, 1)); View.setgravity (gravity.center); ImageView IconView = new ImageView (GetContext ()); Iconview.settag (Icontag); Linearlayout.layoutparams iconparams = new Linearlayout.layoutparams (layoutparams.wrap_content, LayoutParams.WRAP_ CONTENT); Iconview.setcolorfilter (ThemeColor); Iconview.setlayoutparams (iconparams); Iconview.setimageresource ( ICONRESID); TextView TextView = new TextView (GetContext ()); Textview.setfocusable (true); textview.setgravity (Gravity.center); Textview.settag (TextTag); Textview.setlayoutparams (New Linearlayout.layoutparams (Layoutparams.wrap_content, layoutparams.wrap_content)); Textview.settextcolor (Stringcolor); Textview.settextsize (TypedValue.COMPLEX_UNIT_SP, Textview.settext (STRINGRESID); View.addview (IconView); View.addview (TextView); return view;} 

At a glance, each of the bottom bar labels is actually a linear layout linearlayout, and then constructs ImageView and TextView and a series of attribute information based on the icons and text passed in, and finally through the AddView (view view) method to add them to this linear layout and return to this linear layout. This goes back to the init () method, where the loop in init () calls the Fragmentindicator AddView method to add the linear layout of each bottom tab to the outermost linear layout of the bottom bar, which is the prototype of the bottom bar.

But here is not finished, although the view effect appears but try to click on the bottom of the page sign is not responding, because we have not yet tied to the point-click event, the following code:

Public interface Onindicatelistener {public void onindicate (View v, int which);} public void Setonindicatelistener (Onindicatelistener listener) {Monindicatelistener = listener;} @Overridepublic void OnClick (View v) {if (Monindicatelistener! = null) {int tag = (Integer) v.gettag (); if (mcurindicator!=t AG) {monindicatelistener.onindicate (V, tag); Setindicator (tag);//Demo effect if (Null!=badgeview) Badgeview.toggle ();}}}

Since Fragmentindicator implements the Onclicklistner, the OnClick method needs to be implemented, and in this click we need to invoke a custom interface callback method to implement our business logic and view effects. Where business logic is determined bymonindicatelistener.onindicate (V, tag), toggle the label View effect (font bold, icon color aggravating) is implemented by Setindicator (int index). Look at the logic of Setindicator (int index):

public static void Setindicator (int which) {//Clear previous status. ImageView Previcon; TextView Prevtext;previcon = (ImageView) mindicators[mcurindicator].findviewwithtag ("Tag_icon_" +mcurindicator); Previcon.setimageresource (Fragmentindicator.imageresources[mcurindicator]);p revicon.setcolorfilter (ThemeColor) ;p Revtext = (TextView) mindicators[mcurindicator].findviewwithtag ("Tag_text_" +mcurindicator); Prevtext.settextcolor (ThemeColor);        Textpaint tpaint0 = Prevtext.getpaint (); Tpaint0. Setfakeboldtext (false);//update current status. ImageView Curricon; TextView Currtext;curricon = (ImageView) mindicators[which].findviewwithtag ("Tag_icon_" +which); Curricon.setimageresource (Fragmentindicator.imageresources[which]); Curricon.setcolorfilter (ThemeColorDarker); Currtext = (TextView) mindicators[which].findviewwithtag ("Tag_text_" +which); Currtext.settextcolor ( Themecolordarker);        Textpaint tpaint = Currtext.getpaint (); Tpaint.setfakeboldtext (true); mcurindicator = which;}

This method restores the icon and text effect of the previous bottom bar tab, reverts to the default effect, renders a selected effect on the icon and text effect of the current tab switch to, and signs the currently selected pagethe Mcurindicator is re-assigned. The Onindicatelistener interface method is specifically implemented in Mainactivity:

public class Mainactivity extends Fragmentactivity {private fragment[] mfragments;private fragmentindicator mindicator; @Overrideprotected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate); Setcontentview ( R.layout.activity_main); setfragmentindicator (0); Mindicator.showbadge (2, "4");} private void Setfragmentindicator (int whichisdefault) {final Fragmentmanager manager = Getsupportfragmentmanager (); mfragments = new Fragment[]{manager.findfragmentbyid (r.id.fragment_a), Manager.findfragmentbyid (R.id.fragment_B), Manager.findfragmentbyid (R.id.fragment_c), Manager.findfragmentbyid (r.id.fragment_d)};for (int i = 0;i< mfragments.length;i++) {fragmenttransaction transaction = Manager.begintransaction (); Transaction.hide (mFragments[i ]). commit ();} Manager.begintransaction (). Show (Mfragments[0]). commit (); mindicator = (fragmentindicator) Findviewbyid ( R.id.indicator_main); Fragmentindicator.setindicator (Whichisdefault);//Initialize Mindicator.setonindicatelistener (new OnIndicateListener (){@Overridepublic void onindicate (View v, int which) {for (int i = 0;i<mfragments.length;i++) {fragmenttransaction trans Action = Getsupportfragmentmanager (). BeginTransaction (); Transaction.hide (Mfragments[i]). commit ();} Manager.begintransaction (). Show (Mfragments[which]). commit ();}});

The business logic here is simply to switch fragment,mainactivity to initialize four fragment, the main logic is the corresponding bottom tab bar Click event and the four fragment to switch. The red corner display comes from GitHub's open source code, but the logic is simple, just look at the key code:

In the Badgeview class:

private void ApplyTo (View target) {layoutparams LP = Target.getlayoutparams (); Viewparent parent = Target.getparent ();  Framelayout container = new Framelayout (context); if (target instanceof Tabwidget) {//Set Target to the relevant tab child Containertarget = ((tabwidget) target). Getchildtabviewat (targettabindex); this.target = target; ((viewgroup) target). AddView (Container, New Layoutparams (Layoutparams.fill_parent, layoutparams.fill_parent)); This.setvisibility ( View.gone); Container.addview (this);} else {//TODO Verify that the parent is indeed a viewgroupviewgroup group = (viewgroup) parent; int index = Group.indexofchild (target); Group.removeview (target); Group.addview (container, index, LP); Container.addview (target); This.setvisibility (View.gone); Container.addview (this); Group.invalidate ();}}

In fact, the angle is the original view remove and add into a framelayout, and then in turn the original and the corner label add in. As for some other methods, such as setting the position of a corner, look at the code. I have defined two methods in Fragmentindicator:

public void Showbadge (int index,string content) {Badgeview = new Badgeview (Context, Mindicators[index].findviewwithtag ( "Tag_icon_" +index); badgeview.setbadgeposition (badgeview.position_top_right); Badgeview.settext (content); Badgeview.show ();} public void Hidebadge () {if (Null!=badgeview) Badgeview.hide ();}

<span style= "White-space:pre" ></span>showbadge (int index,string content) method according to the two parameters passed in the index (the label subscript ), Content (corner label display) to display the corner mark in the location of a particular tab, while <span style= "font-family:arial, Helvetica, Sans-serif;" >hidebadge () is a hidden corner mark. Mainactivity in the initialization code of </span><span style= "font-family:arial, Helvetica, Sans-serif;" >mindicator.showbadge (2, "4") is the corner mark on the Third tab that shows the content as 4. </span>

At this point a custom tab+fragment function with the corner mark function is complete, the following is the code demo:

Bottom Tab+fragment Toggle + Label Angle indicator display effect

If the content is helpful to you, please do not hesitate to praise it!

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Bottom bar tab Toggle fragment, with corner indicator display effect