Android学习之加圆点引导页的实现

今天周六，在家好好码代码。。。。。

今天实现的是界面优化的一个简单功能：加圆点的引导页的实现

虽然简单，不过步骤我们还是一步一步来吧

第一步：实现几个View之间的左右滑动，我这次用了四个View（ViewPager）

以下是我的Guide 的布局页面：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    
    <android.support.v4.view.ViewPager
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:id="@+id/viewpager">
        
    </android.support.v4.view.ViewPager>

</RelativeLayout>

然后就是实现Guide里面的代码：

package com.oysd.myviewpager;

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

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 Guide extends Activity implements OnPageChangeListener {
    
    private ViewPager vp;
    private ViewPagerAdapter vpAdapter;
    private List<View> views;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_guide);
        initView();
    }
    
    /**
     * 初始化View
     */
    private void initView(){
        LayoutInflater inflater = LayoutInflater.from(this);
        views = new ArrayList<View>();
                // 添加四个View
        views.add(inflater.inflate(R.layout.one, null));
        views.add(inflater.inflate(R.layout.two, null));
        views.add(inflater.inflate(R.layout.three, null));
        views.add(inflater.inflate(R.layout.four, null));
        
        vpAdapter = new ViewPagerAdapter(views, this);
        vp = (ViewPager) findViewById(R.id.viewpager);
        vp.setAdapter(vpAdapter);//将vpAdapter 与vp控件绑定
    }
}

以上需要自己手动再次创四个布局文件one.xml two.xml  three.xml  four.xml

我这里就给出前面三个的其中一个吧，其他三个只是src的图片不一样而已:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    
    <ImageView 
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="@drawable/one"/>

</LinearLayout>

以下是第四个four.xml的布局文件，多了一个进入 的按钮：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
    <ImageView 
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="@drawable/four"/>
    
    <LinearLayout 
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal">
        
        <Button 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/btnStart"
            android:text="进入"/>
        
    </LinearLayout>

</RelativeLayout>

这里面需要自己实现ViewPagerAdapter,以下是实现代码：

package com.oysd.myviewpager;

import java.util.List;

import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;

public class ViewPagerAdapter extends PagerAdapter {

    private List<View> views;
    private Context context;
    
    public ViewPagerAdapter(List<View> views , Context context) {
        this.views = views;
        this.context = context;
    }
    
    @Override
    public void destroyItem(View container, int position, Object object) {
        ((ViewPager)container).removeView(views.get(position));
    }
    
    @Override
    public Object instantiateItem(View container, int position) {
        // TODO Auto-generated method stub
        ((ViewPager) container).addView(views.get(position));
        
        return views.get(position);
    }
    
    @Override
    public int getCount() {
        // TODO Auto-generated method stub
        return views.size();
    }

    @Override
    public boolean isViewFromObject(View arg0, Object arg1) {
        // TODO Auto-generated method stub
        return arg0 == arg1;
    }

}

这个Adapter的实现不外乎就是实现这个方法：getCount、isViewFromObject、destroyItem、instantiateItem
和View中的Adapter其实差不多:

getCount()：返回的是数据源对象的个数，即列表项数

Object　getItem(int position)：返回指定位置position上的列表

 long　getItemId(int position)：返回指定位置处的行ＩＤ

 View getView()：返回列表项对应的视图

好了，废话先不多说了，第一步的视图之间的滑动基本上完成了

第二步：添加圆点，来标识一下当前view以及view的总过数量，以及在最后一个View上面添加一个进入主页面的按钮

在Guide的原先布局下进行改动，改动之后的布局文件是（完整的）：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    
    <android.support.v4.view.ViewPager
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:id="@+id/viewpager">
        
    </android.support.v4.view.ViewPager>
    
    <LinearLayout 
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/ll"
        android:orientation="horizontal"
        android:gravity="center_horizontal"
        android:layout_alignParentBottom="true">
        
        <ImageView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/iv1"
            android:src="@drawable/white_dot"/>
        <ImageView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/iv2"
            android:src="@drawable/dark_dot"/>
        <ImageView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/iv3"
            android:src="@drawable/dark_dot"/>
        <ImageView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/iv4"
            android:src="@drawable/dark_dot"/>
    </LinearLayout>

</RelativeLayout>

然后Guide的改动，改动之后的代码如下：

