ViewPager欢迎界面到引导界面的的实现
打开软件，弹出一个动画，动画结束到引导界面
先来实现欢迎界面动画的实现：
RelativeLayout mRelatineLayout=(RelativeLayout) findViewById(R.id.mRelatineLayout);
//开启动画
AnimationSet set=new AnimationSet(false);
/**
* 旋转动画
*/
RotateAnimation mRotateAnimation=new RotateAnimation(0, 360,
Animation.RELATIVE_TO_SELF,0.5f, Animation.RELATIVE_TO_SELF,0.5f);
mRotateAnimation.setFillEnabled(true);
mRotateAnimation.setFillAfter(true);
mRotateAnimation.setDuration(1000);
/**
* 透明渐变色
*/
AlphaAnimation mAlphaAnimation=new AlphaAnimation(0, 1.0f);
mAlphaAnimation.setDuration(1000);
/**
* 缩放
*/
ScaleAnimation mScaleAnimation=new ScaleAnimation(0, 1.0f, 0, 1.0f,
Animation.RELATIVE_TO_SELF,0.5f, Animation.RELATIVE_TO_SELF,0.5f);
mScaleAnimation.setDuration(1000);
//添加动画
set.addAnimation(mRotateAnimation);
set.addAnimation(mAlphaAnimation);
set.addAnimation(mScaleAnimation);
/**
* 开启动画
*/
mRelatineLayout.startAnimation(set);
set.setAnimationListener(new AnimationListener() {
//动画开始时执行此方法
@Override
public void onAnimationStart(Animation animation) {
}
//动画重复执行此方法
@Override
public void onAnimationRepeat(Animation animation) {
}
//动画结束执行此方法
@Override
public void onAnimationEnd(Animation animation) {
//第一次安装这款软件在动画结束时跳转到引导界面，第二次打开就没有引导界面了
}
});
引导界面的实现：
引导界面的布局：
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/guird_pager"
>
</android.support.v4.view.ViewPager>
<Button
android:id="@+id/btn_start_button"
android:layout_width="130dp"
android:layout_height="wrap_content"
android:text="开始体验"
android:textColor="@color/guird_text_color"
android:visibility="gone"
android:background="@drawable/guird_btn_backgrounp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="40dp"
/>
</RelativeLayout>
引导界面具体类的实现：
public class GuirdActivity extends Activity implements OnPageChangeListener {
private ViewPager mViewPager;
private Button mButton;
private List<ImageView> mList;
private static int items[]={R.drawable.guide_1,R.drawable.guide_2,R.drawable.guide_3};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//取消标题
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_guird);
mViewPager=(ViewPager) findViewById(R.id.guird_pager);
mButton=(Button) findViewById(R.id.btn_start_button);
initData();
}
/**
* 初始化数据
*/
@SuppressWarnings("deprecation")
private void initData() {
mList = new ArrayList<ImageView>();
for(int i=0;i<items.length;i++){
//新建ImageView
ImageView iv=new ImageView(this);
iv.setImageResource(items[i]);
//填充屏幕
iv.setScaleType(ScaleType.FIT_XY);
mList.add(iv);
}
//给viewpager设置适配器adapter-----list
mViewPager.setAdapter(new GuirdViewPagerAdapter());
//滑动页面改变的监听器
mViewPager.setOnPageChangeListener(this);
}
给viewpager设置适配器adapter—–list
mViewPager.setAdapter(new GuirdViewPagerAdapter());
ViewPager设置的适配器：四个常见的方法
/**
* viewpageer的适配器
* @author Administrator
*
*/
class GuirdViewPagerAdapter extends PagerAdapter{
@Override
public int getCount() {
if(mList!=null){return mList.size();}
return 0;
}
@Override
public boolean isViewFromObject(View view, Object obj) {
return view==obj;
}
/**
* 销毁一个页卡
*/
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
//从viewpager中移除imageview
ImageView iv=mList.get(position);
container.removeView(iv);
}
/**
* 实例化一个页卡
*/
@Override
public Object instantiateItem(ViewGroup container, int position) {
ImageView iv=mList.get(position);
//添加到viewpager中container就是viewpager
container.addView(iv);
return iv;
}
}
设置ViewPager页面的选择监听器
mViewPager.setOnPageChangeListener(this);
让类实现接口 OnPageChangeListener 则实现接口里面的方法如下：
//在当滑动状态改变时的回调
@Override
public void onPageScrollStateChanged(int arg0) {
}
//正在滑动的时候回调
//position当前所处的页面
//positionset 百分比
//arg2 滑动时的具体距离
@Override
public void onPageScrolled(int position, float positionoffset, int arg2) {
}
//当viewpager某个页面选中时回调
//@position当前选中的页面
@Override
public void onPageSelected(int position) {
//设置只有滑动到最后一个页面时才显示按钮
mButton.setVisibility((position==mList.size()-1?View.VISIBLE:View.GONE));
}
到这里欢迎界面和引导界面已经完成了，那么是如何实现两个界面之间的连接的呢？
还记得欢迎界面的动画吗，在动画结束时会调用这么一个方法：
//动画结束执行此方法
@Override
public void onAnimationEnd(Animation animation) {
//第一次安装这款软件在动画结束时跳转到引导界面，第二次打开就没有引导界面了
}
而我们就是在这个方法里面实现界面的跳转。
引导页面的静态点怎么实现
//往LinearLayout布局中添加静态点
<LinearLayout
android:id="@+id/ll_guird_point"
android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="20dp"
android:orientation="horizontal"/>
在主活动中：
LinearLayout mLinearLayout=(LinearLayout) findViewById(R.id.ll_guird_point);
//动态添加一个点
View point=new View(this);
point.setBackgroundResource(R.drawable.guird_point_normal);
LinearLayout.LayoutParams params=new LinearLayout.LayoutParams(30, 30);
//居中
if(i!=0){//第一个页面不用左边距
params.leftMargin=15;
}
mLinearLayout.addView(point, params);
画出一个点的布局：
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">//圆形
//半径
<corners android:radius="5dp"/>
//填充的颜色
<solid android:color="#cccccc"/>
</shape>
动态点的实现：
在原有的LinearLayout中外围添加一个RelaterLayout，里面添加一个View加载动态的点
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="20dp" >
<!-- 加点的容器 -->
<LinearLayout
android:id="@+id/ll_guird_point"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
</LinearLayout>
<View
android:id="@+id/re_point_selected"
android:layout_width="15dp"
android:layout_height="15dp"
android:background="@drawable/guird_point_selectedl" />
</RelativeLayout>
动态点的颜色选择器
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<corners android:radius="5dp"/>
<solid android:color="#ff0000"/>
</shape>
在初始化数据之后initData()加上下面几句：
//初始化控件，动态换红点
View mPointSelect=(View) findViewById(R.id.re_point_selected);
initData()；
//计算点于点之间的布局
mPointSelect.getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
@Override
public void onGlobalLayout() {
//当整个UI的数布局改变的时候调用
if(mList==null){
return ;
}
//监听一次
mPointSelect.getViewTreeObserver().removeGlobalOnLayoutListener(this);
mSpace = mLinearLayout.getChildAt(1).getLeft()-mLinearLayout.getChildAt(0).getLeft();
}
});
最后在滑动监听调用的方法中：
//正在滑动的时候回调
//position当前所处的页面
//positionset 百分比
//arg2 滑动时的具体距离
@Override
public void onPageScrolled(int position, float positionoffset, int arg2) {
//1、对滑动的做操作
RelativeLayout.LayoutParams params= (android.widget.RelativeLayout.LayoutParams) mPointSelect.getLayoutParams();
//2、设置marginLeft
params.leftMargin=(int) (mSpace*position+mSpace*positionoffset+0.5f);
mPointSelect.setLayoutParams(params);
}
网友评论