首页 > 代码库 > Tab 滑动标签，综合ViewPager+Fragment+自定义Tab+ActionBar内容
Tab 滑动标签，综合ViewPager+Fragment+自定义Tab+ActionBar内容
1、效果图
第二个菜单TAB1，TAB2，TAB3是参照网上的例子，第一个菜单是在它的基础之上改变而来。
2、菜单
这里的菜单是通过两种方式来实现，一种是通过布局文件，一种是通过自定义组件LinearLayout。自定义只需要传入菜单的名字即可，切换时需要监听事件。下面是一个viewpager+fragment实现，在滑动时改变tab的选中项。
自定义tab底部线是采用TranslateAnimation动画来实现滚动，布局文件采用viewpager的方法onPageScrolled和onPageScrollStateChanged来实现。
2.1 自定义LinearLayout
<span style="font-size:14px;">package com.example.actionbar;
import java.util.List;
import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Color;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.view.Gravity;
import android.view.View;
import android.view.animation.AccelerateInterpolator;
import android.view.animation.Animation;
import android.view.animation.Animation.AnimationListener;
import android.view.animation.TranslateAnimation;
import android.widget.LinearLayout;
import android.widget.TextView;
public class TabView extends LinearLayout {
private int screenWidth;
private String[] tabNames;
private int fontSize;
private TextView[] mTextViews;
private int lineHight;
private View sliderLine;
private int tabWidth;
private int selectedPage;
public TabView(Context context) {
super(context);
init(context);
}
public TabView(Context context, String[] tabNames, DisplayMetrics displayMetrics, int fontSize) {
super(context);
this.tabNames = tabNames;
screenWidth = displayMetrics.widthPixels;
this.fontSize = fontSize;
init(context);
}
public TabView(Context context, List<String> names, DisplayMetrics displayMetrics, int fontSize) {
super(context);
if (names != null) {
tabNames = new String[names.size()];
for (int i = 0; i < tabNames.length; i++) {
this.tabNames[i] = names.get(i);
}
}
screenWidth = displayMetrics.widthPixels;
this.fontSize = fontSize;
init(context);
}
public TabView(Context context, AttributeSet attrs) {
super(context, attrs);
init(context);
}
@SuppressLint("NewApi")
public TabView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init(context);
}
private void init(Context context) {
if (tabNames==null || tabNames.length == 0) {
return;
}
lineHight = (int) getResources().getDimension(R.dimen.cursor_height);
tabWidth = screenWidth / tabNames.length;
mTextViews = new TextView[tabNames.length];
setOrientation(LinearLayout.VERTICAL);
LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(
new LayoutParams(screenWidth / tabNames.length,
LayoutParams.MATCH_PARENT));
LinearLayout linearLayout = new LinearLayout(context);
int height = (int) getResources().getDimension(R.dimen.tab_height);
linearLayout.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT,height));
linearLayout.setOrientation(LinearLayout.HORIZONTAL);
for (int i = 0; i < tabNames.length; i++) {
TextView textView = new TextView(context);
textView.setText(tabNames[i] + "");
textView.setLayoutParams(layoutParams);
textView.setTextSize(fontSize);
textView.setTextColor(Color.BLACK);
textView.setGravity(Gravity.CENTER);
mTextViews[i] = textView;
final int pos = i;
textView.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
if(selectedPage!=pos){
isHidden(pos);
}
if (tabViewListener != null) {
tabViewListener.currentPos(pos);
}
}
});
linearLayout.addView(textView);
}
addView(linearLayout);
if (tabNames.length>1) {
LinearLayout.LayoutParams lineLayoutParams = new LinearLayout.LayoutParams(tabWidth, lineHight);
TextView textView = new TextView(context);
textView.setBackgroundColor(Color.parseColor("#FA8653"));
textView.setLayoutParams(lineLayoutParams);
sliderLine=textView;
addView(textView);
}
isHidden(0);
}
private TabViewListener tabViewListener;
public void setTabViewListener(TabViewListener linListener) {
this.tabViewListener = linListener;
}
public TabViewListener getTabViewListener(){
return tabViewListener;
}
public interface TabViewListener {
public void currentPos(int pos);
}
/*
* 切换字体颜色
*/
public void isHidden(int pos) {
if (pos >= 0 || pos < tabNames.length) {
tabScroll(pos);
mTextViews[selectedPage].setTextColor(Color.BLACK);
mTextViews[pos].setTextColor(Color.parseColor("#FA8653"));
selectedPage=pos;
}
}
/*
* 滚动动画
*/
private void tabScroll(int index){
if (selectedPage==index) {
return;
}
sliderLine.setTranslationX(0);
TranslateAnimation animation = new TranslateAnimation(selectedPage
* tabWidth, index * tabWidth, 0, 0);
animation.setInterpolator(new AccelerateInterpolator());
animation.setDuration(100);
animation.setFillEnabled(true);
animation.setFillAfter(true);
sliderLine.startAnimation(animation);
animation.setAnimationListener(new AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
}
@Override
public void onAnimationRepeat(Animation animation) {
}
@Override
public void onAnimationEnd(Animation animation) {
sliderLine.clearAnimation();
sliderLine.setTranslationX(selectedPage * tabWidth);
}
});
}
}
</span>2.2 使用布局文件
<span style="font-size:14px;">package com.example.actionbar;
import java.util.ArrayList;
import android.app.Activity;
import android.content.Context;
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.util.AttributeSet;
import android.util.DisplayMetrics;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.view.animation.AccelerateInterpolator;
import android.view.animation.Animation;
import android.view.animation.Animation.AnimationListener;
import android.view.animation.TranslateAnimation;
import android.widget.LinearLayout;
import android.widget.TextView;
public class TabFragmentIndicator extends LinearLayout implements
ViewPager.OnPageChangeListener, OnClickListener {
OnTabClickListener onTabClickListener;
Context mContext;
ViewPager mViewPager;
View container;
private View slider;
private int tabNum;
private int selectedPage = 0;
private int preSelectedPage = 0;
private int scrollState;
private final int SCROLL_STATE_PRESS = 1;
private final int SCROLL_STATE_UP = 2;
private float unitWidth;
private float currentPositionPix;
private boolean isClick = false;
SectionsPagerAdapter mSectionsPagerAdapter;
private ArrayList<Class<?>> fragmentList = new ArrayList<Class<?>>();
public TabFragmentIndicator(Context context, AttributeSet attrs) {
super(context, attrs);
mContext = context;
}
public void setViewPager(ViewPager viewPager) {
viewPager.setOffscreenPageLimit(3);
mViewPager = viewPager;
mViewPager.setOnPageChangeListener(this);
mSectionsPagerAdapter = new SectionsPagerAdapter(
((FragmentActivity) mContext).getSupportFragmentManager());
mViewPager.setAdapter(mSectionsPagerAdapter);
}
/**
* 添加fragment
*
* @param index
* @param claz
*/
public void addFragment(int index, Class<?> claz) {
fragmentList.add(index, claz);
if (mSectionsPagerAdapter != null)
mSectionsPagerAdapter.notifyDataSetChanged();
}
/**
* 设置Tab布局
*
* @param layoutId
*/
public void setTabContainerView(int layoutId) {
container = LayoutInflater.from(mContext).inflate(layoutId, null);
this.addView(container, 0);
int height = (int) getResources().getDimension(R.dimen.tab_height);
ViewGroup.LayoutParams params = container.getLayoutParams();
params.height = height;
container.setLayoutParams(params);
if (container instanceof ViewGroup) {
tabNum = ((ViewGroup) container).getChildCount();
for (int i = 0; i < tabNum; i++) {
((ViewGroup) container).getChildAt(i).setTag(i);
((ViewGroup) container).getChildAt(i).setOnClickListener(this);
}
}
}
/**
* 设置下划线
*
* @param layoutId
*/
public void setTabSliderView(int layoutId) {
slider = LayoutInflater.from(mContext).inflate(layoutId, null);
this.addView(slider, 1);
setCursorWidth();
}
public View getIndicatorView() {
return container;
}
public class SectionsPagerAdapter extends FragmentPagerAdapter {
public SectionsPagerAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int index) {
return Fragment.instantiate(mContext, fragmentList.get(index)
.getName(), null);
}
@Override
public int getCount() {
return fragmentList.size();
}
}
@Override
public void onPageSelected(int position) {
((TextView) ((ViewGroup) container).getChildAt(selectedPage))
.setTextColor(this.getResources().getColor(
android.R.color.black));
((TextView) ((ViewGroup) container).getChildAt(position))
.setTextColor(this.getResources().getColor(R.color.orange));
selectedPage = position;
}
@Override
public void onPageScrolled(int position, float positionOffset,
int positionOffsetPixels) {
//不是点击tab选项
if (!isClick && positionOffsetPixels != 0) {
if (scrollState == SCROLL_STATE_PRESS) {// 手指按下的状态
if (selectedPage == position) {// 表示往左拉，相应的tab往右走
slider.setTranslationX(currentPositionPix
+ positionOffsetPixels / tabNum);
} else {// 表示往右拉
slider.setTranslationX(currentPositionPix
- (unitWidth - positionOffsetPixels / tabNum));
}
} else if (scrollState == SCROLL_STATE_UP) {// 手指抬起的状态
System.out.println("preSelectedPage---" + preSelectedPage +" position---" + position+" offset "+positionOffsetPixels);
if (preSelectedPage == position) {// 往左拉
slider.setTranslationX(currentPositionPix + positionOffsetPixels / tabNum);
} else {// 表示往右拉
slider.setTranslationX(currentPositionPix - (unitWidth - positionOffsetPixels / tabNum));
}
}
}
}
// 其中state这个参数有三种状态（0，1，2）。state
// ==1的时辰默示正在滑动，state==2的时辰默示滑动完毕了，state==0的时辰默示什么都没做。
@Override
public void onPageScrollStateChanged(int state) {
System.out.println("onPageScrollStateChanged------state" + state);
if (!isClick) {
currentPositionPix = selectedPage * unitWidth;
scrollState = state;
preSelectedPage = selectedPage;
}
}
/**
*
* 点击tab页时移动下划线
*/
@Override
public void onClick(View v) {
final int index = (Integer) v.getTag();
onTabClickListener.onTabClick(v);
if (selectedPage == index) {
return;
}
isClick = true;
slider.setTranslationX(0);
TranslateAnimation animation = new TranslateAnimation(selectedPage
* unitWidth, index * unitWidth, 0, 0);
animation.setInterpolator(new AccelerateInterpolator());
animation.setDuration(100);
animation.setFillEnabled(true);
animation.setFillAfter(true);
slider.startAnimation(animation);
animation.setAnimationListener(new AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
mViewPager.setCurrentItem(index, true);
}
@Override
public void onAnimationRepeat(Animation animation) {
}
@Override
public void onAnimationEnd(Animation animation) {
slider.clearAnimation();
slider.setTranslationX(selectedPage * unitWidth);
isClick = false;
}
});
}
/** 设置cursor的宽度，并获取移动的单位长度float **/
private void setCursorWidth() {
int cursorWidth = getWindowWidth() / tabNum;
unitWidth = (float) getWindowWidth() / tabNum;
int cursorHeight = (int) getResources().getDimension(
R.dimen.cursor_height);
ViewGroup.LayoutParams params = slider.getLayoutParams();
params.height = cursorHeight;
params.width = cursorWidth;
slider.setLayoutParams(params);
}
/** 获取屏幕宽度 **/
private int getWindowWidth() {
DisplayMetrics dm = new DisplayMetrics();
((Activity) mContext).getWindowManager().getDefaultDisplay()
.getMetrics(dm);
return dm.widthPixels;
}
public void setOnTabClickListener(OnTabClickListener onTabClickListener) {
this.onTabClickListener = onTabClickListener;
}
public interface OnTabClickListener {
public void onTabClick(View v);
}
}
</span><span style="font-size:14px;"><?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="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal" >
<TextView
android:id="@+id/tab1_text"
android:layout_width="0dp"
android:layout_weight="1.0"
android:gravity="center"
android:layout_height="@dimen/tab_height"
android:textColor="@color/orange"
style="@style/Style.ActionBarTabTextStyle"
android:text="tab1" />
<TextView
android:id="@+id/tab2_text"
android:layout_width="0dp"
android:layout_height="@dimen/tab_height"
android:layout_weight="1.0"
android:gravity="center"
style="@style/Style.ActionBarTabTextStyle"
android:text="tab2" />
<TextView
android:id="@+id/tab3_text"
android:layout_width="0dp"
android:layout_height="@dimen/tab_height"
android:layout_weight="1.0"
android:gravity="center"
style="@style/Style.ActionBarTabTextStyle"
android:text="tab3" />
</LinearLayout></span>3、测试调用
<span style="font-family: 'Comic Sans MS';"><span style="font-size:14px;">public class HomeActivity extends FragmentActivity implements
OnTabClickListener, OnCategorySelectedListener {
private ViewPager mViewPager;
private TabFragmentIndicator tabFragmentIndicator;
private View categoryTab;
private CategoryWindow categoryWindow;
private SettingMenuWindow menuWindow;
private LinearLayout ll_tab;
private TabView tabView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_home);
menuWindow = new SettingMenuWindow(this);
mViewPager = (ViewPager) findViewById(R.id.viewPager);
ll_tab = (LinearLayout) findViewById(R.id.ll_tab);
tabFragmentIndicator = (TabFragmentIndicator) findViewById(R.id.tabFragmentIndicator);
tabFragmentIndicator.addFragment(0, CountingFragment.class);
tabFragmentIndicator.addFragment(1, CountingFragment.class);
tabFragmentIndicator.addFragment(2, CountingFragment.class);
tabFragmentIndicator
.setTabContainerView(R.layout.layout_home_tabindicator);
tabFragmentIndicator.setTabSliderView(R.layout.layout_home_tab_slider);
tabFragmentIndicator.setOnTabClickListener(this);
tabFragmentIndicator.setViewPager(mViewPager);
categoryWindow = new CategoryWindow(this, this);
DisplayMetrics dm = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(dm);
tabView = new TabView(this, new String[] { "菜单", "发现", "设置" },
dm, 20);
ll_tab.addView(tabView);
tabView.setTabViewListener(new TabViewListener() {
@Override
public void currentPos(int pos) {
tabView.isHidden(pos);
}
});
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.menu_more:
menuWindow.showAsDropDown(findViewById(R.id.anchorView), 1800, -25);
break;
}
return super.onOptionsItemSelected(item);
}
@Override
public void onTabClick(View v) {
int pos = (Integer) v.getTag();
if (pos == 0) {
categoryWindow.showAsDropDown(tabFragmentIndicator, -20, 0);
}
tabView.getTabViewListener().currentPos(pos);
}
@Override
public void onCategorySelected(String name, String id) {
((TextView) categoryTab).setText(name);
categoryWindow.dismiss();
}
}</span></span>源码下载
Tab 滑动标签，综合ViewPager+Fragment+自定义Tab+ActionBar内容
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。