导航--TabHost

   打开Android手机中的呼叫按键，里面显示出的就是导航控件，我们可以单击一个，然后让下面显示不同或者相同布局的页面。两种实现方式

   一：继承自TabActivitty

   继承的导航，导航栏中只能是文字，且导航栏样式比较的单一

   具体实现：

   ◆主Activity

@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); //定义导航TabHost TabHost th = getTabHost(); /** * 给导航添加导航项 * 每addTab一次，就加了一个标签 * newTabSpec：指定标签的ID，用来区分不同的标签 * setIndicator：设置标签的显示信息 * setContent：单击时的响应事件，这里为页面的跳转 */ th.addTab(th.newTabSpec("tab1").setIndicator("导航1") .setContent(new Intent(this, Act1.class))); th.addTab(th.newTabSpec("tab2").setIndicator("导航2") .setContent(new Intent(this, Act2.class))); th.addTab(th.newTabSpec("tab3").setIndicator("导航3") .setContent(new Intent(this, Act3.class))); }

◆单击导航时页面跳转的三个Activity只需分别制指定三个xml文件即可，这三个xml文件只是添加了一个按钮。

◆结果

   二：自定义导航

   1：创建

   （1）创建xml文件，创建TabHost节点，ID自行设定。

   （2）创建TabWidget子节点，用于设定标签，ID必须为"@android:id/tabs"。每一个标签会有一个xml文件中定义的样式决定。比如这个导航标签中可以为上面是一幅图片，下面是一个文字，那么这样的样式可以在xml文件中定义。

   （3）创建FrameLayout子节点，用于显示内容，Id必须为"@android:id/tabcontent"。有几个标签，FrameLayout就有几个布局视图。比如有单个导航标签，则就有三个RelativeLayout（这里只是举个例子，也可以为其他布局），在这个布局中可以设定自己的样式。

   2：具体实现

   （1）TabHost的selftabhost.xml文件

<?xml version="1.0" encoding="utf-8"?> <!-- 注意这里没有布局，直接就是一个TabHost --> <TabHost xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/tabhost" android:layout_width="fill_parent" android:layout_height="fill_parent" > <LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" android:gravity="center" > <!-- 导航标签 --> <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:gravity="center" > <!-- 里面有几个RelativeLayout就有几个界面要显示 --> <RelativeLayout android:id="@+id/daohang1" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center"> <!-- 定义界面中的样式，这里为一个按钮 --> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="导航1对应界面上的按钮1" /> </RelativeLayout> <RelativeLayout android:id="@+id/daohang2" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" > <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="导航2对应界面上的按钮2" /> </RelativeLayout> <RelativeLayout android:id="@+id/daohang3" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center"> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="导航3对应界面上的按钮3" /> </RelativeLayout> </FrameLayout> </LinearLayout> </TabHost>

   （2）导航标签的样式xml文件

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:gravity="center" > <ImageView android:id="@+id/p_w_picpathView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_launcher" /> <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="TextView" /> </LinearLayout>

   （3）主Activity：SelfTabHost

public class SelfTabHost extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); //加载自定义导航视图 setContentView(R.layout.selftabhost); //定义导航 TabHost th = (TabHost) findViewById(R.id.tabhost); //初始化导航 th.setup(); //定义每一个导航标签与其对应的显示内容的绑定，并定义单击时触发的事件（即跳转页面） TabSpec ts1 = th.newTabSpec("tab1");//定义第一个标签，Id为tab1 ts1.setIndicator(createTabView(th, "导航1", R.drawable.ic_launcher));//设置标签与其对应的显示内容的绑定 ts1.setContent(R.id.daohang1);//定义单击时触发的事件 th.addTab(ts1);//把标签添加到导航中 TabSpec ts2 = th.newTabSpec("tab2");//定义第一个标签，Id为tab2 ts2.setIndicator(createTabView(th, "导航2", R.drawable.ic_launcher));//设置标签与其对应的显示内容的绑定 ts2.setContent(R.id.daohang2);//定义单击时触发的事件 th.addTab(ts2);//把标签添加到导航中 TabSpec ts3 = th.newTabSpec("tab3");//定义第一个标签，Id为tab3 ts3.setIndicator(createTabView(th, "导航3", R.drawable.ic_launcher));//设置标签与其对应的显示内容的绑定 ts3.setContent(R.id.daohang3);//定义单击时触发的事件 th.addTab(ts3);//把标签添加到导航中 } //编一个方法，返回每一个导航标签与内容的绑定 public View createTabView(TabHost th,String title,int p_w_picpath){ //加载标签对应的视图 View view = LayoutInflater.from(this).inflate(R.layout.cell, null,false); //得到控件，设置属性 TextView txtView = (TextView) view.findViewById(R.id.textView1); txtView.setText(title); //得到控件，设置属性 ImageView p_w_picpathView = (ImageView) view.findViewById(R.id.p_w_picpathView1); p_w_picpathView.setBackgroundResource(p_w_picpath); //返回视图 return view; } }

（4）结果

   导航，指引你前进的方向。。。Come On

转载于:https://blog.51cto.com/cinderella7/1282212