viewpager嵌套gridview实现美团左右滑动查看更多分
2019-02-21 本文已影响0人
Florian_
界面很简陋，没有找相应的图，主要是记录使用方法，便于以后查询
1、MainActivity
public class MainActivity extends AppCompatActivity {
// nox_adb.exe connect 127.0.0.1:62001
ArrayList<GridItem> mList;
MyViewPagerAdapter mViewPagerAdapter;
ViewPager mViewPager;
int mTotalPage; //总的页数
int mPageSize = 10; //每页显示的最大的数量
List<View> mViewPagerList;//GridView作为一个View对象添加到ViewPager集合中
int[] imageId;// 图片id的集合
CircleIndicator indicator;// 指示器
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
initData();
}
private void initView() {
mViewPager = (ViewPager) findViewById(R.id.viewPager);
indicator = (CircleIndicator) findViewById(R.id.indicator);
mList = new ArrayList<>();
imageId = new int[]{
R.mipmap.ic_launcher_round, R.mipmap.ic_launcher_round, R.mipmap.ic_launcher_round,
R.mipmap.ic_launcher_round, R.mipmap.ic_launcher_round, R.mipmap.ic_launcher_round,
R.mipmap.ic_launcher_round, R.mipmap.ic_launcher_round, R.mipmap.ic_launcher_round,
R.mipmap.ic_launcher_round, R.mipmap.ic_launcher_round, R.mipmap.ic_launcher_round,
R.mipmap.ic_launcher_round, R.mipmap.ic_launcher_round, R.mipmap.ic_launcher_round,
R.mipmap.ic_launcher_round, R.mipmap.ic_launcher_round, R.mipmap.ic_launcher_round,
};
for (int i = 0; i < imageId.length; i++) {
mList.add(new GridItem(imageId[i]));
}
}
private void initData() {
//总的页数=总数/每页数量，并向上取整取整
mTotalPage = (int) Math.ceil(mList.size() * 1.0 / mPageSize);
mViewPagerList = new ArrayList<>();
for (int i = 0; i < mTotalPage; i++) {
final GridView gridView = (GridView) View.inflate(this, R.layout.grid_item, null);
gridView.setAdapter(new GridViewAdapter(this, mList, i, mPageSize));
//每一个GridView作为一个View对象添加到ViewPager集合中
mViewPagerList.add(gridView);
}
mViewPagerAdapter = new MyViewPagerAdapter(this, mViewPagerList);
mViewPager.setAdapter(mViewPagerAdapter);
indicator.setViewPager(mViewPager);
}
2、MyViewPagerAdapter
public class MyViewPagerAdapter extends PagerAdapter {
List<View> mViewList;//View就是GridView所显示的内容
Context mContext;
public MyViewPagerAdapter(Context context, List<View> viewList) {
this.mContext = context;
this.mViewList = viewList;
}
@Override
public int getCount() {
if (mViewList != null && mViewList.size() > 0) {
return mViewList.size();
}
return 0;
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(mViewList.get(position));
return mViewList.get(position);
}
/**
* 将当前的View添加到ViewGroup容器中
* 这个方法，return一个对象，这个对象表明了PagerAdapter适配器选择哪个对象放在当前的ViewPage上
*/
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
}
3、GridViewAdapter
public class GridViewAdapter extends BaseAdapter {
private static final String TAG = "GridViewAdapter";
Context mContext;
ArrayList<GridItem> mList = new ArrayList<>();
int mIndex; // 页数下标，标示第几页，从0开始
int mPargerSize;// 每页显示的最大的数量
DisplayMetrics metrics;
public GridViewAdapter(Context context, ArrayList<GridItem> list, int mIndex, int mPagerSize) {
this.mContext = context;
this.mList = list;
this.mIndex = mIndex;
this.mPargerSize = mPagerSize;
}
@Override
public int getCount() {
return mList.size() > (mIndex + 1) * mPargerSize ?
mPargerSize : (mList.size() - mIndex * mPargerSize);
}
@Override
public Object getItem(int position) {
return mList.get(position + mIndex * mPargerSize);
}
@Override
public long getItemId(int position) {
return position + mIndex * mPargerSize;
}
@Override
public View getView(int position, View convertView, ViewGroup viewGroup) {
GridViewHolder holder;
metrics = mContext.getResources().getDisplayMetrics();
int widthPixels = metrics.widthPixels;
int width = widthPixels / 5;
int height = Dp2Px(mContext, 80);
if (convertView == null) {
holder = new GridViewHolder();
convertView = View.inflate(mContext, R.layout.gridview_item, null);
holder.ivItemImage = convertView.findViewById(R.id.ivMenu);
AbsListView.LayoutParams params = (AbsListView.LayoutParams) convertView.getLayoutParams();
convertView.setTag(holder);
if (params == null) {
params = new AbsListView.LayoutParams(width, height);
convertView.setLayoutParams(params);
} else {
params.width = width;
params.height = height;
}
} else {
holder = (GridViewHolder) convertView.getTag();
}
//重新确定position因为拿到的总是数据源，数据源是分页加载到每页的GridView上的
final int pos = position + mIndex * mPargerSize;//假设mPageSiez
//假设mPagerSize=8，假如点击的是第二页（即mIndex=1）上的第二个位置item(position=1),那么这个item的实际位置就是pos=9
holder.ivItemImage.setImageResource(mList.get(pos).getImageId());
// holder.layout.setOnClickListener(new View.OnClickListener() {
// @Override
// public void onClick(View v) {
// if (pos == 7 && mList.get(pos).getImageText().equals(mContext.getString(R.string.ad))) {
//// mHandler.sendEmptyMessageAtTime(0, 1000);
// } else {
//// Intent intent = new Intent();
//// intent.setClass(mContext, DetailsActivity.class);
//// intent.putExtra("Title", mList.get(pos).getImageText());
//// mContext.startActivity(intent);
// }
// }
// });
return convertView;
}
static class GridViewHolder {
ImageView ivItemImage;
}
// dp转px
public static int Dp2Px(Context context, float dp) {
final float scale = context.getResources().getDisplayMetrics().density;
return (int) (dp * scale + 0.5f);
}
}
4、activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
tools:context="com.example.qqq.photogridview.MainActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="180dp"
android:background="#FFFFFF">
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<me.relex.circleindicator.CircleIndicator
android:id="@+id/indicator"
android:layout_width="match_parent"
android:layout_height="20dp"
android:layout_alignParentBottom="true"
app:ci_drawable="@drawable/black_radius"
app:ci_drawable_unselected="@drawable/white_radius" />
</RelativeLayout>
</RelativeLayout>
5、gridview_item.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">
<ImageView
android:id="@+id/ivMenu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:scaleType="fitCenter" />
</RelativeLayout>
6、grid_item.xml
<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fadeScrollbars="true"
android:numColumns="5">
</GridView>
7、indicator_animator.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="@android:integer/config_shortAnimTime">
<objectAnimator
android:propertyName="alpha"
android:valueFrom="0.1"
android:valueTo="1.0"
android:valueType="floatType" />
<objectAnimator
android:propertyName="rotation" //旋转
android:valueFrom="0"
android:valueTo="180"
android:valueType="floatType" />
<objectAnimator
android:propertyName="translationY"
android:valueFrom="0"
android:valueTo="-5dp"
android:valueType="floatType" />
</set>
8、indicator_animator_reverse.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="@android:integer/config_shortAnimTime">
<objectAnimator
android:propertyName="alpha" // 透明度
android:valueFrom="1.0"
android:valueTo="0.1"
android:valueType="floatType" />
<objectAnimator
android:propertyName="translationY" //Y轴移动
android:valueFrom="-5dp" // 起点
android:valueTo="0" // 终点
android:valueType="floatType" /> // 移动距离的单位
</set>
9、black_radius_square.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="@android:color/black" />
<corners android:radius="2dp" /> //矩形四角圆弧角度
</shape>
10、最后是指示器的依赖
implementation 'me.relex:circleindicator:1.2.2'
