<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">废话不多说，先上一张效果图。</span>
如上图所示，我们今天要实现的就是一个可以左右滑动切换Tab页的效果。这个效果比较简单，我们可以通过多种方法实现，今天我们就用ActionBar + ViewPager的方式去实现该效果。
布局如下：
activity_main.xml
<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"
android:padding="0dp"
android:orientation="vertical"
tools:context=".MainActivity$PlaceholderFragment">
<android.support.v4.view.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</android.support.v4.view.ViewPager>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical">
<Button
android:id="@+id/add_tab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/add_tab"/>
<Button
android:id="@+id/remove_tab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/remove_tab"/>
</LinearLayout>
</LinearLayout>fargment_mian.xml
fragment_tab.xml
布局文件比较简单，看下就可以了，接下来上代码：
TabFragment.java
package com.hero.tabactionbardemo;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
/**
* Tab页内容Fragment，内容比较简单，仅用于测试
* Created by Hero on 2014/11/2.
*/
public class TabFragment extends Fragment{
private TextView mTextView;
private String str;
public TabFragment(String str){
this.str = str;
}
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.fragment_tab, container, false);
mTextView = (TextView) rootView.findViewById(R.id.txt);
if (str != null){
mTextView.setText(str);
}
return rootView;
}
}
MainFragment.java
package com.hero.tabactionbardemo;
import android.os.Bundle;
import android.support.annotation.Nullable;
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.app.FragmentTransaction;
import android.support.v4.view.ViewPager;
import android.support.v7.app.ActionBar;
import android.support.v7.app.ActionBarActivity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.Toast;
import java.util.ArrayList;
import java.util.List;
/**
* Created by Hero on 2014/11/2.
*/
public class MainFragment extends Fragment{
private Button addTab;
private Button removeTab;
private ViewPager mViewPager;
private ViewPagerAdapter mAdapter;
private ActionBar mActionBar;
private boolean flag = false; //标志页面切换来自哪里，true：来自viewpager；false:来自tab
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mActionBar = ((ActionBarActivity)getActivity()).getSupportActionBar();
mActionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
mActionBar.setDisplayOptions(0, ActionBar.DISPLAY_SHOW_TITLE);
}
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.fragment_main, container, false);
mViewPager = (ViewPager) rootView.findViewById(R.id.view_pager);
addTab = (Button) rootView.findViewById(R.id.add_tab);
removeTab = (Button) rootView.findViewById(R.id.remove_tab);
return rootView;
}
@Override
public void onActivityCreated(@Nullable Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
mAdapter = new ViewPagerAdapter(getFragmentManager());
mViewPager.setAdapter(mAdapter);
//页面切换监听器
mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int i, float v, int i2) {
}
@Override
public void onPageSelected(int i) {
flag = true;
mActionBar.getTabAt(i).select();
}
@Override
public void onPageScrollStateChanged(int i) {
}
});
addTab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
int count = mActionBar.getTabCount();
ActionBar.Tab tab = mActionBar.newTab();
count++;
String txt = "Tab" + count;
tab.setText(txt);
tab.setTabListener(new TabListener());
mActionBar.addTab(tab);
mAdapter.addTab(new TabFragment(txt));
}
});
removeTab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
int count = mActionBar.getTabCount();
if(count == 0){
Toast.makeText(getActivity(), "目前已经没有Tab选项卡可删除了！", Toast.LENGTH_SHORT).show();
return;
}
mActionBar.removeTabAt(count - 1);
mAdapter.removeTab();
}
});
}
class TabListener implements ActionBar.TabListener {
/**
* 当该Tab被选中的时候会调用该方法
* @param tab
* @param fragmentTransaction
*/
@Override
public void onTabSelected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) {
int index = tab.getPosition(); //tab的索引，即tab的位置
flag = false;
mViewPager.setCurrentItem(index); //将ViewPager也切换到相应的页面
}
/**
* 当该Tab从选中状态转为未选中状态时会调用该方法
* @param tab
* @param fragmentTransaction
*/
@Override
public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) {
}
/**
* 当该Tab已经被选中了，再次点击该Tab时会调用该方法
* @param tab
* @param fragmentTransaction
*/
@Override
public void onTabReselected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) {
if (!flag) {
Toast.makeText(getActivity(), tab.getText() + "已经被选中了！请不要重复选择", Toast.LENGTH_SHORT).show();
}
flag = false;
}
}
/**
* ViewPager适配器
*/
class ViewPagerAdapter extends FragmentPagerAdapter{
List
list;
public ViewPagerAdapter(FragmentManager fm) {
super(fm);
list = new ArrayList
();
}
@Override
public Fragment getItem(int i) {
return list.get(i);
}
@Override
public int getCount() {
return list.size();
}
/**
* 给ViewPager添加一个数据
* @param fragment
*/
public void addTab(Fragment fragment){
list.add(fragment);
notifyDataSetChanged();
}
/**
* 删除最后一个选项卡
*/
public void removeTab(){
if(list.size() == 0){
Toast.makeText(getActivity(), "选项卡已经为空！", Toast.LENGTH_SHORT).show();
return;
}
list.remove(list.size() - 1); //删除最后一条
notifyDataSetChanged();
}
}
}
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mActionBar = ((ActionBarActivity)getActivity()).getSupportActionBar();
mActionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
mActionBar.setDisplayOptions(0, ActionBar.DISPLAY_SHOW_TITLE);
}
在该方法中，会修改ActionBar的显示模式，让它显示Tab
addTab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
int count = mActionBar.getTabCount();
ActionBar.Tab tab = mActionBar.newTab();
count++;
String txt = "Tab" + count;
tab.setText(txt);
tab.setTabListener(new TabListener());
mActionBar.addTab(tab);
mAdapter.addTab(new TabFragment(txt));
}
});
注意在给ActionBar添加Tab的时候，要给Tab添加一个TabListener监听，这样当点击Tab进行切换的时候，我们才会监听的到，从而添加各种处理。
同时，为了让点击切换Tab的时候，让下面ViewPager也显示相应的内容，还要设置ViewPager.setCurrentItem(int index)。
再左右滑动切换ViewPager页面的时候，为了让ActionBar的Tab页切换，还要给ViewPager添加一个OnPageChangeListener监听。当切换页面后，同事也设置ActionBar的选中Tab。
这样就可以实现左右滑动切换Tab效果了。但是上面还是有一个小Bug，就是点击Tab进行切换时，会触发TabListener的onTabReselected（）方法，该方法会被重复选择已经被选中的Tab时触发。
我们来看下触发流程：点击Tab，触发onTabSelected（）方法 --> 切换viewpager，设置setCurrentItem（）--> 触发OnPageChangeListener监听 --> 设置ActionBar的选中Tab
因为最后一次设置的选择Tab已经被选中了，所以会触发TabListener的onTabReselected()方法。这里我们需要在onTabReselected（）方法里判断下事件的来源，如果来源于ViewPager的OnPageChangeListener，则不进行处理；否则就进行处理。MainFragment类中的flag就是为了处理该问题设置的。
好了，到这里应该差不多，接下来说两句闲话。这是我第一次写技术博客，写到这里我都不知道上面到底都写了些什么东西，到现在才知道写技术博客根本不是一件容易的事情，除了研究技术，写demo外，还要想着怎么组织语言，怎么才能将文章写的通俗易懂，在这里不得不对那些将将文章写的通俗易懂又有干货的大神佩服的五体投地。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
