Android快速开发-选项卡
介绍
几行代码实现Android选项卡界面,支持标准底部Tab自定义视图选项卡,头部文字选项卡。
底部自定义视图选项卡
先来看看实现下图中的效果我们代码应该怎么写?
实现上图效果只需以下代码:
public class TestBottomTabActivity extends TabActivity {
@Override
protected List<TabItemView> getTabViews() {
List tabviews = new ArrayList();
tabviews.add(new TabItemView(this,"1",R.color.colorPrimary,R.mipmap.ic_launcher,0));
tabviews.add(new TabItemView(this,"2",R.color.colorPrimary,R.mipmap.ic_launcher,0));
tabviews.add(new TabItemView(this,"3",R.color.colorPrimary,R.mipmap.ic_launcher,0));
tabviews.add(new TabItemView(this,"4",R.color.colorPrimary,R.mipmap.ic_launcher,0));
return tabviews;
}
@Override
protected List<Fragment> getFragments() {
List fragments = new ArrayList();
fragments.add(BlankFragment.newInstance("1",null));
fragments.add(BlankFragment.newInstance("2",null));
fragments.add(BlankFragment.newInstance("3",null));
fragments.add(BlankFragment.newInstance("4",null));
return fragments;
}
@Override
protected List<String> getTitles() {
return null;
}
@Override
protected TabType getTabType() {
return TabType.BottomCustomViewTab;
}
}
头部文字选项卡
先来看看实现下图中的效果我们代码应该怎么写?
实现上图效果只需以下代码:
public class TestTopTabActivity extends TabActivity {
@Override
protected List<TabItemView> getTabViews() {
return null;
}
@Override
protected List<Fragment> getFragments() {
List fragments = new ArrayList();
fragments.add(BlankFragment.newInstance("1",null));
fragments.add(BlankFragment.newInstance("2",null));
fragments.add(BlankFragment.newInstance("3",null));
fragments.add(BlankFragment.newInstance("4",null));
return fragments;
}
@Override
protected List<String> getTitles() {
List list = new ArrayList();
list.add("待支付");
list.add("待发货");
list.add("待收货");
list.add("待评价");
return list;
}
@Override
protected TabType getTabType() {
return TabType.TopTitleTab;
}
}
实现
准备知识
我们都知道在android.support.design.widget包中为我们提供了TabLayout用来进行水平方向的tab展示,不清楚的同学可以先百度了解一下,用法很简单,大致如下:
viewPager = (ViewPager) findViewById(R.id.viewPager);
tabLayout = (TabLayout) findViewById(R.id.tabLayout);
//为viewPager设置一个FragmentPagerAdapter
pagerAdapter = new SimpleFragmentPagerAdapter(getSupportFragmentManager(), this);
viewPager.setAdapter(pagerAdapter);
//进行关联
tabLayout.setupWithViewPager(viewPager);
tabLayout.setTabMode(TabLayout.MODE_FIXED);
实现一个头部文字选项卡
为了能够快速实现一个头部文字选项卡,我们可以将一些不变的代码写在一个父类Activity,让后提供抽象方法来让子类去实现会变化的代码,由此如果我们实现一个头头部文字选项卡抽象类如下:
1、首先定义布局
activity_tab_top.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="48dp"></android.support.design.widget.TabLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#d3d3d3"
android:orientation="vertical">
</View>
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"></android.support.v4.view.ViewPager>
</LinearLayout>
2、抽象类实现
public abstract class TabActivity extends AppCompatActivity{
private ViewPager viewPager;
private TabLayout tabLayout;
private SimpleFragmentPagerAdapter pagerAdapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_tab_top);
initView();
}
private void initView() {
viewPager = (ViewPager) findViewById(R.id.viewPager);
tabLayout = (TabLayout) findViewById(R.id.tabLayout);
pagerAdapter = new SimpleFragmentPagerAdapter(getSupportFragmentManager(), this);
viewPager.setAdapter(pagerAdapter);
tabLayout.setupWithViewPager(viewPager);
tabLayout.setTabMode(TabLayout.MODE_FIXED);
}
protected abstract List<Fragment> getFragments();//返回tab对应的fragment
protected abstract List<String> getTitles();//头部显示的title列表
public class SimpleFragmentPagerAdapter extends FragmentPagerAdapter {
public SimpleFragmentPagerAdapter(FragmentManager fm, Context context) {
super(fm);
}
@Override
public Fragment getItem(int position) {
return getFragments().get(position);
}
@Override
public int getCount() {
return getFragments().size();
}
@Override
public CharSequence getPageTitle(int position) {
if (getTitles()!=null&&!getTitles().isEmpty()){
return getTitles().get(position);
}
return null;
}
}
}
以上代码便实现了一个通用的头部文字选项卡抽象类,以后要实现类似上面图2界面只需要这样:
public class TestTopTabActivity extends TabActivity {
@Override
protected List<Fragment> getFragments() {
List fragments = new ArrayList();
fragments.add(BlankFragment.newInstance("1",null));
fragments.add(BlankFragment.newInstance("2",null));
fragments.add(BlankFragment.newInstance("3",null));
fragments.add(BlankFragment.newInstance("4",null));
return fragments;
}
@Override
protected List<String> getTitles() {
List list = new ArrayList();
list.add("待支付");
list.add("待发货");
list.add("待收货");
list.add("待评价");
return list;
}
}
实现一个底部自定义视图选项卡
要实现一个底部自定义视图要相对麻烦一点,因为底部的视图是由我们提供的,所以需要一个我们的自定义视图,那么怎么实现呢,我们可能想到在底部设置写一个自定义能添加底部视图的view,然后做不同的点击处理。但是TabLayout下的每个tab其实是支持设置自定义视图的,只需要调用TabLayout.Tab对象提供的setCustomView方法即可。
这样我们提供一个底部自定义视图选项卡的抽象类如下:
1、首先定义布局
activity_tab.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"></android.support.v4.view.ViewPager>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#d3d3d3"
android:orientation="vertical">
</View>
<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
app:tabIndicatorHeight="0dp"
android:layout_height="48dp"></android.support.design.widget.TabLayout>
</LinearLayout>
2、抽象类实现
public abstract class TabActivity extends AppCompatActivity{
private ViewPager viewPager;
private TabLayout tabLayout;
private SimpleFragmentPagerAdapter pagerAdapter;
private TabType mTabType = TabType.BottomCustomViewTab;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_tab);
initView();
}
private void initView() {
viewPager = (ViewPager) findViewById(R.id.viewPager);
tabLayout = (TabLayout) findViewById(R.id.tabLayout);
pagerAdapter = new SimpleFragmentPagerAdapter(getSupportFragmentManager(), this);
viewPager.setAdapter(pagerAdapter);
tabLayout.setupWithViewPager(viewPager);
tabLayout.setTabMode(TabLayout.MODE_FIXED);
if (getTabViews()!=null){
for (int i = 0; i < tabLayout.getTabCount(); i++) {
TabLayout.Tab tab = tabLayout.getTabAt(i);
tab.setCustomView(pagerAdapter.getTabView(i));
}
}
}
protected abstract List<TabItemView> getTabViews();//返回底部自定义tab视图
protected abstract List<Fragment> getFragments();//返回tab对应的fragment
public class SimpleFragmentPagerAdapter extends FragmentPagerAdapter {
public SimpleFragmentPagerAdapter(FragmentManager fm, Context context) {
super(fm);
}
@Override
public Fragment getItem(int position) {
return getFragments().get(position);
}
@Override
public int getCount() {
return getFragments().size();
}
public View getTabView(int position) {
return getTabViews().get(position);
}
}}
上面代码和之前实现一个头部标题选项卡的抽象类大致一样,只是提供了 protected abstract List getTabViews()方法用于让子类提供底部自定义tab视图TabItemView,底部视图一般就是一个图片加一个文字,那么我们自定义一个底部视图TabItemView如下。
TabItemView实现如下:
public class TabItemView extends LinearLayout {
/**
* Item 的标题
*/
public String title;
public int textColor;
public int iconDrawable;
public int bgDrawable;
public TextView tvTitle;
public ImageView ivIcon;
public TabItemView(Context context, String title, int textColor, int iconDrawable,
int bgDrawable) {
super(context);
this.title = title;
this.iconDrawable = iconDrawable;
this.textColor = textColor;
this.bgDrawable = bgDrawable;
init();
}
/**
* 初始化
*/
public void init(){
View view = LayoutInflater.from(super.getContext()).inflate(R.layout.view_tab_item, this);
tvTitle = (TextView) view.findViewById(R.id.tvTitle);
ivIcon = (ImageView) view.findViewById(R.id.ivIcon);
LinearLayout.LayoutParams layoutParams = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
layoutParams.weight = 1;
view.setLayoutParams(layoutParams);
if (iconDrawable!=0){
ivIcon.setImageResource(iconDrawable);
}
if (bgDrawable!=0) {
this.setBackgroundResource(bgDrawable);
}
if (textColor!=0){
tvTitle.setTextColor(textColor);
}
tvTitle.setText(title);
}
}
TabItemView对应布局:
view_tab_item.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/viewTabView"
android:orientation="vertical"
android:layout_width="match_parent"
android:background="?android:selectableItemBackground"
android:gravity="center"
android:layout_height="match_parent">
<ImageView
android:id="@+id/ivIcon"
android:layout_weight="1"
android:src="@mipmap/ic_launcher"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<TextView
android:id="@+id/tvTitle"
android:layout_weight="1"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="首页"/>
</LinearLayout>
很简单就是提供一个构造方法在初始化的时候设置图片、文字、文字颜色等信息。
那么到此,我们如果遇到如上图1要实现一个底部视图选项卡只需要这样:
public class TestBottomTabActivity extends TabActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}
@Override
protected List<TabItemView> getTabViews() {
List tabviews = new ArrayList();
tabviews.add(new TabItemView(this,"1",R.color.colorPrimary,R.mipmap.ic_launcher,0));
tabviews.add(new TabItemView(this,"2",R.color.colorPrimary,R.mipmap.ic_launcher,0));
tabviews.add(new TabItemView(this,"3",R.color.colorPrimary,R.mipmap.ic_launcher,0));
tabviews.add(new TabItemView(this,"4",R.color.colorPrimary,R.mipmap.ic_launcher,0));
return tabviews;
}
@Override
protected List<Fragment> getFragments() {
List fragments = new ArrayList();
fragments.add(BlankFragment.newInstance("1",null));
fragments.add(BlankFragment.newInstance("2",null));
fragments.add(BlankFragment.newInstance("3",null));
fragments.add(BlankFragment.newInstance("4",null));
return fragments;
}
}
二者结合
到此相信你们已经发现实现头部文字选项卡或者底部自定义视图选项卡这里都用了TabLayout+ViewPager的方式,那么我们来个结合。
提供一个枚举指定tab类型,根据tab类型进行数据的获取即可。
组合之后的抽象类如下:
public abstract class TabActivity extends AppCompatActivity{
private ViewPager viewPager;
private TabLayout tabLayout;
private SimpleFragmentPagerAdapter pagerAdapter;
private TabType mTabType = TabType.BottomCustomViewTab;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mTabType = getTabType()==null?TabType.BottomCustomViewTab:getTabType();
if (mTabType==TabType.BottomCustomViewTab){
setContentView(R.layout.activity_tab);
}else{
setContentView(R.layout.activity_tab_top);
}
initView();
}
private void initView() {
viewPager = (ViewPager) findViewById(R.id.viewPager);
tabLayout = (TabLayout) findViewById(R.id.tabLayout);
pagerAdapter = new SimpleFragmentPagerAdapter(getSupportFragmentManager(), this);
viewPager.setAdapter(pagerAdapter);
tabLayout.setupWithViewPager(viewPager);
tabLayout.setTabMode(TabLayout.MODE_FIXED);
if (getTabViews()!=null){
for (int i = 0; i < tabLayout.getTabCount(); i++) {
TabLayout.Tab tab = tabLayout.getTabAt(i);
tab.setCustomView(pagerAdapter.getTabView(i));
}
}
}
protected abstract List<TabItemView> getTabViews();//返回底部自定义tab视图
protected abstract List<Fragment> getFragments();//返回tab对应的fragment
protected abstract List<String> getTitles();//头部显示的title列表
protected abstract TabType getTabType();//tab类型-分为底部tab和头部tab
public class SimpleFragmentPagerAdapter extends FragmentPagerAdapter {
public SimpleFragmentPagerAdapter(FragmentManager fm, Context context) {
super(fm);
}
@Override
public Fragment getItem(int position) {
return getFragments().get(position);
}
@Override
public int getCount() {
return getFragments().size();
}
@Override
public CharSequence getPageTitle(int position) {
if (getTitles()!=null&&!getTitles().isEmpty()){
return getTitles().get(position);
}
return null;
}
public View getTabView(int position) {
return getTabViews().get(position);
}
}
public enum TabType{//Tab类型
BottomCustomViewTab,//底部自定义tab
TopTitleTab//头部标题tab
}
}
这样就实现了统一,以后不管是底部还是头部,只需要继承TabActivity之后实现相应的抽象方法即可(参考文章开头)。
结束
源码下载请点击:http://download.csdn.net/detail/yissan/9861159
是不是节省了一点点时间啊。如果本文对你有一点点帮助请关注我或者为我点赞!不胜感激!
Android快速开发-选项卡的更多相关文章
- Android 快速开发系列 打造万能的ListView GridView 适配器
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/38902805 ,本文出自[张鸿洋的博客] 1.概述 相信做Android开发的写 ...
- Android快速开发不可或缺的11个工具类
Android快速开发不可或缺的11个工具类 :http://www.devst ore.cn/code/info/363.html
- Android快速开发不可或缺的11个工具类(下载)
功能分类:工具 支持平台:Android 运行环境:Eclipse 开发语言:Java 开发工具:Eclipse 源码大小:11.45KB 下载地址:ht ...
- (转载)实例详解Android快速开发工具类总结
实例详解Android快速开发工具类总结 作者:LiJinlun 字体:[增加 减小] 类型:转载 时间:2016-01-24我要评论 这篇文章主要介绍了实例详解Android快速开发工具类总结的相关 ...
- Android快速开发系列 10个常用工具类
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/38965311,本文出自[张鸿洋的博客] 打开大家手上的项目,基本都会有一大批的辅 ...
- 【转】 Android快速开发系列 10个常用工具类 -- 不错
原文网址:http://blog.csdn.net/lmj623565791/article/details/38965311 转载请标明出处:http://blog.csdn.net/lmj6235 ...
- (转载)Android快速开发偷懒必备,一句话搞定所有ViewGroup的Adapter . 支持自定义ViewGroup
[置顶] [Android]快速开发偷懒必备,一句话搞定所有ViewGroup的Adapter . 支持自定义ViewGroup 标签: androidAdapter快速开发0耦合 2016-12-1 ...
- [ 转]Android快速开发–使用ORMLite操作数据库
OrmLite是一个数据库操作辅助的开源框架,主要面向Java语言.在Android面向数据库开发中,是一个比较流行的开源框架,方便操作而且功能强大,今天来学习一下,最近的项目中也有所涉及,写个博客来 ...
- Android快速开发常用知识点系列目录
项目构建 Android项目目录结构模板以及简单说明[简单版] Android Studio配置统一管理依赖版本号引用 Android多Module下的Application引用方式 APP开篇 An ...
随机推荐
- 解释一下python中的逻辑运算符
python中有三个逻辑运算符:and.or.not print(False and True)#False print(7<7 or True)#True print(not 2==2)#Fa ...
- TCP三次“握手”与4次“挥手”
OSI(Open System Interconnection,开放系统互联)七层网络模型成为开放式系统互联参考模型,是一个把网络通信在逻辑上的定义,也可以理解成为定义了通用的网络通信规范.而我们的数 ...
- HDU - 6321 Problem C. Dynamic Graph Matching (状压dp)
题意:给定一个N个点的零图,M次操作,添加或删除一条边,每一次操作以后,打印用1,2,...N/2条边构成的匹配数. 分析:因为N的范围很小,所以可以把点的枚举状态用二进制表示集合.用一维数组dp[S ...
- Linux安全策略配置-pam_tally2身份验证模块
PAM身份验证安全配置实例 - 强制使用强密码(用户密码安全配置) - 用户SSH登录失败尝试次数超出限制后锁定账户(帐户锁定/解锁和时间设置) - 允许普通用户使用sudo而不是su(限制普通用户登 ...
- make cmake catkin_make
在Linux下进行C语言编程,必然要采用GNU GCC来编译C源代码生成可执行程序. 一.GCC快速入门 Gcc指令的一般格式为:Gcc [选项] 要编译的文件 [选项] [目标文件] 其中,目标文件 ...
- pt-osc测试
pt-osc测试 1.原表必须存在主键 PRIMARY KEY 或者 UNIQUE KEY The new table `darren`.`_t_user_new` does not have a P ...
- jQuery音乐播放器jPlayer
在线演示 本地下载
- 超详细 Linux 下编译安装Redis 以及php配套使用
一.Linux 下安装Redis 下载地址:http://redis.io/download,下载最新文档版本. 把鼠标移到上图的绿色框上,就会显示下图提示:(直接右键复制链接就好) 本教程使用的旧版 ...
- ls存在的文件,不能操作
bash-4.2# pwd/oracle/product/10.2.0/db_1/network/adminbash-4.2# lssqlnet.ora libnrad ...
- Oracle索引以及索引碎片
索引,可以增加查询速度,若没有索引,每次查询都必须是全表查询.例如,搜索某个记录时(如name="gdpuzxs")时,需要全表扫描一下,因为不知道有多少个name="g ...