Android：演练：viewpager的结合的欢迎页面和小点的距离设置计算

最新推荐文章于 2021-06-03 04:50:21 发布

YoungManZheng

最新推荐文章于 2021-06-03 04:50:21 发布

阅读量484

点赞数 1

文章标签： viewpager

本文链接：https://blog.csdn.net/qq_36918081/article/details/76658478

版权

效果图如下：

实现本次的欢迎效果图

我们要使用到的有：

ViewPager的实现和监听以及设置它的适配器

实现小点的距离公式计算：

两点间移动的距离=屏幕滑动百分比*间距

两点间滑动距离对应的坐标=原来的起始位置+两点间移动的距离

paramas.left=两点间滑动距离对应的坐标

首先来看下welcomeAcctivity：

package example.com.chengdunews;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.view.animation.AnimationSet;
import android.view.animation.RotateAnimation;
import android.view.animation.ScaleAnimation;
import android.widget.RelativeLayout;
import android.widget.Toast;
import example.com.chengdunews.activity.GuideActivity;
import example.com.chengdunews.activity.MainActivity;
import example.com.chengdunews.utils.CacheUtils;

public class WelcomeActivity extends Activity {
    private RelativeLayout mactivity_welcome;
    public static final String START_MAIN = "start_main";//静态常量

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_welcome);
        mactivity_welcome= (RelativeLayout) findViewById(R.id.activity_welcome);


        //渐变 缩放 旋转
        AlphaAnimation aa=new AlphaAnimation(0,1);
        aa.setDuration(800);
        aa.setFillAfter(true);

        ScaleAnimation sa=new ScaleAnimation(0,1,0,1,ScaleAnimation.RELATIVE_TO_SELF,0.5f,ScaleAnimation.RELATIVE_TO_SELF,0.5f);
        sa.setDuration(1000);
        sa.setFillAfter(true);

        RotateAnimation ra=new RotateAnimation(0,360,RotateAnimation.RELATIVE_TO_SELF,0.5f,RotateAnimation.RELATIVE_TO_SELF,0.5f);
        ra.setDuration(1000);
        ra.setFillAfter(true);

        AnimationSet set=new AnimationSet(false);
        set.addAnimation(ra);
        set.addAnimation(sa);
        set.addAnimation(aa);
        set.setDuration(2000);

        mactivity_welcome.startAnimation(set);
        set.setAnimationListener(new MyAnimationListener());

    }

    class  MyAnimationListener implements Animation.AnimationListener {



        @Override
        public void onAnimationStart(Animation animation) {

        }

        @Override
        public void onAnimationEnd(Animation animation) {


            boolean isStartMain= CacheUtils.getBoolean(WelcomeActivity.this, START_MAIN);
            if (isStartMain){
//                如果进入过主页面，直接进入主页面
                Intent intent=new Intent(WelcomeActivity.this,MainActivity.class);
                startActivity(intent);


            }else {
                //如果没有进入过主页面，进入引导页面
                Intent intent=new Intent(WelcomeActivity.this,GuideActivity.class);
                startActivity(intent);
            }
//            关闭welcome

            finish();

//            Toast.makeText(WelcomeActivity.this, "动画播放完成", Toast.LENGTH_SHORT).show();
        }

        @Override
        public void onAnimationRepeat(Animation animation) {

        }
    }
}

2.activity_welcome.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:id="@+id/activity_welcome"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff"
    tools:context="example.com.chengdunews.WelcomeActivity">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:src="@drawable/logo2"
        android:id="@+id/imageView" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="校园印象派"
        android:textSize="25sp"
        android:textColor="#000"
        android:layout_below="@+id/imageView"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="46dp"
        android:id="@+id/textView" />
</RelativeLayout>

3.GuideActivity

package example.com.chengdunews.activity;

import android.app.Activity;
import android.content.Intent;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewTreeObserver;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;

import java.util.ArrayList;

