TabWidget

叁歲伎倆 2024-02-18 18:56 27阅读 0赞

TabWidget通过多个标签切换显示不同的内容。要实现这一效果，需要先了解TabHost，它是一个存放多个Tab标签的容器。每个Tab都可以对应自己的布局。

### 1 在一个容器中编写 ###

![Center][] ![Center 1][]

**Activity.xml**

<?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" >
    
        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" >
        </TabWidget>
    
        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:paddingTop="65px" >
    
            <LinearLayout
                android:id="@+id/Tab1"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical" >
    
                <EditText
                    android:id="@+id/edtTab1"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content" >
                </EditText>
    
                <Button
                    android:id="@+id/btnTab1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Tab1" >
                </Button>
            </LinearLayout>
    
            <LinearLayout
                android:id="@+id/Tab2"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal" >
    
                <EditText
                    android:id="@+id/edtTab2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="300" >
                </EditText>
    
                <Button
                    android:id="@+id/btnTab2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Tab2" >
                </Button>
            </LinearLayout>
        </FrameLayout>
    
    </TabHost>

**MainActivity.java**

public class MainActivity extends TabActivity {//基于TabActivity构建
    	
    	Button btnTab1,btnTab2;
    	EditText edtTab1,edtTab2;
        /** Called when the activity is first created. */
        @Override
        public void onCreate(Bundle savedInstanceState) {
        	super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            
            TabHost tabs = getTabHost();
            //设置Tab1
            TabSpec tab1 = tabs.newTabSpec("tab1");
            tab1.setIndicator("tab1");      // 设置tab1的名称
            tab1.setContent(R.id.Tab1);    // 关联控件
            tabs.addTab(tab1);                // 添加tab1
            
            btnTab1=(Button)this.findViewById(R.id.btnTab1);
            edtTab1=(EditText)this.findViewById(R.id.edtTab1);
            btnTab1.setOnClickListener(new ClickEvent());
            
            //设置Tab2
            TabSpec tab2 = tabs.newTabSpec("tab2");
            tab2.setIndicator("tab2");      
            tab2.setContent(R.id.Tab2);    
            tabs.addTab(tab2);                
            
            btnTab2=(Button)this.findViewById(R.id.btnTab2);
            edtTab2=(EditText)this.findViewById(R.id.edtTab2);
            btnTab2.setOnClickListener(new ClickEvent());
            
            tabs.setCurrentTab(0);
        }
        
        class ClickEvent implements View.OnClickListener {
    		@Override
    		public void onClick(View v) {
    			if(v==btnTab1)
    			{
    				edtTab1.setText("tab1");
    			}
    			else if(v==btnTab2)
    			{
    				edtTab2.setText("tab2");
    			}
    		}
        
        }
    }

### 2 分容器编写 ###

![Center 2][] ![Center 3][] ![Center 4][]

**ic\_tab\_artists.xml**

**ic\_tab\_album.xml**

**main.xml**

**MainActivity.java**

public class MainActivity extends TabActivity {
    	@Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            
            Resources res = getResources();
            TabHost tabHost = getTabHost();
            TabHost.TabSpec spec;
            Intent intent;
            
            intent = new Intent().setClass(this, ArtistsActivity.class);
            spec = tabHost.newTabSpec("artists").setIndicator("Artists", res.getDrawable(R.drawable.ic_tab_artists)).setContent(intent);
            tabHost.addTab(spec);
            
            intent = new Intent().setClass(this, AlbumsActivity.class);
            spec = tabHost.newTabSpec("albums").setIndicator("Albums", res.getDrawable(R.drawable.ic_tab_album)).setContent(intent);
            tabHost.addTab(spec);
            
            tabHost.setCurrentTab(1);
    	}
    }

[Center]: https://img-blog.csdn.net/20170601134324296?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMzk0MzQyMA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/8d39d26a9b0f404fbbd05d4a31d03cb2.png
[Center 2]: https://img-blog.csdn.net/20170601140546250?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMzk0MzQyMA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 3]: https://img-blog.csdn.net/20170601140627798?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMzk0MzQyMA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/6383425b1668460e881cf688bb53b663.png