Android仿淘宝tab返回

最新推荐文章于 2021-05-27 05:47:23 发布

勇者神龟

最新推荐文章于 2021-05-27 05:47:23 发布

阅读量10w+

点赞数 1

CC 4.0 BY-SA版权

文章标签： Android Fragment tab

本文链接：https://blog.youkuaiyun.com/u011535199/article/details/51072113

本文详细介绍了一种模仿淘宝App中Tab栏切换及返回逻辑的实现方式，通过使用Fragment和RadioGroup来完成页面间的切换，并实现了特殊的返回机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、概述

淘宝相信大家都在用过，不过不知道各位有没有仔细观察过淘宝的tab界面，尤其是返回的时候的逻辑。最近闲来无事，猛然发现淘宝的tab界面还真的挺好玩，废话不多说，接下来就开始我们的正题：

首先，我们先来分析一下他的返回逻辑，仔细观察你会发现，他并不是你一点返回就会让你退，而是只有你在主界面的时候才会让你退出。当不在主界面时则会依次返回到你以前的界面，在主界面退出。如果重复点击同一个tab，则会把跳转到前一个相同tab，并把之后所有tab移除。

好了，逻辑先分析到这里，大家可以打开手机淘宝慢慢体会。

二、代码实现

首先,我们先来实现tab界面，这里我们使用radiogroup+fragment的方式

我们先来编写5个Fragment，这里仅作演示，所以简单编写了几个

public class Fragment1 extends Fragment{
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        TextView textView=new TextView(getActivity());
        textView.setText("Fragment1");
        return textView;
    }
}

其他四个分别为： Fragment2 ，Fragment3 ，Fragment4 ，Fragment5，内容与上面代码一致，为了节省空间和时间，这里就不一一列出

接下里我们为fragment建立一个工厂类：

 public class FragmentFactory {
    private  static SparseArray<Fragment> fragmentList=new SparseArray<>();   //fragment集合，保证每个fragment只被 实例一次
   public static Fragment getLocalFragment(int id) {
      Fragment fragment =fragmentList.get(id);
        if(fragment!=null)
            return  fragment;
      switch (id) {
      case R.id.id_main_radio:
         fragment = new Fragment1();
         break;
      case R.id.id_change_radio:
         fragment = new Fragment2();
         break;
      case R.id.id_record_radio:
         fragment = new Fragment3();
         break;
      case R.id.id_setting_radio:
         fragment = new Fragment4();
         break;
      case R.id.id_shenqing_radio:
         fragment = new Fragment5();
         break;
      }
        fragmentList.put(id,fragment);          //保存此fragment，方便下次调用
      return fragment;
   }
}

接下来看main.xml的布局文件

     <?xml version="1.0" encoding="utf-8"?>
  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <FrameLayout
        android:id="@+id/frame"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
        <RadioGroup
            android:id="@+id/tabgroup"
            android:layout_width="fill_parent"
            android:layout_height="52dp"
            android:layout_gravity="bottom"
            android:orientation="horizontal" >

            <RadioButton
                android:id="@+id/id_main_radio"
                style="@style/weibo_tab"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                android:checked="true"
                android:drawableTop="@drawable/home"
                android:text="首页" />

            <RadioButton
                android:id="@+id/id_change_radio"
                style="@style/weibo_tab"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                android:drawableTop="@drawable/myservice"
                android:text="我的服务" />

            <RadioButton
                android:id="@+id/id_shenqing_radio"
                style="@style/weibo_tab"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                android:drawableTop="@drawable/myapply"
                android:text="申请" />

            <RadioButton
                android:id="@+id/id_record_radio"
                style="@style/weibo_tab"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                android:drawableTop="@drawable/cart"
                android:text="购物车" />

            <RadioButton
                android:id="@+id/id_setting_radio"
                style="@style/weibo_tab"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                android:drawableTop="@drawable/mine"
                android:text="我" />
        </RadioGroup>

    </RelativeLayout>
