原文地址http://blog.csdn.net/crazy1235/article/details/42678877

效果:滑动切换;点击标签切换。

代码:https://github.com/ldb-github/Layout_Tab

1、布局:使用LinearLayout布置标签;再使用ViewPager来布置Fragment;使用ImageView作为指示器。

<?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"> <LinearLayout
android:layout_width="match_parent"
android:layout_height="36dp"
android:orientation="horizontal"
android:weightSum="3"> <TextView
android:id="@+id/tab1_tv"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="选项卡一"
android:textColor="#707070"/> <TextView
android:id="@+id/tab2_tv"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="选项卡二"
android:textColor="#707070"/> <TextView
android:id="@+id/tab3_tv"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="选项卡三"
android:textColor="#707070"/>
</LinearLayout> <ImageView
android:id="@+id/cursor"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:layout_marginTop="0dp"
android:src="@drawable/down_line"/> <android.support.v4.view.ViewPager
android:id="@+id/third_vp"
android:layout_width="match_parent"
android:layout_height="match_parent" /> </LinearLayout>

viewpager_fragmentpageradapter.xml

1、实现View.OnClickLinstener接口,在onClick方法中完成点击标签进行切换的功能:调用ViewPager的setCurrentItem()方法。

2、实现ViewPager.OnPageChangeListener方法,在onPageScrolled方法中,改变指示器的位置。

3、在原文的基础上:

a、去掉screen1_3(屏幕宽度的三分之一);增加tabCount(tab的数量)和widthOfOneTab(一个tab的宽度 screenWidth / tabCount)。

b、调整onPageScrolled方法,使其更具通用性。

public class ViewPagerAndFragmentPagerAdapterActivity extends FragmentActivity
implements View.OnClickListener, ViewPager.OnPageChangeListener{ private static final String LOG_TAG =
ViewPagerAndFragmentPagerAdapterActivity.class.getSimpleName(); // 三个textview
private TextView tab1Tv, tab2Tv, tab3Tv;
// 指示器
private ImageView cursorImg;
// viewPager
private ViewPager viewPager;
// fragment对象集合
private ArrayList<Fragment> fragmentsList;
// 记录当前选中的tab的index
private int currentIndex = 0;
// 指示器的偏移量
private int offset = 0;
// 左margin
private int leftMargin = 0;
// 屏幕宽度
private int screenWidth = 0;
// 屏幕宽度的三分之一
//private int screen1_3;
// Tab的数量
private int tabCount;
// 一个Tab的宽度 screenWidth / tabCount
private int widthOfOneTab;
//
private LinearLayout.LayoutParams lp; @Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.viewpager_fragmentpageradapter); init();
} /**
* 初始化操作
*/
private void init(){
DisplayMetrics dm = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(dm);
screenWidth = dm.widthPixels; cursorImg = (ImageView) findViewById(R.id.cursor);
lp = (LinearLayout.LayoutParams) cursorImg.getLayoutParams();
leftMargin = lp.leftMargin; tab1Tv = (TextView) findViewById(R.id.tab1_tv);
tab2Tv = (TextView) findViewById(R.id.tab2_tv);
tab3Tv = (TextView) findViewById(R.id.tab3_tv); tabCount = 3;
widthOfOneTab = screenWidth / tabCount; tab1Tv.setOnClickListener(this);
tab2Tv.setOnClickListener(this);
tab3Tv.setOnClickListener(this); initViewPager();
} private void initViewPager(){
viewPager = (ViewPager) findViewById(R.id.third_vp);
fragmentsList = new ArrayList<>();
Fragment fragment = new FragmentAndFManager_Fragment1();
fragmentsList.add(fragment);
fragment = new FragmentAndFManager_Fragment2();
fragmentsList.add(fragment);
fragment = new FragmentAndFManager_Fragment3();
fragmentsList.add(fragment); viewPager.setAdapter(new FragmentAdapter(getSupportFragmentManager(), fragmentsList));
viewPager.setCurrentItem(0);
viewPager.setOnPageChangeListener(this);
} @Override
public void onClick(View v) {
Log.d(LOG_TAG, "In onClick v.getId() = " + v.getId());
switch(v.getId()){
case R.id.tab1_tv:
viewPager.setCurrentItem(0);
break;
case R.id.tab2_tv:
viewPager.setCurrentItem(1);
break;
case R.id.tab3_tv:
viewPager.setCurrentItem(2);
break;
}
} @Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
offset = (widthOfOneTab - cursorImg.getLayoutParams().width) / 2;
Log.d(LOG_TAG, "In onPageScrolled: " + position + " -- " + positionOffset + " -- " +
positionOffsetPixels);
//final float scale = getResources().getDisplayMetrics().density;
// if(position == 0){
// lp.leftMargin = (int) (positionOffsetPixels / 3) + offset;
// }else if(position == 1){
// lp.leftMargin = (int) (positionOffsetPixels / 3) + widthOfOneTab + offset;
// } if(position < tabCount - 1){
lp.leftMargin = (int) (positionOffsetPixels / tabCount) + widthOfOneTab * position + offset;
} cursorImg.setLayoutParams(lp);
currentIndex = position;
} @Override
public void onPageSelected(int position) { } @Override
public void onPageScrollStateChanged(int state) { }
}

ViewPagerAndFragmentPagerAdapterActivity.java

1、自定义类FragmentAdapter继承FragmentPagerAdapter,实现方法getItem()和getCount()。

