Android中实现可滑动的Tab的3种方式

最新推荐文章于 2023-12-10 08:13:08 发布
最新推荐文章于 2023-12-10 08:13:08 发布
阅读量633 收藏 1
点赞数
分类专栏： Android

1. 第一种，使用 TabHost + ViewPager 实现

该方法会有一个Bug，当设置tabHost.setCurrentTab()为0时，ViewPager不显示（准确的说是加载），只有点击其他任意一个tab后才会加载。

有解的同学吼一声~~~~~~~

Activity:

复制代码 代码如下:

package com.swordy.demo.android.fragment;

import java.util.Random;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.TabHost;
import android.widget.TabHost.OnTabChangeListener;
import android.widget.TabWidget;
import android.widget.TextView;

import com.swordy.demo.android.R;
import com.swordy.library.android.util.ELog;

/**
* 1. 使用TabHost和ViewPager组合实现一个可以滑动的tab
* 2. bug：如果当前页为0，则ViewPager第一次不加载。
*
* @author swordy
* @email mryangjian@live.com
* @since Jan 20, 2014
* @version 1.0
*/
public class SlideTabs1 extends FragmentActivity
{
private static final String TAG = "AndroidDemos.SlideTabs1";

private TabHost mTabHost;

private ViewPager mViewPager;

private PagerAdapter mPagerAdapter;

private String[] addresses = { "first", "second", "third" };

@Override
protected void onCreate(Bundle arg0)
{
super.onCreate(arg0);
setContentView(R.layout.fragment_slidetabs1);

mViewPager = (ViewPager) findViewById(R.id.viewPager1);
mPagerAdapter = new MyPagerAdapter(getSupportFragmentManager());
mViewPager.setAdapter(mPagerAdapter);

mTabHost = (TabHost) findViewById(android.R.id.tabhost);
mTabHost.setup();
mTabHost.addTab(mTabHost.newTabSpec("one").setIndicator("one-1")
.setContent(R.id.viewPager1));
mTabHost.addTab(mTabHost.newTabSpec("two").setIndicator("two-2")
.setContent(R.id.viewPager1));
mTabHost.addTab(mTabHost.newTabSpec("three").setIndicator("three-3")
.setContent(R.id.viewPager1));

TabWidget tabWidget = mTabHost.getTabWidget();
int count = tabWidget.getChildCount();
for (int i = 0; i != count; i++)
{
final int index = i;
tabWidget.getChildAt(i).setOnClickListener(new OnClickListener() {

@Override
public void onClick(View v)
{
mTabHost.setCurrentTab(index);
mViewPager.setCurrentItem(index);
}
});
}
mTabHost.setOnTabChangedListener(new OnTabChangeListener() {

@Override
public void onTabChanged(String tabId)
{
ELog.i(TAG, "@--> onTabChanged by tabId: " + tabId);
}
});

mViewPager.setOnPageChangeListener(new OnPageChangeListener() {

@Override
public void onPageSelected(int arg0)
{
ELog.i(TAG, "@--> onPageSelected: " + arg0);
mTabHost.setCurrentTab(arg0);
}

@Override
public void onPageScrolled(int arg0, float arg1, int arg2)
{

}

@Override
public void onPageScrollStateChanged(int arg0)
{

}
});
}

private class MyPagerAdapter extends FragmentStatePagerAdapter
{

public MyPagerAdapter(FragmentManager fm)
{
super(fm);
}

@Override
public Fragment getItem(int position)
{
ELog.i(TAG, "@--> getItem by position" + position);
ELog.i(TAG, "@--> getItem by position" + position);
return MyFragment.create(addresses[position]);
}

@Override
public int getCount()
{
return addresses.length;
}

}

public static class MyFragment extends Fragment
{
public static MyFragment create(String address)
{
ELog.i(TAG, "@--> MyFragment.create()");
MyFragment f = new MyFragment();
Bundle b = new Bundle();
b.putString("address", address);
f.setArguments(b);
return f;
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState)
{
Random r = new Random(System.currentTimeMillis());

Bundle b = getArguments();

View v = inflater.inflate(R.layout.fragment_viewpager1_layout1, null);
v.setBackgroundColor(r.nextInt() >> 8 | 0xFF << 24);

TextView txvAddress = (TextView) v.findViewById(R.id.textView1);
txvAddress.setTextColor(r.nextInt() >> 8 | 0xFF << 24);
txvAddress.setBackgroundColor(r.nextInt() >> 8 | 0xFF << 24);

txvAddress.setText(b.getString("address", ""));
return v;
}

}
}

