Android implementation of micro-letter home and left sliding switch effect _android

We see the micro-letter Home switch effect has not felt very cool, sliding switch, click on the bottom bar instant switch, sliding transition gradient effect, online effect chart:

Before also on the blog to see other people's implementation, and again based on, I did some optimization. First of all, the principle of realization, the great God Skipped, O (╯-╰) o
Page to see the three page is three fragment, sliding around using viewpager, I believe we are all so reused, then the bottom with what technology, the bottom gradient is actually rewrite the ImageView, and in the left and right, changed the TextView color value, Is it simple ... Here we go step-by-step:

1. Custom ImageView:

 /**
  * Initialize resource picture bitmap and related drawing objects
  * @param normal normals
  * @param selected focus/public
 final void Init (int normal, int selected, int width, int height) {
  This.mnormalicon = CreateBitmap (normal);
  This.mselectedicon = CreateBitmap (selected);
  This.mnormalrect = new Rect (0, 0, width, height);
  This.mselectedrect = new Rect (0, 0, width, height);
  This.mpaint = new Paint (1);
 }

Two bitmap are defined here, corresponding to the focus and loss of focus on the display of the bitmap image, two matrices, used in the drawing process, defined an external call method, in the left and right sliding process, through the offset value to change the transparency value, two pictures superimposed is the corresponding excessive effect.

The OnDraw is then rewritten by continually refreshing the view through the slide process:

 @Override
 protected void OnDraw (Canvas Canvas) {
  super.ondraw (Canvas);
  if (This.mpaint = = null) {return
   ;
  }
  This.mPaint.setAlpha (255-this.mselectedalpha);
  Canvas.drawbitmap (This.mnormalicon, NULL, This.mnormalrect, this.mpaint);
  This.mPaint.setAlpha (This.mselectedalpha);
  Canvas.drawbitmap (This.mselectedicon, NULL, This.mselectedrect, this.mpaint);
 }

Here you can see the accomplice paint change the incoming two bitmap transparency to achieve a gradient effect, where mselectedalpha is the external incoming transparency value

2. Customize the implementation of the bottom bar container , here by rewriting the LinearLayout implementation (let's call it container), in container we have to do a few things:
1. Define the outer call interface and receive the bottom display resource information:
A. First, initialize the parameters:

public void Initcontainer (string[] titles, int[][] iconsres, int[] colors, Boolean showtransitioncolor) {
  this.mtitl ES = titles;
  This.miconres = iconsres;
  This.mtextnormalcolor = Getresources (). GetColor (Colors[0]);
  This.mtextselectedcolor = Getresources (). GetColor (Colors[1]);
  This.mshowtransitioncolor = Showtransitioncolor;
 }

This is where the tab-displayed text array, the picture resource array displayed, the default color, and the array of color values (array size =2) when the focus is obtained, and whether transitions are displayed when switching

B. Setting the corresponding control ID in the layout file and layout file, and the picture's wide-high parameters when the picture is displayed, provides three options:
① graphic Tab:

/**
  * Set layout file and associated control ID
  * @param layout layout layout file ID
  * @param iconid imageview control ID ID <=0 does not display
  * @param Textid TextView control ID ID <=0 does not display
  * @param width icon width
  * @param height icon Height/public
 void Setcont Ainerlayout (int layout, int iconid, int textid, int width, int height) {
  mlayoutid = layout;
  Mtextviewid = Textid;
  Miconviewid = iconID;
  Miconwidth = width;
  miconheight = height;
 }

Here the Layout and tab layout file, iconID corresponds to the custom ImageView resource ID, textid corresponding to the TextView ID, width refers to the picture displayed in the width of the high
② only Text tab: When the Text tab is displayed, the iconID can be passed in
③ only Picture tab: The corresponding, is in the Graphics and Text tab provides the method, passes in the textual textid=0 can
C. Inject Viewpager: There is a need to monitor viewpager sliding to change the gradient

2). Add tab to Easy container:
Here you need to determine whether the iconID and Textid are larger than 0,=0 and not displayed, and in order to center evenly the bottom container length, all tab halves are divided into the bottom container

/** * <p> Add tab view to current container </p>/private void Addtabviewtocontainer () {final Pageradapter adapter = MV 
  Iewpager.getadapter (); Mtabview = new View[adapter.getcount ()]; Here, according to adapter, the total number of tabs to display at the bottom for (int index = 0, Len = adapter.getcount (); index < Len; index++) {final View TABV Iew = Layoutinflater.from (GetContext ()). Inflate (Mlayoutid, this, false);

   Load tab layout Mtabview[index] = Tabview;
   /*tabiconview initialization */Tabiconview IconView = null; if (Miconviewid > 0) {//Incoming picture resource file ID is not 0 o'clock, indicate that icon needs to be displayed, and then initialize the view IconView = (Tabiconview) Tabview.findviewbyid (Micon
    VIEWID); Iconview.init (Miconres[index][0], miconres[index][1], miconwidth, miconheight);
   This is the custom ImageView init method}/*tabtextview Initialize/TextView TextView = null;
    if (Mtextviewid > 0) {textView = (TextView) Tabview.findviewbyid (MTEXTVIEWID);

   Textview.settext (Mtitles[index]); /* Set width, equal container*/layoutparams LP = (layoutparams) tabview.getlayoutparams ();
   lp.width = 0;

   Lp.weight = 1;

   /* Add Tab Click event * * Addtabonclicklistener (Tabview, index); /* Set Current status */if (index = = Mviewpager.getcurrentitem ()) {//First show tab, set initial state to get focus state if (IconView!= null) {Iconvie
    w.offsetchanged (0);
    } tabview.setselected (True);
    if (TextView!= null) {Textview.settextcolor (mtextselectedcolor);
  } addview (Tabview);

 }
 }

