环境搭建
1.Android design支持包和Android v4 支持包。
2.在build.gradle中添加
dependencies { compile files('libs/android-support-v4.jar') compile 'com.android.support:design:23.1.0' }
3.如果TabLayout的Title想自己定义Layout则需根据需求自己添加Layout文件。
示例代码(如何使用)
布局文件:activity_sxp_tablayout.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:theme="@style/AppTheme.AppBarOverlay"> <android.support.v7.widget.Toolbar android:id="@+id/tb_transitions" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" app:popupTheme="@style/AppTheme.PopupOverlay" /> </android.support.design.widget.AppBarLayout> <android.support.design.widget.TabLayout android:id="@+id/sliding_tabs" style="@style/CustomTabLayout" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabMode="fixed" /> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="0px" android:layout_weight="1" android:background="@android:color/white" /> </LinearLayout>
TabLayout Title 样式
<style name="CustomTabLayout" parent="Widget.Design.TabLayout"> <!--<item name="tabMaxWidth">@dimen/tab_max_width</item>--> <item name="tabIndicatorColor">@color/tab_indicator_color</item> <item name="tabIndicatorHeight">10dp</item> <item name="tabPaddingStart">12dp</item> <item name="tabPaddingEnd">12dp</item> <item name="tabBackground">@color/colorPrimary</item> <item name="tabTextAppearance">@style/CustomTabTextAppearance</item> <item name="tabSelectedTextColor">@color/tab_indicator_color</item> </style> <style name="CustomTabTextAppearance" parent="TextAppearance.Design.Tab"> <item name="android:textSize">20sp</item> <item name="android:textColor">@color/white</item> <item name="textAllCaps">false</item> </style>
1.tabMaxWidth:tab item的最大宽度,当app:tabMode="fixed"时不起作用,当app:tabMode="fixed"时才起作用。其中:
2.tabIndicatorColor:TabLayout指示器的颜色
3.tabIndicatorHeight:TabLayout指示器高度
4.tabPaddingStart:距离开始的长度
5.tabPaddingEnd:距离结束的长度
6.tabBackground:背景
7.tabTextAppearance:TabLayout title字体属性
8.tabSelectedTextColor:当前选择的tab的字体颜色
9.textAllCaps:TabLayout创建的Tab默认的是true,如果设置图标的话要设置成false。
初始化TabLayout和ViewPager
//初始化ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager); // 设置适配器 pagerAdapter = new SimpleFragmentPagerAdapter(getSupportFragmentManager(), this); viewPager.setAdapter(pagerAdapter); // 初始化TabLayout tabLayout = (TabLayout) findViewById(R.id.sliding_tabs); // 为TabLayout设置ViewPager tabLayout.setupWithViewPager(viewPager);
ViewPager适配器
public class SimpleFragmentPagerAdapter extends FragmentPagerAdapter { private Context context; // TabLayout title private String tabTitles[] = new String[]{"TAB1", "TAB2", "TAB3"}; // TabLayout 图标 private int[] imageResId = {R.mipmap.icon_tab, R.mipmap.icon_tab, R.mipmap.icon_tab}; public SimpleFragmentPagerAdapter(FragmentManager fm, Context context) { super(fm); this.context = context; } @Override public Fragment getItem(int position) { return PageFragment.newInstance(position + 1); } @Override public int getCount() { return tabTitles.length; } @Override public CharSequence getPageTitle(int position) { // 返回纯文字 // return tabTitles[position]; // 返回ICON和文字 Drawable image = context.getResources().getDrawable(imageResId[position]); image.setBounds(0, 0, image.getIntrinsicWidth() * 2, image.getIntrinsicHeight() * 2); SpannableString sb = new SpannableString(tabTitles[position]); ImageSpan imageSpan = new ImageSpan(image, ImageSpan.ALIGN_BOTTOM); sb.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE); return sb; } /** * 自定义TabLayout title * @param position * @return */ public View getTabView(int position){ View view = LayoutInflater.from(context).inflate(R.layout.view_sxp_tab_title, null); TextView tv= (TextView) view.findViewById(R.id.textView); tv.setText(tabTitles[position]); ImageView img = (ImageView) view.findViewById(R.id.imageView); img.setImageResource(imageResId[position]); return view; } }
其中getTagView()方法是自己定义的方法,作用是自定义TabLayout Title,需要在初始化TabLayout的时候调用:
//初始化ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager); // 设置适配器 pagerAdapter = new SimpleFragmentPagerAdapter(getSupportFragmentManager(), this); viewPager.setAdapter(pagerAdapter); // 初始化TabLayout tabLayout = (TabLayout) findViewById(R.id.sliding_tabs); // 为TabLayout设置ViewPager tabLayout.setupWithViewPager(viewPager); for (int i = 0; i < tabLayout.getTabCount(); i++) { TabLayout.Tab tab = tabLayout.getTabAt(i); tab.setCustomView(pagerAdapter.getTabView(i)); }
常见问题
1.自定义TabLayout Title时需要自己在ViewPager的OnPageChangeListener中自己处理。
相关推荐
《21世纪高等学校计算机基础实用规划教材:Android应用程序设计》在叙述上浅显易懂,对每一个知识点都配了相应的例题。随书光盘中收录了本书所有例题的源代码、电子课件,以及本书大部分例题的视频教学录像。《21...
《Android程序设计教程》介绍基于Android系统的程序设计技术,内容涵盖了Android相关领域,本书大致可以分成两个部分,第一部分为基础篇,主要介绍Android操作系统概况、Android生命周期与组件通信、Android用户界面...
Windows Mobile和Android获得IMEI、MEID和IMSI demo Windows Mobile是从别处拿来的, sim5.rar是IMEI、MEID和IMSI demo CallGetDeviceUniqueId是获取window mobile系统UID的另一个方式 Android很浅显,一起共享吧
强力推荐-Android技术精髓-Pro.Android.3,英文浅显易懂,感兴趣的朋友可以下来学习。
注重基础,适合Android初学者阅读的经典之作,虽是英文原版,比诸多译作可读性强。范例,文字都浅显易懂。值得永久收藏。
这本书极其出色,不仅文笔流畅、浅显易懂,内容也妙趣横生。本书既恰到好处地讲解了Android独有的特性,同时也突出了高质量编程的原则。 ——Anthony Stevens PocketJourney创始人兼CTO,Google Android竞赛...
个人学习过程中有关VLAN知识的浅显总结,不建议下载
本文档清晰的论述了 android的任务栈,浅显易懂。
java入门非常的浅显易懂,很好的入门书
java入门,非常的浅显易懂.rar
用于 Android编程学习,浅显易懂,实乃入门菜鸟不可多得的宝典。
android web应用开发,英文浅显易懂,感兴趣的朋友可以下来学习。
Android入门经典书籍,浅显易懂,非常适合想要自学Android的同学.
DebugFest 浅显的调试技术 调试技术晋级,经常回味很有帮助。
学校学校数据库ppt,绝对精品,数据库原理,浅显易懂学校数据库ppt,绝对精品,数据库原理,浅显易懂数据库ppt,绝对精品,数据库原理,浅显易懂
《浅入浅出Android安全》epub文档格式。浅显讲解Android相关安全知识,并不深入,只是简单讲解
很浅显易懂的东西,但是很专业,对不懂条件随机场的很有帮助。
本资源浅显易懂,对于那些想学习网站开发的书友们是不可多得的一个号教材
Qt教程及软件(超级浅显易懂,非常适合初学者),希望对大家有帮助!