布局：

复制代码 代码如下:

<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<TabWidget
android:id="@android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="right|center_vertical" />

<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<android.support.v4.view.ViewPager
android:id="@+id/viewPager1"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</FrameLayout>
</LinearLayout>

</TabHost>

2. 第二种，使用官方提供的方法 ActionBar + ViewPager 实现

该方法有两个缺陷，或者说不是缺陷，只是我没有找到解决的办法。

第一，tab点上不是很灵敏，可能就是这么设定的，为了防止频繁加载吧，但是体验稍稍不爽；

第二，ActionBar在最顶部，如果我的布局是：顶部一个带返回按钮的标题栏，中间是tab，底部是tabcontent，怎么搞？

Activity：

复制代码 代码如下:

package com.swordy.demo.android.fragment;

import java.util.Random;

import android.app.ActionBar;
import android.app.ActionBar.Tab;
import android.app.ActionBar.TabListener;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import com.swordy.demo.android.R;

/**
* 1. 使用ActionBar和ViewPager实现可以滑动的Tab
*
* @author swordy
* @email mryangjian@live.com
* @since Jan 20, 2014
* @version 1.0
*/
public class SlideTabs2 extends FragmentActivity
{
private static final String TAG = "AndroidDemos.SlideTabs2";

private ViewPager mViewPager;

private ActionBar mActionBar;

private MyPagerAdapter mPagerAdapter;

private String[] addresses = { "first", "second", "third" };

private Tab[] mTabs = new Tab[addresses.length];

@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.fragment_viewpager1);
mViewPager = (ViewPager) findViewById(R.id.viewPager1);
mPagerAdapter = new MyPagerAdapter(getSupportFragmentManager());
mViewPager.setAdapter(mPagerAdapter);
mViewPager.setOnPageChangeListener(mPageChangeListener);

mActionBar = getActionBar();
mActionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
mActionBar.setDisplayShowTitleEnabled(false);
mActionBar.setDisplayShowHomeEnabled(false);

for (int i = 0; i != addresses.length; i++)
{
mTabs[i] = mActionBar.newTab().setText(addresses[i]).setTabListener(mTabListener);
mActionBar.addTab(mTabs[i]);
}

}

private OnPageChangeListener mPageChangeListener = new OnPageChangeListener() {

@Override
public void onPageSelected(int arg0)
{
mActionBar.setSelectedNavigationItem(arg0);
}

@Override
public void onPageScrolled(int arg0, float arg1, int arg2)
{

}

@Override
public void onPageScrollStateChanged(int arg0)
{

}
};

private TabListener mTabListener = new TabListener() {

@Override
public void onTabSelected(Tab tab, android.app.FragmentTransaction ft)
{
if (tab == mTabs[0])
{
mViewPager.setCurrentItem(0);
} else if (tab == mTabs[1])
{
mViewPager.setCurrentItem(1);
} else if (tab == mTabs[2])
{
mViewPager.setCurrentItem(2);
}

}

@Override
public void onTabUnselected(Tab tab, android.app.FragmentTransaction ft)
{
// TODO Auto-generated method stub

}

@Override
public void onTabReselected(Tab tab, android.app.FragmentTransaction ft)
{
// TODO Auto-generated method stub

}
};

public class MyPagerAdapter extends FragmentPagerAdapter
{

public MyPagerAdapter(FragmentManager fm)
{
super(fm);
}

@Override
public Fragment getItem(int position)
{
return MyFragment.create(addresses[position]);
}

@Override
public int getCount()
{
return addresses.length;
}
}

