可以实现的方式: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="/apk/res/android"android:layout_width="match_parent"android:layout_height="wrap_content"android:background="@color/grey"android:orientation="horizontal"><LinearLayoutandroid: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"><ImageViewandroid:id="@+id/bottom1_icon"android:layout_width="70dp"android:layout_height="70dp"android:background="@drawable/bottom1" /><TextViewandroid:id="@+id/bottom1_text"android:layout_width="70dp"android:layout_height="wrap_content"android:gravity="center"android:textSize="20dp"android:text="微信" /></LinearLayout><LinearLayoutandroid: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"><ImageViewandroid:id="@+id/bottom2_icon"android:layout_width="70dp"android:layout_height="70dp"android:background="@drawable/bottom2" /><TextViewandroid:id="@+id/bottom2_text"android:textSize="20dp"android:layout_width="70dp"android:layout_height="wrap_content"android:gravity="center"android:text="通讯录" /></LinearLayout><LinearLayoutandroid: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"><ImageViewandroid:id="@+id/bottom3_icon"android:layout_width="70dp"android:layout_height="70dp"android:background="@drawable/bottom3" /><TextViewandroid:id="@+id/bottom3_text"android:textSize="20dp"android:layout_width="70dp"android:layout_height="wrap_content"android:gravity="center"android:text="发现" /></LinearLayout><LinearLayoutandroid: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"><ImageViewandroid:id="@+id/bottom4_icon"android:layout_width="70dp"android:layout_height="70dp"android:background="@drawable/bottom4" /><TextViewandroid: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="/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="/apk/res/android"xmlns:app="/apk/res-auto"xmlns:tools="/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"tools:context=".MainActivity"><androidx.viewpager2.widget.ViewPager2android: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;@Overrideprotected 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;}//初始化viewPagerprivate 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() {@Overridepublic void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {super.onPageScrolled(position, positionOffset, positionOffsetPixels);}@Overridepublic void onPageSelected(int position) {super.onPageSelected(position);//viewPager页面滑动的时候,改变选择的标签changeTable(position);//点击标签的时候,滑动到对应的页面changeTableClick(position);}@Overridepublic 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;}}@Overridepublic 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;}}}
