ViewPager 的使用

几乎每个APP在刚安装时都会有个“新功能介绍”或“新手引导”的功能,而这一功能用Android提供给我们的ViewPager很容易就能实现,先看一下效果:


当滑动到最后一页时,会显示“进入APP”按钮。接下来看一下具体代码实现:

一、页面布局:

<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.kcl.dfss.GuideActivity" >

    <android.support.v4.view.ViewPager
        android:id="@+id/beginner_gudie"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <LinearLayout
        android:id="@+id/beginner_group"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:layout_marginBottom="110dp"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal">
    </LinearLayout>

    <Button
        android:id="@+id/btn_into_app"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_marginLeft="50dp"
        android:layout_marginRight="50dp"
        android:background="@drawable/guide_matching"
        android:text="@string/into_app"
        android:textColor="#c8dadf"
        android:textSize="19sp"
        android:visibility="gone"
        android:layout_marginBottom="40dp"
        android:layout_alignParentBottom="true" />

</RelativeLayout>


二、Activity实现

import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.view.WindowManager;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;

public class BeginnerGuideActivity extends Activity{

    private ViewPager beginner_guide;
    private LinearLayout beginner_group;    //包含小圆点的布局
    private Button btn_into_app;    //进入APP按钮
    private ImageView imagedot,image_guide;     //小圆点,每页显示的图片
    private ImageView[] imageViews;     //显示引导图片数组
    private ImageView[] dots;   //导航圆点数组
    private int[] imageResources;   //图片资源数组

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
        setContentView(R.layout.activity_beginner_guide);

        init();
        GuideAdater guideAdater = new GuideAdater();
        beginner_guide.setAdapter(guideAdater);
        beginner_guide.setOnPageChangeListener(guideAdater);

        btn_into_app.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                finish();
            }
        });

    }

    private void init(){
        beginner_guide = (ViewPager) findViewById(R.id.beginner_gudie);
        beginner_group = (LinearLayout) findViewById(R.id.beginner_group);
        btn_into_app = (Button) findViewById(R.id.btn_into_app);
        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(20,20);
        params.setMargins(25, 0, 25, 50);   //设置小圆点距四周的位置

        imageResources = new int[]{R.drawable.test01,R.drawable.test02,R.drawable.test03,R.drawable.test04};
        dots = new ImageView[imageResources.length];
        //填充小圆点数组
        for(int i=0 ; i<dots.length ; i++){
            imagedot = new ImageView(BeginnerGuideActivity.this);
            imagedot.setLayoutParams(params);
            dots[i] = imagedot;
            if(i==0){
                dots[i].setBackgroundResource(R.drawable.point_true);
            }else{
                dots[i].setBackgroundResource(R.drawable.point_false);
            }
            beginner_group.addView(imagedot);
        }
        //填充要显示的Imageview数组
        imageViews = new ImageView[imageResources.length];
        for(int i=0 ; i<imageViews.length ; i++){
            image_guide = new ImageView(BeginnerGuideActivity.this);
            imageViews[i] = image_guide;
            image_guide.setImageResource(imageResources[i]);
        }
    }

    /*
     *设置滚动小圆点背景
     */
    private void setDotBackground(int selectedItem){
        for(int i=0 ; i<dots.length ; i++){
            dots[selectedItem].setBackgroundResource(R.drawable.point_true);
            if(selectedItem!=i){
                dots[i].setBackgroundResource(R.drawable.point_false);
            }
        }
    }
    /*
     *ViewPage适配器类
     */
    class GuideAdater extends PagerAdapter implements ViewPager.OnPageChangeListener{

        @Override
        public int getCount() {
            return imageResources.length;
        }

        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView((View) object);
        }
<span style="white-space:pre">	</span>//返回item要显示的内容
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            container.addView(imageViews[position]);
            return imageViews[position];
        }

        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        }
<span style="white-space:pre">	</span>//当前显示的页面
        @Override
        public void onPageSelected(int position) {
            setDotBackground(position);
            if(position == dots.length-1){
                btn_into_app.setVisibility(View.VISIBLE);
            }else{
                btn_into_app.setVisibility(View.GONE);
            }
        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    }
}

有不足之处,希望不吝赐教,共同进步!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值