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里,本人试了一下不是太好用,如果功能要求不是特别多,上述做法还是挺简单的。。。。

收藏 (0)
评论列表
正在载入评论列表...
我是有底线的
为您推荐
    暂时没有数据