ViewPager+Fragment模拟微信首页详细步骤

实现步骤：

第一步：添加ViewPager2依赖

implementation 'androidx.viewpager2:viewpager2:1.0.0'

第二步：页面布局activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<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"
    tools:context=".MainActivity"
    android:orientation="vertical">
    
	<!--定义一个ViewPager2-->
    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewpage"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>

    

    <!--导入外界的bottom_layout.xml-->
    <!--  <include layout="@layout/bottom_layout"/> -->
    

</LinearLayout>

第三步：定义一个Fragment

布局文件fragment_blank.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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"
    tools:context=".BlankFragment"
    android:orientation="vertical">

    <!--显示文本-->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="36sp"
        android:id="@+id/tv"
        android:text="@string/hello_blank_fragment" />

</FrameLayout>

Fragment.java

package com.example.wecharpage;
import android.os.Bundle;
import androidx.fragment.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;


public class BlankFragment extends Fragment {


    private static final String ARG_TEXT = "param1";

    private View rootView;


    private String mTextString;

    public BlankFragment() {
    }

    //改变值
    public static BlankFragment newInstance(String param1) {
        BlankFragment fragment = new BlankFragment();
        Bundle args = new Bundle();
        args.putString(ARG_TEXT, param1);
        fragment.setArguments(args);
        return fragment;
    }

    //取值
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        if (getArguments() != null) {
            mTextString = getArguments().getString(ARG_TEXT);
        }
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        if(rootView==null){
            rootView = inflater.inflate(R.layout.fragment_blank, container, false);
        }
        initView();
        return rootView;
    }

    private void initView() {
        TextView textView = rootView.findViewById(R.id.tv);
        textView.setText(mTextString);

    }
}

第四步：下方按钮布局文件（bottom_layout.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="55dp"
    android:orientation="horizontal"
    android:background="@color/gray">

    <!--微信聊天-->
    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:layout_gravity="center"
        android:orientation="vertical"
        android:id="@+id/id_tab_weixin"
        android:gravity="center">
        <ImageView
            android:layout_width="32dp"
            android:layout_height="32dp"
            android:id="@+id/tab_iv_weixin"
            android:background="@drawable/tab_weixin" /><!--tab_weixin.xml 选中状态/不选中状态-->
        <TextView
            android:layout_width="32dp"
            android:layout_height="wrap_content"
            android:id="@+id/text_weixin"
            android:gravity="center"
            android:text="微信"/>
    </LinearLayout>

    <!--通讯录-->
    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:layout_gravity="center"
        android:orientation="vertical"
        android:id="@+id/id_tab_contact"
        android:gravity="center">
        <ImageView
            android:layout_width="32dp"
            android:layout_height="32dp"
            android:id="@+id/tab_iv_contact"
            android:background="@drawable/tab_contact" /><!--tab_contact.xml 选中状态/不选中状态-->
        <TextView
            android:layout_width="43dp"
            android:layout_height="wrap_content"
            android:id="@+id/text_contact"
            android:gravity="center"
            android:text="通讯录"/>
    </LinearLayout>

    <!--发现-->
    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:layout_gravity="center"
        android:orientation="vertical"
        android:id="@+id/id_tab_find"
        android:gravity="center">
        <ImageView
            android:layout_width="32dp"
            android:layout_height="32dp"
            android:id="@+id/tab_iv_find"
            android:background="@drawable/tab_find" /><!--tab_find.xml 选中状态/不选中状态-->
        <TextView
            android:layout_width="32dp"
            android:layout_height="wrap_content"
            android:id="@+id/text_find"
            android:gravity="center"
            android:text="发现"/>
    </LinearLayout>

    <!--我-->
    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:layout_gravity="center"
        android:orientation="vertical"
        android:id="@+id/id_tab_profile"
        android:gravity="center">
        <ImageView
            android:layout_width="32dp"
            android:layout_height="32dp"
            android:id="@+id/tab_iv_profile"
            android:background="@drawable/tab_profile" /><!--tab_profile.xml 选中状态/不选中状态-->
        <TextView
            android:layout_width="32dp"
            android:layout_height="wrap_content"
            android:id="@+id/text_profile"
            android:gravity="center"
            android:text="我"/>
    </LinearLayout>

</LinearLayout>

定义外部按钮选中/未选中样式（按钮图标素材来自：iconfont-阿里巴巴矢量图标库）

tab_weixin.xml（微信）

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!--选中状态-->
    <item android:drawable="@drawable/weixin_ed" android:state_selected="true"/>
    <!--不选中状态-->
    <item android:drawable="@drawable/weixin" />
</selector>

tab_contact.xml（通讯录）

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!--选中状态-->
    <item android:drawable="@drawable/tongxunlu_ed" android:state_selected="true"/>
    <!--不选中状态-->
    <item android:drawable="@drawable/tongxunlu" />
</selector>

tab_find.xml（发现）

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
	<!--选中状态-->
    <item android:drawable="@drawable/faxian_ed" android:state_selected="true"/>
    <!--不选中状态-->
    <item android:drawable="@drawable/faxian" />
</selector>

