效果图
GIF.gif
第一步、布局
主界面布局,ViewPager+6个小圆点
MainActivity.xml
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="7.5"
android:layout_marginTop="10dp"
android:id="@+id/viewpage">
</android.support.v4.view.ViewPager>
<LinearLayout
android:id="@+id/llt_page_indicator"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center_horizontal"
android:orientation="horizontal"
android:visibility="visible"
android:background="@color/white">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:padding="5dp"
android:src="@drawable/circle_main" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:padding="5dp"
android:src="@drawable/circle_main" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:padding="5dp"
android:src="@drawable/circle_main" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:padding="5dp"
android:src="@drawable/circle_main" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:padding="5dp"
android:src="@drawable/circle_main" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:padding="5dp"
android:src="@drawable/circle_main" />
</LinearLayout>
这里的可以通过drawable设置颜色样式
激活样式
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="10dp"/>
<solid android:color="#dfdedf"/>
<size android:height="10dp" android:width="10dp"/>
</shape>
未激活样式
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="10dp"/>
<solid android:color="#a7a4a5"/>
<size android:height="10dp" android:width="10dp"/>
</shape>
第二步、ViewPager滑动展示的界面
view
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white"
android:gravity="center_horizontal"
android:orientation="vertical">
<ImageView
android:layout_marginTop="20dp"
android:layout_width="wrap_content"
android:layout_height="200dp"
android:src="@drawable/img_home_guide_chat"
android:id="@+id/iv"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="蜜语聊天"
android:textColor="#f15795"
android:id="@+id/tv1"
android:textSize="20dp"
android:textStyle="bold"/>
<TextView
android:id="@+id/tv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="只有情侣彼此能看到"
android:textColor="#696466"
android:layout_marginTop="10dp"
android:textSize="20dp"/>
</LinearLayout>
第三步、继承PagerAdapter重写必须用的4个用法
public class AdapterViewpager extends PagerAdapter {
private List<View> views;
public AdapterViewpager(List<View> mViewList) {
this.views = mViewList;
}
@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) {//必须实现，实例化
ViewGroup parent = (ViewGroup) views.get(position).getParent();
if (parent != null)
parent.removeAllViews();
container.addView(views.get(position));
return views.get(position);
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {//必须实现，销毁
container.removeView(views.get(position));
}
}
补充：一些方法
其中，getCount和isViewFromObject是必须覆写的方法。isViewFromObject是用来判断pager的一个view是否和instantiateItem方法返回的object有关联，因为instantiateItem方法返回值不一定是view，可以是任意对象。
而当我们覆写instantiateItem方法时，如果直接写container.addView(views.get(position))的话会报
java.lang.IllegalStateException:
The specified child already has a parent. You must call removeView() ..."造成程序结束。
提示我们要添加的View已经绑定一个父类，由于一个子view不能与两个父类相关，所以必须得解绑。
因此必须在此之前添加判断，如果已经绑定了一个父类，必须先解绑再添加到ViewGroup里：
ViewGroup parent = (ViewGroup) views.get(position).getParent();
if (parent != null)
parent.removeAllViews();
第四步、初始化
MainActivity.java
//viewpager的设置
vpager_one = (ViewPager) findViewById(R.id.viewpage);
aList = new ArrayList<View>();
//设置第一个点未激活状态
lltPageIndicator = (LinearLayout) findViewById(R.id.llt_page_indicator);
lltPageIndicator.getChildAt(0).setEnabled(false);
//循环添加viewpager
for (int i = 0; i < 6; i++) {
aList.add(getGuidePage(i));
}
//实现方法类
mAdapter = new AdapterViewpager(aList);
//添加
vpager_one.setAdapter(mAdapter);
//滑动监听
vpager_one.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
//滚动过程中实现
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
//滚动成功后实现
@Override
public void onPageSelected(int position) {
clearIndicatorFocusedState();
lltPageIndicator.getChildAt(position).setEnabled(false);
}
//滚动成功前，即手指按下屏幕时
@Override
public void onPageScrollStateChanged(int state) {
}
});
实现方法类
//滑动消除小圆圈
private void clearIndicatorFocusedState() {
// TODO 自动生成的方法存根
int childCount = lltPageIndicator.getChildCount();
for (int i = 0; i < childCount; i++) {
lltPageIndicator.getChildAt(i).setEnabled(true);
}
}
private View getGuidePage(int i) {
// TODO 自动生成的方法存根
View v = View.inflate(this, R.layout.view_one, null);
ImageView ivGuidePage = (ImageView) v.findViewById(R.id.iv);
tv1 = v.findViewById(R.id.tv1);
tv2 = v.findViewById(R.id.tv2);
switch (i) {
case 0:
ivGuidePage.setImageResource(R.drawable.img_home_guide_chat);
break;
case 1:
ivGuidePage.setImageResource(R.drawable.img_home_guide_add);
tv1.setText("立即添加另一半");
tv2.setText("开启你们的恩爱之旅");
break;
case 2:
ivGuidePage.setImageResource(R.drawable.img_home_guide_alarm);
tv1.setText("远程闹钟");
tv2.setText("让 TA 一键叫你起床");
break;
case 3:
ivGuidePage.setImageResource(R.drawable.img_home_guide_distance);
tv1.setText("距离感应");
tv2.setText("你我距离一键感应");
break;
case 4:
ivGuidePage.setImageResource(R.drawable.img_home_guide_game);
tv1.setText("情侣二人游戏");
tv2.setText("一起养宠物，一起养宝宝");
break;
case 5:
ivGuidePage.setImageResource(R.drawable.img_home_guide_notify);
tv1.setText("智能提醒");
tv2.setText("让你不在错过 TA 的生日");
break;
}
return v;
}
