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 实现

原文地址:http://developer.android.com/training/implementing-navigation/lateral.html

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

第一,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>

博客不在线,有问题直接联系QQ: 783713515

3种方式实现可滑动的Tab的更多相关文章

  1. Android ScrollView监听滑动到顶部和底部的两种方式(你可能不知道的细节)

    Android ScrollView监听滑动到顶部和底部,虽然网上很多资料都有说,但是不全,而且有些细节没说清楚 使用场景: 1. 做一些复杂动画的时候,需要动态判断当前的ScrollView是否滚动 ...

  2. 【原】react做tab切换的几种方式

    最近搞一个pc端的活动,搞了一个多月,甚烦,因为相比于pc端,更喜欢移动端多一点.因为移动端又能搞我的react了. 今天主要总结一下react当中tab切换的几种方式,因为tab切换基本上都会用到. ...

  3. 详解实现Android中实现View滑动的几种方式

    注: 本文提到的所有三种滑动方式的完整demo:ScrollDemo 1. 关于View我们需要知道的 (1)什么是View? Android中的View类是所有UI控件的基类(Base class) ...

  4. ionic实现滑动的三种方式

    在移动端受屏幕大小所限,展示内容很多的时候,就要使部分区域进行滑动.本文展示项目中所有到的几种方式,大家可以看自己的需求选择合适的滑动方式.实现滑动的基本原理,有两个容器A.B,假如A在外层,B在内层 ...

  5. JavaScript+HTML+CSS 无缝滚动轮播图的两种方式

    第一种方式 在轮播图最后添加第一张,一张重复的图片. 点击前一张,到了第一张,将父级oList移动到最后一张(也就是添加的重复的第一张),在进行后续动画. 点击下一张,到了最后一张(也就是添加的重复的 ...

  6. 云服务器 ECS Linux 服务器修改时区的两种方式

    在云服务器 ECS Linux 系统中,以 Centos6.5 为例,可以通过如下两种方式,修改系统时区: 可以使用命令 tzselect,修改时区.操作示例: [root@localhost ~]# ...

  7. QT 焦点事件(4种方式的解释,还有委托焦点)

    1.setFocusPolicy(...)设置获得焦点的方式 Qt::TabFocus 通过Tab键获得焦点 Qt::ClickFocus 通过被单击获得焦点 Qt::StrongFocus 可通过上 ...

  8. 创建TabHost的两种方式的简单分析

    最近做了一个TabHost的界面,在做的过程中发现了一些问题,故和大家分享一下. 首先我的界面如下: 目前就我所知,创建TabHost有两种方式,第一种是继承TabActivity类,然后用getTa ...

  9. Unity 人物跟谁手指的移动(第一种方式)

    长夜漫漫无心睡眠,敲敲代码,越敲越来劲! 我发现好多小朋友都在玩熊出没之xxxx这个游戏,居然打了一下午都没玩通第2关,我把测试也叫来陪我一起玩! 结果他也打不通,我再去叫策划,他也没打过,我去叫主管 ...

随机推荐

  1. javascript 面向对象的继承的实现

    JavaScript 中的面向对象的初步认识 上面这篇简单的记录了我对 JS面向对象实现的一点初步认识和了解,下面继续研究JS面向对象,实现继承和多态. 之前的学习我了解到了 :构造函数加属性,原型p ...

  2. html系列教程--embed fieldset legend figure figurecaption

    <embed> 标签:定义嵌入的内容 <embed src="" type="" /> embed属性: 1.src:嵌入内容地址 2. ...

  3. graph使泳道图的label横向显示

    1.如果需要将label靠左边对齐,则必须重写底层源码 新增mxText的一个构造器,主要是增加了一个参数:x(代表当前的cell) function mxText(a, b, c, d, e, f, ...

  4. 无法下载图片 App Transport Security has blocked a cleartext HTTP (http://) resource load since it is insecure. Temporary exceptions can be configured via your app's Info.plist file

    刚学线程通信,提示: 2016-01-27 11:11:02.246 20-9 gcd3 communicationOfThread[5193:298643] App Transport Securi ...

  5. 随意记的一点 js 笔记

    1. 给未经声明的变量赋值在严格模式下会导致抛出 ReferenceError 错误(意思是,所有变量都必须用 var 去定义,不能在函数内部定义全局变量): 2. 在严格模式下,不能定义名为 eva ...

  6. php多维数组按用户自定义顺序排序uasort()

    多维数组如果需要按照某个字段值进行排序,可以尝试array_multisort().但有一个前提,这个字段值的排序是要一定规律的,如字符升序a-z,或者数字降序等等. 现有多维数组如下: $arr = ...

  7. OpenCV学习 2:播放AVI视频

    原创文章,欢迎转载,转载请注明出处 第二个程序,播放视频.用opencv做起来是如此的简单..哈哈.           学Opencv,只是为了在它的基础上实现工程应用,而它里面高深的理论我等屌丝只 ...

  8. 搞了一个独立博客,请各位光临pingworld.cn

    嘿嘿,每次在一个大网站上建立自己的博客后总是没有动力持续更新下去,回想其原因很大是因为没有一个自己的地盘,懒得维护!还有一个原因就是自己也没有什么干货值得跟大家分享. 随着工作的时日见长,有了各种各样 ...

  9. linux mail 简操作

    1. 如何查看linux的mailqueue 检查所传送的电子邮件是否送出,或滞留在邮件服务器中 语法:/usr/lib/sendmail -bp 2. 如何发送mail 1)将文件当做电子邮件的内容 ...

  10. Ubuntu eclipse :An error has occurred. See the log file

    安装eclipse: sudo apt-get install eclipse-platform 调整java: sudo update-alternatives --config java 启动: ...