实现滚动tab切换fragment + viewpager

原创 2015年11月17日 16:43:49


1.首先是界面的布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" 
    android:orientation="vertical">
    
    
     <com.example.horizontalscrolltitle.layout.HorizontalTabList 
         android:id="@+id/title"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:scrollbars="@null"
         android:background="@color/color_gray"
         android:paddingTop="5dp"
         android:paddingBottom="5dp">
    
   <LinearLayout
       android:id="@+id/horizontal_tab"
       android:layout_width="wrap_content"
       android:layout_height="match_parent"
       android:orientation="horizontal"
       />
       
    </com.example.horizontalscrolltitle.layout.HorizontalTabList>


   <android.support.v4.view.ViewPager 
       android:id="@+id/viewPager"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:background="@color/color_text_selected"/>
   
</LinearLayout>



com.example.horizontalscrolltitle.layout.HorizontalTabList  继承自HorizontalScrollView来实现添加tab和横向滚动


2.HorizontalTabList类的实现


package com.example.horizontalscrolltitle.layout;


import java.util.ArrayList;
import java.util.List;


import android.app.Activity;
import android.content.Context;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewTreeObserver.OnGlobalLayoutListener;
import android.widget.HorizontalScrollView;
import android.widget.LinearLayout;
import android.widget.TextView;


import com.example.horizontalscrolltitle.R;
import com.example.horizontalscrolltitle.utils.DisplayUtils;
import com.example.horizontalscrolltitle.utils.LayoutInflateUtils;


public class HorizontalTabList extends HorizontalScrollView{


private LinearLayout mLinearLayout;  //线性布局,用来添加tab
private List<String> mTabNameList;  / /tab名称列表
private OnItemSelectedListener mItemSelectedListener;//tab选中监听
private List<Integer> mWidthList;//记录每个tab的宽度,便于实现滚动效果
private View mSelectedView;//当前选中的tab
private List<View> mTabList;//所有tab

public HorizontalTabList(Context context, AttributeSet attrs) {
super(context, attrs);
}


@Override
protected void onFinishInflate() {//加载布局的时候执行
super.onFinishInflate();
mWidthList = new ArrayList<Integer>();
mTabList   = new ArrayList<View>();
mLinearLayout         = (LinearLayout) findViewById(R.id.horizontal_tab);
}

public void setTabList(OnItemSelectedListener onItemSelectedListener, List<String> tabs){
mItemSelectedListener = onItemSelectedListener;
mTabNameList = tabs;
mLinearLayout.removeAllViews();
for(int i = 0; i <  mTabNameList.size(); i ++){//添加tab 
final LinearLayout linearLayout = (LinearLayout) LayoutInflateUtils.inflate((Activity)getContext(), R.layout.tab_layout);//tab的布局
final TextView textView = (TextView) linearLayout.findViewById(R.id.tab);
linearLayout.getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {//获得tab的宽度

@Override
public void onGlobalLayout() {
int width = linearLayout.getMeasuredWidth();
width = width + 2 * DisplayUtils.dp2px(getContext(), 1);
int position = Integer.parseInt(textView.getTag().toString());
if(position > 0){
mWidthList.add(position,mWidthList.get(position - 1) + width);
}else{
mWidthList.add(position, width);
}

}
});
textView.setTag(i);
textView.setText(mTabNameList.get(i));
mWidthList.add(0);
textView.setOnClickListener(new OnClickListener() {//点击tab实现滚动

@Override
public void onClick(View v) {
selectTab(v);

if(mItemSelectedListener != null){
int position = Integer.parseInt(v.getTag().toString());
if(position > 1){
scrollTo(mWidthList.get(position - 2), 0);
}
mItemSelectedListener.onItemSelected(Integer.parseInt(v.getTag().toString()));
}
}
});
mLinearLayout.addView(linearLayout);
mTabList.add(linearLayout);
}
}

public interface OnItemSelectedListener{
public void onItemSelected(int position);
}

public void setCurrentPosition(int position){//viewpager滑动的时候调用改方法来滚动tab
if(position < 2){
scrollTo(0, 0);
}else{
scrollTo(mWidthList.get(position - 2), 0);
}
selectTab(mTabList.get(position));
}

