小小千想和您聊一聊

当前位置: 首页> 技术分享> TAB书签选项卡制作(其一)

TAB书签选项卡制作(其一)

  一、TabActivity 实现选项卡效果:

  TabActivity(已经过期,使用FragmentActivity来实现相同的效果)

  (一)、相关类介绍:

  1、TabHost:提供选项卡(Tab页)的窗口视图容器。

  2、TabSpec:每个选项卡都包含选项卡指示符、内容和用于识别选项卡的标签。

  TabSpec与TabHost的关系:

  TabHost相当于浏览器中浏览器分布的集合,而TabSpec则相当于浏览器中的 每一个分页面。在Android中,每一个TabSpec可以是一个组件,也可以是一个布局,TabHost将每一个分页集中.       在一起,随着选项卡的切换来分别显示相应的界面。

  (二)、TabActivity实现选项卡效果的步骤:【了解】

  1、写选型卡页面特殊的布局文件:

  根节点必须是TabHost,属性android:id="@android:id/tabhost" 是固定值;

  必须有子节点TabWidget,必须有属性android:id="@android:id/tabs";

  必须有一个布局节点,属性必须是android:id="@android:id/tabcontent"。

  2、继承TabActivity:(以前学习的过程中都是继承android.app.Activity类,但是这里需要继承android.app.TabActivity)

  3、创建TabHost对象:通过getTabHost()方法来实现。

  4、分别创建TabSpec对象:

  通过TabHost对象的newTabSpec()方法创建TabSpec对象;

  通过setIndicator()设置标签和图标;

  通过setContent()设置内容。

  5、TabHost对象添加TabSpec对象。通过TabHost对象的addTab()方法实现添加选项卡。

  (三)、示例代码:


2、MainActivity中核心代码:
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();


TabSpec tabSpec1 = tabHost.newTabSpec("records")
.setIndicator("记录", res.getDrawable(R.drawable.ic_launcher))
.setContent(new Intent(this, NextActivity.class));
tabHost.addTab(tabSpec1);


TabSpec tabSpec2 = tabHost.newTabSpec("records")
.setIndicator("联系人", res.getDrawable(R.drawable.contacts))
.setContent(new Intent(this, NextActivity.class));
tabHost.addTab(tabSpec2);


TabSpec tabSpec3 = tabHost.newTabSpec("collections")
.setIndicator("收藏夹", res.getDrawable(R.drawable.collections))
.setContent(new Intent(this, NextActivity.class));
tabHost.addTab(tabSpec3);


}
}


  二、FragmentActivity中实现选项卡效果:

  (一)、与TabActivity中实现选项卡的不同之处:

  1、TabHost对象的创建方式不同;

  2、TabSpec对象的创建方式不同;

  3、布局文件不同。

  (二)、FragmentActivity 实现选项卡效果的步骤:【掌握】

  1、写选型卡页面特殊的布局文件:

  根节点必须是;

  必须有一个布局节点,用来放置选项卡内容。

  2、继承FragmentActivity:(以前学习的过程中都是继承android.app.Activity类,但是这里需要继承android.support.v4.app.FragmentActivity)

  3、创建TabHost对象:通过(FragmentTabHost) findViewById(R.id.tabhost)方法来实现。

  4、TabHost执行setup()方法:

  【备注:】如果使用 findViewById() 加载 TabHost,那么在新增一个选项卡之前, 需要调用 setup()方法。而在 TabActivity 中调用了 getTabHost() 方法后,你就不再需要调用setup()了。

  例如:tabHost.setup(this, getSupportFragmentManager(), R.id.layout_container_tabcontent);

  5、分别创建TabSpec对象:

  通过TabHost对象的newTabSpec()方法创建TabSpec对象;

  通过setIndicator()设置标签和图标;

  6、TabHost对象添加TabSpec对象。通过TabHost对象的addTab()方法实现添加选项卡。

  调用TabHost对象的有三个参数的addTab()方法。第一个参数是TabSpec对象,第二个参数是Fragment类的class文件,第三个参数的往Fragment对象中传递的Bundle数据。

  (三)、示例代码:


1、布局文件的代码:




2、MainActivity中核心代码:
public class MainActivity extends FragmentActivity {
private FragmentTabHost tabHost;
private Bundle bundle1, bundle2, bundle3;


@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);


tabHost = (FragmentTabHost) findViewById(R.id.tabhost);
tabHost.setup(this, getSupportFragmentManager(),
R.id.layout_container_tabcontent);


bundle1 = new Bundle();
bundle1.putInt("tabIndex", 1);
bundle2 = new Bundle();
bundle2.putInt("tabIndex", 2);
bundle3 = new Bundle();
bundle3.putInt("tabIndex", 3);


Resources res = getResources();
tabHost.addTab(
tabHost.newTabSpec("records").setIndicator("记录",
res.getDrawable(R.drawable.records)),
ContentFragment.class, bundle1);
tabHost.addTab(
tabHost.newTabSpec("contacts").setIndicator("联系人",
res.getDrawable(R.drawable.contacts)),
ContentFragment.class, bundle2);
tabHost.addTab(
tabHost.newTabSpec("collection").setIndicator("收藏夹",
res.getDrawable(R.drawable.collections)),
ContentFragment.class, bundle3);


}
}


3、ContentFragment类中的核心代码:
public class ContentFragment extends Fragment {
private TextView text_fragment_info;
private ListView listView_fragment;
private int tabIndex = 0;
private String defaultData = "未知";
private Listlist1, list2, list3;
private ArrayAdapteradapter = null;


@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
Bundle bundle = getArguments();
if (bundle != null) {
tabIndex = bundle.getInt("tabIndex");
defaultData = "您访问的是第" + tabIndex + "个栏目";


switch (tabIndex) {
case 1:
list1 = new ArrayList();
for (int i = 0; i < 10; i++) {
list1.add("记录:" + i);
}
break;
case 2:
list2 = new ArrayList();
for (int i = 0; i < 10; i++) {
list2.add("联系人:" + i);
}
break;
case 3:
list3 = new ArrayList();
for (int i = 0; i < 10; i++) {
list3.add("收藏夹:" + i);
}
break;
default:
break;
}
}
}


@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_content, container, false);
text_fragment_info = (TextView) view
.findViewById(R.id.text_fragment_info);
listView_fragment = (ListView) view
.findViewById(R.id.listView_fragment);


switch (tabIndex) {
case 1:
adapter = new ArrayAdapter(getActivity(),
android.R.layout.simple_list_item_1, list1);
break;
case 2:
adapter = new ArrayAdapter(getActivity(),
android.R.layout.simple_list_item_1, list2);
break;


case 3:
adapter = new ArrayAdapter(getActivity(),
android.R.layout.simple_list_item_1, list3);
break;
default:
break;
}


text_fragment_info.setText(defaultData);
listView_fragment.setAdapter(adapter);
return view;
}
} 


上一篇:HTML5工具初识之网页编辑器

下一篇:TAB书签选项卡制作(其二)

QQ技术交流群

千锋软件测试官方①群
858327674

加入群聊