利用viewpager简单实现的引导页面

最新推荐文章于 2024-05-06 23:20:42 发布

xulilongailulu

最新推荐文章于 2024-05-06 23:20:42 发布

阅读量319

点赞数 1

分类专栏： UI android 移动文章标签： android 引导页面特效美化 viewpager

本文链接：https://blog.csdn.net/xulilongailulu/article/details/48251207

版权

android 同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

移动

2 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

本人是初学者，一直想把自己正在做的一些项目发表到网上与大家分享

这次给大家带来一个简单的安卓引导页面，利用ViewPager实现，加了一些安卓自带的特效MainActivity.java文件内容武如下：

package com.lingchen.android_day03;
import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.View;
import android.view.ViewGroup;

public class MainActivity extends Activity {
/**
* 实现页面的左右滑动；
* step1.声明控件（viewPager,View 类型的数组，pagerAdapter）
* step2.在onCreate中查找控件
* step3.实例化数组
* step4.新建pagerAdapter
* step5.为viewpager设置pagerAdapter
*/

//step1.声明控件
private ViewPager mViewPager;//ViewPager 控件
private View[] childViews;//View 类型数组
private View[] childDots;//底部四个按钮
private PagerAdapter adapter;//适配起
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
//step2.查找控件
mViewPager = (ViewPager)

findViewById(R.id.viewpager);
//requestWindowFeature(Window.FEATURE_NO_TITLE);
mViewPager.setPageTransformer(true, new DepthPageTransformer());
//实例化数组,数组中存放新建的页面
childViews = new View[5];
//childView[0]:存放第一个页面page1.xml
childViews[0] = View.inflate(this, R.layout.page1, null);
childViews[1] =View.inflate(this, R.layout.page2, null);
childViews[2] = View.inflate(this, R.layout.page3, null);
childViews[3] = View.inflate(this,R.layout.page4,null);
childViews[4] = View.inflate(this,R.layout.page5,null);
//实例化数组，底部四个按钮
childDots = new View[5];
childDots[0] = (View)this.findViewById(R.id.dot1);
childDots[1] = (View)findViewById(R.id.dot2);
childDots[2] = (View)findViewById(R.id.dot3);
childDots[3] = (View)findViewById(R.id.dot4);
childDots[4] = (View)findViewById(R.id.dot5);
//step4.新建PagerAdapter(抽象类)
adapter = new InnerAdapter();
//step5.给ViewPager设置adapter
mViewPager.setAdapter(adapter);
//step6.给第一个底部按钮设置背景色白色
childDots[0].setBackgroundColor(Color.WHITE);
//step7给viewpager添加相应的事件处理
mViewPager.setOnPageChangeListener(new OnPageChangeListener() {
/**
* 使用此方法依次改变每个按钮的背景颜色
* step1.使用for循环for(i=0;i<childDots.length;i++)
* step2.在for循环中，使用for循环依次为按钮设置背景颜色为黑色
* step3.在for循环外，给最后一个按钮设置背景色为白色
* 最后一个按钮是childDots[arg0]
*/
@Override
public void onPageSelected(int arg0) {
// TODO Auto-generated method stub
for(int i=0;i<childDots.length;i++){
//改变背景颜色
childDots[i].setBackgroundColor(Color.BLACK);
}
//改变最后一个按钮的颜色
childDots[arg0].setBackgroundColor(Color.WHITE);
}

@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
// TODO Auto-generated method stub
// childDots[0].
}

@Override
public void onPageScrollStateChanged(int arg0) {
// TODO Auto-generated method stub

}
});
}
/**
* InnerAdapter继承Pageadapter
* 实现他的抽象方法
*/
class InnerAdapter extends PagerAdapter{

//读取到的滑动控件的数量
@Override
public int getCount() {
// TODO Auto-generated method stub
return childViews.length;
}
//判断是否为同一张图片
//本例中将两个参数相比返回即可
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
// TODO Auto-generated method stub
return arg0==arg1;
}
/**
* 当要现实的图片可以进行缓存的时候
* 会调用次方法进行图片显示的初始化
* 我们要将显示的ImageView放到ViewGroup
* 然后作为返回值即可
*/
@Override
public Object instantiateItem(ViewGroup container, int position) {
// TODO Auto-generated method stub
//return super.instantiateItem(container, position);
container.addView(childViews[position]);
return childViews[position];
}
/**
* pageradapter 只缓存了三张要显示的图片，
* 如果滑动图片超过缓存的数量，那么就有
* 调用下面的方法清除已缓存图片
*/
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
// TODO Auto-generated method stub
// super.destroyItem(container, position, object);
container.removeView(childViews[position]);
}
}
}

代码中很多注释，那些并不是做只是一种思路，可供参考。

特效文件是官方的我只是搬运过来，我从不创作源码，我只是源码的搬运工DepthPageTransformer.java

package com.lingchen.android_day03;
import android.support.v4.view.ViewPager;
import android.view.View;

public class DepthPageTransformer implements ViewPager.PageTransformer
{
private static float MIN_SCALE = 0.75f;
public void transformPage(View view, float position)
{
int pageWidth = view.getWidth();
if (position < -1) { // [-Infinity,-1)
// This page is way off-screen to the left.
view.setAlpha(0);
// ViewHelper.setAlpha(view, 0);
} else if (position <= 0) { // [-1,0] //A到B页
// Use the default slide transition when moving to the left page
view.setAlpha(1);
// ViewHelper.setAlpha(view, 1);
// ViewHelper.setTranslationX(view, 0);
view.setTranslationX(0);
view.setScaleX(1);
// ViewHelper.setScaleX(view, 1);
// ViewHelper.setScaleY(view, 1);
// view.setScaleY(1);
} else if (position <= 1) { // (0,1] //B到C页
// Fade the page out.
view.setAlpha(1 - position);
// ViewHelper.setAlpha(view, 1 - position);
// Counteract the default slide transition
view.setTranslationX(pageWidth * -position);
// ViewHelper.setAlpha(view, pageWidth * -position);
// Scale the page down (between MIN_SCALE and 1)
float scaleFactor = MIN_SCALE
+ (1 - MIN_SCALE) * (1 - Math.abs(position));
view.setScaleX(scaleFactor);
// ViewHelper.setScaleX(view, scaleFactor);
// ViewHelper.setScaleY(view, scaleFactor);
view.setScaleY(scaleFactor);

} else { // (1,+Infinity]
// This page is way off-screen to the right.
view.setAlpha(0);
// ViewHelper.setAlpha(view, 0);
}
}
}

布局文件activity_main.xml如下：

新建page1~page5这个都一样我只放一个：

<?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" >

<ImageView
android:id="@+id/page1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/image01"
android:scaleType="fitXY"/>
</RelativeLayout>

<?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" >
    
    <ImageView 
        android:id="@+id/page1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/image02"
        android:scaleType="fitXY"/>
</RelativeLayout>

xulilongailulu

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用viewpager简单实现的引导页面

本人是初学者，一直想把自己正在做的一些项目发表到网上与大家分享这次给大家带来一个简单的安卓引导页面，利用ViewPager实现，加了一些安卓自带的特效MainActivity.java文件内容武如下：package com.lingchen.android_day03;import android.app.Activity;import android.graphics.Color
复制链接

扫一扫