private void selectTab(View view){//选中tab
if(mSelectedView != null){
mSelectedView.setSelected(false);
}
view.setSelected(true);
mSelectedView = view;
}
}

3.在Activity中的使用

package com.example.horizontalscrolltitle;


import java.util.ArrayList;
import java.util.List;


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.Window;


import com.example.horizontalscrolltitle.fragment.BaseFragment;
import com.example.horizontalscrolltitle.layout.HorizontalTabList;
import com.example.horizontalscrolltitle.layout.HorizontalTabList.OnItemSelectedListener;


public class MainActivity extends FragmentActivity implements OnPageChangeListener{
 
private List<String> mTitleList = new ArrayList<String>();
private List<BaseFragment> mFragmentList = new ArrayList<BaseFragment>();
private ViewPager mViewPager;
private FragmentAdapter mAdapter;
private HorizontalTabList mHorizontalTabList;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
getWindow().addFlags(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);


mViewPager            = (ViewPager) findViewById(R.id.viewPager);
mHorizontalTabList    = (HorizontalTabList) findViewById(R.id.title);
loadData();
}


private void loadData(){//添加数据
for(int i = 1; i < 19; i ++){
mTitleList.add("第   " + i + "   个 tab");
}

mHorizontalTabList.setTabList(new OnItemSelectedListener() {

@Override
public void onItemSelected(int position) {
if(mViewPager != null){
mViewPager.setCurrentItem(position);
}
}
}, mTitleList);

for(int i = 0; i < mTitleList.size(); i ++){
BaseFragment baseFragment = new BaseFragment(mTitleList.get(i));
mFragmentList.add(baseFragment);
}

mAdapter = new FragmentAdapter(getSupportFragmentManager(), mFragmentList);
mViewPager.setAdapter(mAdapter);
mViewPager.setOnPageChangeListener(this);
mHorizontalTabList.setCurrentPosition(0);
}


private class FragmentAdapter extends FragmentPagerAdapter{


private List<BaseFragment> mFragments;
public FragmentAdapter(FragmentManager fm, List<BaseFragment> fragments) {
super(fm);
mFragments = fragments;
}


@Override
public Fragment getItem(int arg0) {
return mFragments.get(arg0);
}


@Override
public int getCount() {
return mFragments.size();
}

}




@Override
public void onPageScrollStateChanged(int arg0) {
}


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


@Override
public void onPageSelected(int arg0) {
mViewPager.setCurrentItem(arg0);
mHorizontalTabList.setCurrentPosition(arg0);
}


}

4.工具类



//用于dp转px

package com.example.horizontalscrolltitle.utils;


import android.content.Context;


public class DisplayUtils {


public static int dp2px(Context context, double dp){
float density = context.getResources().getDisplayMetrics().density;
int px = (int) (dp * density + 0.5f);
return px;
}
}



//用于加载布局

package com.example.horizontalscrolltitle.utils;


import android.app.Activity;
import android.view.View;


public class LayoutInflateUtils {


public static View inflate(Activity activity, int resId){
if(activity != null){
return activity.getLayoutInflater().inflate(resId, null);
}
return null;
}
}


5.资源

(1).tab_bg_normal.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <solid android:color="@color/color_tab_bg"/>


</shape>

(2).tab_bg_pressed.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
   
    
    <item android:drawable="@color/color_text_selected" />
    
    <item android:bottom="2dp" >
        <shape > 
            <solid android:color="@color/color_tab_bg"/>
        </shape>
    </item>
    
</layer-list>

(3).tab_bg_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:drawable="@drawable/tab_bg_pressed" android:state_selected="true"/>
    <item android:drawable="@drawable/tab_bg_normal" />


</selector>

(4).tab_textcolor_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    
    <item android:color="@color/color_text_selected" android:state_selected="true"></item>
    
    <item android:color="@color/color_text_normal" ></item>


</selector>

(5)fragment_base_layout.xml

<?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:gravity="center">
    
<TextView android:id="@+id/textview"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:textSize="18sp"
   android:text="fragment"/>
    
</LinearLayout>