public static class MyFragment extends Fragment
{
public static MyFragment create(String address)
{
MyFragment f = new MyFragment();
Bundle b = new Bundle();
b.putString("address", address);
f.setArguments(b);
return f;
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState)
{
Random r = new Random(System.currentTimeMillis());

Bundle b = getArguments();

View v = inflater.inflate(R.layout.fragment_viewpager1_layout1, null);
v.setBackgroundColor(r.nextInt() >> 8 | 0xFF << 24);

TextView txvAddress = (TextView) v.findViewById(R.id.textView1);
txvAddress.setTextColor(r.nextInt() >> 8 | 0xFF << 24);
txvAddress.setBackgroundColor(r.nextInt() >> 8 | 0xFF << 24);

txvAddress.setText(b.getString("address", ""));
return v;
}

}
}


布局：
复制代码 代码如下:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<android.support.v4.view.ViewPager
android:id="@+id/viewPager1"
android:layout_width="match_parent"
android:layout_height="match_parent" />

</LinearLayout>


3. 【推荐】第三种，使用 TabWidget + ViewPager 实现
该方法不错，推荐使用。

Activity：

复制代码 代码如下:

package com.swordy.demo.android.fragment;

import java.util.Random;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.TabWidget;
import android.widget.TextView;

import com.swordy.demo.android.R;

/**
* 1. 使用TabWidget和ViewPager实现可滑动的Tab
*
* @author swordy
* @email mryangjian@live.com
* @since Jan 20, 2014
* @version 1.0
*/
public class SlideTabs3 extends FragmentActivity
{
private static final String TAG = "AndroidDemos.SlideTabs3";

private ViewPager mViewPager;

private PagerAdapter mPagerAdapter;

private TabWidget mTabWidget;

private String[] addresses = { "first", "second", "third" };

private Button[] mBtnTabs = new Button[addresses.length];

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

mTabWidget = (TabWidget) findViewById(R.id.tabWidget1);
mTabWidget.setStripEnabled(false);
mBtnTabs[0] = new Button(this);
mBtnTabs[0].setFocusable(true);
mBtnTabs[0].setText(addresses[0]);
mBtnTabs[0].setTextColor(getResources().getColorStateList(R.color.button_bg_color_selector));
mTabWidget.addView(mBtnTabs[0]);
/*
* Listener必须在mTabWidget.addView()之后再加入，用于覆盖默认的Listener，
* mTabWidget.addView()中默认的Listener没有NullPointer检测。
*/
mBtnTabs[0].setOnClickListener(mTabClickListener);

mBtnTabs[1] = new Button(this);
mBtnTabs[1].setFocusable(true);
mBtnTabs[1].setText(addresses[1]);
mBtnTabs[1].setTextColor(getResources().getColorStateList(R.color.button_bg_color_selector));
mTabWidget.addView(mBtnTabs[1]);
mBtnTabs[1].setOnClickListener(mTabClickListener);

mBtnTabs[2] = new Button(this);
mBtnTabs[2].setFocusable(true);
mBtnTabs[2].setText(addresses[2]);
mBtnTabs[2].setTextColor(getResources().getColorStateList(R.color.button_bg_color_selector));
mTabWidget.addView(mBtnTabs[2]);
mBtnTabs[2].setOnClickListener(mTabClickListener);

mViewPager = (ViewPager) findViewById(R.id.viewPager1);
mPagerAdapter = new MyPagerAdapter(getSupportFragmentManager());
mViewPager.setAdapter(mPagerAdapter);
mViewPager.setOnPageChangeListener(mPageChangeListener);

mTabWidget.setCurrentTab(0);
}

private OnClickListener mTabClickListener = new OnClickListener() {

@Override
public void onClick(View v)
{
if (v == mBtnTabs[0])
{
mViewPager.setCurrentItem(0);
} else if (v == mBtnTabs[1])
{
mViewPager.setCurrentItem(1);

} else if (v == mBtnTabs[2])
{
mViewPager.setCurrentItem(2);

}
}
};

