效果如图:
图片资源不再提供,大家可以自己下载,能实现效果即可,看代码:
首先是展示界面的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不再贴代码了,大家可以自由写了。。。