Android Settings Interface modified for iphone tab menu style

Haven't written a blog for a long time! Recently made a list of Android settings menu style changed to iphone tab menu style try! I know, there are many friends have their own way has achieved this interface style development, today everyone to see my practice!

Before doing this development, first take a look at the Android default Settings list menu style implementation! By Androidmanifest.xml can know settings This activity is our focus of attention! So we came to Settings.java to find out, from which we can clear that he is actually a preferenceactivity, and preferenceactivity inherited listactivity, we know listactivity is actually dedicated to Displays the activity of the ListView. In this way, we understand why the list menu is displayed. In fact, in the activity of settings using this function Loadheadersfromresource to load different XML configuration files, you can load the corresponding menu! In this XML file, each menu item almost defines its own fragment, so as long as you click on the corresponding menu will be able to enter the corresponding fragment!

If you pay more attention to the activity of settings, you will find that the activity is more complex than you think! For example, in the mobile phone many need to set up the location of the phone can call settings this activity, want to change this activity to achieve the iphone tab menu style, I feel to take a certain risk! So I made two rules when I did the tab menu style for my iphone:

(1) Try not to affect the activity of settings, including the definition of the activity, when and where it was called.

(2) Try to ask for efficiency!

In general, there are three ways to do the tab menu style: (1)tabhost + Viewpager; (2)ActionBar + Viewpager; (3)Tabwidget + Viewpager and you know it, you have to use the Viewpager. and Viewpager is the display of different tab menus by adapter loading different view! This will require you to write an activity that is implemented by loading the layout containing viewpager! In this way, to achieve this effect, you need to write a settings activity that has been in a different manner, which is obviously risky! Then see if ActionBar can achieve the iphone tab tradeoff bottom tab effect! The answer is NO! (There are various ways on the Internet, the result of my experiment is not able to achieve this effect).

OK, let's talk about my way of achieving it!

First of all, I choose Tabactivity to replace the original settings activity status! Define your own tabactivity:tabsetting, and change it in Androidmanifest.xml to:

        <activity android:name= "tabsetting"                android:label= "@string/settings_label_launcher"                android: Taskaffinity= "com.android.settings"                android:theme= "@style/theme.settings.light"        android:configchanges= "KEYBOARDHIDDEN|SCREENSIZE|MCC|MNC"                android:launchmode= "Singletask" >            <intent-filter>                < Action android:name= "Android.intent.action.MAIN"/>                <action android:name= "Android.settings.SETTINGS"/ >                <category android:name= "Android.intent.category.DEFAULT"/>                <category android:name= " Android.intent.category.LAUNCHER "/>                <category android:name=" Android.intent.category.APP_SETTINGS "/ >            </intent-filter>        </activity>

The original settings configuration is as follows:

        <activity android:name= "Settings"                      android:label= "@string/settings_label_launcher"                      android: Taskaffinity= "com.android.settings"                      android:theme= "@style/theme.settings.light"                       android:configchanges= "KEYBOARDHIDDEN|SCREENSIZE|MCC|MNC"                      android:launchmode= "Singletask" >        </activity>

Then take a look at the definition of this activity's layout file for tabsetting:

<?xml version= "1.0" encoding= "Utf-8"? ><tabhost android:id= "@+android:id/tabhost" android:layout_width= " Fill_parent "android:layout_height=" fill_parent "xmlns:android=" http://schemas.android.com/apk/res/android ">    <linearlayout android:orientation= "vertical" android:layout_width= "fill_parent" android:layout_height= " Fill_parent ">        <framelayout         android:id=" @+android:id/tabcontent "         android:layout_width=" Fill_ Parent "         android:layout_height=" fill_parent "         android:layout_weight=" 1.0 "/>        <tabwidget         android:orientation= "Horizontal"         android:id= "@+android:id/tabs"         android:layout_width= "Fill_parent"         android:layout_height= "57.0dip"         android:divider= "@null"         style= "Android:attr/tabwidgetstyle"/ >    </linear

