Android UI control series: Tab Layout (tab layout)

In order to create a tab UI, you need to use a TabHost and a TabWidget. TabHost must be the root node of the layout file, which contains a TabWidget to display the tab and a FrameLayout to display the option content

You can implement your tab content in one or two ways: use tabs to switch between views within an Activity, or use tabs to change all separate activities. You use the methods you want in your program based on your needs, but if each tab provides a unique user Activity, then it makes sense to implement a separate Activity for each tab, so you'd better do that in your It is better to manage applications in discrete groups than to use a large number of application and layout files.

In this example, you can create a tab UI for each individual Activity

1. Start a new project called HelloTabWidget

2. First, create three independent Activity programs in your project: ArtistsActivity, AlbumsActivity, and SongsActivity. Each of them represents a separate tab. Now use TextView to display a simple message in each program. , for example:

package org.hualang.tabwidget;  
  
import android.app.Activity;  
import android.os.Bundle;  
import android.widget.TextView;  
  
public class AlbumsActivity extends Activity {  
        public void onCreate(Bundle savedInstanceState)  
        {  
                super.onCreate(savedInstanceState);  
                 TextView textview = new TextView(this);  
                 textview.setText("This is the Albums tab");          
                setContentView(textview);  
        }  
}

package org.hualang.tabwidget;  
  
import android.app.Activity;  
import android.os.Bundle;  
import android.widget.TextView;  
  
public class SongsActivity extends Activity {  
        public void onCreate(Bundle savedInstanceState)  
        {  
                super.onCreate(savedInstanceState);  
                 TextView textview = new TextView(this);  
                 textview.setText("This is the Songs tab");   
                setContentView(textview);  
        }  
  
}

package org.hualang.tabwidget;  
  
import android.app.Activity;  
import android.os.Bundle;  
import android.widget.TextView;  
  
public class ArtistsActivity extends Activity {  
    /** Called when the activity is first created. */  
    @Override  
    public void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
                 TextView textview = new TextView(this);  
                 textview.setText("This is the Artists tab");   
        setContentView(textview);  
    }  
}

Note that there is no need for a layout file in this example, you only need to create a TextView and assign a value to the text. Create three similar activities repeatedly and register them in the AndroidManifest.xml file, otherwise an error will be reported

3. You need to set an icon for each tab. You can have two versions of each icon. One is when the tab is selected and the other is when the tab is not selected. In general design, it is recommended to use gray when selected and white when unselected, such as

you You can copy these two pictures for experimentation

Now create a status picture list to specify the pictures specified in different states of each tab

①Save the picture of urination in res/ drawable/ directory

②Create a file named ic_tab_artists.xml in the res/drawable/ directory, and insert the following information

<?xml version="1.0" encoding="utf-8"?>  
<selector xmlns:android="http://schemas.android.com/apk/res/android">  
<!-- When selected,use grey -->  
        <item android:drawable="@drawable/ic_tab_artists_grey"  
                android:state_selected="true"/>  
        <!-- When not selected ,use white -->  
        <item android:drawable="@drawable/ic_tab_artists_white"/>  
</selector>

The above file, when the status of the tab changes , the tab will automatically switch between the two defined pictures

4. Open the res/layout/main.xml file and insert the following information

<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabhost"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:padding="5dp">
        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" />
        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:padding="5dp" />
    </LinearLayout>
</TabHost>

This layout file will be displayed The tab weapon provides navigation between each Activity

TabHost requires a TabWidget and a FrameLayout layout. In order to position the TabWidget and FrameLayout in the vertical direction, a LinearLayout is required. FrameLayout is the place for the content of each tab. , the reason the content there is empty is because in TahHost it will be automatically embedded for each Activity

Note that the ID tags and tabcontent elements of the TabWidget and FrameLayout elements, these names must be used because TahHost retrieves their Quote, it happens to be expecting these names

6. Write HelloTabWidget. Inherit TabWidget

package org.hualang.tabwidget;

import android.app.TabActivity;
import android.content.Intent;
import android.content.res.Resources;
import android.os.Bundle;
import android.widget.TabHost;

public class HelloTabWidget extends TabActivity  {
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.main);

            Resources res = getResources(); // Resource object to get Drawables
            TabHost tabHost = getTabHost();  // The activity TabHost
            TabHost.TabSpec spec;  // Resusable TabSpec for each tab
            Intent intent;  // Reusable Intent for each tab

            // Create an Intent to launch an Activity for the tab (to be reused)
            intent = new Intent().setClass(this, ArtistsActivity.class);

            // Initialize a TabSpec for each tab and add it to the TabHost
            spec = tabHost.newTabSpec("artists").setIndicator("Artists",
                              res.getDrawable(R.drawable.ic_tab_drawable))
                          .setContent(intent);
            tabHost.addTab(spec);

            // Do the same for the other tabs
            intent = new Intent().setClass(this, AlbumsActivity.class);
            spec = tabHost.newTabSpec("albums").setIndicator("Albums",
                              res.getDrawable(R.drawable.ic_tab_drawable))
                          .setContent(intent);
            tabHost.addTab(spec);

            intent = new Intent().setClass(this, SongsActivity.class);
            spec = tabHost.newTabSpec("songs").setIndicator("Songs",
                              res.getDrawable(R.drawable.ic_tab_drawable))
                          .setContent(intent);
            tabHost.addTab(spec);

            tabHost.setCurrentTab(2);
        }

}

Running results:

The above is the content of the Android UI control series: Tab Layout (tab layout), please pay attention to more related content PHP Chinese website (www.php.cn)!