效果图
page4.png
page1.png
实现思路
自定义Dialog，为Dialog添加自定义布局，自定义PagerAdapter以及PageTransformer
实现过程
- PagerAdapter的实现
（1）自定义的PagerAdapter：NoticePagerAdapter
public class NoticePagerAdapter extends PagerAdapter {
private List<View> views;
public NoticePagerAdapter(List<View> 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
<style name="popupAnimation">
<item name="android:windowEnterAnimation">@android:anim/fade_in</item>
<item name="android:windowExitAnimation">@android:anim/fade_out</item>
</style>
<style name="pagerDialog" parent="@android:style/Theme.Dialog">
<item name="android:windowBackground">@android:color/transparent</item>
<item name="android:windowNoTitle">true</item>
<item name="android:backgroundDimEnabled">true</item> <!--背景变暗-->
<item name="android:windowIsFloating">false</item>
</style>
（4）定义Dialog的布局，就是放一个ViewPager
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/dialog_viewpager"
android:layout_centerInParent="true">
</android.support.v4.view.ViewPager>
<ImageView
android:id="@+id/imageview_dismiss_dialog"
android:layout_width="28dp"
android:layout_height="28dp"
android:src="@mipmap/ic_dismiss_dialog"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="64dp"/>
</RelativeLayout>
</LinearLayout>
（5）定义每一个Pager的布局，也就是一个ImageView和一个小点点
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clickable="true"
android:id="@+id/rl">
<RelativeLayout
android:layout_width="267dp"
android:layout_height="357dp"
android:layout_centerInParent="true">
<ImageView
android:id="@+id/imageView"
android:layout_width="267dp"
android:layout_height="357dp"
android:layout_centerInParent="true"/>
<LinearLayout
android:id="@+id/dots_layout"
android:layout_width="140dp"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="25dp"
android:orientation="horizontal" >
</LinearLayout>
</RelativeLayout>
</RelativeLayout>
(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<View> 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