(6)tab的布局 tab_layout.xml

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout android:layout_width="wrap_content"
        android:layout_height="match_parent"
        xmlns:android="http://schemas.android.com/apk/res/android">
        
        <TextView 
       android:id="@+id/tab"
   android:layout_width="wrap_content"
   android:layout_height="48dp"
   android:layout_margin="1dp"
   android:background="@drawable/tab_bg_selector"
   android:textColor="@drawable/tab_textcolor_selector"
   android:textSize="16sp"
   android:gravity="center"
   android:paddingLeft="7.5dp"
   android:paddingRight="7.5dp"/>
        
    </LinearLayout>
    
    

(7)colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    
    <color name="color_text_selected">#FFFFFF</color>
    <color name="color_text_normal">#8B8386</color>
    <color name="color_tab_bg">#FF7F24</color>
    <color name="color_line">#66CDAA</color>
    <color name="color_gray">#CCCCCC</color>
    
</resources>


    


版权声明:本文为博主原创文章,未经博主允许不得转载。

Fragment中设置滚动条随页面滑动的方法

/** * 设置滑动条的宽度为屏幕的1/3(根据Tab的个数而定) */ private void initTabLineWidth() { //获取屏幕宽...
  • ytfunnysite
  • ytfunnysite
  • 2017年03月03日 17:04
  • 554

fragment+scrollview 切换fragment自动滚动到顶部

项目中一个MainActivity 装载了四个Fragment 其中最后一个fragment中包含了一个ScrollView ,ScrollView中还包含了一个GridView 我的目标是:1: f...
  • liang_duo_yu
  • liang_duo_yu
  • 2016年10月10日 20:29
  • 2726

viewPager+fragment实现循环滚动

主要有两个思路:      1、viewPager的适配器 getCount() 方法返回Integer.max;  getItem() 方法 返回 list.get(position%list.s...
  • ylj15503473366
  • ylj15503473366
  • 2016年03月10日 12:02
  • 1701

使用Fragment+ViewPager,仿微信实现多页Tab切换

我们今天实现类似微信的首页的滑动Tab效果:                郭霖有一篇博客  http://blog.csdn.net/guolin_blog/article/details/1...
  • mba16c35
  • mba16c35
  • 2015年05月11日 20:35
  • 2021

ViewPager+Fragment实现滑动标签页

一开始学习ViewPager的时候看网上很多例子配合的适配器都是直接new 一个PagerAdapter然后重写其中的一些方法而且不是配合Fragment使用的,使用的时候比较麻烦。官方推荐适配器是F...
  • u012806692
  • u012806692
  • 2016年04月01日 16:40
  • 368

Android Fragment+ViewPager实现循环滑动

关于实现ViewPager循环滑动的方法有几种,之前用过加最大值的方法,但是有点问题,所以本篇文章主要介绍的是前后各加一个项的方法,首先看代码(布局代码我就不贴出来了,太简单了,就是一个viewpag...
  • u014483723
  • u014483723
  • 2015年07月27日 16:46
  • 2169

android ViewPager+Fragment封装无限循环ViewPager

ViewPager本身并不支持无限循环,
  • u013510345
  • u013510345
  • 2014年10月28日 15:13
  • 3196

Viewpager + Fragment +FragmentPagerAdapter实现定时循环滚动效果

ViewPager + Fragment的使用此处不写,玩
  • hlglinglong
  • hlglinglong
  • 2014年05月15日 16:31
  • 2069

viewpager+fragment+viewpager+scrollview滑动冲突问题

我的布局比较复杂,viewpager里面是fragment,fragment里面有事viewpager,viewpager里面有事fragment,fragment里面是scrollview,scro...
  • qq_18148011
  • qq_18148011
  • 2016年08月13日 00:16
  • 1282

首页-底部&顶部Tab导航(菜单栏)的实现:TabLayout+ViewPager+Fragment

前言Android开发中使用顶部 & 底部Tab导航栏的频次非常高,主要的实现手段有以下: TabWidget 隐藏TabWidget,使用RadioGroup和RadioButton Fragmen...
  • carson_ho
  • carson_ho
  • 2016年07月24日 11:27
  • 11313
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:实现滚动tab切换fragment + viewpager
举报原因:
原因补充:

(最多只允许输入30个字)