效果----》 要求底部有3个小圆点，当滑动引导页的时候，会从底部向上弹出一个图片，滑动到最后一页会出现按钮，点击按钮或者继续滑动，跳转到主界面
实现方式-----》viewPager+fragment+Animation
实现步骤
第一步----》activity_splash.xml的编写
布局说明：该布局文件 包含ViewPager， 然后底部有3个小圆点，最底部是一张图片，这张图片会向上弹出的。还有一个按钮，即点击进入主界面
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:id="@+id/welcome_main"
xmlns:android="http://schemas.android.com/apk/res/android"
android:clipToPadding="true"
android:background="@color/flashBg"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="5dp"
android:orientation="horizontal">
<View
android:id="@+id/dot_1"
android:layout_width="6.5dip"
android:layout_height="6.5dip"
android:layout_marginLeft="3dip"
android:layout_marginRight="3dip"
android:background="@drawable/dot_foucs"/>
<View
android:id="@+id/dot_2"
android:layout_width="6.5dp"
android:layout_height="6.5dp"
android:layout_marginLeft="3dip"
android:layout_marginRight="3dip"
android:background="@drawable/dot_nomal"/>
<View
android:id="@+id/dot_3"
android:layout_width="6.5dp"
android:layout_height="6.5dp"
android:layout_marginLeft="3dip"
android:layout_marginRight="3dip"
android:background="@drawable/dot_nomal"/>
</LinearLayout>
<ImageView
android:visibility="invisible"
android:id="@+id/button"
android:layout_marginBottom="50dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:src="@mipmap/click_to_come"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<ImageView
android:id="@+id/img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:src="@mipmap/bottom_first"/>
</RelativeLayout>
其中 3个小圆点需要引入drawable文件下的dot_foucs.xml,dot_normal.xml文件，编写如下：
dot_foucs.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#000000"/>
<corners android:radius="3dip"/>
</shape>
dot_normal.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#a6a6a6"/>
<corners android:radius="3dip"/>
</shape>
到处为止引导页的布局文件写好了，ViewPager 滑动的是Fragment， 所以Fragment的布局：
fragment_splash.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:src="@mipmap/welcome_first"
android:id="@+id/image"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
FlashFragment
public class FlashFragment extends Fragment {
private ImageView imageView;
private int ResId;
private View view;
public FlashFragment(int resId) {
ResId = resId;
}
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
super.onCreateView(inflater, container, savedInstanceState);
view=inflater.inflate(R.layout.fragment_splash,null);
imageView= (ImageView) view.findViewById(R.id.image);
imageView.setImageResource(ResId);
return view;
}
}
接下来编写SplashActivity
SplashActivity
public class SplashActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener {
private Context mContext = this;
private EdgeEffectCompat leftEdge, rightEdge;
private ViewPager viewPager;
private List<FlashFragment> list = new ArrayList<>();
private MyAdapter adapter;
//设置pop 向上弹出动画效果
private Animation animation, animation2;
private ImageView mImageView;
//底部的3个小点
private View dot1, dot2, dot3;
//图片按钮
private ImageView button;
private Handler handler = new Handler() {
@Override
public void handleMessage(Message msg) {
super.handleMessage(msg);
if (msg.what == 1) {
button.setVisibility(View.VISIBLE);
}
}
};
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_splash);
/**********设置状态栏的颜色*************/
this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
WindowManager.LayoutParams.FLAG_FULLSCREEN);
/**************检测是否第一次打开应用**************************/
checkIsFirstOpen();
/****设置动画*****/
initPop();
initView();
viewPager.setOffscreenPageLimit(2);
viewPager.addOnPageChangeListener(this);
/***********设置viewPager滑到最后一页跳转到WebActivity****************/
checkIsLastPage();
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
startActivity(new Intent(SplashActivity.this, WebActivity.class));
SplashActivity.this.finish();
}
});
}
private void checkIsLastPage() {
try {
Field leftEdgeField = viewPager.getClass().getDeclaredField("mLeftEdge");
Field rightEdgeField = viewPager.getClass().getDeclaredField("mRightEdge");
if (leftEdgeField != null && rightEdgeField != null) {
leftEdgeField.setAccessible(true);
rightEdgeField.setAccessible(true);
leftEdge = (EdgeEffectCompat) leftEdgeField.get(viewPager);
rightEdge = (EdgeEffectCompat) rightEdgeField.get(viewPager);
}
} catch (Exception e) {
e.printStackTrace();
}
}
private void initView() {
viewPager = (ViewPager) findViewById(R.id.viewpager);
list.add(new FlashFragment(R.mipmap.welcome_first));
list.add(new FlashFragment(R.mipmap.welcome_second));
list.add(new FlashFragment(R.mipmap.welcome_third));
adapter = new MyAdapter(getSupportFragmentManager(), list);
viewPager.setAdapter(adapter);
}
private void checkIsFirstOpen() {
if ((int) SharedPreferencesUtils.getParam(mContext, "app", 0) == 1) {
Intent intent = new Intent(this, WebActivity.class);
startActivity(intent);
finish();
} else {
SharedPreferencesUtils.setParam(mContext, "app", 1);
}
}
private void initPop() {
mImageView = (ImageView) findViewById(R.id.img);
animation = AnimationUtils.loadAnimation(this, R.anim.menushow);
animation.setFillAfter(true);
animation2=AnimationUtils.loadAnimation(this, R.anim.menushow);
animation2.setFillAfter(true);
mImageView.startAnimation(animation2);
dot1 = findViewById(R.id.dot_1);
dot2 = findViewById(R.id.dot_2);
dot3 = findViewById(R.id.dot_3);
button = (ImageView) findViewById(R.id.button);
}
//当滑动状态改变时调用
@Override
public void onPageScrollStateChanged(int arg0) {
// TODO Auto-generated method stub
if (rightEdge != null && !rightEdge.isFinished()) {//到了最后一张并且还继续拖动，出现蓝色限制边条了
startActivity(new Intent(SplashActivity.this, WebActivity.class));
SplashActivity.this.finish();
}
}
//当 当前页面被滑动时调用
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
// TODO Auto-generated method stub
}
//当新的页面被选中时调用
@Override
public void onPageSelected(int arg0) {
setAlldotNomal();
switch (arg0) {
case 0:
button.setVisibility(View.INVISIBLE);
//此处要设置底部的图片
mImageView.setImageResource(R.mipmap.bottom_first);
dot1.setBackgroundResource(R.drawable.dot_foucs);
animation.setFillAfter(true);
mImageView.startAnimation(animation);
break;
case 1:
//此处要设置底部的图片
mImageView.setImageResource(R.mipmap.bottom_second);
dot2.setBackgroundResource(R.drawable.dot_foucs);
animation.setFillAfter(true);
mImageView.startAnimation(animation);
button.setVisibility(View.INVISIBLE);
break;
case 2:
//此处要设置底部的图片
mImageView.setImageResource(R.mipmap.bottom_third);
dot3.setBackgroundResource(R.drawable.dot_foucs);
animation.setFillAfter(true);
mImageView.startAnimation(animation);
//500毫秒之后显示button
new Thread(new Runnable() {
@Override
public void run() {
try {
Thread.sleep(500);
handler.sendEmptyMessage(1);
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}).start();
break;
}
}
private void setAlldotNomal() {
dot1.setBackgroundResource(R.drawable.dot_nomal);
dot2.setBackgroundResource(R.drawable.dot_nomal);
dot3.setBackgroundResource(R.drawable.dot_nomal);
}
}
其中用到了 ViewPager的适配器，以及平移动画的xml文件：
MyAdapter
public class MyAdapter extends FragmentPagerAdapter {
private List<FlashFragment> mList;
public MyAdapter(FragmentManager fm, List<FlashFragment> mList) {
super(fm);
this.mList = mList;
}
@Override
public Fragment getItem(int position) {
return mList.get(position);
}
@Override
public int getCount() {
return mList.size();
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
// super.destroyItem(container, position, object);
}
}
menushow_first.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:fromXDelta="0"
android:toXDelta="0"
android:fromYDelta="0"
android:toYDelta="-25%p"
android:duration="550" />
</set>
menushow.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:fromXDelta="0"
android:toXDelta="0"
android:fromYDelta="0"
android:toYDelta="-25%p"
android:duration="450" />
</set>