package com.oysd.myviewpager;

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

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 Guide extends Activity implements OnPageChangeListener {
    
    private ViewPager vp;
    private ViewPagerAdapter vpAdapter;
    private List<View> views;
    private Button btnStart;
    private ImageView dots[];
    private int ids[] = {R.id.iv1,
                         R.id.iv2,
                         R.id.iv3,
                         R.id.iv4};
    
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_guide);
        initView();
        initDots();
    }
    
    /**
     * 初始化View
     */
    private void initView(){
        LayoutInflater inflater = LayoutInflater.from(this);
        views = new ArrayList<View>();
        views.add(inflater.inflate(R.layout.one, null));
        views.add(inflater.inflate(R.layout.two, null));
        views.add(inflater.inflate(R.layout.three, null));
        views.add(inflater.inflate(R.layout.four, null));
        
        vpAdapter = new ViewPagerAdapter(views, this);
        btnStart = (Button) views.get(3).findViewById(R.id.btnStart);
        btnStart.setOnClickListener(new OnClickListener() {
            
            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                Intent intent = new Intent(Guide.this , MainActivity.class);
                startActivity(intent);
                finish();
            }
        });
        
        vp = (ViewPager) findViewById(R.id.viewpager);
        vp.setAdapter(vpAdapter);//将vpAdapter 与vp控件绑定
        vp.setOnPageChangeListener(this);//添加回调
    }
    
    /**
     * 初始化小圆点控件
     */
    private void initDots(){
        
        dots = new ImageView[views.size()];
        for(int i = 0 ; i < ids.length ; i++){
            dots[i] = (ImageView) findViewById(ids[i]);
        }
        
    }

    /**
     * 当滑动状态被改变的时候调用
     */
    @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
        for(int i = 0 ; i < ids.length ; i++){
            //当此页面被选择的时候，将小圆点设置成亮点（white_dot）
            //其他小圆点设置成黑点
            if(arg0 == i){
                dots[i].setImageResource(R.drawable.white_dot);
            }else{
                dots[i].setImageResource(R.drawable.dark_dot);
            }
        }
    }
}

到这里，圆点以及进入按钮的添加也基本上完成了。

第三步：实现判断用户是否是第一次进入手机应用，如果是第一次跳转到引导页面，如果不是，直接跳转到主页面

额外添加一个Welcome 的Activity,以下是布局文件（仅仅是用一个ImageView来显示以下图片）：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    
    <ImageView 
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:src="@drawable/welcome"/>
</LinearLayout>

然后就是实现Welcom里面的代码了：

package com.oysd.myviewpager;

import android.app.Activity;
import android.content.Intent;
import android.content.SharedPreferences;
import android.content.SharedPreferences.Editor;
import android.os.Bundle;
import android.os.Handler;

public class Welcome extends Activity {
    
    private static final int TIME = 2000;//设置跳转的延迟时间
    private static final int GO_HOME = 1000;//设置跳转到主页面的识别代码
    private static final int GO_GUIDE = 1001;//设置跳转到引导页面的识别代码
    private boolean isFirstIn = false;//判断用户是否是第一次进入
    
    private Handler mHandler = new Handler(){
        
        public void handleMessage(android.os.Message msg) {
            
            switch(msg.what){
            case GO_HOME:
                goHome();
                break;
            case GO_GUIDE:
                goGuide();
                break;
            }
        };
    };
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_welcome);
        init();
    }
    
    private void init(){
        
        SharedPreferences preferences = getSharedPreferences("oy", MODE_PRIVATE);
        isFirstIn = preferences.getBoolean("flag", true);
        if(!isFirstIn){
            mHandler.sendEmptyMessageDelayed(GO_HOME, TIME);
        }else{
            mHandler.sendEmptyMessageDelayed(GO_GUIDE, TIME);
            Editor editor = preferences.edit();//给予修改的权限
            editor.putBoolean("flag", false);//修改isFirstIn的值
            editor.commit();//修改完之后进行提交
            
        }
    }
    /**
     * 执行跳转到主页面
     */
    private void goHome(){
        Intent intent = new Intent(Welcome.this , MainActivity.class);
        startActivity(intent);
        finish();
    }
    
    /**
     * 执行跳转到引导页面
     */
    private void goGuide(){
        Intent intent = new Intent(Welcome.this , Guide.class);
        startActivity(intent);
        finish();
    }

}

到这里，这个小功能也成功完成了。

以下附上AndroidMainifest.xml文件：

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.oysd.myviewpager"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="14"
        android:targetSdkVersion="14" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name=".MainActivity"
            android:label="@string/app_name" >
            
        </activity>
        <activity
            android:name="com.oysd.myviewpager.Guide"
            android:theme="@android:style/Theme.NoTitleBar.Fullscreen">
              
        </activity>
        <activity 
            android:name="com.oysd.myviewpager.Welcome"
            android:theme="@android:style/Theme.NoTitleBar.Fullscreen">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter> 
        </activity>
    </application>

</manifest>

简单也要坚持。。。。。