安卓android-Viewpager+Frgment的结合使用

首先我们来看个效果图

当点击到下面的Tab按钮时，会像微信类似出现图标颜色的变化，且切换到该页面；

接下来看一下代码目录

其实就是几张灰色图标和彩色图标

在接下来我们就看看详细代码。

首先呢，我将activity_main分成了几个部分来写，tab部分我单独用title.xml文件来写，也方便我们以后该tab,然后在activity_main中include title.xml即可

title.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#F2F1ED"
    android:layout_alignParentBottom="true">

    <TableRow
        android:layout_height="40dp"
        android:layout_width="match_parent"
        android:layout_alignParentLeft="true"
        >

        <ImageView
            android:id="@+id/tv_tab1"
            android:layout_width="38dp"
            android:layout_height="38dp"
            android:src="@drawable/icon_find_colorless"
            android:gravity="center"
            android:layout_weight="1"
            android:layout_marginLeft="10dp"
            />
        <ImageView
            android:id="@+id/tv_tab2"
            android:layout_width="38dp"
            android:layout_height="38dp"
            android:src="@drawable/icon_book_colorless"
            android:gravity="center"
            android:layout_weight="1"
            />
        <ImageView
            android:id="@+id/tv_tab3"
            android:layout_width="38dp"
            android:layout_height="38dp"
            android:src="@drawable/icon_home_colorless"
            android:gravity="center"
            android:layout_weight="1"
            />
        <ImageView
            android:id="@+id/tv_tab4"
            android:layout_width="38dp"
            android:layout_height="38dp"
            android:src="@drawable/icon_people_colorless"
            android:gravity="center"
            android:layout_weight="1"
            android:layout_marginRight="10dp"
            />
    </TableRow>


    <TableRow
        android:layout_height="20dp"
        android:layout_width="match_parent"
        android:layout_alignParentLeft="true"

        >

        <TextView
            android:id="@+id/tab_find"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_marginLeft="10dp"
            android:layout_weight="1"
            android:gravity="center"
            android:text="发现"
            android:textColor="#B6B6B6"
            android:textSize="15sp"
            android:textStyle="normal" />
        <TextView
            android:id="@+id/tab_train"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:textStyle="normal"
            android:text="训练"
            android:textSize="15sp"
            android:textColor="#B6B6B6"/>
        <TextView
            android:id="@+id/tab_friend"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:textStyle="normal"
            android:text="团圈"
            android:textSize="15sp"
            android:textColor="#B6B6B6"/>
        <TextView
            android:id="@+id/tab_my"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:gravity="center"
            android:layout_weight="1"
            android:text="我的"
            android:textSize="15sp"
            android:textStyle="normal"
            android:textColor="#B6B6B6"
            android:layout_marginRight="10dp"/>

    </TableRow>
</LinearLayout>

activity_main.xml

<androidx.drawerlayout.widget.DrawerLayout 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"
    android:orientation="vertical"
    android:id="@+id/drawerlayout_main">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <androidx.viewpager.widget.ViewPager
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:id="@+id/main_viewpager"
            />

        // 底端Tab
        <include layout="@layout/title" />


    </LinearLayout>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="hello!"
        android:textStyle="bold"
        android:textSize="60sp"
        android:gravity="center"
        android:layout_gravity="left"
        android:background="#ffffff"/>


</androidx.drawerlayout.widget.DrawerLayout>

fragment_index.xml

这里呢，我就举fragment的例子，其他的都是一样的。

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:text="这是主页界面"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="60sp"
        />

</FrameLayout>

好了，现在布局都写好了，开始我们的代码的编写。

FragmentAdapter.java

首先呢，我先写一个要用到的适配器

package com.diyihang.switch_page;

import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentPagerAdapter;

import java.util.List;


public class FragmentAdapter extends FragmentPagerAdapter {
    private FragmentManager fragmentManager;
    private List<Fragment> fragmentList;

    public FragmentAdapter(FragmentManager fm, List<Fragment> list){
        super(fm);
        fragmentList=list;
    }

