android: viewpager与自定义tabbar绑定
一，代码：
功能：点击按钮后滑动到相应页面，
手动滑动页面时，下面的按钮能指示当前滑动到的页面
页面最下方的三个按钮，相当于我们自定义的tabbar
1,xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:id="@+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".activity.PageActivity">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.viewpager.widget.ViewPager
android:id="@+id/imageViewPager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
/>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="200px">
<Button
android:id="@+id/btn1"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:background="#ff0000"
android:text="按钮一"/>
<Button
android:id="@+id/btn2"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="按钮二"/>
<Button
android:id="@+id/btn3"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="按钮三"/>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="100px">
</LinearLayout>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>2,java
GoodsInfo.java
package com.example.okdemo1.model;
public class GoodsInfo {
private int id;
//private String name;
private String pic;
public GoodsInfo(int id, String pic) {
this.id = id;
this.pic = pic;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getPic() {
return pic;
}
public void setPic(String pic) {
this.pic = pic;
}
}ImagePagerAdapater.java
package com.example.okdemo1.adapter;
import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewGroup.LayoutParams;
import android.widget.ImageView;
import androidx.viewpager.widget.PagerAdapter;
//import com.example.chapter08.bean.GoodsInfo;
import com.bumptech.glide.Glide;
import com.bumptech.glide.load.engine.DiskCacheStrategy;
import com.example.okdemo1.activity.PageActivity;
import com.example.okdemo1.model.GoodsInfo;
import java.util.ArrayList;
import java.util.List;
public class ImagePagerAdapater extends PagerAdapter {
// 声明一个图像视图列表
private List<ImageView> mViewList = new ArrayList<ImageView>();
// 声明一个商品信息列表
private List<GoodsInfo> mGoodsList = new ArrayList<GoodsInfo>();
// 图像翻页适配器的构造方法，传入上下文与商品信息列表
public ImagePagerAdapater(Context context, List<GoodsInfo> goodsList) {
mGoodsList = goodsList;
// 给每个商品分配一个专用的图像视图
for (int i = 0; i < mGoodsList.size(); i++) {
ImageView view = new ImageView(context); // 创建一个图像视图对象
view.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT));
//view.setImageResource(mGoodsList.get(i).getPic());
Glide.with(context)
.load(mGoodsList.get(i).getPic())
//.apply(RequestOptions.circleCropTransform()) // 使用 circleCropTransform() 方法设置圆形图片，也可以使用圆角半径的方法设置圆角
.diskCacheStrategy(DiskCacheStrategy.ALL) // 缓存原始图片和转换后的图片到磁盘
.skipMemoryCache(false) // 不跳过内存缓存
.into(view);
mViewList.add(view); // 把该商品的图像视图添加到图像视图列表
}
}
// 获取页面项的个数
public int getCount() {
return mViewList.size();
}
// 判断当前视图是否来自指定对象
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
// 从容器中销毁指定位置的页面
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(mViewList.get(position));
}
// 实例化指定位置的页面，并将其添加到容器中
public Object instantiateItem(ViewGroup container, int position) {
container.addView(mViewList.get(position));
return mViewList.get(position);
}
// 获得指定页面的标题文本
public CharSequence getPageTitle(int position) {
return String.valueOf(mGoodsList.get(position).getId());
}
}PageActivity.java
package com.example.okdemo1.activity;
import android.annotation.SuppressLint;
import android.app.ActivityOptions;
import android.content.Intent;
import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import androidx.activity.EdgeToEdge;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.graphics.Insets;
import androidx.core.view.ViewCompat;
import androidx.core.view.WindowInsetsCompat;
import androidx.viewpager.widget.ViewPager;
import com.example.okdemo1.MainActivity;
import com.example.okdemo1.R;
import com.example.okdemo1.model.GoodsInfo;
import com.example.okdemo1.adapter.ImagePagerAdapater;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;
public class PageActivity extends AppCompatActivity {
private ViewPager viewPager;
private List<GoodsInfo> mGoodsList; // 手机商品列表
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
EdgeToEdge.enable(this);
setContentView(R.layout.activity_page);
mGoodsList = getDefaultList();
// 构建一个商品图片的翻页适配器
ImagePagerAdapater adapter = new ImagePagerAdapater(this, mGoodsList);
// 从布局视图中获取名叫vp_content的翻页视图
ViewPager vp_content = findViewById(R.id.imageViewPager);
vp_content.setAdapter(adapter); // 设置翻页视图的适配器
vp_content.setCurrentItem(0); // 设置翻页视图显示第一页
//滑动时的事件回调
vp_content.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
// 当页面开始滑动时调用
System.out.println("位置:"+position);
}
@Override
public void onPageSelected(int position) {
// 当页面被选中时调用，position是当前页面的索引
// 此处要选中相应的按钮，标识出滑动到的位置
int currentPage = position;
System.out.println("选中位置:"+position);
setButtonSelected(currentPage);
}
@Override
public void onPageScrollStateChanged(int state) {
// 当页面滑动状态改变时调用，state可以是SCROLL_STATE_IDLE, SCROLL_STATE_DRAGGING, SCROLL_STATE_SETTLING
}
});
//按钮的点击事件, 第一个按钮
Button btn1 = findViewById(R.id.btn1);
btn1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//滑动到第一页
vp_content.setCurrentItem(0,true);
}
});
//按钮的点击事件, 第二个按钮
Button btn2 = findViewById(R.id.btn2);
btn2.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//滑动到第二页
vp_content.setCurrentItem(1,true);
}
});
//按钮的点击事件, 第三个按钮
Button btn3 = findViewById(R.id.btn3);
btn3.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//滑动到第三页
vp_content.setCurrentItem(2,true);
}
});
}
//要显示的图片列表数据
private List<GoodsInfo> getDefaultList() {
List<GoodsInfo> goodsList = new ArrayList<>();
//String imageUrl = "";
String imageUrl = "";
GoodsInfo g1 = new GoodsInfo(1,"https://wx2.sinaimg.cn/mw690/0034c2ttly1i0s6zuaqrkj635s2n4npe02.jpg");
goodsList.add(g1);
GoodsInfo g2 = new GoodsInfo(2,"https://wx4.sinaimg.cn/mw690/0034c2ttly1i0s6zu16kuj62bc3cge8102.jpg");
goodsList.add(g2);
GoodsInfo g3 = new GoodsInfo(3,"https://wx2.sinaimg.cn/large/989d17dbly1i0rx07jopej20lo0c6q3s.jpg");
goodsList.add(g3);
return goodsList;
}
//设置按钮被选中
@SuppressLint("ResourceAsColor")
private void setButtonSelected(int id) {
System.out.println("选中按钮id："+id);
Button btn1 = findViewById(R.id.btn1);
Button btn2 = findViewById(R.id.btn2);
Button btn3 = findViewById(R.id.btn3);
if (id == 0) {
btn1.setBackgroundColor(Color.parseColor("#FF0000"));
btn2.setBackgroundColor(Color.parseColor("#D3D3D3"));
btn3.setBackgroundColor(Color.parseColor("#D3D3D3"));
} else if (id == 1) {
btn2.setBackgroundColor(Color.parseColor("#FF0000"));
btn1.setBackgroundColor(Color.parseColor("#D3D3D3"));
btn3.setBackgroundColor(Color.parseColor("#D3D3D3"));
} else if (id == 2) {
btn3.setBackgroundColor(Color.parseColor("#FF0000"));
btn2.setBackgroundColor(Color.parseColor("#D3D3D3"));
btn1.setBackgroundColor(Color.parseColor("#D3D3D3"));
}
}
}二，测试效果
浙公网安备 33010602011771号