当前位置: 首页 > 编程笔记 >

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

笪欣嘉
2023-03-14
本文向大家介绍Android利用Fragment实现Tab选项卡效果,包括了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="html" target="_blank">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基于ViewPager Fragment实现选项卡,包括了Android基于ViewPager Fragment实现选项卡的使用技巧和注意事项,需要的朋友参考一下 先给大家展示效果图: 1.新建TestFragmen继承Fragment 2.MyFragmentPagerAdapter继承FragmentPagerAdapter 3.MainActivity 要继承Fr

  • 本文向大家介绍Android使用TabLayout+Fragment实现顶部选项卡,包括了Android使用TabLayout+Fragment实现顶部选项卡的使用技巧和注意事项,需要的朋友参考一下 先看效果图: 使用Tablayout,首先需要在项目中加入Design包 在activity_main.xml布局文件中 里面一个Tablayout和一个ViewPager就行了 实现上面的效果需要创

  • 本文向大家介绍jQuery实现tab选项卡效果的方法,包括了jQuery实现tab选项卡效果的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery实现tab选项卡效果的方法。分享给大家供大家参考。具体如下: html部分如下: 希望本文所述对大家的jquery程序设计有所帮助。

  • 本文向大家介绍jQuery简单实现tab选项卡切换效果,包括了jQuery简单实现tab选项卡切换效果的使用技巧和注意事项,需要的朋友参考一下 抽空把公司项目上用的tab效果封装了一下,实在是需要用的地方太多了~~~ 效果图: 代码: 以上就是本文的全部内容,希望能给大家一个参考,也希望大家多多支持呐喊教程。

  • 本文向大家介绍Android多个TAB选项卡切换效果,包括了Android多个TAB选项卡切换效果的使用技巧和注意事项,需要的朋友参考一下 在前一期中,我们做了悬浮头部的两个tab切换和下拉刷新效果,后来项目中要求改成三个tab,当时就能估量了一下,如果从之前的改,也不是不可以,但是要互相记住的状态就太多了,很容易出现错误。就决定重新实现一下这个效果,为此先写了一个demo,这期间项目都已经又更新

  • 正常模式 点击标签可以切换 可以通过阻止 change 事件对象的默认行为来阻止切换标签 <div class="container"> <div id="tab" class="ui-tab"> <ul class="ui-tab-wrapper"> <li class="ui-tab-item ui-tab-item-first ui-tab-item-act