Android开发——ViewPage制作滑动导航界面

  今天我们学习ViewPage控件，用这个控件制作一个APP安装引导界面。先看看效果吧，然后我们再讲一讲代码。



这个是很多APP在我们第一次安装时的时候会给出的引导界面的最后一页，我们是不是也可以用这个来做一个APP内部的轮播图？用来插广告或者推送推荐消息什么的？

是的，可以的。

好了我们开始看代码。

滑动淡入淡出效果代码

DepthPageTransformer.java

package com.example.viewpage;
import android.support.v4.view.ViewPager.PageTransformer;
import android.view.View;
public class DepthPageTransformer implements PageTransformer {
private static final 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);
} else if (position <= 0) { // [-1,0]
// Use the default slide transition when moving to the left page
view.setAlpha(1);
view.setTranslationX(0);
view.setScaleX(1);
view.setScaleY(1);
} else if (position <= 1) { // (0,1]
// Fade the page out.
view.setAlpha(1 - position);
// Counteract the default slide transition
view.setTranslationX(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);
view.setScaleY(scaleFactor);
} else { // (1,+Infinity]
// This page is way off-screen to the right.
view.setAlpha(0);
}
}
}这段代码我们现在还没有怎么接触动画制作，咱先不管他。
下面我们设置两种圆点一种是灰色的一种是蓝色的

hui.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<size
android:width="10dp"
android:height="10dp"/>
<solid
android:color="#BCBCBC"
/>
</shape>
lan.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<size
android:width="10dp"
android:height="10dp"/>
<solid
android:color="#18A1FF"
/>
</shape>

然后看看我们主要的activity_main.xml代码
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.example.viewpager.MainActivity" >

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

<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"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" />

<ImageView
android:id="@+id/iv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/lan" />
</RelativeLayout>

<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="50dp"
android:text="开始体验"
android:visibility="gone" />

</RelativeLayout>看懂我们怎么设置的没？相对布局中加一个ViewPage；然后一个相对布局，里面放我们轮播的大图和下边显示的小圆点；然后在上面那个相对布局下放一个按钮，这个按钮用来显示在最后一个轮播大图上，前面的大图上他都是隐藏的。
接下来看看我们的MainActivity.java代码吧

package com.example.viewpage;

import java.util.ArrayList;
import java.util.List;

import android.app.Activity;
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;
import android.view.ViewTreeObserver.OnGlobalLayoutListener;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.ImageView.ScaleType;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;

public class MainActivity extends Activity {

private LinearLayout linearLayout;
private ImageView imageView;
private ViewPager vp;
// 图片数据
private int[] image = new int[] { R.drawable.a1,
R.drawable.a2, R.drawable.a3,
R.drawable.a4, R.drawable.a5 };
private List<ImageView> imagelist;
private Button button;
private int pointWidth;
@SuppressWarnings("deprecation")
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

imagelist = new ArrayList<>();
initView();
for (int i = 0; i < image.length; i++) {
ImageView imageView = new ImageView(this);
imageView.setImageResource(image[i]);
imageView.setScaleType(ScaleType.FIT_XY); // 图片拉伸比例
imagelist.add(imageView);

LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(
LinearLayout.LayoutParams.WRAP_CONTENT,
LinearLayout.LayoutParams.WRAP_CONTENT);
if (i > 0) {
layoutParams.leftMargin = 20;
}

// 根据图片个数放置相应数量小灰点
ImageView huiImageView = new ImageView(this);
huiImageView.setImageResource(R.drawable.hui);
linearLayout.addView(huiImageView);
}
imageView.getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener(){

@Override
public void onGlobalLayout() {
// TODO Auto-generated method stub
pointWidth=linearLayout.getChildAt(1).getLeft()-linearLayout.getChildAt(0).getLeft();
}

});
// vp.setPageTransformer(true, arg1);
// 使用PagerAdapter
vp.setAdapter(new PagerAdapter() {
@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(imagelist.get(position));
return imagelist.get(position);
}
@Override
public void destroyItem(ViewGroup container, int position,
Object object) {
// TODO Auto-generated method stub
container.removeView(imagelist.get(position));
}
// 用于判断是否有对象生成界面
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
// TODO Auto-generated method stub
return arg0 == arg1;
}
// 返回ViewPager里面有几页
@Override
public int getCount() {
// TODO Auto-generated method stub
return image.length;
}
});
vp.setOnPageChangeListener(new OnPageChangeListener(){

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

}
//在Viewpger的界面不断滑动的时候会触发
//position：当前滑到了第几页
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
// TODO Auto-generated method stub
RelativeLayout.LayoutParams layoutParams=(RelativeLayout.LayoutParams)imageView.getLayoutParams();
layoutParams.leftMargin=(int)(pointWidth*arg1+arg0*pointWidth);
imageView.setLayoutParams(layoutParams);
}
//按钮是否隐藏
@Override
public void onPageSelected(int arg0) {
// TODO Auto-generated method stub
if (arg0==image.length-1) {
button.setVisibility(View.VISIBLE);
} else {
button.setVisibility(View.GONE);
}
}

});
//调用自定义ViewPage切换动画
vp.setPageTransformer(true, new DepthPageTransformer());
}

/**
* 用于初始化相关控件的方法
*/
private void initView() {
imageView=(ImageView)findViewById(R.id.iv);
linearLayout = (LinearLayout) findViewById(R.id.ll);
button=(Button)findViewById(R.id.button);
vp = (ViewPager) findViewById(R.id.vp);
imagelist = new ArrayList<ImageView>();
}
}博主注释得很清楚了呢，不多说了哦。