Back

android - 使用androidx 提供的tab fragment方式来实现标签页

发布时间: 2020-05-31 06:18:00

关于底部tab , 可以看这里：

http://siwei.me/blog/posts/android-tablayout-view-pager-tab-bottom-tab

其实，这里还有个官方推荐： https://material.io/develop/android/components/bottom-navigation/ 是个很好的例子

我用的是androidx 提供的 TabPagerAdapter + ViewPager 实现的。参考：https://developer.android.com/guide/navigation/navigation-swipe-view

过程如下：

1. MainActivity 中，增加：

public class MainActivity extends AppCompatActivity {
  @Override
  public void onCreate(Bundle savedInstanceState) {
    Log.d("main", "==  hihihi");
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
  }
}

2. activity_main.xml 中，增加：

    <fragment android:name="com.shentou.TabsFragment"
        android:id="@+id/collection_demo_fragment"
        android:layout_width="match_parent"
        android:layout_weight="1"
        android:layout_height="match_parent" />

3. 增加 TabsFragment.java

public class TabsFragment extends Fragment {

  TabPagerAdapter tabPagerAdapter;
  ViewPager viewPager;

  @Nullable
  @Override
  public View onCreateView(@NonNull LayoutInflater inflater,
                           @Nullable ViewGroup container,
                           @Nullable Bundle savedInstanceState) {
    return inflater.inflate(R.layout.my_view_pager, container, false);
  }

  @Override
  public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
    tabPagerAdapter = new TabPagerAdapter(getChildFragmentManager());
    viewPager = view.findViewById(R.id.pager);
    viewPager.setAdapter(tabPagerAdapter);

    TabLayout tabLayout = view.findViewById(R.id.tab_layout);
    tabLayout.setupWithViewPager(viewPager);

  }
}

4. 增加 TabPagerAdapter.java

class TabPagerAdapter extends FragmentStatePagerAdapter {
  public TabPagerAdapter(FragmentManager fm) {
    super(fm);
  }

  @Override
  public Fragment getItem(int i) {
    Fragment fragment = new SingleTabFragment();
    Bundle args = new Bundle();
    // Our object is just an integer :-P
    args.putInt(SingleTabFragment.ARG_OBJECT, i + 1);
    fragment.setArguments(args);
    return fragment;
  }

  @Override
  public int getCount() {
    return 2;
  }

  @Override
  public CharSequence getPageTitle(int position) {
    return "OBJECT " + (position + 1);
  }
}

5. 增加： SingleTabFragment.java

public class SingleTabFragment extends Fragment {
  public static final String ARG_OBJECT = "object";

  @Override
  public View onCreateView(LayoutInflater inflater,
                           ViewGroup container, Bundle savedInstanceState) {
    return inflater.inflate(R.layout.fragment_tabs, container, false);
  }

  @Override
  public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
    Bundle args = getArguments();
    TextView text = (TextView) view.findViewById(R.id.text1);
    Log.i("== text: ", text.toString());
    text.setText(Integer.toString(args.getInt(ARG_OBJECT)));
  }
}

增加 fragment_tabs.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

增加：my_view_pager.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.viewpager.widget.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent">

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

</androidx.viewpager.widget.ViewPager>

Back