前沿
学习笔记，便于后续查看。
摘抄自这位大神：http://blog.csdn.net/cjm2484836553/article/details/53292150
效果图
hehe.gif
撸代码
- GuideActivity.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.meterdesginproject.GuideActivity">
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<Button
android:id="@+id/button_skip"
android:layout_alignParentRight="true"
android:layout_marginTop="20dp"
android:layout_marginRight="20dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="跳过"/>
<RelativeLayout
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="40dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<LinearLayout
android:id="@+id/ll_dot_group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"/>
<ImageView
android:id="@+id/iv_white_dot"
android:layout_width="10dp"
android:layout_height="10dp"
android:background="@drawable/white_dot_shape"/>
</RelativeLayout>
</RelativeLayout>
- 第五张图片的View
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/splash_5" />
<Button
android:id="@+id/button_join"
android:layout_marginBottom="80dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center_horizontal"
android:text="立即体验" />
</FrameLayout>
- 白点和圆圈的shape
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<solid android:color="#fff"/>
<corners android:radius="5dp"/>
</shape>
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<size
android:width="10dp"
android:height="10dp"/>
<stroke
android:width="1dp"
android:color="@android:color/white"/>
<solid android:color="@android:color/transparent"/>
</shape>
- GuideActivity
public class GuideActivity extends AppCompatActivity implements View.OnClickListener{
private View lastSplash;
private ArrayList<ImageView> imageViews;
private LinearLayout dotGroup;
private ViewPager viewPager;
private ImageView whiteDot;
private int dotDistance;
private Button mSkip;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//初始化视图
initView();
//初始化数据
initData();
//初始化监听
initListener();
}
private void initView() {
setContentView(R.layout.activity_guide);
dotGroup = (LinearLayout)findViewById(R.id.ll_dot_group);
viewPager = (ViewPager)findViewById(R.id.viewpager);
whiteDot = (ImageView)findViewById(R.id.iv_white_dot);
mSkip = (Button)findViewById(R.id.button_skip);
mSkip.setOnClickListener(this);
//最后一张
lastSplash = View.inflate(this,R.layout.last_guide_view,null);
}
private void initData() {
imageViews = new ArrayList<>();
int dotWidth = DensityUtil.dip2px(this,10);
int[] imagesId = {
R.drawable.splash_1,
R.drawable.splash_2,
R.drawable.splash_3,
R.drawable.splash_4,
};
for (int i = 0; i < imagesId.length+1; i++) { //这里需要加1
//创建小圆点
ImageView dot = new ImageView(this);
dot.setBackgroundResource(R.drawable.dot_normal_shape);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(dotWidth,dotWidth);
if (i!=0){
params.leftMargin =dotWidth;
}
dot.setLayoutParams(params);
//添加小圆点
dotGroup.addView(dot);
if(i!=imagesId.length){
ImageView imageView = new ImageView(this);
imageView.setBackgroundResource(imagesId[i]);
imageViews.add(imageView);
}
//ViewPager设置适配器
viewPager.setAdapter(new ViewpagersAdapter());
}
}
public class ViewpagersAdapter extends PagerAdapter{
@Override
public int getCount() {
return imageViews.size()+1;
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view==object;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
View view = null;
if (position<imageViews.size()){
view = imageViews.get(position);
}else {
view = lastSplash;
}
container.addView(view);
return view;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
}
private void initListener(){
whiteDot.getViewTreeObserver().addOnGlobalLayoutListener(new MyOnGlobalLayoutListener());
viewPager.addOnPageChangeListener(new MyOnPageChangeListener());
lastSplash.findViewById(R.id.button_join).setOnClickListener(this);
}
private class MyOnGlobalLayoutListener implements ViewTreeObserver.OnGlobalLayoutListener{
@Override
public void onGlobalLayout() {
//默认会调用两次，只需要一次，第一次进入就移除
whiteDot.getViewTreeObserver().removeOnGlobalLayoutListener(MyOnGlobalLayoutListener.this);
// 两点间距= 第1个dot距左边的距离 - 第0个dot距左边的距离
dotDistance = dotGroup.getChildAt(1).getLeft()-dotGroup.getChildAt(0).getLeft();
}
}
private class MyOnPageChangeListener implements ViewPager.OnPageChangeListener {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
//红点移动的距离 = ViewPager页面的百分比* 间距
//坐标 = 起始位置 + 红点移动的距离；
int leftmagin = (int) (position * dotDistance + (positionOffset * dotDistance));
RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) whiteDot.getLayoutParams();
params.leftMargin = leftmagin;
whiteDot.setLayoutParams(params);
}
@Override
public void onPageSelected(int position) {
}
@Override
public void onPageScrollStateChanged(int state) {
}
}
@Override
public void onClick(View view) {
switch (view.getId()){
case R.id.button_skip:
startActivity(new Intent(GuideActivity.this,MainActivity.class));
break;
case R.id.button_join:
startActivity(new Intent(GuideActivity.this,MainActivity.class));
break;
}
}
}
- 用到的一个工具类
public class DensityUtil {
/**
* 根据手机的分辨率从 dip 的单位 转成为 px(像素)
*/
public static int dip2px(Context context, float dpValue) {
final float scale = context.getResources().getDisplayMetrics().density;
return (int) (dpValue * scale + 0.5f);
}
/**
* 根据手机的分辨率从 px(像素) 的单位 转成为 dp
*/
public static int px2dip(Context context, float pxValue) {
final float scale = context.getResources().getDisplayMetrics().density;
return (int) (pxValue / scale + 0.5f);
}
}
