知识记录一：ViewPager+Fragment实现tab

桃扇骨 2024-02-17 18:48 21阅读 0赞

首先以主页几乎都会用到的底部菜单作为第一个知识点吧。仍然是以ViewPager+Fragment作为整体框架。

首先要先了解以下几个知识点：  
\- ViewPager的用法；  
\- Fragment的使用；  
\- selector的用法；

为了减少底部tab按钮点击切换逻辑的处理和判断，这里直接用了RadioGroup节省了这一部分的代码。不多说，直接上代码：

### 先上selector部分的代码 ###

tab按键的选择器，下面为首页按钮的的，其他两个类似

<?xml version="1.0" encoding="utf-8"?>
    <selector
        xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_pressed="false" android:state_selected="true" android:drawable="@drawable/b_newhome_tabbar_press" />
        <item android:state_pressed="false" android:state_checked="true" android:drawable="@drawable/b_newhome_tabbar_press" />
        <item android:state_pressed="true" android:state_checked="true" android:drawable="@drawable/b_newhome_tabbar_press" />
        <item android:drawable="@drawable/b_newhome_tabbar" />
    </selector>

下面给出首页文字部分的选择器，三个tab都用这个

<?xml version="1.0" encoding="utf-8"?>
        <selector xmlns:android="http://schemas.android.com/apk/res/android">
    
        <item android:state_pressed="false" android:state_selected="true" android:color="@color/item_select"/>
        <item android:state_checked="true" android:state_pressed="false" android:color="@color/item_select"/>
        <item android:state_checked="true" android:state_pressed="true" android:color="@color/item_select"/>
        <item android:color="@color/item_normal"/>
    
    </selector>

### Fragment部分 ###

java代码部分，三个都是一样的，此处只给出一个

public class OneFragment extends Fragment {
        private Context mContext;
    
        @Override
        public void onAttach(Activity activity) {
            super.onAttach(activity);
            this.mContext = activity;
        }
    
        @Override
        public View onCreateView(LayoutInflater inflater,
                @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
            View view = inflater.inflate(R.layout.fragment_one, null);
            return view;
        }
    
    
        @Override
        public void onActivityCreated(@Nullable Bundle savedInstanceState) {
            super.onActivityCreated(savedInstanceState);
        }
    
        @Override
        public void setMenuVisibility(boolean menuVisible) {
            super.setMenuVisibility(menuVisible);
    
            if (this.getView() != null) {
                this.getView().setVisibility(menuVisible ? View.VISIBLE : View.GONE);
            }
        }
    
        @Override
        public void onDestroy() {
            super.onDestroy();
        }
    
    }

布局就不给了，很简单的线性布局内部一个TextView

### MainActivity部分 ###

java部分代码

public class MainActivity extends FragmentActivity implements OnCheckedChangeListener {
    
        private RadioGroup tab_group;
        private MyViewPager myViewPager;
        private MyFragmentAdapter adapter;
        private List<Fragment> list = new ArrayList<Fragment>();
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            initViews();
        }
    
        private void initViews() {
            tab_group = (RadioGroup) findViewById(R.id.tab_group);
            myViewPager = (MyViewPager) findViewById(R.id.mContent);
    
            tab_group.setOnCheckedChangeListener(this);
    
            OneFragment oneFragment = new OneFragment();
            TwoFragment twoFragment = new TwoFragment();
            ThreeFragment threeFragment = new ThreeFragment();
            list.add(oneFragment);
            list.add(twoFragment);
            list.add(threeFragment);
    
            adapter = new MyFragmentAdapter(getSupportFragmentManager(), list);
            myViewPager.setAdapter(adapter);
            myViewPager.setOffscreenPageLimit(2);
            myViewPager.setCurrentItem(0);
    
        }
    
        @Override
        public void onCheckedChanged(RadioGroup group, int checkedId) {
            switch (checkedId) {
            case R.id.my_recorder:
                myViewPager.setCurrentItem(0, false);
                break;
            case R.id.recorder_manager:
                myViewPager.setCurrentItem(1, false);
                break;
            case R.id.recorder_upload:
                myViewPager.setCurrentItem(2, false);
                break;
            default:
                break;
            }
        }
    
    
        @Override
        protected void onDestroy() {
            super.onDestroy();
        }
    
    }

界面布局activity\_main.xml

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >
    
        <com.example.tabdemo.MyViewPager 
            android:id="@+id/mContent"
            android:layout_width="match_parent"
            android:layout_height="0.0dip"
            android:layout_weight="1.0"/>
    
        <RadioGroup
            android:id="@+id/tab_group"
            android:layout_width="match_parent"
            android:layout_height="60.0dip"
            android:orientation="horizontal">
    
            <RadioButton
                android:id="@+id/my_recorder"
                android:layout_width="0.0dip"
                android:layout_height="match_parent"
                android:layout_weight="1.0"
                android:button="@null"
                android:checked="true"
                android:drawableTop="@drawable/selector_newhome_drawable"
                android:gravity="center"
                android:text="首页"
                android:textColor="@drawable/selector_right_textcolor"
                android:textSize="14.0sp" />
    
            <RadioButton
                android:id="@+id/recorder_manager"
                android:layout_width="0.0dip"
                android:layout_height="match_parent"
                android:layout_weight="1.0"
                android:button="@null"
                android:drawableTop="@drawable/selector_newcare_drawable"
                android:gravity="center"
                android:text="关注"
                android:textColor="@drawable/selector_right_textcolor"
                android:textSize="14.0sp" />
    
            <RadioButton
                android:id="@+id/recorder_upload"
                android:layout_width="0.0dip"
                android:layout_height="match_parent"
                android:layout_weight="1.0"
                android:button="@null"
                android:drawableTop="@drawable/selector_newmine_drawable"
                android:gravity="center"
                android:text="我的"
                android:textColor="@drawable/selector_right_textcolor"
                android:textSize="14.0sp" />
    
    
        </RadioGroup>
    </LinearLayout>

FragmentAdapter部分的代码MyFragmentAdapter.java

public class MyFragmentAdapter extends FragmentPagerAdapter {
        private List<Fragment> list;
    
        public MyFragmentAdapter(FragmentManager fm, List<Fragment> list) {
            super(fm);
            this.list = list;
        }
    
        public MyFragmentAdapter(FragmentManager fm) {
            super(fm);
        }
    
        @Override
        public Fragment getItem(int position) {
            return list.get(position);
        }
    
        @Override
        public int getCount() {
            return list.size();
        }
    
    }

以上就是这个tab组件所有的代码部分了，主要通过布局中的RadioGroup和两个selector，selector主要利用到了checked属性。MainActivity中通过对是否选中的判断来切换相应的页面。MyViewPager部分的代码就不给 了，这部分就是直接继承了V4包里的ViewPager,项目中此处不允许滑动，作了下不可滑动的处理。

好了，第一次记录到此结束。