    @NonNull
    @Override
    public Fragment getItem(int position) {
        return fragmentList.get(position);//显示第几个页面
    }

    @Override
    public int getCount() {
        return fragmentList.size();//共有几个页面
    }
}

其实就是实现改方法的几个功能。

IndexFragment.java

package com.diyihang.switch_page;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;

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

和上面的fragment_index.xml一样，我就一个例子，其他都一样。

package com.diyihang.switch_page;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;

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

最后，来到了我们最重要的MainActivity.java

package com.diyihang.switch_page;

import androidx.appcompat.app.AppCompatActivity;

import android.graphics.Color;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;
import androidx.viewpager.widget.ViewPager;
import androidx.fragment.app.Fragment;
import android.os.Bundle;

import java.util.List;
import java.util.ArrayList;


public class MainActivity extends AppCompatActivity implements View.OnClickListener{

    private ImageView tvTab1;
    private ImageView tvTab2;
    private ImageView tvTab3;
    private ImageView tvTab4;

    private TextView tabFind;
    private TextView tabTrain;
    private TextView tabFriend;
    private TextView tabMy;

    Fragment fragment1 = new IndexFragment();
    Fragment fragment2 = new TrainFragment();
    Fragment fragment3 = new FriendFragment();
    Fragment fragment4 = new UserFragment();

    Integer[] selectedIcon = {
            R.drawable.icon_find,
            R.drawable.icon_book,
            R.drawable.icon_home,
            R.drawable.icon_people,
    };

    Integer[] unSelectedIcon = {
            R.drawable.icon_find_colorless,
            R.drawable.icon_book_colorless,
            R.drawable.icon_home_colorless,
            R.drawable.icon_people_colorless,
    };

    Integer[] fontColor ={
            Color.parseColor("#B6B6B6"),
            Color.parseColor("#03A9F4")
    };

    private ViewPager viewPager;
    private List<Fragment> list;
    private FragmentAdapter fragmentAdapter;



    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        tabFind = findViewById(R.id.tab_find);
        tabTrain = findViewById(R.id.tab_train);
        tabFriend = findViewById(R.id.tab_friend);
        tabMy = findViewById(R.id.tab_my);

        tvTab1 = (ImageView) findViewById(R.id.tv_tab1);
        tvTab2 = (ImageView) findViewById(R.id.tv_tab2);
        tvTab3 = (ImageView) findViewById(R.id.tv_tab3);
        tvTab4 = (ImageView) findViewById(R.id.tv_tab4);



        viewPager=findViewById(R.id.main_viewpager);



        //设置监听事件
        tabFind.setOnClickListener(this);
        tabTrain.setOnClickListener(this);
        tabFriend.setOnClickListener(this);
        tabMy.setOnClickListener(this);
        tvTab1.setOnClickListener(this);
        tvTab2.setOnClickListener(this);
        tvTab3.setOnClickListener(this);
        tvTab4.setOnClickListener(this);

        viewPager.setOnPageChangeListener(new MyPagerChangeListener());//设置页面切换的监听
        list = new ArrayList<>();//添加Fragment

        list.add(fragment1);
        list.add(fragment2);
        list.add(fragment3);
        list.add(fragment4);


        //添加适配器
        fragmentAdapter = new FragmentAdapter(getSupportFragmentManager(),list);//创建适配器
        viewPager.setAdapter(fragmentAdapter);

        //初始化第一个页面
        viewPager.setCurrentItem(0);

        //设置选中图片
        tvTab1.setImageResource(selectedIcon[0]);
        tvTab2.setImageResource(unSelectedIcon[1]);
        tvTab3.setImageResource(unSelectedIcon[2]);
        tvTab4.setImageResource(unSelectedIcon[3]);


