Android Imitation micro-letter main interface Design _android

First, a picture of the effect.

I. Design of Actionbar

The first is main.xml, define these menus, and the interface will be adjusted later

<menu xmlns:android= "Http://schemas.android.com/apk/res/android" tools:context= ". Mainactivity "> <item android:id=" @+id/action_search "android:actionviewclass=" Android.widget.SearchView "and roid:icon= "@drawable/actionbar_search_icon" android:showasaction= "Always|collapseactionview" android:title= "@ String/action_search "/> <item android:id=" @+id/action_add "android:actionproviderclass=" DEVELOP.NIULI.COM.W Eixin. Plusactionprovider "android:icon=" @drawable/actionbar_add_icon "android:showasaction=" Always "android:title=" @ String/action_add "/> <!--set up menus here. Then customize a menu--> <item android:id=" @+id/action_btn01 "@ Drawable/abc_ic_menu_moreoverflow_mtrl_alpha "android:orderincategory=" 2 "android:title=" more "android:showAsAction = "Always" > <menu> <item android:id= "@+id/action_photo" android:icon= "@drawable/ofm_photo_icon" Androi d:title= "@string/action_photo" android:showasaction= "Never"/> &LT;item android:id= "@+id/action_connection" android:icon= "@drawable/ofm_collect_icon" android:title= "@string Action_connection "android:showasaction=" Never "/> <item android:id=" @+id/action_card "android:icon=" @drawa Ble/ofm_card_icon "android:title=" @string/action_card "android:showasaction=" Never "/> <item" android:id= Id/action_settings "android:icon=" @drawable/ofm_setting_icon "android:title=" @string/action_settings "Android: showasaction= "Never"/> <item android:id= "@+id/action_feed" android:icon= "@drawable/ofm_feedback_icon" and

 roid:title= "@string/action_feed" android:showasaction= "Never"/> </menu> </item> </menu>

1.android:actionviewclass= "Android.widget.SearchView" invokes the system's Search bar style,
The 2.android:showasaction= "Always|collapseactionview" makes it possible to cover the entire actionbar. So we can imitate the effect of the micro-letter.
3. Moreover overflow inside the with the icon +title effect, needs to customize an item to wrap a separate menu, such words do not need to use the code to realize the icon +title the effect
4.android:actionproviderclass= "Develop.niuli.com.weixin.PlusActionProvider" This used Actionprovider, It is also equivalent to customizing another menu to implement the Plus function, and Plusactionprovider is a separate class

