Android~仿微信（Fragment+ViewPager）

仿微信（Fragment+ViewPager），实现效果，滑动或者点击，页面随Tab顶部切换，效果如下所示：

思维导图

详细代码如下：
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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/titleTop"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="测试"
        android:textSize="21sp" />

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <LinearLayout
            android:id="@+id/linearHome"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center_horizontal"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/imgHome"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_home" />

            <TextView
                android:id="@+id/textHome"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="首页" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/linearCommuni"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center_horizontal"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/imgCommuni"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_communi" />

            <TextView
                android:id="@+id/textCommuni"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="通讯录" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/linearFind"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center_horizontal"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/imgFind"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_find" />

            <TextView
                android:id="@+id/textFind"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="发现" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/linearProfile"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center_horizontal"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/imgProfile"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_profile" />

            <TextView
                android:id="@+id/textProfile"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="我的" />
        </LinearLayout>

    </LinearLayout>

</LinearLayout>

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="我是首页" />
</LinearLayout>