        //设置字体颜色
        tabFind.setTextColor(fontColor[1]);
        tabTrain.setTextColor(fontColor[0]);
        tabFriend.setTextColor(fontColor[0]);
        tabMy.setTextColor(fontColor[0]);
    }

    @Override
    public void onClick(View view) {//标题栏的点击事件
        switch (view.getId()) {
            case R.id.tv_tab1:
                viewPager.setCurrentItem(0);
                //设置选中的图片
                tvTab1.setImageResource(selectedIcon[0]);
                tvTab2.setImageResource(unSelectedIcon[1]);
                tvTab3.setImageResource(unSelectedIcon[2]);
                tvTab4.setImageResource(unSelectedIcon[3]);
                //设置字体颜色
                tabFind.setTextColor(fontColor[1]);
                tabTrain.setTextColor(fontColor[0]);
                tabFriend.setTextColor(fontColor[0]);
                tabMy.setTextColor(fontColor[0]);
                break;
            case R.id.tv_tab2:
                viewPager.setCurrentItem(1);

                //设置底部tab栏的背景色
                tvTab1.setImageResource(unSelectedIcon[0]);
                tvTab2.setImageResource(selectedIcon[1]);
                tvTab3.setImageResource(unSelectedIcon[2]);
                tvTab4.setImageResource(unSelectedIcon[3]);

                //设置字体颜色
                tabFind.setTextColor(fontColor[0]);
                tabTrain.setTextColor(fontColor[1]);
                tabFriend.setTextColor(fontColor[0]);
                tabMy.setTextColor(fontColor[0]);
                break;
            case R.id.tv_tab3:
                viewPager.setCurrentItem(2);
                //设置底部tab栏的背景色

                tvTab1.setImageResource(unSelectedIcon[0]);
                tvTab2.setImageResource(unSelectedIcon[1]);
                tvTab3.setImageResource(selectedIcon[2]);
                tvTab4.setImageResource(unSelectedIcon[3]);

                //设置字体颜色
                tabFind.setTextColor(fontColor[0]);
                tabTrain.setTextColor(fontColor[0]);
                tabFriend.setTextColor(fontColor[1]);
                tabMy.setTextColor(fontColor[0]);
                break;
            case R.id.tv_tab4:
                viewPager.setCurrentItem(3);
                //设置底部tab栏的背景色
                tvTab1.setImageResource(unSelectedIcon[0]);
                tvTab2.setImageResource(unSelectedIcon[1]);
                tvTab3.setImageResource(unSelectedIcon[2]);
                tvTab4.setImageResource(selectedIcon[3]);

                //设置字体颜色
                tabFind.setTextColor(fontColor[0]);
                tabTrain.setTextColor(fontColor[0]);
                tabFriend.setTextColor(fontColor[0]);
                tabMy.setTextColor(fontColor[1]);
                break;


        }
    }
    class MyPagerChangeListener implements ViewPager.OnPageChangeListener {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        }

        @Override
        public void onPageSelected(int position) {
            switch (position) {//滑动监听
                case 0:
                    tvTab1.setImageResource(selectedIcon[0]);
                    tvTab2.setImageResource(unSelectedIcon[1]);
                    tvTab3.setImageResource(unSelectedIcon[2]);
                    tvTab4.setImageResource(unSelectedIcon[3]);
                    break;
                case 1:
                    tvTab1.setImageResource(unSelectedIcon[0]);
                    tvTab2.setImageResource(selectedIcon[1]);
                    tvTab3.setImageResource(unSelectedIcon[2]);
                    tvTab4.setImageResource(unSelectedIcon[3]);

                    break;
                case 2:
                    tvTab1.setImageResource(unSelectedIcon[0]);
                    tvTab2.setImageResource(unSelectedIcon[1]);
                    tvTab3.setImageResource(selectedIcon[2]);
                    tvTab4.setImageResource(unSelectedIcon[3]);
                    break;
                case 3:
                    tvTab1.setImageResource(unSelectedIcon[0]);
                    tvTab2.setImageResource(unSelectedIcon[1]);
                    tvTab3.setImageResource(unSelectedIcon[2]);
                    tvTab4.setImageResource(selectedIcon[3]);
                    break;

            }
        }
        @Override
        public void onPageScrollStateChanged(int state) {

        }

    }
}

按着上述步骤去做，就能得到一个精美的类似于微信的主页切换界面啦。