import example.com.chengdunews.R;
import example.com.chengdunews.WelcomeActivity;
import example.com.chengdunews.utils.CacheUtils;

import static android.content.ContentValues.TAG;

public class GuideActivity extends Activity {


    private ViewPager viewPager;
    private Button btn_start_main;
    private LinearLayout ll_point_group;
    private ArrayList<ImageView> imageViews;
    private ImageView iv_red_point;
    private int leftmax;//两点的间距

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_guide);
        viewPager = (ViewPager) findViewById(R.id.viewpager);
        btn_start_main = (Button) findViewById(R.id.btn_start_main);
        iv_red_point= (ImageView) findViewById(R.id.iv_red_point);
        ll_point_group = (LinearLayout) findViewById(R.id.ll_point_group);


        //准备数据
        int[] ids = new int[]{
                R.drawable.page_02m,
                R.drawable.page_03m,
                R.drawable.page_04m,
        };

        imageViews = new ArrayList<>();
        for (int i = 0; i < ids.length; i++) {
            ImageView imageView = new ImageView(this);
            //设置背景
            imageView.setBackgroundResource(ids[i]);
            //添加到集合中
            imageViews.add(imageView);
            //添加点
            ImageView point = new ImageView(GuideActivity.this);
            point.setBackgroundResource(R.drawable.point_nomal);
            /**
             *
             *  单位是像素
             *  把单位当作dp转成对应的像素
             */
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(10, 10);


            if (i != 0) {//不包括第0个所有的点往10px
                params.leftMargin = 10;
            }
            point.setLayoutParams(params);
            //添加到现行布局
            ll_point_group.addView(point);
        }
            //设置viewpage的适配器
            viewPager.setAdapter(new MyPagerAdapter());
            //根据view的生命周期，当视图执行到onlayout或者onDraw的时侯，视图的高和宽，边距都有了
            iv_red_point.getViewTreeObserver().addOnGlobalLayoutListener(new MyOnGlobalLayoutListener());
            //得到屏幕滑动的百分比
            viewPager.addOnPageChangeListener(new MyOnPageChangeListener());

        //设置按钮点击
        btn_start_main.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //1，保存曾经进入过主页面
                CacheUtils.putBoolean(GuideActivity.this, WelcomeActivity.START_MAIN,true);
                //2，跳转到主页面
                Intent intent=new Intent(GuideActivity.this,MainActivity.class);
                startActivity(intent);
                //3，关闭引导页面
                finish();
            }
        });

    }