private OnPageChangeListener mPageChangeListener = new OnPageChangeListener() {

@Override
public void onPageSelected(int arg0)
{
mTabWidget.setCurrentTab(arg0);
}

@Override
public void onPageScrolled(int arg0, float arg1, int arg2)
{

}

@Override
public void onPageScrollStateChanged(int arg0)
{

}
};

private class MyPagerAdapter extends FragmentStatePagerAdapter
{

public MyPagerAdapter(FragmentManager fm)
{
super(fm);
}

@Override
public Fragment getItem(int position)
{
return MyFragment.create(addresses[position]);
}

@Override
public int getCount()
{
return addresses.length;
}

}

public static class MyFragment extends Fragment
{
public static MyFragment create(String address)
{
MyFragment f = new MyFragment();
Bundle b = new Bundle();
b.putString("address", address);
f.setArguments(b);
return f;
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState)
{
Random r = new Random(System.currentTimeMillis());

Bundle b = getArguments();

View v = inflater.inflate(R.layout.fragment_viewpager1_layout1, null);
v.setBackgroundColor(r.nextInt() >> 8 | 0xFF << 24);

TextView txvAddress = (TextView) v.findViewById(R.id.textView1);
txvAddress.setTextColor(r.nextInt() >> 8 | 0xFF << 24);
txvAddress.setBackgroundColor(r.nextInt() >> 8 | 0xFF << 24);

txvAddress.setText(b.getString("address", ""));
return v;
}

}
}

布局：

复制代码 代码如下:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<TabWidget
android:id="@+id/tabWidget1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="right|center_vertical" />

<android.support.v4.view.ViewPager
android:id="@+id/viewPager1"
android:layout_width="match_parent"
android:layout_height="match_parent" />

</LinearLayout>



hongkonglife
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android SlidingTabLayout底部选项卡槽Tab水平居中
chuoshao2508的博客
01-04 292
 Android SlidingTabLayout底部选项卡槽Tab水平居中 Android SlidingTabLayout默认情况下添加的选项卡是如图1样式： 实际的开发需求中，通常UI设计师会将这些Tab平均分配位置，以达到如图2所示效果...