3. Monitor Viewpager sliding events, update container based on offset value, complete redraw operation

4. In the OnDraw of container, the transparency value is calculated based on the offset, where the text offset value is computed with an open source code

@Override protected void OnDraw (Canvas Canvas) {Super.ondraw (Canvas);
  Final int childcount = Getchildcount (); if (ChildCount > 0) {/* The gradient region is drawn when the offset occurs * */if (Mselectionoffset > 0f && mselectedposition < GETCHILDC Ount ()-1) && Mshowtransitioncolor) {/* Get current tab and next tab View/view Selectedtab = Getchildat (mselectedpos
    ition);

    View Nexttab = Getchildat (mselectedposition + 1); /* Show tab icon, refresh the respective View transparency */if (Miconviewid > 0) {View Selectediconview = Selectedtab.findviewbyid (miconview
     ID);

     View Nexticonview = Nexttab.findviewbyid (Miconviewid);
      Draw icon Alpha if (Selectediconview instanceof tabiconview && nexticonview instanceof) {
      ((Tabiconview) selectediconview). offsetchanged (Mselectionoffset);
     ((Tabiconview) nexticonview). offsetchanged (1-mselectionoffset); }/* Displays tab text, refreshes the respective View transparency */if (Mtextviewid > 0) {View Selectedtextview = SelectedtaB.findviewbyid (MTEXTVIEWID);

     View Nexttextview = Nexttab.findviewbyid (Mtextviewid); 
     Draw text color Integer selectedcolor = (integer) evaluate (Mselectionoffset, Mtextselectedcolor, Mtextnormalcolor);

     Integer nextcolor = (integer) evaluate (1-mselectionoffset, Mtextselectedcolor, Mtextnormalcolor); if (Selectedtextview instanceof TextView && nexttextview instanceof TextView) {(TextView) Selectedtextview
      ). SetTextColor (Selectedcolor);
     ((TextView) nexttextview). SetTextColor (Nextcolor);

 }
    }

   }
  }
 }

3. Define a Fragmentadapter, this is skipped, relatively simple

4. Do the above preparation, you can write a test example to try the effect, of course, here in order to see the effect, we need to prepare several pictures beforehand, as well as a few fragment

private void Initviews () {//get apdater tabfragmentadapter madapter = new Tabfragmentadapter (Getsupportfragmentmanager (
  ), fragments);
  Viewpager Mpager = (viewpager) Findviewbyid (R.id.tab_pager);
  Mpager.setadapter (Madapter);
  If the current class needs to be Viewpager do the listening tabcontainerview mtablayout = (tabcontainerview) Findviewbyid (R.id.ll_tab_container);

  Mtablayout.setonpagechangelistener (this);

  Mtablayout.initcontainer (Getresources (). Getstringarray (R.array.tab_main_title), Icons_res, TAB_COLORS, true);
  int width = getresources (). Getdimensionpixelsize (R.dimen.tab_icon_width);
  int height = getresources (). Getdimensionpixelsize (R.dimen.tab_icon_height);
Mtablayout.setcontainerlayout (R.layout.tab_container_view, R.id.iv_tab_icon, r.id.tv_tab_text, width, height);
Mtablayout.setsingletextlayout (R.layout.tab_container_view, R.id.tv_tab_text);

  Mtablayout.setsingleiconlayout (R.layout.tab_container_view, R.id.iv_tab_icon);
  Mtablayout.setviewpager (Mpager); Mpager.setcurrentitem (GetinTent (). Getintextra ("tab", 0));

 }

Manactivity corresponding to the XML is relatively simple, you can refer to the source code, the last operation effect, is the top of the map, to this anti-micro-letter sliding switch is completed, the source code please visit the following links:

SOURCE Download: Https://github.com/JarekWang/wechathome.git

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.