tab_profile.xml（我）

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
	<!--选中状态-->
    <item android:drawable="@drawable/wo_ed" android:state_selected="true"/>
    <!--不选中状态-->
    <item android:drawable="@drawable/wo" />
</selector>

然后在activity_main.xml布局文件中，引入按钮布局文件

......

<!--导入外界的bottom_layout.xml-->
<include layout="@layout/bottom_layout"/>

......

第五步：配置适配规则MyFragmentPagerAdapter.java

package com.example.wecharpage;
import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.lifecycle.Lifecycle;
import androidx.viewpager2.adapter.FragmentStateAdapter;
import java.util.ArrayList;
import java.util.List;

//适配Fragment
public class MyFragmentPagerAdapter extends FragmentStateAdapter {

    //用来存放fragment
    List<Fragment> fragmentList=new ArrayList<>();

    public MyFragmentPagerAdapter(@NonNull FragmentManager fragmentManager, @NonNull Lifecycle lifecycle,List<Fragment> fragments) {
        super(fragmentManager, lifecycle);
        this.fragmentList=fragments;
    }

    //拿到fragment
    @NonNull
    @Override
    public Fragment createFragment(int position) {
        return fragmentList.get(position);
    }
    
    //fragment总大小
    @Override
    public int getItemCount() {
        return fragmentList.size();
    }
}

第六步：MainActivity.java

package com.example.wecharpage;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.viewpager2.widget.ViewPager2;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import java.util.ArrayList;

public class MainActivity extends AppCompatActivity implements View.OnClickListener{

    //ViewPager2
    ViewPager2 viewPager2;
    
    //获取下标LinearLayout布局
    private LinearLayout llChat,llContact,llFind,llProfile;
    //获取下标图片ImageView
    private ImageView ivChat,ivContact,ivFind,ivProfile,ivCurrent;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //适配
        initPager();
        //初始化布局文件
        initTableView();

    }

    private void initTableView() {
        //初始化LinearLayout
        llChat=findViewById(R.id.id_tab_weixin);
        //点击事件
        llChat.setOnClickListener(this);

        llContact=findViewById(R.id.id_tab_contact);
        //点击事件
        llContact.setOnClickListener(this);

        llFind=findViewById(R.id.id_tab_find);
        //点击事件
        llFind.setOnClickListener(this);

        llProfile=findViewById(R.id.id_tab_profile);
        //点击事件
        llProfile.setOnClickListener(this);


        //初始化ImageView
        ivChat=findViewById(R.id.tab_iv_weixin);
        //默认选中微信图标
        ivChat.setSelected(true);
        //赋值给ivCurrent
        ivCurrent=ivChat;

        ivContact=findViewById(R.id.tab_iv_contact);
        ivFind=findViewById(R.id.tab_iv_find);
        ivProfile=findViewById(R.id.tab_iv_profile);

    }

    private void initPager() {
        //获取viewPager2
        viewPager2=findViewById(R.id.viewpage);
        //显示的文字
        ArrayList<Fragment> fragments=new ArrayList<>();
        fragments.add(BlankFragment.newInstance("微信聊天"));
        fragments.add(BlankFragment.newInstance("通讯录"));
        fragments.add(BlankFragment.newInstance("发现"));
        fragments.add(BlankFragment.newInstance("我"));
        //适配
        MyFragmentPagerAdapter adapter = new MyFragmentPagerAdapter(getSupportFragmentManager(), getLifecycle(), fragments);
        //传入viewPager2
        viewPager2.setAdapter(adapter);

        viewPager2.registerOnPageChangeCallback(
                new ViewPager2.OnPageChangeCallback() {
                    @Override
                    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                        super.onPageScrolled(position, positionOffset, positionOffsetPixels);
                    }
                    //触发（发送改变时）
                    @Override
                    public void onPageSelected(int position) {
                        super.onPageSelected(position);
                        changTab(position);
                    }

                    @Override
                    public void onPageScrollStateChanged(int state) {
                        super.onPageScrollStateChanged(state);
                    }
                }
        );
    }
    //改变下标图标选中和不选中
    private void changTab(int position) {
        //取消上一个选中
        ivCurrent.setSelected(false);

        switch (position){
            case R.id.id_tab_weixin:
                viewPager2.setCurrentItem(0);
            case 0:
                ivChat.setSelected(true);
                ivCurrent=ivChat;
                break;
            case R.id.id_tab_contact:
                viewPager2.setCurrentItem(1);
            case 1:
                ivContact.setSelected(true);
                ivCurrent=ivContact;
                break;
            case R.id.id_tab_find:
                viewPager2.setCurrentItem(2);
            case 2:
                ivFind.setSelected(true);
                ivCurrent=ivFind;
                break;
            case R.id.id_tab_profile:
                viewPager2.setCurrentItem(3);
            case 3:
                ivProfile.setSelected(true);
                ivCurrent=ivProfile;
                break;
        }
    }

    //点击
    @Override
    public void onClick(View view) {
        changTab(view.getId());
    }
}

目录结构

效果

20220814153800

ViewPager+Fragment模拟微信首页详细步骤

猜你喜欢