实现一个可定制化的FlowLayout
夏至的稻穗的博客
01-28 636
FlowLayout 继承于 ViewGroup ，可以快速帮您实现 Tablayout 以及 Label 标签，内含多种效果，帮您快速实现 APP UI 功能，让您专注代码架构，告别繁琐UI。 代码工程：实现一个可定制化的FlowLayout 如果你也想自己写一个，可以参考以下几篇文章 实现一个可定制化的TabFlowLayout(一) – 测量与布局 实现一个可定制化的TabFlowLa...
Android自带的TabLayout实现滑动翻页效果（实例）
weixin_34259159的博客
08-03 723
Android自带的TabLayout在support包中，导包： implementation 'com.android.support:support-v4:27.1.1' 复制代码效果1 不带viewpager，tab只可点击，就是普通的控件。 TabLayout嵌套TabItem，可改造空间有限。tabLayout只能嵌套TabItem，其余会报错。 <android.suppor...
android 简单利用横向HorizontalScrollView实现按tab下标自动滑动到指定tab的tabs效果
qq_23404533的博客
01-17 771
直接上代码： 实例xml代码 <HorizontalScrollView android:id="@+id/horizontalSv" android:layout_width="match_parent" android:layout_height="wrap_content" android:scrollbars...
android标题栏跟随滑动,Android ScrollView滑动标题栏变色
weixin_29712031的博客
05-26 261
就不上效果图了，现在各种app都有这种效果，随着ScrollView的滑动，以某个View为参照，标题栏背景渐渐由 透明 -> 指定颜色很多实现方法，以下为重写ScrollView。布局：xmlns:app="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout...
Android viewpage实现禁止滑动的功能
09-01
主要介绍了Android viewpage实现禁止滑动的功能的相关资料,这里附有实现的实例代码，主要还是重新 ViewPage 这个类，需要的朋友可以参考下
Android实现仿微信tab高亮icon粘着手的滑动效果
01-21
微信的主页分为3个tab，被选中的tab的tabwidget下面会有一个高亮的长条icon，而当切换tab页面的时候，这个icon不是等到tab切换完成后再出现在当前被选中的tab的tabwidget的下面，而是会随着viewpager滑动页面的动作...
Android Studio使用ViewPager+Fragment实现滑动菜单Tab效果
08-26
主要为大家详细介绍了Android Studio使用ViewPager+Fragment实现滑动菜单Tab效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Android Studio 使用ViewPager + Fragment实现滑动菜单Tab效果菜鸟版保姆级
最新发布
my147的专栏
12-10 753
Android Studio 使用ViewPager + Fragment实现滑动菜单Tab效果;使用了最新版的Android Studio对了解ViewPager 和Fragment的联合使用非常有帮助，可以手动滑动菜单也可以通过点击头部菜单进行切换
Android可滑动的Tab页
08-30
AS写的可滑动的Tab页 blog:http://blog.csdn.net/shenyuanqing/article/details/48106353
Android垂直tab导航栏、左侧竖直tab导航栏,支持viewpager，不依赖viewpager
fictionss的博客
12-06 9061
人生导言： 做你害怕做的事情，然后你发现，不过如此。 这是基于有时候需要左侧竖直tab导航栏 ，可以直接拿来用，继承自ScrollView 先来看下效果 部分代码: 适配器 private class MyTabAdapter implements TabAdapter { List&lt;String&gt; menus; ...
【Android 仿钉钉上下滑动tabbar的实现】
丿一朵遗憾的博客
06-27 457
android 仿钉钉tabbar实现
【android】TabActivity实现手指左右滑动切换tab
qq1377399077的专栏
05-04 835
在做项目的时候主界面有好几个tab， 有些用户习惯性的左右滑屏来切换tab，所以添加了左右滑屏切换他变得功能。
Android 利用TabLayout快速打造滑动Tab页面
Gary__123456的博客
07-23 1442
在项目中我们经常用到Viewpage与Fragemt来实现页面，可以使用三方开源的PagerSlidingTabStrip去实现，或者viewpagerindicator。当然也可以用TabLayout实现，TabLayout的实现快速简单。一、build.gradle添加依赖，TabLayout是com.android.support:design包中的dependencies { com
android中怎么弄滑动的tab,Android可滑动的Tab页
weixin_31926245的博客
05-28 471
RadioGroup+ViewPager+Fragment实现的可滑动的Tab页，非常的灵活。最终效果图 demo下载：http://download.csdn.net/download/shenyuanqing/9064189部分源码MainActivitypackage com.example.shen.tabtest.activity;import android.os.Bundle;im...
Android HorizontalScrollView 横向滚动自动居中
白水的博客
02-05 2862
在使用HorizontalScrollView我们常常需要让点击的view自动居中，可以用smoothScrollTo(x,y)或者scrollTo(x,y)来实现 这两个方法效果是一样的，只不过smoothScrollTo(x,y)是平滑移动，scrollTo(x,y)是直接跳过去 需要注意的是这两个方法是相对于HorizontalScrollView控件的左边缘(如果是竖向则是上边缘)进行偏移...
Android TabLayout选中Tab后移动到所选tab的位置
喝烧酒的兔子
08-21 2193
当tab数量非常多, 要选中的tab在屏幕之外时, 就无法显示被选中的tab了, tab虽然是被选中状态了, 但是被选中的tab还在屏幕外面, 这时候是不可见状态.
android 实现顶部滑动菜单
06-11
Android实现顶部滑动菜单可以使用ViewPager和TabLayout配合使用，具体步骤如下： 1.在XML布局文件中添加ViewPager和TabLayout控件。 2.在Activity或Fragment中初始化ViewPager和TabLayout控件，并设置ViewPager的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值