Android利用Fragment实现Tab选项卡效果

利用Fragment实现Tab选项卡效果： 

将RadioGroup与Fragment集合，实现tab选项卡效果，这里面最关键的几个文件： 

1.FragmentTabAdapter类：

/**
*@Description:
*@Author:Nate Robinson
*@Since:2015-2-12
*/
public class FragmentTabAdapter implements RadioGroup.OnCheckedChangeListener
{
private List<Fragment> fragments; // 一个tab页面对应一个Fragment
private RadioGroup rgs; // 用于切换tab
private Activity activity; // Fragment所属的Activity
private int fragmentContentId; // Activity中所要被替换的区域的id
private int currentTab; // 当前Tab页面索引
private OnRgsExtraCheckedChangedListener onRgsExtraCheckedChangedListener; // 用于让调用者在切换tab时候增加新的功能
public FragmentTabAdapter(Activity activity, List<Fragment> fragments, int fragmentContentId, RadioGroup rgs)
{
this.fragments = fragments;
this.rgs = rgs;
this.activity = activity;
this.fragmentContentId = fragmentContentId;
// 默认显示第一页
android.app.FragmentTransaction ft = activity.getFragmentManager().beginTransaction();
ft.add(fragmentContentId, fragments.get(0));
ft.commit();
rgs.setOnCheckedChangeListener(this);
}
@Override
public void onCheckedChanged(RadioGroup radioGroup, int checkedId)
{
for(int i = 0; i < rgs.getChildCount(); i++)
{
if(rgs.getChildAt(i).getId() == (checkedId))
{
Fragment fragment = fragments.get(i);
FragmentTransaction ft = activity.getFragmentManager().beginTransaction();
getCurrentFragment().onPause(); // 暂停当前tab
// getCurrentFragment().onStop(); // 暂停当前tab
if(fragment.isAdded())
{
// fragment.onStart(); // 启动目标tab的onStart()
fragment.onResume(); // 启动目标tab的onResume()
}
else
{
ft.add(fragmentContentId, fragment);
}
showTab(i); // 显示目标tab
ft.commit();
// 如果设置了切换tab额外功能功能接口
if(null != onRgsExtraCheckedChangedListener)
{
onRgsExtraCheckedChangedListener.OnRgsExtraCheckedChanged(radioGroup, checkedId, i);
}
}
}
}
/**
* 切换tab
* @param idx
*/
private void showTab(int idx)
{
for(int i = 0; i < fragments.size(); i++)
{
Fragment fragment = fragments.get(i);
FragmentTransaction ft = activity.getFragmentManager().beginTransaction();
if(idx == i)
{
ft.show(fragment);
}
else
{
ft.hide(fragment);
}
ft.commit();
}
currentTab = idx; // 更新目标tab为当前tab
}
public int getCurrentTab()
{
return currentTab;
}
public Fragment getCurrentFragment()
{
return fragments.get(currentTab);
}
public OnRgsExtraCheckedChangedListener getOnRgsExtraCheckedChangedListener()
{
return onRgsExtraCheckedChangedListener;
}
public void setOnRgsExtraCheckedChangedListener(OnRgsExtraCheckedChangedListener onRgsExtraCheckedChangedListener)
{
this.onRgsExtraCheckedChangedListener = onRgsExtraCheckedChangedListener;
}
/**
* 切换tab额外功能功能接口
*/
public interface OnRgsExtraCheckedChangedListener
{
void OnRgsExtraCheckedChanged(RadioGroup radioGroup, int checkedId, int index);
}
}

2.activity_main.xml布局文件：

<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@android:color/white"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<FrameLayout
android:id="@+id/tab_content"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1.0"
android:background="#77557799" />
<RadioGroup
android:id="@+id/tabs_rg"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal"
android:paddingBottom="7dp"
android:paddingTop="7dp" >
<RadioButton
android:id="@+id/tab_rb_a"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:background="@drawable/selector_tab"
android:button="@null"
android:checked="true"
android:drawableTop="@drawable/tablatestalert"
android:gravity="center"
android:singleLine="true"
android:text="Tab1"
android:textColor="#000000"
android:textSize="13sp" />
<RadioButton
android:id="@+id/tab_rb_b"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:background="@drawable/selector_tab"
android:button="@null"
android:drawableTop="@drawable/tabsearch"
android:gravity="center"
android:singleLine="true"
android:text="Tab2"
android:textColor="#000000"
android:textSize="13sp" />
<RadioButton
android:id="@+id/tab_rb_c"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:background="@drawable/selector_tab"
android:button="@null"
android:drawableTop="@drawable/tabrecommd"
android:gravity="center"
android:singleLine="true"
android:text="Tab3"
android:textColor="#000000"
android:textSize="13sp" />
</RadioGroup>
</LinearLayout>
</LinearLayout>

3.MainActivity类：

