前言:一个人的一生应该是这样度过的:当他回首往事的时候,他不会因为虚度年华而悔恨,也不会因为碌碌无为而羞耻。 ———《钢铁是怎么样炼成的》尼古拉·奥斯特洛夫斯基
需求:项目中需要展示数据中间大两边小的画廊效果
源码地址:https://github.com/FollowExcellence/ViewPager_Gallery
效果图:
实现:
1.在根布局文件和ViewPager中添加 属性 android:clipChildren="false",
这个方法或者属性的作用就是viewgroup的子view是否在它应有的边界内绘制。默认为true,在其边界内绘制
viewpager和其父级布局都需要禁止让子view在其限制内绘制,设置为false就可以接除限制了。
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/ll_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipChildren="false"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="5dp"
android:text="viewpager实现画廊效果"
android:textColor="@color/colorPrimary"/>
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="200dp"
android:layout_height="300dp"
android:layout_gravity="center"
android:layout_marginBottom="30dp"
android:clipChildren="false"
android:layout_marginTop="30dp"/>
</LinearLayout>
2.创建Adapter,设置数据
MyAdapter.java
package com.suming.viewpager_gallery;
import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.Toast;
/**
* @创建者 mingyan.su
* @创建时间 2018/7/27 9:26
* @类描述 ${TODO}适配器
*/
public class MyAdapter extends PagerAdapter {
private int[] mData;
private Context mContext;
public MyAdapter(Context ctx, int[] data) {
this.mContext = ctx;
this.mData = data;
}
@Override
public int getCount() {
return mData.length;// 返回数据的个数
}
@Override
public Object instantiateItem(final ViewGroup container, final int position) {//子View显示
View view = View.inflate(container.getContext(), R.layout.item, null);
ImageView imageView = view.findViewById(R.id.iv_icon);
imageView.setImageResource(mData[position]);
imageView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Toast.makeText(mContext, "当前条目:" + position, Toast.LENGTH_SHORT).show();
}
});
container.addView(view);//添加到父控件
return view;
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;// 过滤和缓存的作用
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);//从viewpager中移除掉
}
}
3.创建一个类实现ViewPager.PageTransformer,实现页面转换效果
ViewPager切换效果都是通过创建一个类实现ViewPager.PageTransformer然后重写transformPage方法来实现各种切换效果。
ZoomOutPageTransformer.java
package com.suming.viewpager_gallery;
import android.support.v4.view.ViewPager;
import android.view.View;
/**
* @创建者 mingyan.su
* @创建时间 2018/7/27 9:26
* @类描述 ${TODO}切换动画
*/
public class ZoomOutPageTransformer implements ViewPager.PageTransformer {
//自由控制缩放比例
private static final float MAX_SCALE = 1f;
private static final float MIN_SCALE = 0.8f;//0.85f
@Override
public void transformPage(View page, float position) {
if (position <= 1) {
float scaleFactor = MIN_SCALE + (1 - Math.abs(position)) * (MAX_SCALE - MIN_SCALE);
page.setScaleX(scaleFactor);
if (position > 0) {
page.setTranslationX(-scaleFactor * 2);
} else if (position < 0) {
page.setTranslationX(scaleFactor * 2);
}
page.setScaleY(scaleFactor);
} else {
page.setScaleX(MIN_SCALE);
page.setScaleY(MIN_SCALE);
}
}
}
4.主界面代码设置:
MainActivity.java
package com.suming.viewpager_gallery;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.MotionEvent;
import android.view.View;
import android.widget.LinearLayout;
/**
* @创建者 mingyan.su
* @创建时间 2018/7/27 9:26
* @类描述 ${TODO}主界面
*/
public class MainActivity extends AppCompatActivity {
private ViewPager mViewPager;
private LinearLayout ll_layout;
//向导界面的图片
private int[] mPics = new int[]{R.mipmap.icon_1, R.mipmap.icon_2, R.mipmap.icon_3, R.mipmap.icon_4, R.mipmap.icon_5};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
}
private void initView() {
mViewPager = (ViewPager) findViewById(R.id.viewPager);
ll_layout = (LinearLayout) findViewById(R.id.ll_layout);
//设置适配器
mViewPager.setAdapter(new MyAdapter(this, mPics));
mViewPager.setPageMargin(20);
mViewPager.setOffscreenPageLimit(mPics.length);
mViewPager.setPageTransformer(true, new ZoomOutPageTransformer());//3D画廊模式
//左右都有图
mViewPager.setCurrentItem(1);
//viewPager左右两边滑动无效的处理
ll_layout.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View view, MotionEvent motionEvent) {
return mViewPager.dispatchTouchEvent(motionEvent);
}
});
}
}
注意:viewpager需要添加 android-support-v4.jar 包的支持
点关注,不迷路
好了各位,以上就是这篇文章的全部内容了,能看到这里的人呀,都是人才。
我是suming,感谢各位的支持和认可,您的点赞、评论、收藏【一键三连】就是我创作的最大动力,我们下篇文章见!
如果本篇博客有任何错误,请批评指教,不胜感激 !
要想成为一个优秀的安卓开发者,这里有必须要掌握的知识架构,一步一步朝着自己的梦想前进!Keep Moving!
源码下载地址:https://github.com/FollowExcellence/ViewPager_Gallery