2、通过ArrayList<Fragmet>来保存适配器绑定的Fragment集合。

public class FragmentAdapter extends FragmentPagerAdapter {

    private ArrayList<Fragment> list;
public FragmentAdapter(FragmentManager fm, ArrayList<Fragment> list) {
super(fm);
this.list = list;
} @Override
public Fragment getItem(int position) {
return list.get(position);
} @Override
public int getCount() {
return list.size();
}
}

FragmentAdapter.java

Android Tab -- 使用ViewPager、Fragment、FragmentPagerAdapter来实现的更多相关文章

  1. Android Studio 使用ViewPager + Fragment实现滑动菜单Tab效果 --简易版

    描述: 之前有做过一个记账本APP,拿来练手的,做的很简单,是用Eclipse开发的: 最近想把这个APP重新完善一下,添加了一些新的功能,并选用Android Studio来开发: APP已经完善了 ...

  2. android 中的 ViewPager+ Fragment

    android的Viewpager 的各种经常的用法,朋友问我要过,所以就稍微总结一下, ViewPager + Fragment 经常用到  代码是从   actionbarsherlock 中提取 ...

  3. Android之实现ViewPager+Fragment左右滑动

    近期看新闻发现新闻的页面是能够左右滑动的.于是自己就好奇起来了,之前做过ViewPager展示图片,在想怎么载入页面呢?研究了一下.发现就是加入了Fragment,废话不多说,揭秘奥秘的时候到了. 使 ...

  4. Android Tab -- 使用ViewPager、PagerTitleStrip/PagerTabStrip来实现

    原文地址:http://blog.csdn.net/crazy1235/article/details/42678877 效果:滑动切换:点击标签切换. 代码:https://github.com/l ...

  5. Android Tab -- 使用ViewPager、PagerAdapter来实现

    原文地址:http://blog.csdn.net/crazy1235/article/details/42678877 效果:滑动切换,自动切换. 代码:https://github.com/ldb ...

  6. Android 代码实现viewPager+fragment 模仿今日头条的顶部导航

    模仿今日头条的顶部导航:    下载地址: http://download.csdn.net/detail/u014608640/9917700 效果图:

  7. android Tab 类型切换界面

    实现方案:viewpager + fragment + FragmentPagerAdapter 效果图: 可以左右滑动切换选项卡,或者点击: 如果想使用fragment的时候又想可以左右滑动,就可以 ...

  8. Android开发之ViewPager+ActionBar+Fragment实现响应式可滑动Tab

     今天我们要实现的这个效果呢,在Android的应用中十分地常见,我们可以看到下面两张图,无论是系统内置的联系人应用,还是AnyView的阅读器应用,我们总能找到这样的影子,当我们滑动屏幕时,Tab可 ...

  9. Android tab导航的几种方法:ActionBar tab +fragment,Viewpager+pagerTitleStrip,开源框架ViewPageIndicator 和 ViewPager

    action来实现tab标签 并跟fragment结合 因为要写新闻客户端这个tab导航是必须的 这里我写几个小练习,希望大家融会贯通. 1actionbar设置tab +fragment 布局是个l ...

随机推荐

  1. Python 静态方法、类方法

    今天我们来讨论一下Python类中所存在的特殊方法--静态方法.类方法. 一.定义 静态方法: 一种简单函数,符合以下要求: 1.嵌套在类中. 2.没有self参数. 特点: 1.类调用.实例调用,静 ...

  2. 数据库备份Sql

    今天学习心得: 数据库备份语句: backup database ZhiHuiGongDi To disk = 'D:\zhihuigongdi20150824.bak'

  3. Linux - 非阻塞socket编程处理EAGAIN错误

            在linux进行非阻塞的socket接收数据时经常出现Resource temporarily unavailable,errno代码为11(EAGAIN),这表明你在非阻塞模式下调用 ...

  4. shell小细节

    1.使用变量的时候无需首先声明其类型 2 cut 剪切数据 3.sed 定址 4.read 读取文件(管道) 5 expr 整值计算 6 lp 打印

  5. c 函数及指针学习 6

    不完整声明 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 /* 方法一   */ struct tag_a{ ...

  6. cmd下运行java文件时,找不到或无法加载主类的解决方法

    最近再看java,却被一个看似很基础的hellorworld头疼了十几分钟,百度了一下,若你在cmd下编辑及运行.java文件时报错,解决方案如下,如图所示:

  7. Dropbox可伸缩性设计最佳实践分享

    http://www.infoq.com/cn/news/2012/11/dropbox-scale-bestpractice Dropbox的运维工程师Rajiv,跟大家分享了可伸缩性设计的最佳实践 ...

  8. 浅谈RSA加密

    RSA背景 在1976年以前,传统的加解密过程是: 1.A采用某种手段对数据进行加密. 2.数据传输到B的手中. 3.B逆向的实施A加密采用的步骤. 4.数据被还原. 这就是所谓的对称加密. 解密和加 ...

  9. VB.NET 打开窗体后关闭自己

    第一:要实例化打开的窗体 Dim bb As New frm_Main 第二:打开窗体 show 第三:释放自身 Finalize()   '赋值另一窗体的控件值,先实例化,再进行操作 Dim bb ...

  10. JavaScript中的typeof

    js中的 typeof 操作符返回一个字符串,表示未经计算的操作数的类型. 其中null.字符串对象.数字对象.布尔对象.日期.数组.正则返回结果都为object,可见typeof返回结果并不精确 测 ...