/** * is mainly used to imitate the implementation of the micro-letter + Number menu/public class Plusactionprovider extends Actionprovider {private context;
  Public Plusactionprovider {Super (context);
 This.context = context;
 @Override public View Oncreateactionview () {return null;
  @Override public void Onpreparesubmenu (submenu submenu) {//Remove an existing item submenu.clear (); Add pictures and text to the menu, and join the Listener event Submenu.add (context.getstring (R.string.plus_group_chat)). SetIcon (R.drawable.ofm_group_ Chat_icon). Setonmenuitemclicklistener (New Menuitem.onmenuitemclicklistener () {@Override public boolean onm
     Enuitemclick (MenuItem Item) {return false;
  }
    }); The rest is good. Submenu.add (context.getstring (R.string.plus_add_friend)). SetIcon (R.drawable.ofm_add_icon). setOnMe Nuitemclicklistener (New Menuitem.onmenuitemclicklistener () {@Override public boolean onmenuitemclick (MenuItem I
     TEM) {return false;
  }
    }); Submenu.add (Context.getstring (r.string.pluS_video_chat)). SetIcon (R.drawable.ofm_video_icon). Setonmenuitemclicklistener (New Menuitem.onmenuitemclicklisten
     ER () {@Override public boolean Onmenuitemclick (MenuItem item) {return false;
  }
    }); Submenu.add (context.getstring (R.string.plus_scan)). SetIcon (R.drawable.ofm_qrcode_icon). Setonmenuitemclicklistener (New Menuitem.onmenuitemclicklistener () {@Override public boolean onmenuitemclick (Men
     Uitem Item) {return false;
  }
    }); Submenu.add (context.getstring (R.string.plus_take_photo)). SetIcon (R.drawable.ofm_camera_icon). Setonmenuitemclicklistener (New Menuitem.onmenuitemclicklistener () {@Override public boolean onmenuitemclick (Men
     Uitem Item) {return false;
 }
    });
 @Override public boolean Hassubmenu () {true;

 }
}

This kind of actionbar basically realizes the function that we want, the rest on the difference style and so on, so modify the Style.xml file, as inside also with the theme editor, temporarily not used to, and later try

<resources> <!--Here you can use the official compiler to set up, and specifically to learn--> <style name= "App_theme parent=" @android: style/ Theme.Holo.Light "> <!--Customize your Theme here. --> <item name= "Android:actionbarstyle" > @style/wexinactionbar</item> <item "Android: Itembackground "> @drawable/actionbar_bg_selector</item> <item name=" Android:actionbaritembackground " > @drawable/actionbar_bg_selector</item> <item name= "Android:itemtextappearance" > @style wechatactionbartitletext</item> <item name= "Android:actionoverflowbuttonstyle" > @style wechatactionbuttonoverflow</item> </style> <style name= "Wexinactionbar" parent= "@android: style/ Widget.Holo.ActionBar "> <item name=" android:background "> #303537 </item> <item name=" Android: TitleTextStyle "> @style/wechatactionbartitletext</item> </style> <style name=" Wechatactionbartitletext "parent=" @android: Style/textappearance.holo.widget.actIonbar.title "> <item name=" Android:textcolor "> #cfcfcf </item> <item name=" Android:textsize "> 17sp</item> </style> <style name= "Wechatactionbuttonoverflow" parent= "android:style/"
 Widget.Holo.ActionButton.Overflow "> <item name=" android:src "> @drawable/actionbar_more_icon</item>

 </style> </resources>

Two. Design of the main interface

Using Pagerslidingtabstrip+viewpager, the two will automatically fit, easy to use.
Configuring in Main_activity.xml

<relativelayout 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 "
 xmlns:app= "Http://schemas.android.com/apk/res-auto"
 tools:context= ". Mainactivity ">
 <!--introduced a tabs open source project similar to Actionbar-->
 <com.astuetz.pagerslidingtabstrip
  Android:id= "@+id/tabs"
  android:layout_width= "match_parent"
  app:pstsshouldexpand= "true"
  Android: layout_height= "40DP"/>
 <android.support.v4.view.viewpager
  android:id= "@+id/pagers"
  Android:layout_width= "Match_parent"
  android:layout_height= "wrap_content"
  android:layout_below= "@+id/" Tabs "
  />
</RelativeLayout>

Then create three fragment layouts and put them into Viewpager, here's an example

<?xml version= "1.0" encoding= "Utf-8"?> <framelayout xmlns:android=
"http://schemas.android.com/apk/" Res/android "
 android:layout_width=" match_parent "
 android:layout_height=" match_parent ">

 < TextView
  android:layout_width= "match_parent"
  android:layout_height= "Match_parent"
  Chat interface "
  android:gravity=" center "
  android:textsize=" 20sp "
  />

</FrameLayout>

public class Chatfragment extends Android.support.v4.app.Fragment {


 @Nullable
 @Override public
 View Oncreateview (Layoutinflater inflater, ViewGroup container, Bundle savedinstancestate) {
  View view = Inflater.inflate (r.layout.chatfragment_layout,container,false);
  return view;
 }

The next step is to configure the code in the Mainactivity.java

/** * Tabs Column instance * * Private Pagerslidingtabstrip tabs;

 /** * Get the density of the current screen * * Private displaymetrics DM;
 /** * Main interface of the Viewpager * * Private Viewpager pagers;
  @Override protected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate);
  Setcontentview (R.layout.activity_main);
  Setoverflowshowingalways ();
  DM = Getresources (). Getdisplaymetrics ();
  pagers = (Viewpager) Findviewbyid (r.id.pagers);
  Tabs = (pagerslidingtabstrip) Findviewbyid (r.id.tabs);
  This class has to inherit fragmentactivity to have this method Pagers.setadapter (new Viewpageradapter (Getsupportfragmentmanager ()));
  Tabs.setviewpager (pagers);
 Settabvalue (); /** * Modification of the Pagerslidingtabstrip property/private void Settabvalue () {////Setup tabs fills the entire screen automatically, the XML file settings are effective//Tabs.setsho
  Uldexpand (TRUE);
  Set the tabs of the split line transparent Tabs.setdividercolor (color.transparent); Setting the height of the tabs bottom line//typedvalue need to learn about Tabs.setunderlineheight ((int) typedvalue.applydimension (typedvalue.complex_unit
  _dip, 1, DM)); Set Tab IndiCator height tabs.setindicatorheight ((int) typedvalue.applydimension (Typedvalue.complex_unit_dip, 4, DM));
  Sets the size of the tab header text Tabs.settextsize ((int) typedvalue.applydimension (typedvalue.complex_unit_sp, DM));
  Sets the tab indicator Color Tabs.setindicatorcolor (color.parsecolor ("#45c01a"));
  Set the color of the tab text selected (This is my custom method)//Tabs.setselectedtextcolor (Color.parsecolor ("#45c01a"));
 The background color tabs.settabbackground (0) When the tab is canceled;
 }

It can be seen that Viewpager needs a adapter to configure its page, and tabs need to configure Viewpager, so that the three can be perfect to adapt.

public class Viewpageradapter extends Fragmentpageradapter {/** * Chat interface * * Private chatfragment chatfragment;
 /** * Discovery Page * * Private foungfragment foundfragment;

 /** * Chat Interface * * Private contactfragment contactfragment;

 Private final string[] titles = {"Chat", "Discovery", "Address Book"};
 Public Viewpageradapter (fragmentmanager FM) {super (FM);
     @Override public Fragment getitem (int position) {switch (position) {case 0:if (chatfragment = null) {
    Chatfragment = new Chatfragment ();
   return chatfragment;
    Case 1:if (foundfragment = = null) {foundfragment = new foungfragment ();
   return foundfragment;
    Case 2:if (contactfragment = = null) {contactfragment = new contactfragment ();
   return contactfragment;
  Default:return null;
 @Override public int GetCount () {return titles.length;
 @Override public charsequence getpagetitle (int position) {return titles[position];
 }
}

This article has been organized into the "Android micro-credit Development tutorial Summary," Welcome to learn to read.

The above is the entire content of this article, I hope to help you learn.