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

最新推荐文章于 2022-04-27 20:03:06 发布

Richardcw

最新推荐文章于 2022-04-27 20:03:06 发布

阅读量1.2k

点赞数

分类专栏：安卓开发

本文链接：https://blog.csdn.net/Richardcw/article/details/73369175

版权

安卓开发专栏收录该内容

4 篇文章 0 订阅

订阅专栏

简单的新手指导页可以用几种方式方法实现，这里使用的是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) {

            }
        });
    }

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