Android High Imitation micro-5.2.1 main interface and message alert _android

Haven't updated the blog for a long time, recently in the company's project, which is my contact with the first formal project. Through the inspection of the project, found oneself accumulated a year of knowledge or far from enough, want to improve, a good way is: Project + book + video + blog. The most important point: diligent. Recently discovered the video of Mu-lesson net, incredibly are HD uncensored free! and full of dry goods! I use my spare time to follow the video in the great God's explanation to learn a lot of knowledge, the following will be these small demo to share with you, of course, I did some optimization, code and video some discrepancies, but the function can be fully realized.

This is a display interface that mimics version 5.2.1, as shown in the following illustration:

Brief introduction of function and realization idea

The main features are simple:
1, the above has a custom title bar;
2, Down is chat, Discovery, Address Book tab;
3. When the fingers slide, the blue indicator under the text can follow the slide;
4. On the right side of the chat, there is a red reminder dot for unread messages.

The custom title bar is a linearlayout and hides the titlebar (or Actionbar) from the system.

Because is the tab, naturally thought of fragment;

The fingers can slide, obviously, the black area is a viewpager, the data source is the fragment composition collection, and manages through the Fragmentpageradapter;

To enable the blue indicator to slide with the tab, you can set up the listener for Viewpager, and control the MarginLeft property value of the indicator based on the return value of the callback method to achieve the effect.

The last message reminder dot is a badgeview, which is a third-party open source control.

Master Layout

The mainactivity layout is as follows, first, the custom titlebar:

<!--top1.xml--> <?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=" 50DP "Android:
  background= "@drawable/topone_bg" android:paddingleft= "12DP" android:paddingright= "12DP" > <linearlayout
  Android:layout_width= "Wrap_content" android:layout_height= "Wrap_content" android:layout_centervertical= "true" android:gravity= "center" android:orientation= "Horizontal" > <imageview android:layout_width= "30DP" Android : layout_height= "30DP" android:background= "@drawable/actionbar_icon"/> <textview android:layout_width= "wrap _content "android:layout_height=" wrap_content "android:layout_marginleft=" 12DP "android:text=" micro-letter "Android:text Color= "#D3D3D3" android:textsize= "18sp"/> </LinearLayout> <linearlayout android:layout_width= "Wrap_co" Ntent "android:layout_height=" Wrap_content "Android: layout_alignparentright= "True" android:layout_centervertical= "true" android:orientation= "Horizontal" > <Ima Geview android:layout_width= "30DP" android:layout_height= "30DP" android:background= "@drawable/actionbar_search_ic On "/> <imageview android:layout_width=" 30DP "android:layout_height=" 30DP "android:background=" @drawable /actionbar_add_icon "/> <imageview android:layout_width=" 30DP "android:layout_height=" 30DP "Android:back

 ground= "@drawable/actionbar_more_icon"/> </LinearLayout> </RelativeLayout>

The effect looks like this:

The layout of the three tabs is followed by:

<!--top2.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=" 40DP "Android: Background= "#EEEEEE" android:orientation= "vertical" > <linearlayout android:layout_width= "match_parent" Andro id:layout_height= "37DP" android:orientation= "horizontal" > <linearlayout android:id= "@+id/ll_chat" Android : layout_width= "0DP" android:layout_height= "Match_parent" android:layout_weight= "1" android:gravity= "center" an droid:orientation= "Horizontal" > <textview android:id= "@+id/tv_tab_chat" android:layout_width= "Wrap_conte" NT "android:layout_height=" wrap_content "android:layout_gravity=" center "android:text=" chat "Android:textco Lor= "#008000" android:textsize= "16sp"/> </LinearLayout> <linearlayout android:layout_width= "0DP "Android:layout_height=" Match_parent "android:layout_weight= "1" android:gravity= "center" > <textview android:id= "@+id/tv_tab_discover" Android : layout_width= "wrap_content" android:layout_height= "wrap_content" android:text= "found" android:textcolor= "@andro Id:color/black "android:textsize=" 16sp "/> </LinearLayout> <linearlayout android:layout_width=" 0
    DP "android:layout_height=" match_parent "android:layout_weight=" 1 "android:gravity=" Center "> <textview
    Android:id= "@+id/tv_tab_contacts" android:layout_width= "wrap_content" android:layout_height= "Wrap_content" android:text= "Address Book" android:textcolor= "@android: Color/black" android:textsize= "16sp"/> </linearlayout&

 Gt </LinearLayout> <imageview android:id= "@+id/iv_tab_line" android:layout_width= "100DP" Android:layout_heig

 ht= "3DP" android:background= "@drawable/tabline"/> </LinearLayout>

