ViewPaper实现首次进入软件时左右滑屏的软件展示效果

效果如图:

ViewPaper实现首次进入软件时左右滑屏的软件展示效果_第1张图片

ViewPaper实现首次进入软件时左右滑屏的软件展示效果_第2张图片

ViewPaper实现首次进入软件时左右滑屏的软件展示效果_第3张图片

图片资源不再提供,大家可以自己下载,能实现效果即可,看代码:

首先是展示界面的layout:

view.xml

注意,采用的是帧布局,页面切换时的小圆点是在各张图片之上的

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" />

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <LinearLayout
            android:id="@+id/viewGroup"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="30dp"
            android:gravity="center_horizontal"
            android:orientation="horizontal" >
        </LinearLayout>
    </RelativeLayout>

</FrameLayout>

然后是viewPaper中所包含的各个item,这些是在代码中动态添加,每个item中都包含一张图片,在这里我用了4张图片

item1.xml

<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <ImageView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="@drawable/show1" >
    </ImageView>

</LinearLayout>

item2.xml和item3.xml与1相同,换张图片即可

最后是item4.xml,这个与前三个稍显不同,大家都知道,在最后一张图片展示完后,会出现一个"开始体验",“立即进入”等等的控件,点击之后就进入主界面了,这个我们同样需采用帧布局

<?xml version="1.0" encoding="UTF-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <ImageView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="@drawable/show4" >
    </ImageView>
      
    <RelativeLayout 
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        >
    <ImageView
        android:id="@+id/go"
        android:layout_alignParentBottom="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="60dp"
        android:src="@drawable/go" />
</RelativeLayout>
</FrameLayout>

接着就是java代码了

ViewActivity.java

package com.example.viewpaper;


import java.util.ArrayList;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.os.Parcelable;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.KeyEvent;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.view.ViewGroup.LayoutParams;
import android.view.Window;
import android.widget.ImageButton;
import android.widget.ImageView;
import android.widget.LinearLayout;

public class ViewActivity extends Activity {
	ViewPager viewPager;
	ArrayList<View> list;
	ViewGroup main, group;
	ImageView imageView;
	ImageView[] imageViews;
	LinearLayout go;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		this.requestWindowFeature(Window.FEATURE_NO_TITLE);
		LayoutInflater inflater = getLayoutInflater();
		list = new ArrayList<View>();
		list.add(inflater.inflate(R.layout.item1, null));
		list.add(inflater.inflate(R.layout.item2, null));
		list.add(inflater.inflate(R.layout.item3, null));
		//为item4中的控件添加监听
		View v = (View)inflater.inflate(R.layout.item4, null);
		ImageView go=(ImageView)v.findViewById(R.id.go);
		go.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View arg0) {
				Intent intent =new Intent();
				intent.setClass(ViewActivity.this, MainActivity.class);
				startActivity(intent);
				finish();
			}
		});
		list.add(v);
		imageViews = new ImageView[list.size()];
		ViewGroup main = (ViewGroup) inflater.inflate(R.layout.view, null);
		// group是R.layou.main中的负责包裹小圆点的LinearLayout.
		ViewGroup group = (ViewGroup) main.findViewById(R.id.viewGroup);

		viewPager = (ViewPager) main.findViewById(R.id.viewPager);
		
		for (int i = 0; i < list.size(); i++) {
			imageView = new ImageView(ViewActivity.this);
			imageView.setLayoutParams(new LayoutParams(10,10));
			imageView.setPadding(10, 0, 10, 0);
			imageViews[i] = imageView;
			if (i == 0) {
				// 默认进入程序后第一张图片被选中;
				imageViews[i].setBackgroundResource(R.drawable.dot_white);
			} else {
				imageViews[i].setBackgroundResource(R.drawable.dot_black);
			}
			group.addView(imageView);
		}
		setContentView(main);
		viewPager.setAdapter(new MyAdapter());
		viewPager.setOnPageChangeListener(new MyListener());
	}
	class MyAdapter extends PagerAdapter {
		@Override
		public int getCount() {
			return list.size();
		}
		@Override
		public boolean isViewFromObject(View arg0, Object arg1) {
			return arg0 == arg1;
		}
		@Override
		public int getItemPosition(Object object) {
			return super.getItemPosition(object);
		}
		@Override
		public void destroyItem(View arg0, int arg1, Object arg2) {
			((ViewPager) arg0).removeView(list.get(arg1));
		}
		@Override
		public Object instantiateItem(View arg0, int arg1) {
			((ViewPager) arg0).addView(list.get(arg1));
			return list.get(arg1);
		}
		@Override
		public void restoreState(Parcelable arg0, ClassLoader arg1) {

		}
		@Override
		public Parcelable saveState() {
			return null;
		}
		@Override
		public void startUpdate(View arg0) {
		}
		@Override
		public void finishUpdate(View arg0) {
		}
	}
	class MyListener implements OnPageChangeListener {
		@Override
		public void onPageScrollStateChanged(int arg0) {
		}
		@Override
		public void onPageScrolled(int arg0, float arg1, int arg2) {
		}
		@Override
		public void onPageSelected(int arg0) {
			for (int i = 0; i < imageViews.length; i++) {
				imageViews[arg0]
						.setBackgroundResource(R.drawable.dot_white);
				if (arg0 != i) {
					imageViews[i]
							.setBackgroundResource(R.drawable.dot_black);
				}
			}
		}
	}
	//按下返回键则跳过软件展示页面直接进入主界面
	@Override  
	public boolean onKeyDown(int keyCode, KeyEvent event) {
		if (keyCode == KeyEvent.KEYCODE_BACK) {
			Intent intent =new Intent();
			intent.setClass(ViewActivity.this, MainActivity.class);
			startActivity(intent);
			finish();
		}
		return false;
	}
}

在最后一个界面点击小飞机,即进入主界面,主界面MainActivity及layout不再贴代码了,大家可以自由写了。。。







你可能感兴趣的:(界面,ViewPaper)