android实现欢迎界面效果

现在许多流行的软件中都有欢迎界面，今天就介绍一下欢迎界面的制作，由于界面涉及到页面的滑动，因此要采用ViewPager，sdk在4.0一下的都要引入“android-support-v4.jar”这个包。

第一步：main.xml设计，其中ViewPager为多页显示控件，其中button是为了在最后一页显示开始按钮，其中android:visibility="invisible"是保证在其他页面不显示button，只有在最后一页才显示button,下面的linearlayout里的image是圆点展示当前页状态和总页数：

<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/guide_viewpager"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_gravity="center" >
   </android.support.v4.view.ViewPager>    
   <Button
     android:text="开始体验"
     android:id="@+id/startButton"      
        android:layout_marginBottom="50dp"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:layout_gravity="bottom|center_horizontal"
     android:visibility="invisible">
   </Button>  
   <LinearLayout
           android:layout_width="fill_parent"
           android:layout_height="wrap_content"
           android:layout_gravity="bottom"
        android:layout_marginBottom="30dp"
        android:gravity="center_horizontal"     >

<ImageView
            android:id="@+id/page0"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"              
         android:scaleType="matrix"
         android:src="@drawable/page_now" />
           <ImageView
            android:id="@+id/page1"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_marginLeft="10dp"              
         android:scaleType="matrix"
         android:src="@drawable/page" />
           <ImageView
            android:id="@+id/page2"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_marginLeft="10dp"                
         android:scaleType="matrix"
         android:src="@drawable/page" />
       </LinearLayout>

</FrameLayout>

第二步：创建MyPagerAdapter 继承PagerAdapter这个适配器比较简单，如下：

package com.crtk.adapter;

import java.util.ArrayList;

import android.R;
import android.os.Parcelable;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
public class PageviewAdapter extends PagerAdapter{
private ArrayList<View> views;

public PageviewAdapter(ArrayList<View> views){
 this.views = views;

}
//页面view
public Object instantiateItem(View container, int position) {
 ((ViewPager)container).addView(views.get(position));

return views.get(position);
}

@Override
public int getCount() {
 return this.views.size();
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
 return arg0 == arg1;
}
public void destroyItem(View container, int position, Object object) {
 ((ViewPager)container).removeView(views.get(position));
}
@Override
public void finishUpdate(View arg0) {
 // TODO Auto-generated method stub

}
@Override
public void restoreState(Parcelable arg0, ClassLoader arg1) {
 // TODO Auto-generated method stub

}
@Override
public Parcelable saveState() {
 // TODO Auto-generated method stub
 return null;
}
@Override
public void startUpdate(View arg0) {
 // TODO Auto-generated method stub

}
}

第三步：写Activity，如下：

package com.crtk.main;

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

import com.crtk.adapter.PageviewAdapter;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ImageView;

public class GuideActivity extends Activity implements OnPageChangeListener{

static final int PAGE_NUM = 3;//欢迎界面共3页
private ArrayList<View> views;//保存viewpager的各个view
private ViewPager viewPager;
private LayoutInflater inflater;
private ImageView []dots; //小点数组

private Intent intent ;
   private Button startButton;

/** Called when the activity is first created. */
   @Override
   public void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.guide);
       inflater = LayoutInflater.from(this);  

intent = new Intent(GuideActivity.this, MainActivity.class);
       //初始化page
       initPage();
       //初始化小点。。。
       initDots();

}
   private void initPage(){    

views = new ArrayList<View>();

//guide_01,guide_02，guide_03 为3个欢迎页面，将其加入views数组中
        views.add(inflater.inflate(R.layout.guide_01, null));
        views.add(inflater.inflate(R.layout.guide_02, null));
        views.add(inflater.inflate(R.layout.guide_03, null));

PageviewAdapter pageAdapter = new PageviewAdapter(views);
        viewPager = (ViewPager)findViewById(R.id.guide_viewpager);
       //绑定adapter
viewPager.setAdapter(pageAdapter);

//重要！！！绑定pageseleted等函数
        viewPager.setOnPageChangeListener(this);

//绑定开始键，开始使用，只有在最后一页button才能显示
        startButton = (Button)findViewById(R.id.startButton);

startButton.setOnClickListener(new  OnClickListener(){

@Override
  public void onClick(View arg0) {
   // TODO Auto-generated method stub
   GuideActivity.this.startActivity(intent); //跳转activity
   GuideActivity.this.finish();
  }

});

}
   private void initDots(){
    dots = new ImageView[3];//底部小圆点数组
    //View guidePage = (View)findViewById();
    dots[0] = (ImageView) findViewById(R.id.page0);
    dots[1] = (ImageView) findViewById(R.id.page1);
    dots[2] = (ImageView) findViewById(R.id.page2);

}

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

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

}
@Override
public void onPageSelected(int arg0) {
 // TODO Auto-generated method stub
 System.out.println("the page now is " + arg0);

dots[arg0].setImageDrawable(getResources().getDrawable(R.drawable.page_now));
//选中的页面设置小圆点为亮点，其余的都为暗点
 for (int i = 0; i < 3 ;i ++)
 {
  if (i == arg0) {continue;}
  else
  {
   dots[i].setImageDrawable(getResources().getDrawable(R.drawable.page));

}
 }

//如果切换到最后一页，显示开始button，其余的都隐藏
 if(arg0 == PAGE_NUM -1)
 {
  startButton.setVisibility(View.VISIBLE);//.setVisibility();
 }
}
}

其他：上述只是简单实现了欢迎界面，有的blog里建议最后一页的开始button放在viewpager里，本人试了一下不是太好用，如果功能要求不是特别多，上述做法还是挺简单的。

来源：https://blog.csdn.net/zhao123h/article/details/10162807