（安卓APP）关于简单的新手指导页的图片滑动和点击事件跳转

   简单的新手指导页可以用几种方式方法实现，这里使用的是Fragment+第三方的一个控件指示器完成的。

首先，创建4个Fragment.java(我分别用简称 FA,FB,FC,FD)和一个BaseFragment.

MainActivity.java,GuideActivity.java.

然后，自定义一个shape（round_corner）和一个关于TextView的布局（skip_layout）。

关于@BindView(控件ID)，其实这个就是变相的findViewById（好处就是让代码看清楚比较清晰简单）

需要在gradle添加库的依赖，详情去github搜索ButterKnife,里面有详情教程。

4个fragment里面前面三个是添加了一个TextView控件，最后一个添加了一个Button控件（这里我还写了一个selector给Button，

看起来比较美观，这个自己可以定义的），都是用于点击跳转。

关于第三方指示器的控件，有需要的朋友可以留邮箱，分享资源是快乐的。

BaseFragment.java

public class BaseFragment extends Fragment {

public void skip(View view){//通用跳转方法
view.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {//点击跳转事件
Intent intent=new Intent(getActivity(), MainActivity.class);
startActivity(intent);
getActivity().finish();//跳转以后关闭该Activity
}
});

}
}

FragmentA.java

public class FragmentA extends BaseFragment {

@BindView(R.id.tv_fragment_skip)
TextView textView_1;

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_a, container, false);
ButterKnife.bind(this, view);
skip(textView_1);
return view;
}
}

fragment_a.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/new_comer_guide_fg_1"//选择自己合适
>
<include
layout="@layout/skip_layout"//这个布局是自定义的
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginTop="8dp"
android:layout_marginRight="8dp"
/>
 </RelativeLayout>

FragmentB.java

public class FragmentB extends BaseFragment {

@BindView(R.id.tv_fragment_skip)
TextView textView_2;

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_b, container, false);
ButterKnife.bind(this, view);
skip(textView_2);
return view;
}
}

fragment_b.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/new_comer_guide_fg_2"
>

<include
layout="@layout/skip_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginTop="8dp"
android:layout_marginRight="8dp"
/>

</RelativeLayout>

FragmentC.java

public class FragmentC extends BaseFragment {

@BindView(R.id.tv_fragment_skip)
TextView textView_3;

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_c, container, false);
ButterKnife.bind(this, view);
skip(textView_3);
return view;
}

}

fragment_c.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/new_comer_guide_fg_3"
>

<include
layout="@layout/skip_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginTop="8dp"
android:layout_marginRight="8dp"
/>

</RelativeLayout>

FragmentD.java

public class FragmentD extends BaseFragment {

@BindView(R.id.btn_fragment_skip)
Button btn_skip;

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {

View view = inflater.inflate(R.layout.fragment_d, container, false);
ButterKnife.bind(this, view);
skip(btn_skip);
return view;
}
}

fragment_d.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/new_comer_guide_fg_4"
>

<Button
android:id="@+id/btn_fragment_skip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="立即开启"
android:textColor="#FFFFFFFF"
android:background="@drawable/btn_seletor"
android:padding="8dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="30dp"
/>

</RelativeLayout>

skip_layout.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
android:id="@+id/tv_fragment_skip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="跳过"
android:background="@drawable/round_corner"//这个大家自由发挥，selector
android:padding="8dp"
android:layout_alignParentRight="true"
android:layout_marginTop="8dp"
android:layout_marginRight="8dp"
/>

</LinearLayout>

round_corner.xml(创建在drawable的自定义shape)

<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners
android:radius="30dp"
/>
<solid android:color="#ffffff"/>
<stroke
android:width="1dp"
android:color="#ff3f3f3f"
/>
</shape>

好了，前期工作已经完成了，接下来就是要让他们串连在一起实现滑动的效果。

activity_guide.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/activity_guide"
android:layout_width="match_parent"
android:layout_height="match_parent"
>

<android.support.v4.view.ViewPager

android:id="@+id/vp_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
<com.viewpagerindicator.CirclePageIndicator//这是第三方的一个指示器
android:id="@+id/indicator"
android:padding="10dip"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="15dp"
/>

</RelativeLayout>

public class GuideActivity extends FragmentActivity {
@BindView(R.id.vp_main)//初始化控件
ViewPager viewPager;
MyFragmentAdapter adpter;
@BindView(R.id.indicator)
CirclePageIndicator indicator;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_guide);
ButterKnife.bind(this);
initViewPager();

}
private void initViewPager(){
adpter=new MyFragmentAdapter(getSupportFragmentManager());
viewPager.setAdapter(adpter);
indicator.setViewPager(viewPager);

viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {//设置滑动监听
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

}

@Override
public void onPageSelected(int position) {//这是控制最后一些按钮跳转是指示器消失
if (position==3){
indicator.setVisibility(View.INVISIBLE);
}else{
indicator.setVisibility(View.VISIBLE);

}

}

@Override
public void onPageScrollStateChanged(int state) {

}
});
}

}

代码到这里就结束了，如果大家有更好的建议，欢迎大家指导分享。