The effect is as follows:

Because indicator also needs to dynamically set its length in code, you can attach an arbitrary value to the XML.

Finally, add Top1.xml, Top2.xml to the main layout, and introduce the Viewpager in the main layout:

<!--activity_main.xml-->
<?xml version= "1.0" encoding= "Utf-8"?>
xmlns: Android= "http://schemas.android.com/apk/res/android"
 xmlns:tools= "Http://schemas.android.com/tools"
 Android:layout_width= "Match_parent"
 android:layout_height= "match_parent"
 android:orientation= "vertical" "
 tools:context=" com.demo.lenovo.myapplication.MainActivity >

 <include layout= "@layout/top1"/>

 <include layout= "@layout/top2"/>

 <android.support.v4.view.viewpager android:id=
  "@+id/vp _content "
  android:layout_width=" match_parent "
  android:layout_height=" 0DP "
  android:layout_weight = "1"/>
</LinearLayout>

The effect is as follows:

Note: If your activity inherits from Actionbaractivity, you can invoke the hidden title bar before the Setcontentview () method, requestWindowFeature(Window.FEATURE_NO_TITLE); such as inheriting from Appcompactactivity, Can be in Androidmainfest
android:theme="@style/Theme.AppCompat.NoActionBar"You can also implement the purpose of hiding the title bar by setting the theme in the Application tab in the.

Use Fragmentpageradapter to fit data for Viewpager

In Mainactivity.java, add the Fragmentpageradapter logic: (Omit three fragment layout and code here)

 Private Fragmentpageradapter adapter;
 Private list<fragment> Mdata;

