Android~仿微信（Fragment+ViewPager）

布满荆棘的人生 2022-10-05 11:46 273阅读 0赞

仿微信（Fragment+ViewPager），实现效果，滑动或者点击，页面随Tab顶部切换，效果如下所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ5NTY3OA_size_16_color_FFFFFF_t_70]  
思维导图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ5NTY3OA_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ5NTY3OA_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ5NTY3OA_size_16_color_FFFFFF_t_70 3]

详细代码如下：  
1、MainActivity .java

public class MainActivity extends AppCompatActivity implements View.OnClickListener { 
    
        private TextView title;
        private TextView mTextHome;
        private TextView mTextCommuni;
        private TextView mTextFind;
        private TextView mTextProfile;
        private ImageView mImgHome;
        private ImageView mImgCommuni;
        private ImageView mImgFind;
        private ImageView mImgProfile;
        private LinearLayout mLinearHome;
        private LinearLayout mLinearCommubi;
        private LinearLayout mLinearFind;
        private LinearLayout mLinearProfile;
        private ViewPager viewPager;
        private HomeFragment homeFragment;
        private CommuniFragment communiFragment;
        private FindFragment findFragment;
        private ProfileFragment profileFragment;
        private FragmentManager manager;
        private ViewPagerAdapter adapter;
        private List<Fragment> mList;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) { 
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            initView();
            setSelect(0);
        }
    
        // 初始化界面
        private void initView() { 
            // 实例化对象
            title = findViewById(R.id.titleTop);
            mImgHome = findViewById(R.id.imgHome);
            mImgCommuni = findViewById(R.id.imgCommuni);
            mImgFind = findViewById(R.id.imgFind);
            mImgProfile = findViewById(R.id.imgProfile);
            mTextHome = findViewById(R.id.textHome);
            mTextCommuni = findViewById(R.id.textCommuni);
            mTextFind = findViewById(R.id.textFind);
            mTextProfile = findViewById(R.id.textProfile);
            mLinearHome = findViewById(R.id.linearHome);
            mLinearCommubi = findViewById(R.id.linearCommuni);
            mLinearFind = findViewById(R.id.linearFind);
            mLinearProfile = findViewById(R.id.linearProfile);
            viewPager = findViewById(R.id.viewPager);
            mList = new ArrayList<Fragment>();
            manager = getSupportFragmentManager();
    
            // 注册监听事件
            mLinearHome.setOnClickListener(this);
            mLinearCommubi.setOnClickListener(this);
            mLinearFind.setOnClickListener(this);
            mLinearProfile.setOnClickListener(this);
    
            // 设置数据源
            homeFragment = new HomeFragment();
            communiFragment = new CommuniFragment();
            findFragment = new FindFragment();
            profileFragment = new ProfileFragment();
    
            mList.add(homeFragment);
            mList.add(communiFragment);
            mList.add(findFragment);
            mList.add(profileFragment);
    
            // 设置适配器
            adapter = new ViewPagerAdapter(manager, mList);
            viewPager.setAdapter(adapter);
    
            // 设置滑动监听
            viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() { 
                @Override
                public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { 
    
                }
    
                @Override
                public void onPageSelected(int position) { 
                    switch (position) { 
                        case 0:
                            setSelect(0);
                            break;
                        case 1:
                            setSelect(1);
                            break;
                        case 2:
                            setSelect(2);
                            break;
                        case 3:
                            setSelect(3);
                            break;
                        default:
                            break;
                    }
                }
    
                @Override
                public void onPageScrollStateChanged(int state) { 
    
                }
            });
        }
    
        @Override
        public void onClick(View v) { 
            switch (v.getId()) { 
                case R.id.linearHome:
                    setSelect(0);
                    break;
                case R.id.linearCommuni:
                    setSelect(1);
                    break;
                case R.id.linearFind:
                    setSelect(2);
                    break;
                case R.id.linearProfile:
                    setSelect(3);
                    break;
                default:
                    break;
            }
        }
    
        private void setSelect(int position) { 
            resetAll();
            switch (position) { 
                case 0:
                    mImgHome.setImageResource(R.drawable.ic_home_active);
                    mTextHome.setTextColor(getResources().getColor(R.color.green));
                    title.setText(mTextHome.getText().toString());
                    break;
                case 1:
                    mImgCommuni.setImageResource(R.drawable.ic_communi_activite);
                    mTextCommuni.setTextColor(getResources().getColor(R.color.green));
                    title.setText(mTextCommuni.getText().toString());
                    break;
                case 2:
                    mImgFind.setImageResource(R.drawable.ic_find_active);
                    mTextFind.setTextColor(getResources().getColor(R.color.green));
                    title.setText(mTextFind.getText().toString());
                    break;
                case 3:
                    mImgProfile.setImageResource(R.drawable.ic_profile_activite);
                    mTextProfile.setTextColor(getResources().getColor(R.color.green));
                    title.setText(mTextProfile.getText().toString());
                    break;
                default:
                    break;
            }
            viewPager.setCurrentItem(position);
        }
    
        private void resetAll() { 
            mImgHome.setImageResource(R.drawable.ic_home);
            mTextHome.setTextColor(getResources().getColor(R.color.gray));
            mImgCommuni.setImageResource(R.drawable.ic_communi);
            mTextCommuni.setTextColor(getResources().getColor(R.color.gray));
            mImgFind.setImageResource(R.drawable.ic_find);
            mTextFind.setTextColor(getResources().getColor(R.color.gray));
            mImgProfile.setImageResource(R.drawable.ic_profile);
            mTextProfile.setTextColor(getResources().getColor(R.color.gray));
        }
    }

2、activity\_main.xml

3、ViewPagerAdapter （适配器）

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

4、Fragment 类（其中一个）

public class HomeFragment extends Fragment { 
        @Nullable
        @Override
        public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) { 
            View view = inflater.inflate(R.layout.fragment_home, container, false);
            return view;
        }
    }

5、fragment\_home.xml

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ5NTY3OA_size_16_color_FFFFFF_t_70]: /images/20221005/e09efbc0517e4b78b0004324ff177b5b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ5NTY3OA_size_16_color_FFFFFF_t_70 1]: /images/20221005/9f5c6685d8c94d01b84d54b33bffc02a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ5NTY3OA_size_16_color_FFFFFF_t_70 2]: /images/20221005/0291aea90cd9407ca74d4fc0aec06bc8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ5NTY3OA_size_16_color_FFFFFF_t_70 3]: /images/20221005/caffc4ad6c6449408726ac00fadff911.png