效果图:
MainActivity:
public class MainActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener{
private ViewGroup points;//小圆点指示器
private ImageView[] ivPoints;//小圆点图片集合
private ViewPager viewPager;
private int totalPage;//总的页数
private int mPageSize = 8;//每页显示的最大数量
private List<ProductListBean> listDatas;//总的数据源
private List<View> viewPagerList;//GridView作为一个View对象添加到ViewPager集合中
private int currentPage;//当前页
private String[] proName = {"名称0","名称1","名称2","名称3","名称4","名称5",
"名称6","名称7","名称8","名称9","名称10","名称11","名称12","名称13","名称14","名称15"};
private int[] IMG = {R.drawable.img1,R.drawable.img2,R.drawable.img3,R.drawable.img4,
R.drawable.img4, R.drawable.img3,R.drawable.img2,R.drawable.img1,
R.drawable.img4,R.drawable.img2,R.drawable.img1, R.drawable.img3,
R.drawable.img1,R.drawable.img3,R.drawable.img2,R.drawable.img4};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//初始化控件
iniViews();
//模拟数据源
setDatas();
LayoutInflater inflater = LayoutInflater.from(this);
//总的页数，取整（这里有三种类型：Math.ceil(3.5)=4:向上取整，只要有小数都+img1 Math.floor(3.5)=3：向下取整 Math.round(3.5)=4:四舍五入）
totalPage = (int) Math.ceil(listDatas.size() * 1.0 / mPageSize);
viewPagerList = new ArrayList<>();
for(int i=0;i<totalPage;i++){
//每个页面都是inflate出一个新实例
GridView gridView = (GridView) inflater.inflate(R.layout.gridview_layout,viewPager,false);
gridView.setAdapter(new MyGridViewAdapter(this,listDatas,i,mPageSize));
//添加item点击监听
/*gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
int pos = position + currentPage*mPageSize;
Log.i("TAG","position的值为："+position + "-->pos的值为："+pos);
Toast.makeText(MainActivity.this,"你点击了 "+listDatas.get(pos).getProName(),Toast.LENGTH_SHORT).show();
}
});*/
//每一个GridView作为一个View对象添加到ViewPager集合中
viewPagerList.add(gridView);
}
//设置ViewPager适配器
viewPager.setAdapter(new MyViewPagerAdapter(viewPagerList));
//小圆点指示器
ivPoints = new ImageView[totalPage];
for(int i=0;i<ivPoints.length;i++){
ImageView imageView = new ImageView(this);
//设置图片的宽高
imageView.setLayoutParams(new ViewGroup.LayoutParams(10,10));
if(i == 0){
imageView.setBackgroundResource(R.drawable.page__selected_indicator);
}else{
imageView.setBackgroundResource(R.drawable.page__normal_indicator);
}
ivPoints[i] = imageView;
LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));
layoutParams.leftMargin = 20;//设置点点点view的左边距
layoutParams.rightMargin = 20;//设置点点点view的右边距
points.addView(imageView,layoutParams);
}
//设置ViewPager滑动监听
viewPager.addOnPageChangeListener(this);
}
private void iniViews() {
viewPager = (ViewPager) findViewById(R.id.viewPager);
//初始化小圆点指示器
points = (ViewGroup) findViewById(R.id.points);
}
private void setDatas() {
listDatas = new ArrayList<>();
for(int i=0;i<proName.length;i++){
listDatas.add(new ProductListBean(proName[i],IMG[i]));
}
}
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
//改变小圆圈指示器的切换效果
setImageBackground(position);
currentPage = position;
}
@Override
public void onPageScrollStateChanged(int state) {
}
/**
* 改变点点点的切换效果
* @param selectItems
*/
private void setImageBackground(int selectItems) {
for (int i = 0; i < ivPoints.length; i++) {
if (i == selectItems) {
ivPoints[i].setBackgroundResource(R.drawable.page__selected_indicator);
} else {
ivPoints[i].setBackgroundResource(R.drawable.page__normal_indicator);
}
}
}
}
布局文件xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#CDCDCD">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#FFFFFF"
>
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
<LinearLayout
android:id="@+id/points"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="5dp"
android:gravity="center"
android:orientation="horizontal"
/>
</RelativeLayout>
</RelativeLayout>GridView加载数据adapter:MyGridViewAdapter
public class MyGridViewAdapter extends BaseAdapter {
private List<ProductListBean> listData;
private LayoutInflater inflater;
private Context context;
private int mIndex;//页数下标，表示第几页，从0开始
private int mPagerSize;//每页显示的最大数量
public MyGridViewAdapter(Context context,List<ProductListBean> listData,int mIndex,int mPagerSize) {
this.context = context;
this.listData = listData;
this.mIndex = mIndex;
this.mPagerSize = mPagerSize;
inflater = LayoutInflater.from(context);
}
/**
* 先判断数据集的大小是否足够显示满本页？listData.size() > (mIndex + img1)*mPagerSize
* 如果满足，则此页就显示最大数量mPagerSize的个数
* 如果不够显示每页的最大数量，那么剩下几个就显示几个 (listData.size() - mIndex*mPagerSize)
*/
@Override
public int getCount() {
return listData.size() > (mIndex + 1)*mPagerSize ? mPagerSize : (listData.size() - mIndex*mPagerSize);
}
@Override
public Object getItem(int position) {
return listData.get(position + mIndex * mPagerSize);
}
@Override
public long getItemId(int position) {
return position + mIndex * mPagerSize;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder holder = null;
if(convertView == null){
convertView = inflater.inflate(R.layout.item_gridview,parent,false);
holder = new ViewHolder();
holder.proName = (TextView) convertView.findViewById(R.id.proName);
holder.imgUrl = (ImageView) convertView.findViewById(R.id.imgUrl);
convertView.setTag(holder);
}else{
holder = (ViewHolder) convertView.getTag();
}
//重新确定position（因为拿到的是总的数据源，数据源是分页加载到每页的GridView上的，为了确保能正确的点对不同页上的item）
final int pos = position + mIndex*mPagerSize;//假设mPagerSize=8，假如点击的是第二页（即mIndex=img1）上的第二个位置item(position=img1),那么这个item的实际位置就是pos=9
ProductListBean bean = listData.get(pos);
holder.proName.setText(bean.getProName());
holder.imgUrl.setImageResource(bean.getImgUrl());
//添加item监听
convertView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(context,"你点击了 "+listData.get(pos).getProName(),Toast.LENGTH_SHORT).show();
}
});
return convertView;
}
class ViewHolder{
private TextView proName;
private ImageView imgUrl;
}
}
ViewPager的adapter:MyViewPagerAdapter
public class MyViewPagerAdapter extends PagerAdapter {
private List<View> viewLists;//View就是GridView
public MyViewPagerAdapter(List<View> viewLists) {
this.viewLists = viewLists;
}
/**
*这个方法，是从ViewGroup中移出当前View
*/
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(viewLists.get(position));
}
/**
* 将当前View添加到ViewGroup容器中
* 这个方法，return一个对象，这个对象表明了PagerAdapter适配器选择哪个对象放在当前的ViewPager中
*/
@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(viewLists.get(position));
return viewLists.get(position);
}
/**
*这个方法，是获取当前窗体界面数
*/
@Override
public int getCount() {
return viewLists != null ? viewLists.size() : 0;
}
/**
*用于判断是否由对象生成界面
*/
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;//官方文档要求这样写
}
}
实体类:
public class ProductListBean implements Serializable {
private String proName;
private int imgUrl;
public ProductListBean(String proName, int imgUrl) {
this.proName = proName;
this.imgUrl = imgUrl;
}
public String getProName() {
return proName;
}
public void setProName(String proName) {
this.proName = proName;
}
public int getImgUrl() {
return imgUrl;
}
public void setImgUrl(int imgUrl) {
this.imgUrl = imgUrl;
}
}
扫一扫
3043
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
