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

2019-12-12 05:49:29

字体：大中小

来源：转载

供稿：网友

利用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);这个方法之后，成功解决了这个问题。

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

上一篇：一步步实现Viewpager卡片翻页效果

下一篇：Android清除工程中无用资源文件的两种方法