Android Advanced Components - Tab

Keywords: Android Mobile Eclipse xml

Tab is one of the most popular Android advanced components, which can save pages, such as our commonly used qq interface, contacts, messages and other function options pages are actually in an activity, switching them does not lead to page refreshment; moreover, the phone functions of mobile phones include contacts, unanswered calls, answered calls, etc. It's all in one interface, and it's in the same interface to switch pages. If you put the above into different interfaces, it seems that it will be very cumbersome to use. So this section describes how to use tabs to make simple page cuts.

Explain the tab:

Selection card function makes novice a little confused, as a novice, roughly speaking:

As shown below, a whole tab consists of several page cuts. The whole tab is a TabHost component. The component contains a vertical linear layout. The top part is a TabWidget, and the bottom part is a frame layout. Every time we choose page cutting by heading, the layout of the next frame will change. The selected frame will appear at the top, which is the principle of the tab. In terms of code, it is called TabHost as a whole. The title and frame below constitute TabSpec. In fact, it is TabSpec that adds or subtracts pages.

1. Adding basic layout components (eclipse drag-and-drop leads to several more linear layouts that can be deleted, because that's the layout inside the frame layout, which can not be used)

    <TabHost                                                           //Here isTabHost
        android:id="@android:id/tabhost"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <LinearLayout                                                  //The vertical linear layout determines that the top is the title and the bottom is the frame.
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical" >

            <TabWidget                                                //Title part
                android:id="@android:id/tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" >
            </TabWidget>

            <FrameLayout                                             //Switching frame
                android:id="@android:id/tabcontent"
                android:layout_width="match_parent"
                android:layout_height="match_parent" >
            </FrameLayout>
        </LinearLayout>
    </TabHost>

2. Get TabHost and initialize

        private TabHost tabHost;
        tabHost =(TabHost)findViewById(android.R.id.tabhost);
        tabHost.setup();

3. Create three layout files. These three layout files are added to the frame container of the tab, so that content switching can be achieved.

<?xml version="1.0" encoding="utf-8"?>
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/n"
    android:src="@drawable/nature"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    

</ImageView>

4. Add page cuts to TabHost, including titles and frames. Layout addition in the main activity is initialized by setContentView(). Tab addition is to add content in the known layout, not the initialization of the layout, so we need to fill the layout in order to add the three defined layouts to the frame.

        LayoutInflater inflater = LayoutInflater.from(this);             //Get the layout filler
        
        inflater.inflate(R.layout.lay1, tabHost.getTabContentView());        
        inflater.inflate(R.layout.lay2, tabHost.getTabContentView());
        inflater.inflate(R.layout.lay3, tabHost.getTabContentView());
        
        tabHost.addTab(tabHost.newTabSpec("tab01").setIndicator("landscape").setContent(R.id.n));
        tabHost.addTab(tabHost.newTabSpec("tab02").setIndicator("Scenery").setContent(R.id.s));
        tabHost.addTab(tabHost.newTabSpec("tab03").setIndicator("start-up").setContent(R.id.i));

Reflections: Tab is still relatively simple to implement, the only use of a novice difficult to understand layout filling, this is still more to see the relevant articles.

Please leave a message to help improve!

Posted by Naoa on Tue, 09 Apr 2019 13:09:31 -0700