</LinearLayout>

 style如下：

         <style name="weibo_tab">
    <item name="android:layout_height">wrap_content</item>
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_weight">1</item>
    <item name="android:gravity">center</item>
    <item name="android:paddingTop">8dip</item>
    <item name="android:background">@drawable/background</item>
    <item name="android:paddingBottom">4dip</item>
    <item name="android:button">@null</item>
    <item name="android:textSize">12sp</item>
    <item name="android:textColor">@drawable/radiotext</item>
  </style>
   最后就是我们的重中之重了，也就是我们的MainActivity:
       public class MainActivity extends FragmentActivity implements
      OnCheckedChangeListener {
   private static RadioGroup tab_group;
   private FragmentManager fragmentManager;
   public Context context;
   private int[] radioIds;              //存放所有Radiobutton的id
   private static Boolean isExit = false;
   private boolean isBack;    //记录是都是返回，如果是返回则不调用onCheckedChanged

   @Override
   protected void onCreate(Bundle savedInstanceState) {

      super.onCreate(savedInstanceState);
      requestWindowFeature(Window.FEATURE_NO_TITLE);
      setContentView(R.layout.main);
      context = MainActivity.this;
      initViews();
        fragmentManager = getSupportFragmentManager();
      FragmentTransaction transaction = fragmentManager.beginTransaction();
        Fragment mainFragment=FragmentFactory.getLocalFragment(R.id.id_main_radio);
      transaction.add(R.id.frame, mainFragment, R.id.id_main_radio + "");
        transaction.addToBackStack(R.id.id_main_radio + "");    //放入栈底，保证每次都从首页退出
      transaction.commit();
        ActivityManager.getInstance().addActivity(this);
   }

   private void initViews() {
      tab_group = (RadioGroup) findViewById(R.id.tabgroup);
      tab_group.setOnCheckedChangeListener(this);
      radioIds = new int[] { R.id.id_main_radio, R.id.id_change_radio,
            R.id.id_shenqing_radio,R.id.id_record_radio, R.id.id_setting_radio };
   }

   @Override
   public void onCheckedChanged(RadioGroup group, int checkedId) {
      if(isBack){
         isBack=false;
          return;    
      }else {
      tab_group.check(tab_group.getCheckedRadioButtonId());
      FragmentTransaction transaction = fragmentManager.beginTransaction();
            Fragment fragment1=fragmentManager.findFragmentByTag(checkedId + "");
            if(fragment1==null){
                //如果为空，则表明此fragment从来没有被点击过
             fragment1 = FragmentFactory.getLocalFragment(checkedId);
                transaction.addToBackStack(checkedId+"");
            }else {
                //该fragment已经入栈
                boolean isCurrent=false;       //是否是当前栈
                for (int i=0,size=fragmentManager.getBackStackEntryCount();i<size;i++){
                    String name=fragmentManager.getBackStackEntryAt(i).getName();  //获取当前栈名称
                    if(isCurrent)
                        fragmentManager.popBackStack();
                    if(name.equals(checkedId+"")){
                        isCurrent=true;
                    }
                }
            }
            transaction.replace(R.id.frame, fragment1,checkedId+"");
          transaction.commit();
        }
   }

   @Override
   public boolean onKeyDown(int keyCode, KeyEvent event) {
      if (keyCode == KeyEvent.KEYCODE_BACK) {
         FragmentManager fragmentManager=getSupportFragmentManager();
         int count=fragmentManager.getBackStackEntryCount();
      if(count>1){
         fragmentManager.popBackStack();
         isBack=true;
         BackStackEntry backstatck=getSupportFragmentManager().getBackStackEntryAt(count-1);
            RadioButton radioButton=(RadioButton) tab_group.findViewById(radioIds[(backstatck.getId()-1)%5]);
         radioButton.setChecked(true);
      }else {
         exitBy2Click();
      }
      }
      return false;
   }

   private void exitBy2Click() {
      Timer tExit = null;
      if (isExit == false) {
         isExit = true;
         Toast.makeText(this, "再按一次退出", Toast.LENGTH_SHORT).show();
         tExit = new Timer();
         tExit.schedule(new TimerTask() {
            @Override
            public void run() {
               isExit = false;
            }
         }, 2000);
      } else {
         ActivityManager.getInstance().exit();
      }
   }
}

   好了，至此，我们的仿淘宝tab返回就算是基本完成了，快来看看我们的效果吧：
   
项目下载地址：点击下载demo