Android典型界面设计(4)——使用ActionBar+Fragment实现tab切换
一、问题描述 |
之前我们使用ViewPager+Fragment区域内头部导航,在Android 3.0之后Google增加了新的ActionBar,可方便的实现屏幕Head部区域的 设计如返回键、标题、ICON、Logo、自定义View以及菜单等,并可实现Tab导航,下面我们就使用ActionBar实现下图所示界面设计:
二、案例主要组件 |
1、编写TBActivity
public class TBActivity extends Activity {
private ActionBar actionBar;
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_tb);
initActionBar();
initTab();
}
@SuppressLint("NewApi")
private void initActionBar(){
actionBar=super.getActionBar();//获得ActionBar
actionBar.setDisplayShowHomeEnabled(true);//显示home区域
actionBar.setDisplayHomeAsUpEnabled(true);//显示返回图片
actionBar.setHomeAsUpIndicator(R.drawable.back);//设置返回图标
//去除默认的ICON图标
Drawable colorDrawable=new
ColorDrawable(android.R.color.transparent);
actionBar.setIcon(colorDrawable);
//设置自定义View
actionBar.setDisplayShowCustomEnabled(true);
actionBar.setCustomView(R.layout.head_logo);
//设置导航模式为Tabs方式
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
}
private void initTab(){
Bundle bundle1=new Bundle();
bundle1.putString("title", "挖掘机区块信息");
Tab tab1= actionBar.newTab().setText("挖掘机").setTabListener(
new TabListener<FirstFragment>(this, "挖掘机", FirstFragment.class,bundle1));
actionBar.addTab(tab1); Bundle bundle2=new Bundle();
bundle2.putString("title", "装载机区块信息");
Tab tab2=actionBar.newTab().setText("装载机").setTabListener(
new TabListener<SecondFragment>(this, "装载机",
SecondFragment.class,bundle2));
actionBar.addTab(tab2); Bundle bundle3=new Bundle();
bundle3.putString("title", "平地机区块信息");
Tab tab3=actionBar.newTab().setText("平地机").setTabListener(
new TabListener<ThirdFragment>(this,
"平地机",ThirdFragment.class,bundle3));
actionBar.addTab(tab3);
Bundle bundle4=new Bundle();
bundle4.putString("title", "更多区块信息");
Tab tab4=actionBar.newTab().setText("更多").setTabListener(
new TabListener<FourFragment>(this,
"更多", FourFragment.class,bundle4));
actionBar.addTab(tab4);
}
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.tb, menu);
return true;
} }
2、TabListener组件
public class TabListener<T extends Fragment>
implements android.app.ActionBar.TabListener{
private Fragment mFragment;
private final Activity mActivity;
private final String mTag;
private final Class<T> mClass;
private Bundle bundle;
public TabListener(Activity activity, String tag, Class<T> clz,Bundle bundle) {
mActivity = activity;
mTag = tag;
mClass = clz;
this.bundle=bundle;
} @Override
public void onTabSelected(Tab tab, FragmentTransaction ft) {
// TODO Auto-generated method stub
if(mFragment==null){
mFragment=Fragment.instantiate(mActivity, mClass.getName());
mFragment.setArguments(bundle);//向Fragment传递参数
ft.add(android.R.id.content,mFragment, mTag);
}else{
ft.attach(mFragment);
}
}
@Override
public void onTabUnselected(Tab tab, FragmentTransaction ft) {
if(mFragment!=null){
ft.detach(mFragment);
}
}
@Override
public void onTabReselected(Tab tab, FragmentTransaction ft) { } }
3、设计四个tab区域的Fragment
分别为:(FirstFragment、SecondFragment、ThirdFragment、FourFragment),这里以FirstFragment为例(其他在这里无差别)
public class FirstFragment extends Fragment {
private String title;
@Override
public void setArguments(Bundle bundle) {
// TODO Auto-generated method stub
title=bundle.getString("title");
} @Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
TextView textView = new TextView(getActivity());
textView.setText(title);
textView.setTextSize(20);
textView.setTextColor(Color.RED);
textView.setGravity(Gravity.CENTER);
LinearLayout layout = new LinearLayout(getActivity());
LayoutParams params = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
layout.addView(textView, params);
return layout;
}
}
4、定义ActionBar的样式
<style name="MyActionBar" parent="@android:style/Theme.Holo.Light">
<item name="android:actionBarStyle">@style/actionbar_style</item>
<!-- 给操作栏中的选项标签定义样式资源 -->
<item name="android:actionBarTabStyle">@style/MyActionBarTabStyle</item>
<!-- 给导航选项标签中的文本定义样式资源。 -->
<item name="android:actionBarTabTextStyle">@style/MyActionBarTabTextStyle</item>
</style> <!-- actionbar样式 -->
<style name="actionbar_style" parent="@android:style/Widget.Holo.Light.ActionBar">
<item name="android:background">#EA4609</item>
<item name="android:titleTextStyle">@style/ActionBar_titleStyle</item>
<item name="android:icon">@android:color/transparent</item>
<item name="android:itemPadding">20dip</item>
</style>
<!-- Tab选项标签的样式 -->
<style name="MyActionBarTabStyle"
parent="@android:style/Widget.Holo.Light.ActionBar.TabView">
<item name="android:background">@drawable/tab_selector</item>
<item name="android:paddingLeft">0dp</item>
<item name="android:paddingRight">0dp</item>
<item name="android:height">100dp</item>
</style>
<!-- Tab选项标签字体的样式 -->
<style name="MyActionBarTabTextStyle"
parent="@android:style/Widget.Holo.Light.ActionBar.TabText">
<item name="android:textColor">#666666</item>
<item name="android:textSize">18sp</item>
</style>
在TBActivity上设置样式android:theme=” @style/MyActionBar
想要了解更多内容的小伙伴,可以点击查看源码,亲自运行测试。
疑问咨询或技术交流,请加入官方QQ群: (452379712)
出处:http://www.cnblogs.com/jerehedu/
本文版权归烟台杰瑞教育科技有限公司和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
Android典型界面设计(4)——使用ActionBar+Fragment实现tab切换的更多相关文章
- Android典型界面设计(5)——使用SlidingMenu和DrawerLayout分别实现左右侧边栏
一.问题描述 侧边栏是Android应用中十分常见的界面效果,可随主屏在左侧或右侧联动,是特别适应手机等小屏幕特性的典型界面设计方案之一,常用作应用的操作菜单,如图所示 实现侧边栏可以使用第三方组件s ...
- Android典型界面设计(3)——访网易新闻实现双导航tab切换
一.问题描述 双导航tab切换(底部区块+区域内头部导航),实现方案底部区域使用FragmentTabHost+Fragment, 区域内头部导航使用ViewPager+Fragment,可在之前博客 ...
- Android典型界面设计-访网易新闻实现双导航tab切换
一.问题描述 双导航tab切换(底部区块+区域内头部导航),实现方案底部区域使用FragmentTabHost+Fragment, 区域内头部导航使用ViewPager+Fragment,可在之前博客 ...
- Android典型界面设计(6)——ActionBar Tab+ViewPager+Fagment实现滑动导航
一.问题描述 在Android典型界面设计一文中,实现典型滑动导航界面,其实使用ActionBar 也可以轻松实现这一效果,甚至也可实现类似Android典型界面设计(3)的双导航效果.可见Actio ...
- Android典型界面设计(7) ——DrawerLayout+Fragement+ViewPager+PagerTabStrip实现双导航
一.问题描述 在Android典型界面设计(3)的我们实现了双导航效果,即外层底部导航和内部区域的头部导航,如网易新闻等很多应用采用了这种导航,但Google提供DrawerLayout可实现抽屉式导 ...
- Android典型界面设计——ViewPage+Fragment实现区域顶部tab滑动切换
一.问题描写叙述 本系列将结合案例应用,陆续向大家介绍一些Android典型界面的设计,首先说说tab导航,导航分为一层和两层(底部区块+区域内头部导航).主要实现方案有RadioGroup+View ...
- Android典型界面设计——FragmentTabHost+Fragment实现底部tab切换
一.问题描述 在上次博文中,我们使用RadioGroup+ViewPage+Fragmen实现了顶部滑动导航(查看文章:http://www.cnblogs.com/jerehedu/p/460759 ...
- Android典型界面设计(8) ——ViewPager+PagerSlidingTabStrip实现双导航
一.问题描述 PagerSlidingTabStrip是android开源项目,指示器控件.官网地址:https://github.com/astuetz/PagerSlidingTabStrip 该 ...
- Android的界面设计工具 DroidDraw
Android的界面设计工具 DroidDraw DroidDraw 下载地址:http://code.google.com/p/droiddraw/ 如图 也可以使用在线的版本(http://www ...
随机推荐
- 【python】正则表达式中的转义问题
encode('string-escape') 解决 比如想匹配'\x0e\x0a'中的'\x'后的内容,这里希望把'\x0e'作为一个字符串,那么其中的\应该被转义. 未加转义的正则: p = '( ...
- poj1179 环形+区间dp
因为要用到模,所以左起点设置为0比较好 #include<iostream> #include<cstdio> #include<cstring> #define ...
- hdu2586 lca倍增法
倍增法加了边的权值,bfs的时候顺便把每个点深度求出来即可 #include<iostream> #include<cstring> #include<cstdio> ...
- 步步为营-21-xml的增删改查
1 增加(存在则添加,不存在则新建) //对xml的操作-- XmlDocument doc = new XmlDocument(); if (File.Exists("Person.xml ...
- linux下安装ruby环境
安装步骤: ruby的shell叫irb,我们可以输入irb -v查看下irb的版本号 1.安装ruby解释器shell: yum install ruby-irb -y Installed: rub ...
- Ext.js入门:TabPanel组件(八)
一:TabPanel组件简介 二:简单代码示例 三:使用iframe作为tab的标签页内容 四:动态添加tabpanel的标签页 五:为tabpanel标签页添加右键菜单 方式一: <html ...
- MockMvc 对 Spring Boot 进行单元测试
import org.junit.Test; import org.junit.runner.RunWith; import org.springframework.beans.factory.ann ...
- linux命令之grep用法
grep是linux中很常用的一个命令,主要功能就是进行字符串数据的对比,能使用正则表达式搜索文本,并将符合用户需求的字符串打印出来.grep全称是Global Regular Expression ...
- java:从指定问价中读取80个字节写入指定文件中
import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStream; public class F ...
- python学习之集合
集合(set)是一个无序的不重复元素序列. 可以使用大括号 { } 或者 set() 函数创建集合,注意:创建一个空集合必须用 set() 而不是 { },因为 { } 是用来创建一个空字典. 创建格 ...