From the above layout, we are using the tabwidget.

    the next focus is on the Tabhost configuration! We look directly at the code:

    private void Createtabs (int selectedindex) {        mtabhost = Gettabhost ();        linearlayout tab_view;        final Layoutinflater inflater = Layoutinflater.from (This);        if ( Mtabhost = null) {            intent start_activity_intent = Tabsettings_ Content.getintent_for_tab (this);            Start_ Activity_intent.putextra (Init_selected_tab, SelectedIndex);                        tab_view = (linearlayout) inflater.inflate (tab_view_ resource_id, Mtabhost.gettabwidget (), false);                         ((TextView) Tab_view.findviewbyid (R.id.tab_hint)). sEttext (r.string.meng_tab_network);             ((ImageView) tab_ View.findviewbyid (R.id.tab_icon)). Setimageresource (r.drawable.xunhu_tab_network);              Start_activity_intent.putextra (Select_tab_intent_extra, Network_tab_index);              Mtabhost.addtab (mtabhost.newtabspec ("Network")                                            .setindicator (Tab_view)                                            .set_samecontent (start_activity_intent ));                         Tab_view = (linearlayout) inflater.inflate (tab_view_resource_id, MTabHost.getTabWidget (), False );            ((TextView) Tab_view.findviewbyid (R.id.tab_ Hint). SetText (R.string.meng_tab_device);             (( ImageView) Tab_view.findviewbyid (R.id.tab_icon)). Setimageresource (R.drawable.xunhu_tab_device);             start_activity_intent = (Intent) Start_activity_intent.clone ();              Start_activity_intent.putextra (Select_tab_intent_extra, Device_ Tab_index);             Mtabhost.addtab (Mtabhost.newtabspec ("Device")                                           .setindicator (tab_vIew)                                           .set_samecontent ( start_activity_intent));             Tab_view = ( LinearLayout) inflater.inflate (tab_view_resource_id, Mtabhost.gettabwidget (), false);             ((TextView) Tab_view.findviewbyid (R.id.tab_hint)). SetText ( r.string.meng_tab_personal);             ((ImageView) tab_ View.findviewbyid (R.id.tab_icon)). Setimageresource (r.drawable.xunhu_tab_personal);              start_activity_intent = (Intent) Start_activity_intent.clone ();              Start_activity_intent.putextra (Select_tab_intent_extra, Personal_tab_index) ;             Mtabhost.addtab (Mtabhost.newtabspec ("personal")                                           .setindicator (Tab_view)                                           .set_samecontent (start_activity_intent));              Tab_view = (linearlayout) inflater.inflate (tab_ view_resource_id, Mtabhost.gettabwidget (), false);             ((TextView) Tab_view.findviewbyid (R.id.tab_hint)). SetText (R.string.meng_tab_system);              ((ImageView) Tab_view.findviewbyid (R.id.tab_icon)). Setimageresource (R.drawable.xunhu_tab_system);//             start_activity_intent = ( Intent) Start_activity_intent.clone ();             start_activity_ Intent.putextra (Select_tab_intent_extra, System_tab_index);             Mtabhost.addtab (Mtabhost.newtabspec ("System")                                            .setindicator (Tab_view)                                            .set_samecontent (start_activity_intent));              Mtabhost.setontabchangedlistener (New Ontabchangelistener () {                 public void ontabchanged (String tabId) {       & nbsp;             if (tabid.equals ("network")                           {     & nbsp                   mselectedtab = network_tab_index;& nbsp;                        }                     else if (tabid.equals ( "Device")                          {                         mselectedtab = device_tab_index;    &Nbsp;                   }                     else if (tabid.equals ("personal"))                          {                          Mselectedtab = personal_tab_index;                         }                     else if (tabid.equals ("System"))                         {                        mselectedtab = system_tab_index;                       }                    //mtabhost.setcurrenttab ( Mselectedtab);                     TabSetting.this.updateTabStyle (TabSetting.this.mTabHost);                }            });        }           }

Please pay attention to the red code here! You will find that the different tabs are configured with the same intent. What is this for? In fact, this start_activity_intent is used to start our shettings avtivity! So, my goal is actually the different tab menu switch actually uses one activity, moreover this activity is the system originally has the shettings activity. Just load different XML in different tab,loadheadersfromresource to implement different menus to display! Here we take a look at the definition of the activity (tabsettings_content) we started:

public class Tabsettings_content extends Settings{private static final Boolean DEBUG = true;    private static int mcurr_selectedtab = Tabsetting.network_tab_index;   private static int mnext_selectedtab = Tabsetting.network_tab_index;  private int settingmenustyle_index =-1;....}

From the code above you can tell that Tabsettings_content is actually a settings package.

How do you know how to load different XLM files on different tab interfaces in Tabsettings_content? This time the activity of the Onnewintent this method is useful! As follows:

 @Override        public void Onnewintent (Intent newintent) {super.onnewintent (newintent); Update our intent so, we can consult it to determine whether or//not the most recent launch is via the EV        ENT setintent (newintent); Get the saved selected tap_index, int tab = Newintent.getintextra (Tabsetting.select_tab_intent_extra, Mcurr_sele Ctedtab), if (!getresources (). Getboolean (R.bool.tabsettingpage_change_animal)) {if (tab! = Mcurr_selectedtab) {mCurr_        Selectedtab = Tab;mnext_selectedtab = Mcurr_selectedtab;invalidateheaders ();} }else if (tab! =-1 && tab! = Mcurr_selectedtab) {<span style= "Background-color: #ff0000" >switch_tab_anima ( tab);</span>}} 

From the above code, you may be a little dizzy because you don't quite know Switch_tab_anima (tab), what this statement is doing. By literal means, you can see that this should be the tab switch and also play the animation! In fact, the animation played here is about two tab to the left, the right tab from the right to move in such an animation effect! The following code to see the implementation of this method Switch_tab_anima:

private void Switch_tab_anima (int the_tap_index) {if (false = = Init_animation) {init_animation_play ();} if (the_tap_index! = Mcurr_selectedtab && The_tap_index! =-1) {if (The_tap_index > Mcurr_selectedtab &&am p;! (The_tap_index = = 3 && Mcurr_selectedtab = = 0)) || (The_tap_index = = 0 && Mcurr_selectedtab = = 3)) {tabsettings_listview.startanimation (slide_left_out); <span style= "Background-color: #ff0000" > Mainhandler.sendemptymessagedelayed (222,195); </span>}else{tabsettings_listview.startanimation (Slide_ right_out); <span style= "Background-color: #ff0000" >mainhandler.sendemptymessagedelayed (000,195); </span >}mnext_selectedtab = The_tap_index;}  }

The same, there are two lines I marked the red code, this place MainHandler is a I define the handler, the main purpose is the delay, the purpose is: the original tab removed, the new tab will start to move in. The delay here is to wait for the original tab to be removed.

Finally, you will find that I implemented this tab menu style, when the left and right swipe the menu, do not switch to the next tab (or the previous tab), what to do! Here are 2 steps to achieve:

(1): First to be able to get finger touch screen event: Here you have to choose Dispatchtouchevent:

@Overridepublic boolean dispatchtouchevent (motionevent m) {//ELOG.D (TAG, "dispatchtouchevent ()"); LOG.D ("tabsetting", "Tabsetting dispatchtouchevent ()"); if (this.detector! = null) {this.detector.onTouchEvent (m);} Boolean flag = Super.dispatchtouchevent (m); LOG.D ("tabsetting", "tabsetting dispatchtouchevent ()  flag=" +flag); return flag;}

(2): We just defined the tabactivity:tabsetting need to implement Ongesturelistener this gesture interface! The interface of the onfling and onscroll to recognize the finger swipe operation, the operation is successful switch different tab: The following code is the implementation of the method onfling (and the Method Onscroll implementation):

@Override public boolean onfling (Motionevent E1, motionevent E2, float Velocityx, float velocityy) {int tab_index;          if (Toucheddown_done = = True) {return false;} if (E1.getx ()-E2.getx () > <span style= "background-color: #ff0000" ;move_switch_len</span>) {    Tab_index = Mselectedtab = = 3? 0:mselectedtab+1;   Mtabhost.setcurrenttab (tab_index);   Mselectedtab = Tab_index;   Toucheddown_done = true;   return true; } else if (E2.getx ()-E1.getx () > Move_switch_len) {tab_index = Mselectedtab = = 0? 3:mselectedtab-1; mtabhost.setcurre Nttab (Tab_index); Mselectedtab = Tab_index; Toucheddown_done = true;     return true; } else{return false;}   }

Pay attention to move_switch_len this amount. This value cannot be too big or too small! Do you know why?

I think I'm done with that! I am here to implement tab style actually call the original settings this activity, just outside with a tabactivity packaging a bit! That's all! You should know it.