效果图
page4.png
page1.png
实现思路
自定义Dialog，为Dialog添加自定义布局，自定义PagerAdapter以及PageTransformer
实现过程
- PagerAdapter的实现
（1）自定义的PagerAdapter：NoticePagerAdapter
public class NoticePagerAdapter extends PagerAdapter {
private List views;
public NoticePagerAdapter(List views){
this.views = views;
}
@Override
public int getCount() {
return views.size();
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(views.get(position), 0); //添加页卡
return views.get(position);
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(views.get(position)); //删除页卡
}
}
（2）自定义的PagerTransformer: NoticePagerTransformer
public class NoticePagerTransformer implements ViewPager.PageTransformer {
private static final float ROX_MAX = 20.0f;
private float mRox;
@Override
public void transformPage(View page, float position) {
if (position < -1){ //页面不可见
ViewCompat.setRotation(page, 0);
}else if (position < 0){ //页面可见，页面的左边界已经画出屏幕
mRox = (position * ROX_MAX);
ViewCompat.setPivotX(page, page.getMeasuredWidth());
ViewCompat.setPivotY(page, page.getMeasuredHeight());
ViewCompat.setRotation(page, mRox);
}else if (position < 1){ //页面可见，页面的左边界已经进入屏幕
mRox = (position * ROX_MAX);
ViewCompat.setPivotX(page, 0);
ViewCompat.setPivotY(page, page.getMeasuredHeight());
ViewCompat.setRotation(page, mRox);
}else { //页面不可见
ViewCompat.setRotation(page, 0);
}
}
}
（3）ViewPager的两个主要的类已经定义好了，下面来看Dialog，先定义了两个style
（4）定义Dialog的布局，就是放一个ViewPager
（5）定义每一个Pager的布局，也就是一个ImageView和一个小点点
(6)接下来是重头戏，也就是我们自定义的Dialog
public class PagerDialog extends Dialog{
private String[] images ;
private ViewPager viewPager = null;
private ImageView dismissImgView = null;
public PagerDialog(@NonNull Context context, String[] images) {
super(context,R.style.pagerDialog);
this.images = images;
}
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//设置动画效果
getWindow().setWindowAnimations(R.style.popupAnimation);
//设置dialog的布局
setContentView(R.layout.dialog_popup);
viewPager = (ViewPager)findViewById(R.id.dialog_viewpager);
dismissImgView = (ImageView)findViewById(R.id.imageview_dismiss_dialog);
viewPager.setAdapter(createAdapter());
viewPager.setPageTransformer(true, new NoticePagerTransformer());
viewPager.setOffscreenPageLimit(images.length);
dismissImgView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
EventBus.getDefault().post(new MessagEvent());
}
});
}
private PagerAdapter createAdapter(){
List views = new ArrayList<>();
for (int i = 0; i < images.length; i ++){
final int j = i;
ImageView[] mDots = new ImageView[images.length];
int dp1 = (int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,7 ,
getContext().getResources().getDisplayMetrics());
int dp2 = (int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 5,
getContext().getResources().getDisplayMetrics());
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
dp1,dp1);
View parent = LayoutInflater.from(getContext()).inflate(R.layout.item_pager, null);
ImageView imageView = (ImageView)parent.findViewById(R.id.imageView);
LinearLayout dotsLayout = (LinearLayout)parent.findViewById(R.id.dots_layout);
Glide.with(getContext()).load(images[i]).into(imageView);
imageView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Log.d("wnw", "img = " + j);
}
});
//设置圆点
if (images.length > 0 && images.length != 1){
for (int k = 0; k < images.length; k++){
mDots[k] = new ImageView(getContext());
mDots[k].setBackgroundResource(R.drawable.dialog_dot_selector);
params.leftMargin = dp2;// 设置圆点间隔
params.rightMargin = dp2;// 设置圆点间隔
if (k == i){
mDots[k].setSelected(true);
}else {
mDots[k].setSelected(false);
}
mDots[k].setLayoutParams(params);
dotsLayout.addView(mDots[k], k);
}
}
views.add(parent);
}
return new NoticePagerAdapter(views);
}
@Override
public void show() {
if(images.length > 0){
super.show();
}
}
}
（7）由于用户点击了关闭的按钮，要通知Activity销毁掉Dialog,所以用到了EventBus 这个框架
public class MessagEvent {
public MessagEvent(){}
}
（8）最后通过Activity创建PagerDialog并且将它show()出来
public class MainActivity extends AppCompatActivity {
PagerDialog pagerDialog;
private String[] imageList = new String[]{"http://otfl590no.bkt.clouddn.com/1.jpg?attname=",
"http://otfl590no.bkt.clouddn.com/2.jpg?attname=",
"http://otfl590no.bkt.clouddn.com/3.jpg?attname=",
"http://otfl590no.bkt.clouddn.com/4.jpg?attname="};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
pagerDialog = new PagerDialog(this, imageList);
pagerDialog.show();
EventBus.getDefault().register(this);
}
@Subscribe(threadMode = ThreadMode.MAIN)
public void dismiss(MessagEvent messageEvent) {
pagerDialog.dismiss();
}
@Override
protected void onDestroy() {
super.onDestroy();
EventBus.getDefault().unregister(this);
}
}
以上这样子就是实现了自定义的Dialog