Android dynamic TAB Control

from: http://www.pocketmagic.net/?p=1132

 

Android dynamic TAB Control

By Radu Motisan Posted on January 26th, 2010

Share

The way to do user interfaces can be different from a platform to another. On Android, you can define the interface using an XML.
For me the best approach is to create the controls on the fly, using the code, instead of some external scripting files.
The reason for this if, of course, the gain in flexibility. For a project I'm currently working on, I had to create a custom TAB Control. I've decided to drop the XML and create everything from the code.

android_tab_control_1 android_tab_control_2 android_tab_control_3

In the "Overridden" onCreate, I check the screen size, to determine whether the android is on landscape or portrait and create a different interface for each case.

 
   private Display m_display;
   private int        m_nScreenW,		//screen size
                         m_nScreenH;
 
 
// -- check screen orientation -- //
    	m_display = getWindowManager().getDefaultDisplay();
        m_nScreenW = m_display.getWidth();
        m_nScreenH = m_display.getHeight();
        // create interface
        View m_vForm;
        if (m_nScreenW <= m_nScreenH)
        	m_vForm = _createTABForm();		// portrait interface
        else
        	m_vForm = _createEmptyForm();	// landscape interface
     	// show the panel on the screen
     	setContentView(m_vForm);
 

To create the TAB, there are a few steps we need to follow:
1. create the tabHost and set its parameters
2. create the tabWidget, the container for the clickable tabs
3. create a frameLayout, to hold the views associated to each tab
4. create each tab, using the tabSpec class

To the first tab I'm adding a panel to hold multiple controls, the second tab a listview with few items, and the third tab gets an icon, and only holds a textView control. All in one the code is as follows:

 
/** Create the TAB interface */
    private ViewGroup _createTABForm() {
        // construct the TAB Host
        TabHost tabHost = new TabHost(this);
        tabHost.setLayoutParams(
        		new LinearLayout.LayoutParams(
                        LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
 
        // the tabhost needs a tabwidget, that is a container for the visible tabs
        TabWidget tabWidget = new TabWidget(this);
        tabWidget.setId(android.R.id.tabs);
        tabHost.addView(tabWidget, new LinearLayout.LayoutParams(
                  LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT)); 
 
        // the tabhost needs a frame layout for the views associated with each visible tab
        FrameLayout frameLayout = new FrameLayout(this);
        frameLayout.setId(android.R.id.tabcontent);
        frameLayout.setPadding(0, 65, 0, 0);
        tabHost.addView(frameLayout, new LinearLayout.LayoutParams(
                  LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT)); 
 
        // setup must be called if you are not initialising the tabhost from XML
        tabHost.setup(); 
 
        // create the tabs
        TabSpec ts1 = tabHost.newTabSpec("TAB_TAG_1");
        ts1.setIndicator("TAB-1");
        ts1.setContent(new TabHost.TabContentFactory(){
             public View createTabContent(String tag)
             {
            	 // -- this tab contains multiple control grouped in a panel -- //
             		LinearLayout panel = new LinearLayout(DynTABSample.this);
             		panel.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT,
             				LayoutParams.WRAP_CONTENT));
             		panel.setOrientation(LinearLayout.VERTICAL);
             		// Userid : label and text field
             		TextView lblUserid = new TextView(DynTABSample.this);
             		lblUserid.setText("The label above the EditText");
             		lblUserid.setTextSize(TypedValue.COMPLEX_UNIT_SP, 10f);
             		lblUserid.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT));
 
             		EditText ttfUserid = new EditText(DynTABSample.this);
             		ttfUserid.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT));
 
             		// login button
             		final Button btnLogin = new Button(DynTABSample.this);
             		btnLogin.setText("Login");
             		btnLogin.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT));
             		btnLogin.setGravity(Gravity.CENTER);
             		btnLogin.setOnClickListener(new View.OnClickListener() {
             			public void onClick(View view) {
             				Log.d("pocketmagic.net", "_createForm click but");
             			}
             		});
             		// 	actually adding the views to the panel
             		// 	userid
             		panel.addView(lblUserid);
             		panel.addView(ttfUserid);
             		// 	loginbutton
             		panel.addView(btnLogin);
 
             		return panel;
             } //TAB 1 done
        });
        tabHost.addTab(ts1);
 
        TabSpec ts2 = tabHost.newTabSpec("TAB_TAG_2");
        ts2.setIndicator("TAB-2");
        ts2.setContent(new TabHost.TabContentFactory(){
             public View createTabContent(String tag)
             {
            	 // -- this tab contains a single control - the listview -- //
                 ListView ls1 = new ListView(DynTABSample.this);
                 ArrayAdapter<String> adapter = new ArrayAdapter<String>(
                		 DynTABSample.this,
                		 android.R.layout.simple_list_item_1,
                		 new String[]{"item1","item2","item3","item4","item5","item6","item7"});
                  ls1.setAdapter(adapter);
                  ls1.setOnCreateContextMenuListener(DynTABSample.this);
                  return ls1;
             }
        });
        tabHost.addTab(ts2);
 
        TabSpec ts3 = tabHost.newTabSpec("TAB_TAG_3");
        ts3.setIndicator(" ");
        ts3.setContent(new TabHost.TabContentFactory(){
             public View createTabContent(String tag)
             {
            	 // -- this tab contains a single control  - a textview -- //
            	 TextView textAbout = new TextView(DynTABSample.this);
            	 textAbout.setText("About this sample/n/nThis is the Dynamic TAB control sample for Android./n/n(C)2010 Radu Motisan/n[email protected]/nwww.pocketmagic.net");
            	 textAbout.setTextSize(TypedValue.COMPLEX_UNIT_SP, 12f);
            	 textAbout.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT));
            	 return textAbout;
             }
        });
        tabHost.addTab(ts3);
        // -- set the image for tab3, can be used after tab has been created too -- //
        ImageView iv = (ImageView)tabHost.getTabWidget().getChildAt(2).findViewById(android.R.id.icon);
        if (iv != null) iv.setImageDrawable(getResources().getDrawable(R.drawable.icon));
 
    	return tabHost;
 	}
 

Click here to download the source code.

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章