//class类

    class MyOnPageChangeListener implements ViewPager.OnPageChangeListener {


        /**
         * 当页面滚动了回调这个方法
         * @param position 当前滑动页面的位置
         * @param positionOffset  页面滑动百分比
         * @param positionOffsetPixels 滑动的像素
         */
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            //两点间移动的距离=屏幕滑动百分比*间距
//            int leftmargin= (int) (positionOffset*leftmax);
            //两点间滑动距离对应的坐标=原来的起始位置+两点间移动的距离
            int leftmargin=(int) (position*leftmax+(positionOffset*leftmax));
            //paramas.left=两点间滑动距离对应的坐标
            RelativeLayout.LayoutParams params= (RelativeLayout.LayoutParams) iv_red_point.getLayoutParams();
            params.leftMargin=leftmargin;
            iv_red_point.setLayoutParams(params);


        }

        /**
         * 当页面被选中的时侯回调这个方法
         * @param position 被选中页面对应的位置
         */
        @Override
        public void onPageSelected(int position) {
            if (position==imageViews.size()-1){
                btn_start_main.setVisibility(View.VISIBLE);
            }else {
                //其它页面
                btn_start_main.setVisibility(View.GONE);
            }

        }

        /**
         * 当viewpager页面滑动状态发生变化的时侯
         * @param state
         */
        @Override
        public void onPageScrollStateChanged(int state) {

        }
    }



    class MyOnGlobalLayoutListener implements ViewTreeObserver.OnGlobalLayoutListener {

        @Override
        public void onGlobalLayout() {
            //执行不止一次
            iv_red_point.getViewTreeObserver().removeOnGlobalLayoutListener(MyOnGlobalLayoutListener.this);
             //间距=第一个点距离左边的距离-第零个点距离左边的距离
             leftmax=ll_point_group.getChildAt(1).getLeft()-ll_point_group.getChildAt(0).getLeft();
             Log.e(TAG, "leftmax==:"+leftmax);


             }
          }



    class MyPagerAdapter extends PagerAdapter {

        /*
        返回数据的总个数
         */
        @Override
        public int getCount() {
            return imageViews.size();
        }

        /**
         * 作用类是listview中的getview
         * @param container 容器是viewpager
         * @param position  要创建页面的位置
         * @return 返回和创建当前页面的关系值
         */
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            ImageView imageView=imageViews.get(position);
            container.addView(imageView);
//            return super.instantiateItem(container, position);
//            return position;   可以返回位置
            return imageView;

        }

        /**
         *
         * @param view 当前创建的视图
         * @param object 上面instantiateItem返回的结果值
         * @return
         */

        @Override
        public boolean isViewFromObject(View view, Object object) {
           // return view==imageViews.get(Integer.parseInt((String) object));  可以返回位置
            return view== object; // 可以返回位置

        }

        /**
         * 销毁页面
         * @param container  viewpager
         * @param position  要销毁页面的位置
         * @param object  要销毁的页面
         */

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
//            super.destroyItem(container, position, object);
            container.removeView((View) object);
        }
    }
}

然后是activity_guide

<?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:id="@+id/activity_guide"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="example.com.chengdunews.activity.GuideActivity">

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



    <Button
        android:id="@+id/btn_start_main"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="开始体验"
        android:textColor="#ffffff"
        android:textSize="20sp"
        android:paddingLeft="20dp"
        android:background="@drawable/btn_begin"
        android:paddingRight="20dp"
        android:visibility="gone"
        android:layout_marginBottom="92dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true" />


    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="40dp"
        >
        <LinearLayout
            android:id="@+id/ll_point_group"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            >

        </LinearLayout>

        <ImageView
            android:id="@+id/iv_red_point"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:background="@drawable/point_red"
            />

    </RelativeLayout>




</RelativeLayout>

接下来 还有设置保存参数的

CacheUtils

package example.com.chengdunews.utils;

import android.content.Context;
import android.content.ContextWrapper;
import android.content.SharedPreferences;

import example.com.chengdunews.WelcomeActivity;
import example.com.chengdunews.activity.GuideActivity;

/**
 * Created by 正 on 2017/7/31.
 * 缓存软件的一些参数和数据
 */

public class CacheUtils {


    public static boolean getBoolean(Context context, String key) {
        SharedPreferences sp=context.getSharedPreferences("yinxiangpai",context.MODE_PRIVATE);
        return sp.getBoolean(key,false);
    }

    /**
     * 保存软件的参数
     * @param context
     * @param key
     * @param value
     */
    public static void putBoolean(Context context, String key, boolean value) {
        SharedPreferences sp=context.getSharedPreferences("yinxiangpai",context.MODE_PRIVATE);
        sp.edit().putBoolean(key,value).commit();
    }
}

创建MainActivity

package example.com.chengdunews.activity;

import android.app.Activity;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

import example.com.chengdunews.R;

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

创建 activity_main

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="example.com.chengdunews.activity.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="我是主页面"
        android:layout_gravity="center"
        android:textSize="25dp"

        />


</FrameLayout>

以及红色的点：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">

    <size android:height="10dp" android:width="10dp"/>
    <solid android:color="#f76262"/>


</shape>

灰色的点：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">

    <size android:height="10dp" android:width="10dp"/>
    <solid android:color="#a5a5a5"/>


</shape>

主要代码以给出本代码是个人练习学习用的实例，有问题或疑问大家一起参考解答，谢谢！