@Override
  protected void onCreate (Bundle savedinstancestate) {
    super.oncreate (savedinstancestate);
    Requestwindowfeature (window.feature_no_title);
    Setcontentview (r.layout.activity_main);
    Initview ();

In Initview (), initialize the fragment and load the fragment instance into the list one at a time, and then manage the list's data when the Fragmentpageradapter is initialized. The Setadapter method that calls the Viewpager finally passes the Fragmentpageradapter instance.

 Mdata = new arraylist<> ();
    Mdata.add (New Chatfragment ());
    Mdata.add (New Discoverfragment ());
    Mdata.add (New Contactsfragment ());
    adapter = new Fragmentpageradapter (Getsupportfragmentmanager ()) {
      @Override public
      Fragment getitem (int Position) {return
        mdata.get (position);
      }

      @Override public
      int GetCount () {return
        mdata.size ();
      }
    };
    Vp_content.setadapter (adapter);

Set the font color change when sliding

To implement this feature, you need to set up Setonpagechangelistener listening for Viewpager and through the callback method of the Onpagechangelistener interface onpagerselected (int position), The monitor is currently sliding to the first few pages:

@Override public
      void onpageselected (int position) {
        log.e (TAG, "onpageselected:" + position);
        Resettextviewcolor ();
        Switch (position) {case
          0:       
          addbadgeview ();  Tv_tab_chat.settextcolor (Color.parsecolor ("#008000"));
            break;

          Case 1:
            Tv_tab_discover.settextcolor (Color.parsecolor ("#008000"));
            break;

          Case 2:
            tv_tab_contacts.settextcolor (Color.parsecolor ("#008000"));
            break;
        }

      }

First, the text color of each tab is set to black
 private void Resettextviewcolor () {
    tv_tab_contacts.settextcolor (color.black);
    Tv_tab_chat.settextcolor (color.black);
    Tv_tab_discover.settextcolor (Color.Black);

Add Badgeview

In the Addbadgeview () method, first determine if Badgeview is empty, if not empty, first remove it, then add a new Badgeview, the following code:

 private void Addbadgeview ()
 {
 if (Mbadgeview!= null) {
              ll_chat.removeview (Mbadgeview);
            }
            Mbadgeview = new Badgeview (mainactivity.this);
            Ll_chat.addview (Mbadgeview);
            Mbadgeview.setbadgecount (9);


}

Set the font color change when sliding

To implement this feature, you need to set up Setonpagechangelistener listening for Viewpager and through the callback method of the Onpagechangelistener interface onpagerselected (int position), The monitor is currently sliding to the first few pages:

@Override public
      void onpageselected (int position) {
        log.e (TAG, "onpageselected:" + position);
        Resettextviewcolor ();
        Switch (position) {case
          0:       
          addbadgeview ();  Tv_tab_chat.settextcolor (Color.parsecolor ("#008000"));
            break;

          Case 1:
            Tv_tab_discover.settextcolor (Color.parsecolor ("#008000"));
            break;

          Case 2:
            tv_tab_contacts.settextcolor (Color.parsecolor ("#008000"));
            break;
        }

      }

First, the text color of each tab is set to black
 private void Resettextviewcolor () {
    tv_tab_contacts.settextcolor (color.black);
    Tv_tab_chat.settextcolor (color.black);
    Tv_tab_discover.settextcolor (Color.Black);

Add Badgeview

In the Addbadgeview () method, first determine if Badgeview is empty, if not empty, first remove it, then add a new Badgeview, the following code:

 private void Addbadgeview ()
 {
 if (Mbadgeview!= null) {
              ll_chat.removeview (Mbadgeview);
            }
            Mbadgeview = new Badgeview (mainactivity.this);
            Ll_chat.addview (Mbadgeview);
            Mbadgeview.setbadgecount (9);


}

Sliding of indicator

In order to achieve the effect of the indicator following the slide of the finger, logic is required in the onpagescrolled () method in the Onpagechangelistener interface, which documents the following:

，

Among them, the first parameter position that slide to the first page, for example, if you slide from page No. 0 to page one, then position will always be 0, until you let go, slide to the first page, position will become 1, The second parameter, Positionoffset, represents the percentage of the slide, the range is 0-1, and the last parameter Positionoffsetpixels represents the number of pixels to slide.

The following is the log that was printed from the 0->1 page, as follows:

Log to print from 1-->2 page:

Log to print from 2-->1 page:

Finally, the marginleft of the indicator can be set according to the (Position+positionoffset) *1/3.

First, you should set the width for indicator, which should be 1/3 of the screen width:

 WindowManager manager = GetWindow (). Getwindowmanager ();
    Display display = Manager.getdefaultdisplay ();
    Displaymetrics outmetrics = new Displaymetrics ();
    Display.getmetrics (outmetrics);
    Mscreenonethird = OUTMETRICS.WIDTHPIXELS/3;

where the int parameter mscreenonethird the unit is pixel px.

Set to Indicator:

Linearlayout.layoutparams LP = (linearlayout.layoutparams) iv_tab_line.getlayoutparams ();
    Lp.width = Mscreenonethird;
    IV_TAB_LINE.SETLAYOUTPARAMS (LP);

Finally, the marginleft properties of indicator are dynamically changed in the Onpagescrolled method:

@Override public
      void onpagescrolled (int position, float positionoffset, int positionoffsetpixels) {
        Linearlayout.layoutparams LP = (linearlayout.layoutparams) iv_tab_line.getlayoutparams ();
        Lp.leftmargin = (int) ((Positionoffset * mscreenonethird) + (Mscreenonethird * position));
        IV_TAB_LINE.SETLAYOUTPARAMS (LP);

To achieve the final effect.

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.