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

来源：互联网发布：信任知乎编辑：程序博客网时间：2024/05/17 23:34

效果图如下：

实现本次的欢迎效果图

我们要使用到的有：

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>

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

阅读全文

1 0