/**
*@Description:
*@Author:Nate Robinson
*@Since:2015-2-12
*/
public class MainActivity extends Activity
{
private RadioGroup rgs;
private List<Fragment> fragments = new ArrayList<Fragment>();
private int index;
private static Boolean isExit = false;
private static Boolean hasTask = false;
private RadioButton button;
private Timer tExit = new Timer();
private TimerTask task = new TimerTask()
{
@Override
public void run()
{
isExit = false;
hasTask = true;
}
};
private FragmentTabAdapter tabAdapter;
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
fragments.add(new FragmentOne());
fragments.add(new FragmentTwo());
fragments.add(new FragmentThree());
rgs = (RadioGroup) findViewById(R.id.tabs_rg);
button = (RadioButton) findViewById(R.id.tab_rb_a);
tabAdapter = new FragmentTabAdapter(this, fragments, R.id.tab_content, rgs);
tabAdapter.setOnRgsExtraCheckedChangedListener(new FragmentTabAdapter.OnRgsExtraCheckedChangedListener()
{
@Override
public void OnRgsExtraCheckedChanged(RadioGroup radioGroup, int checkedId, int index)
{
// 利用这个index可以实现，如果不是在主页，按第一遍让它先跳转到第一个Fragment
System.out.println("Extra---- " + index + " checked!!! ");
MainActivity.this.index = index;
}
});
}
@Override
public boolean onKeyDown(int keyCode, KeyEvent event)
{
if(keyCode == KeyEvent.KEYCODE_BACK)
{
if(index == 0)
{
if(isExit == false)
{
isExit = true;
Toast.makeText(MainActivity.this, "再按一次退出程序", Toast.LENGTH_SHORT).show();
if(!hasTask)
{
tExit.schedule(task, 1000);
}
}
else
{
finish();
System.exit(0);
}
}
else
{
// 如果不是在主页，按第一遍让它先跳转到第一个Fragment
// 利用上面的check方法会导致onCheckedChanged方法被执行多次
// rgs.check(button.getId());
button.setChecked(true);
}
}
return false;
}
}

为了能同时学习Fragment生命周期，我在Fragment每个生命周期方法中加入了log打印，一个有三个这样的Fragment，我只贴出其中一个代码，其余和这个一样：

/**
*@Description:
*@Author:Nate Robinson
*@Since:2015-2-12
*/
public class FragmentOne extends BaseFragment
{
private View view;
@Override
public void onAttach(Activity activity)
{
super.onAttach(activity);
Log.d(TAG, "1==>FragmentOne=>onAttach");
}
@Override
public void onCreate(Bundle savedInstanceState)
{
Log.d(TAG, "2==>FragmentOne==>onCreate");
super.onCreate(savedInstanceState);
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
{
Log.d(TAG, "3==>FragmentOne==>onCreateView");
view = inflater.inflate(R.layout.fragment1, container, false);
TextView tv = (TextView) view.findViewById(R.id.tv);
tv.setText("FragmentOne");
return view;
}
@Override
public void onActivityCreated(Bundle savedInstanceState)
{
Log.d(TAG, "4==>FragmentOne==>onActivityCreated");
super.onActivityCreated(savedInstanceState);
}
@Override
public void onStart()
{
Log.d(TAG, "5==>FragmentOne==>onStart");
super.onStart();
}
@Override
public void onResume()
{
Log.d(TAG, "6==>FragmentOne==>onResume");
super.onResume();
}
@Override
public void onPause()
{
Log.d(TAG, "7==>FragmentOne==>onPause");
super.onPause();
}
@Override
public void onStop()
{
Log.d(TAG, "8==>FragmentOne==>onStop");
super.onStop();
}
@Override
public void onDestroyView()
{
Log.d(TAG, "9==>FragmentOne==>onDestroyView");
super.onDestroyView();
}
@Override
public void onDestroy()
{
Log.d(TAG, "10==>FragmentOne==>onDestroy");
super.onDestroy();
}
@Override
public void onDetach()
{
Log.d(TAG, "11==>FragmentOne==>onDetach");
super.onDetach();
}
@Override
public void onViewCreated(View view, Bundle savedInstanceState)
{
Log.d(TAG, "FragmentOne==>onViewCreated");
super.onViewCreated(view, savedInstanceState);
}
}

在编写过程中，我为了实现如果不是在主页，按第一遍让它先跳转到第一个Fragment这个效果，一开始使用了rgs.check(button.getId());这个方法，结果发现，这样的话onCheckedChanged监听事件会执行两次，后来改为button.setChecked(true);这个方法之后，成功解决了这个问题。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

• Android实现底部导航栏功能（选项卡）
• Android多个TAB选项卡切换效果
• Android仿微信底部实现Tab选项卡切换效果
• Android实现类似网易新闻选项卡动态滑动效果
• Android编程实现自定义Tab选项卡功能示例
• Android编程实现将tab选项卡放在屏幕底部的方法
• Android开发之选项卡功能的实现方法示例
• Android实现知乎选项卡动态隐藏效果实例