摘要:前言中默认的位于的下方,在横屏有足够空间时,会将嵌入到中,节省纵向空间。一些设计强制将嵌入到,并去掉默认的,起到节省屏幕空间的作用,如网易云音乐中。
前言
Android中默认的TabBar位于ActionBar的下方,在ActionBar横屏有足够空间时,会将TabBar嵌入到ActionBar中,节省纵向空间。一些UI设计强制将TabBar嵌入到ActionBar,并去掉默认的HOME LOGO,起到节省屏幕空间的作用,如网易云音乐2.1.1中。
这部分代码在Google官方的Training中有详细的阐述(Creating Swipe Views with Tabs),这里就不详细解释了,它实现的这个侧滑和Tab联动的交互是上文所述效果的基础。
package me.codethink.embeddedtabsactionbar; import android.app.ActionBar; import android.app.Activity; import android.app.Fragment; import android.app.FragmentManager; import android.graphics.Color; import android.os.Bundle; import android.support.v13.app.FragmentStatePagerAdapter; import android.support.v4.view.ViewPager; import android.util.Log; import android.view.LayoutInflater; import android.view.Menu; import android.view.MenuItem; import android.view.View; import android.view.ViewGroup; import java.lang.reflect.Method; public class MainActivity extends Activity { private TabContentPagerAdapter mTabContentPagerAdapter; private ViewPager mViewPager; @Override protected void onCreate(Bundle savedInstanceState) { final ActionBar actionBar = getActionBar(); super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mTabContentPagerAdapter = new TabContentPagerAdapter(getFragmentManager()); mViewPager = (ViewPager) findViewById(R.id.pager); mViewPager.setAdapter(mTabContentPagerAdapter); mViewPager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener(){ @Override public void onPageSelected(int position) { actionBar.setSelectedNavigationItem(position); } }); actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS); ActionBar.TabListener tabListener = new ActionBar.TabListener() { @Override public void onTabSelected(ActionBar.Tab tab, android.app.FragmentTransaction fragmentTransaction) { mViewPager.setCurrentItem(tab.getPosition()); } @Override public void onTabUnselected(ActionBar.Tab tab, android.app.FragmentTransaction fragmentTransaction) { } @Override public void onTabReselected(ActionBar.Tab tab, android.app.FragmentTransaction fragmentTransaction) { } }; for (int i = 0; i < 3; i++) { actionBar.addTab( actionBar.newTab() .setText("Tab " + (i + 1)) .setTabListener(tabListener)); } } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.main, menu); return true; } @Override public boolean onOptionsItemSelected(MenuItem item) { // Handle action bar item clicks here. The action bar will // automatically handle clicks on the Home/Up button, so long // as you specify a parent activity in AndroidManifest.xml. int id = item.getItemId(); if (id == R.id.action_settings) { return true; } return super.onOptionsItemSelected(item); } public static class TabContentPagerAdapter extends FragmentStatePagerAdapter { public TabContentPagerAdapter(FragmentManager fm) { super(fm); } @Override public Fragment getItem(int i) { Fragment fragment = new DemoObjectFragment(); Bundle args = new Bundle(); switch (i) { case 0: args.putInt(DemoObjectFragment.ARG_OBJECT, Color.RED); break; case 1: args.putInt(DemoObjectFragment.ARG_OBJECT, Color.YELLOW); break; case 2: args.putInt(DemoObjectFragment.ARG_OBJECT, Color.BLUE); break; } fragment.setArguments(args); return fragment; } @Override public int getCount() { return 3; } @Override public CharSequence getPageTitle(int position) { return "OBJECT " + (position + 1); } } public static class DemoObjectFragment extends Fragment { public static final String ARG_OBJECT = "object"; @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View rootView = inflater.inflate( R.layout.fragment_main, container, false); Bundle args = getArguments(); rootView.setBackgroundColor(args.getInt(ARG_OBJECT)); return rootView; } } }
效果如下:
2. 嵌入TabBar到ActionBar通过反射机制强制嵌入TabBar是实现这个效果的核心部分,其代码如下:
@Override protected void onCreate(Bundle savedInstanceState) { ...... for (int i = 0; i < 3; i++) { actionBar.addTab( actionBar.newTab() .setText("Tab " + (i + 1)) .setTabListener(tabListener)); } enableEmbeddedTabs(actionBar); } private void enableEmbeddedTabs(Object actionBar) { try { Method setHasEmbeddedTabsMethod = actionBar.getClass().getDeclaredMethod("setHasEmbeddedTabs", boolean.class); setHasEmbeddedTabsMethod.setAccessible(true); setHasEmbeddedTabsMethod.invoke(actionBar, true); } catch (Exception e) { Log.v("EmbeddedTabs", e.getMessage().toString()); } }
效果如下:
通过设置定制的ActionBar style中的displayOptions为none可以去掉左侧默认的Logo
3.2 修改TabBar样式
这一部分主要包括三个步骤
1.修改Tab前景
2.修改Tab背景
3.去掉TabBar的divider
3.2.1 修改Tab前景Tab前景主要是icon被选中时候颜色的改变,这里icon在选中的时候为绿色,未选中为白色,通过selector建立对应的Tab前景样式如下(这里以tag这个标签为例):
actionbar_tag.xml
将三个前景图作为数组写到arrays.xml
arrays.xml
- @drawable/actionbar_home
- @drawable/actionbar_tag
- @drawable/actionbar_account
在onCreate函数中设置Tab的前景:
MainActivity.java
...... TypedArray iconIds = getResources().obtainTypedArray(R.array.actionbar_icons); for (int i = 0; i < 3; i++) { View view = getLayoutInflater().inflate(R.layout.actionbar_tab_layout, null); ImageView imageView = (ImageView) view.findViewById(R.id.icon); imageView.setImageResource(iconIds.getResourceId(i, -1)); actionBar.addTab( actionBar.newTab() .setCustomView(view) .setTabListener(tabListener)); } enableEmbeddedTabs(actionBar); ......
这里的action_tab_layout如下
action_tab_layout.xml
在styles.xml中设置Tab的padding和gravity
styles.xml
修改后的样式如下:
3.2.2 设置Tab背景Tab的背景是指Tab选中时,背景色随之改变的样式,同样通过selector实现,实现xml如下:
actionbar_tabs_bg.xml
在Tab的样式中指定background为actionbar_tags_bg.xml
3.2.3删除TabBar的divider...... ......
3.2.4 修改ActionBar颜色......
...... ......
最终完成后效果如下:
代码地址:
EmbeddedTabsActionBar
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/12155.html
摘要:智能渲染使用智能渲染,中显示快速修复渲染的错误的链接。这将提取从调试的过程相关数据,并显示调试器中的中。根据所选中的目录类型,会提供创建适当的文件类型。支持高分辨率视网膜显示在和。文件快速原型文件,不会创造任何项目文件。 这是翻译官方的文档,英语好的可以直接去官方文档查看,英语不好,大家就将就看吧,算是我翻译的第一篇技术文章,因为是个英语渣,技术也渣,所以最近在学英语,就尝试着自己来翻...
摘要:一个简洁而又优雅的原生框架,解放你的双手还不赶紧点击使用说明文档,体验一下吧涵盖绝大部分的组件等一系列的组件和丰富多彩的样式主题。样式统一,框架提供了一系列统一的样式,使整体看上去美观和谐。 showImg(https://segmentfault.com/img/bVbtTzX?w=388&h=321); XUI showImg(https://segmentfault.com/im...
摘要:上篇文章说到如何在安卓项目中添加前文请戳这里,在添加完之后,就可以用它做一些更加有趣的事情了,比如这篇文章要说的导航。下面是代码和三张导航的效果图 上篇文章说到如何在安卓项目中添加ActionBar(前文请戳这里),在添加完ActionBar之后,就可以用它做一些更加有趣的事情了,比如这篇文章要说的Tab导航。 首先,上一张官方文档的Tab导航展示图showImg(http://se...
摘要:自从把加入到后,其在安卓布局中的地位便一路上升。通过安卓的官方文档可以看出,的出现旨在为用户提供一个更加简洁和友好的框架。同时开发者通过采用也可以获得诸多好处比如在高版本安卓系统中更好的稳定性。 ActionBar 自从Android3.0(API 11)把ActionBar加入到android sdk后,其在安卓UI布局中的地位便一路上升。通过安卓的官方文档可以看出,ActionB...
摘要:本文分享开发中监听事件主要代码,供技术员参考学习。项目中越来越多的用到,下面记录一下在中监听的事件。实现事件,判断当前的是哪一个,是不是所需要的然后在需要监听事件的中写一个静态方法,传递与事件即可。 wemall-mobile是基于WeMall的android app商城,只需要在原商城目录下上传接口文件即可完成服务端的配置,客户端可定制修改。本文分享android开发Fragment...
阅读 931·2021-11-25 09:43
阅读 2781·2019-08-30 15:54
阅读 3104·2019-08-30 15:54
阅读 2818·2019-08-30 15:44
阅读 2644·2019-08-27 14:19
阅读 1510·2019-08-26 12:18
阅读 2159·2019-08-26 11:42
阅读 776·2019-08-26 11:35