The Android setting interface is changed to the tab menu style of the Iphone.

The Android setting interface is changed to the tab menu style of the Iphone.

I haven't written a blog for a long time! Recently, I tried to change the list menu style of Android settings to the tab menu style of Iphone! I know that many of my friends have developed this interface style in their own ways. Let's take a look at my practices today!

Before doing this development, you should first look at the implementation of the default menu style setting list for Android! We can see from AndroidManifest. xml that the Activity Settings is the focus of our attention! So we came to Settings. java to find out, from which we can clear that it is actually a PreferenceActivity, and PreferenceActivity inherits the ListActivity, we know that ListActivity is actually used to display the ListView activity. in this way, we can see why the list menu is displayed. In fact, this function loadHeadersFromResource is used in the Settings Activity to load different xml configuration files, and the corresponding menu can be loaded! Almost all menu items in this xml file define their own fragment, so that you can click the corresponding menu to enter the corresponding fragment!

If you pay more attention to the activity Settings, you will find that the activity is much more complicated than you think! For example, the "Settings" activity may be called in many areas of the mobile phone that need to be set. If you want to change this activity to implement the tab menu style of the Iphone, I think it is risky! Therefore, when I made the tab menu style of the Iphone, I proposed two rules:

(1) Try not to affect the Settings activity, including the definition of the activity, when and where it has been called.

(2) try to improve efficiency!

Generally, there are three methods to create a tab menu: (1)TabHost + ViewPager; (2)ActionBar + ViewPager; (3)TabWidget + ViewPager.ViewPager. AndViewPager uses the AdapterLoad different views to display menus of different tabs! In this case, you need to write an activity and load the includeViewPageR layout! In this way, to achieve this effect, you need to write another setting activity that has been in the same way. This is obviously risky! Then let's take a look.ActionBarCan the tab button at the bottom of the Iphone be replaced! The answer is no! (There are various ways on the Internet, and the results of my experiments cannot achieve this effect ).

OK. Let's talk about how to implement it!

First, I chose TabActivity to replace the status of the original Settings Activity! Define your own TabActivity: TabSetting. In AndroidManifest. xml, change it:

        <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 let's take a look at the definition of the layout file of the Activity 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 use TabWidget here.

The next step is to configure TabHost! Let's look at the Code directly:

    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) {                     if (tabId.equals("network"))                          {                         mSelectedTab = NETWORK_TAB_INDEX;                         }                    else if(tabId.equals("device"))                        {                        mSelectedTab = DEVICE_TAB_INDEX;                        }                    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 same intent is configured for different tabs. Why! In fact, this start_activity_intent is used to start avti.pdf of our shettings! Therefore, my goal is to use an activity for switching between different tab menus, and this activity is the shetaskactivity of the system. In different tabs, loadHeadersFromResource loads different xml to display different menus! Here, let's take a look at the definition of the activity we started (TabSettings_content:

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, we can see that TabSettings_content is actually a set encapsulation.

In TabSettings_content, how does one know how to load different xlm files on different tab interfaces! At this time, the onNewIntent method of the activity is useful! As follows:

    @Override    public void onNewIntent(Intent newIntent) {        super.onNewIntent(newIntent);        // update our intent so that we can consult it to determine whether or        // not the most recent launch was via the event        setIntent(newIntent);        //Get the saved selected tap_index,         int tab = newIntent.getIntExtra(TabSetting.SELECT_TAB_INTENT_EXTRA, mCurr_SelectedTab);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 do not know Switch_tab_anima (tab); what is this statement. By literal meaning, we can know that this should be a tab switch and play the animation again! In fact, the animation played here is actually an animation effect like removing the Left and Right tabs from the left, and moving the right tabs from the right! The following code shows the implementation of 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 && !(the_tap_index == 3 && mCurr_SelectedTab == 0)) || (the_tap_index == 0 && mCurr_SelectedTab == 3)){TabSettings_ListView.startAnimation(slide_left_out);}else{TabSettings_ListView.startAnimation(slide_right_out);}mNext_SelectedTab = the_tap_index;}  }

In the same way, there are two lines of code marked with red. In this case, MainHandler is a Handler defined by me. The main purpose is latency. The purpose is: after the original tab is removed, the new tab is moved in. The latency here is to wait for the original tab to be removed.

Finally, you will find that the tab menu style I implemented won't be switched to the next tab (or the last tab) When you slide the menu with your fingers. What should I do! The following two steps are implemented:

(1): first, you need to get the touch screen events of your fingers: 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): The TabActivity: TabSetting we just defined must implement the OnGestureListener gesture interface! OnFling and onScroll of this interface are used to identify finger sliding. If the operation succeeds, switch to different tabs. The following code implements onFling (same as onScroll ):

 @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.setCurrentTab(tab_index); mSelectedTab = tab_index; TouchedDown_Done = true;     return true; } else{ return false; }   }

Let's take a look at the move_switch_len volume. The value cannot be too large or too small! Do you know why?

I have already finished talking about what I want to say! Here, the "tab" style is actually called by calling the activity "Settings", but it is wrapped out with a TabActivity! This is all! You should have understood it.

How does android set to change the background of a Tab page and the font color of each column?

Write a simple SimpleAdapter, assign the value of items to this adapter, write a layout file with only TextView, assign the value to it in the adapter and text. setTextColor (); set the color you want. Of course, you can write a color array and generate it randomly.
The following is the program and effect. The program contains annotations, which are implemented using BaseAdapter.




In android Application Development, how does one make the self-made Set Menu list consistent with the style of the system set list, and can also change when the topic is changed?

Define a layout by yourself (the same as the system menu) and then intercept the menu event to pop up. You can customize the menu
Steps:
1) override onCreateOptionsMenu () and change the return value to false.
Public boolean onCreateOptionsMenu (
Menu menu ){
Return false;
}
2) create */
View contentView = LayoutInflater. from (this). inflate (R. layout. menu,
Null );
View = contentView. findViewById (R. id. view );
View. setOnClickListener (this );
/**
* The created dialog box contentView is the View width and height displayed in the dialog box.
*/
OptionMenu = new PopupWindow (contentView, LayoutParams. FILL_PARENT,
LayoutParams. WRAP_CONTENT );

3) display menu
MOptionsMenu. showAtLocation (
FindViewById (R. id. main ),
Gravity. BOTTOM, 0, 0 );