Android viewPager2 + fragment 模拟微信首页2(滑动页面标签同步变化,点击标签滑动页面)

最新推荐文章于 2024-05-28 23:27:14 发布

梨轻巧

最新推荐文章于 2024-05-28 23:27:14 发布

阅读量430

点赞数 2

分类专栏： Android 文章标签： android

本文链接：https://blog.csdn.net/m0_45877477/article/details/125115663

版权

Android 专栏收录该内容

52 篇文章 4 订阅

订阅专栏

可以实现的方式:BottomNavigationView
这里我们不使用BottomNavigationView,手动来写代码

先看一下效果

fragment + viewPager2模拟微信首页2(滑动页面标签同步变化,点击标签滑动页面)

一步骤

此案例是接着上一个案例继续写的

1 创建一个放底部按钮的layout
2 创建drawable文件,放不同的图片,点击时替换
3 activity_main.xml里放入bottom_layout
   <include layout="@layout/bottom_layout"/>
4 MainActivity.java
   获取底部按钮
   添加点击事件监听
   把页面滑动和标签变化绑定起来
       viewPager.registerOnPageChangeCallback()

二代码

1 创建一个放底部按钮的layout

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="wrap_content"
    android:background="@color/grey"
    android:orientation="horizontal">

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

        <ImageView
            android:id="@+id/bottom1_icon"
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:background="@drawable/bottom1" />

        <TextView
            android:id="@+id/bottom1_text"
            android:layout_width="70dp"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:textSize="20dp"
            android:text="微信" />
    </LinearLayout>

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

        <ImageView
            android:id="@+id/bottom2_icon"
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:background="@drawable/bottom2" />

        <TextView
            android:id="@+id/bottom2_text"
            android:textSize="20dp"
            android:layout_width="70dp"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="通讯录" />
    </LinearLayout>

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

        <ImageView
            android:id="@+id/bottom3_icon"
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:background="@drawable/bottom3" />

        <TextView
            android:id="@+id/bottom3_text"
            android:textSize="20dp"
            android:layout_width="70dp"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="发现" />
    </LinearLayout>

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

        <ImageView
            android:id="@+id/bottom4_icon"
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:background="@drawable/bottom4" />

        <TextView
            android:id="@+id/bottom4_text"
            android:textSize="20dp"
            android:layout_width="70dp"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="我" />
    </LinearLayout>


</LinearLayout>

2 创建drawable文件,放不同的图片,点击时替换

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

3 activity_main.xml里放入bottom_layout

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

   <androidx.viewpager2.widget.ViewPager2
       android:id="@+id/viewpager"
       android:layout_weight="1"
       android:layout_width="match_parent"
       android:layout_height="0dp"/>
   <include layout="@layout/bottom_layout"/>


</LinearLayout>

4 MainActivity.java

package com.example.viewpager2fragment;

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 android.widget.TextView;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity implements View.OnClickListener{


    ViewPager2 viewPager;
    private LinearLayout linearLayout1,linearLayout2,linearLayout3,linearLayout4;
    private ImageView imageView1,imageView2,imageView3,imageView4,imageCurrent;


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

    private void initBottom() {
        linearLayout1 = findViewById(R.id.bottom1);
        linearLayout2 = findViewById(R.id.bottom2);
        linearLayout3 = findViewById(R.id.bottom3);
        linearLayout4 = findViewById(R.id.bottom4);

        imageView1 = findViewById(R.id.bottom1_icon);
        imageView2 = findViewById(R.id.bottom2_icon);
        imageView3 = findViewById(R.id.bottom3_icon);
        imageView4 = findViewById(R.id.bottom4_icon);

        //添加点击事件监听
        linearLayout1.setOnClickListener(this);
        linearLayout2.setOnClickListener(this);
        linearLayout3.setOnClickListener(this);
        linearLayout4.setOnClickListener(this);
        imageView1.setOnClickListener(this);
        imageView2.setOnClickListener(this);
        imageView3.setOnClickListener(this);
        imageView4.setOnClickListener(this);
        //初始化的时候,第一张图片是选中的
        imageView1.setSelected(true);
        imageCurrent = imageView1;

    }

    //初始化viewPager
    private void initPager() {
        viewPager = findViewById(R.id.viewpager);
        ArrayList<Fragment> fragments =new ArrayList<>();
        fragments.add(BlankFragment1.newInstance("微信聊天"));
        fragments.add(BlankFragment1.newInstance("通讯录"));
        fragments.add(BlankFragment1.newInstance("发现"));
        fragments.add(BlankFragment1.newInstance("我"));
        MyFragmentPagerAdapter myAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager(),getLifecycle(),fragments);
        viewPager.setAdapter(myAdapter);

        //把页面滑动和标签变化绑定起来
        viewPager.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);
                //viewPager页面滑动的时候,改变选择的标签
                changeTable(position);
                //点击标签的时候,滑动到对应的页面
                changeTableClick(position);
            }

            @Override
            public void onPageScrollStateChanged(int state) {
                super.onPageScrollStateChanged(state);
            }
        });
    }

    //viewPager页面滑动的时候,改变选择的标签
    private void changeTable(int position) {
        imageCurrent.setSelected(false);
        switch(position){
            case 0:
                imageView1.setSelected(true);
                imageCurrent = imageView1;
                break;
            case 1:
                imageView2.setSelected(true);
                imageCurrent = imageView2;
                break;
            case 2:
                imageView3.setSelected(true);
                imageCurrent = imageView3;
                break;
            case 3:
                imageView4.setSelected(true);
                imageCurrent = imageView4;
                break;
        }
    }


    @Override
    public void onClick(View v) {
        changeTableClick(v.getId());
    }

    //点击标签的时候,滑动到对应的页面
    private void changeTableClick(int id) {
        switch(id){
            case R.id.bottom1_icon:
                viewPager.setCurrentItem(0);
                break;
            case R.id.bottom2_icon:
                viewPager.setCurrentItem(1);
                break;
            case R.id.bottom3_icon:
                viewPager.setCurrentItem(2);
                break;
            case R.id.bottom4_icon:
                viewPager.setCurrentItem(3);
                break;
        }
    }
}