画廊在很多的App设计中都有,如下图所示:
该例子是我没事的时候写的一个小项目,具体源码地址请访问https://www.easck.com/>
使用方式
布局中添加该自定义控件
xmlns:tools="http://www.easck.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
android:id="@+id/cover"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
代码中设置
代码中设置分为以下几个步骤:
•查找控件
•初始化数据
•将需要显示的数据设置到控件上
•设置滑动监听
public class MainActivity extends AppCompatActivity {
private CoverFlowViewPager mCover;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mCover = (CoverFlowViewPager) findViewById(R.id.cover);
// 初始化数据
List list = new ArrayList<>();
for(int i = 0;i<10;i++){
ImageView img = new ImageView(this);
img.setBackgroundColor(Color.parseColor("#"+getRandColorCode()));
list.add(img);
}
//设置显示的数据
mCover.setViewList(list);
// 设置滑动的监听,该监听为当前页面滑动到中央时的索引
mCover.setOnPageSelectListener(new OnPageSelectListener() {
@Override
public void select(int position) {
Toast.makeText(getApplicationContext(),position+"",Toast.LENGTH_SHORT).show();
}
});
}
/**
* 获取随机颜色,便于区分
* @return
*/
public static String getRandColorCode(){
String r,g,b;
Random random = new Random();
r = Integer.toHexString(random.nextInt(256)).toUpperCase();
g = Integer.toHexString(random.nextInt(256)).toUpperCase();
b = Integer.toHexString(random.nextInt(256)).toUpperCase();
r = r.length()==1 ? "0" + r : r ;
g = g.length()==1 ? "0" + g : g ;
b = b.length()==1 ? "0" + b : b ;
return r+g+b;
}
}
实现原理
实现过程中有两个难点:
•如何实现滑动过程中的放大与缩小
•如何显示ViewPager中未被显示的页面
如何实现滑动过程中的放大与缩小?
在设置每一个ViewPager 的页面时,对每一个页面都设置一个固定的padding值,这样每个页面都会显示缩小状态。同时ViewPager设置addOnPageChangeListener(),滑动监听,在该滑动监听中会回调ViewPager的滑动的状态,滑动的偏移量等,根据滑动的偏移量进行放大缩小。及根据padding值设置控件的显示大小