效果图如下:
实现本次的欢迎效果图
我们要使用到的有:
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>
主要代码以给出 本代码是个人练习学习用的实例,有问题或疑问大家一起参考解答,谢谢!