Android节点引导页简单实现

Android引导视图简单实现

主要涉及到的API：

1. android.support.v4.view.ViewPager;
截取官方文档描述如下：
    Layout manager that allows the user to flip left and right through pages of data. You supply an implementation of a PagerAdapter to generate the pages that the view shows.
    大概的意思就是该布局管理器允许用户通过左右滑动来改变页面到内容。使用这个布局管理器需要实现一个用来生成显示页面的接口 PageAdapter。具体详细内容，大家可以看看官方文档。

下面直接上代码

Xml代码：

1.page_now.xml 生成当前的节点图形

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="oval"
    >
   <size android:width="10dp"
       android:height="10dp"/>
    <solid android:color="#1E90FF"/>
</shape>

2.page.xml 用来生成非当前节点样式

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="oval">
    <size android:width="10dp"
        android:height="10dp"/>
    <solid android:color="#B0C4DE"/>
</shape>

3.main.xml 主界面UI文件

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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:id="@+id/welcomAct_whatsnew_viewpager"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center" >

    </android.support.v4.view.ViewPager>

    <LinearLayout
        android:id="@+id/welcomAct_LinearLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:layout_marginBottom="@dimen/linearLayout_marginBottom"
        android:gravity="center_horizontal" >

    <Space
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    </LinearLayout>

</FrameLayout>

5.whats_news_gallery_xxxx.xml 分页内容大致相同，大家可自由设计

<?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" >

    <TextView 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="100dp"
        android:text="第五页欢迎界面"
        android:gravity="center"/>
</LinearLayout>

Java代码

1.WelcomeActivity_PageAdapter.java 这个就是要实现PageAdapter接口到类，用来提供要显示到内容

package com.example.douguofood.view.adapter;

import java.util.ArrayList;

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

public class WelcomActivity_PagerAdapter extends PagerAdapter {

    private ArrayList<View> views;

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

    @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 CharSequence getPageTitle(int position) {
        return null;
    }

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

}

2.WelcomeActivity.java 主界面代码

package com.example.douguofood.activity;

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

import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.Log;
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.Button;
import android.widget.ImageView;
import android.widget.ImageView.ScaleType;
import android.widget.LinearLayout;

import com.example.douguofood.R;
import com.example.douguofood.view.adapter.WelcomActivity_PagerAdapter;

public class WellcomeActivity extends Activity {

    // 翻页控件
    private ViewPager mViewPager;
    // 存放导航节点的容器
    private ViewGroup viewGroup;
    // 存放导航节点
    private List<ImageView> imageViews;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // 去掉标题栏，全屏显示
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        mViewPager = (ViewPager) findViewById(R.id.welcomAct_whatsnew_viewpager);
        mViewPager.setOnPageChangeListener(new MyOnPageChangerListener());

        // 这里是每一页要显示的布局，根据应用需要和特点自由设计显示到内容，以及要显示多少页等
        LayoutInflater mli = LayoutInflater.from(this);
        View view1 = mli.inflate(R.layout.whats_news_gallery_one, null);
        View view2 = mli.inflate(R.layout.whats_news_gallery_two, null);
        View view3 = mli.inflate(R.layout.whats_news_gallery_three, null);
        View view4 = mli.inflate(R.layout.whats_news_gallery_four, null);
        View view5 = mli.inflate(R.layout.whats_news_gallery_five, null);
        View view6 = mli.inflate(R.layout.whats_news_gallery_six, null);
        View view7 = mli.inflate(R.layout.whats_news_gallery_seven, null);
        /*
         * 这里可以将每页显示到View 存放到Arrayist集合中 可以在ViewPager适配器中顺序调用展示
         */
        final ArrayList<View> views = new ArrayList<View>();
        views.add(view1);
        views.add(view2);
        views.add(view3);
        views.add(view4);
        views.add(view5);
        views.add(view6);
        views.add(view7);

        //构建一个用来保存ImageView控件引用的集合
        imageViews = new ArrayList<ImageView>();

        viewGroup = (ViewGroup) findViewById(R.id.welcomAct_LinearLayout);

        for (int i = 0,length=views.size(); i <length ; i++) {
            ImageView imageView = new ImageView(this);
            LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
            layoutParams.setMargins(15, 0, 0, 0);
            imageView.setLayoutParams(layoutParams);
            imageView.setScaleType(ScaleType.MATRIX);
            imageView.setImageDrawable(getResources().getDrawable(i==0?R.drawable.page_now:R.drawable.page));
            imageView.setOnClickListener(new PageImageClickListener(i));
            imageViews.add(imageView);
            viewGroup.addView(imageView, i);
        }
        Button button = (Button) view7.findViewById(R.id.start);
        button.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                Log.e("VIEWPAGE", "进入应用程序");
                Log.e("VIEWPAGE", WellcomeActivity.this.viewGroup.getChildCount()+"");
            }
        });
        ImageView buttonview = (ImageView) view7.findViewById(R.id.imagebutton);
        buttonview.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                Log.e("VIEWPAGE", "图片被点击");
            }
        });

        // 填充ViewPage适配器
        WelcomActivity_PagerAdapter myPagerAdapter = new WelcomActivity_PagerAdapter(
                views);
        mViewPager.setAdapter(myPagerAdapter);
    }

    private class PageImageClickListener implements OnClickListener {

        private int index;

        public PageImageClickListener(int index) {
            this.index = index;
        }

        @Override
        public void onClick(View v) {
            mViewPager.setCurrentItem(index);
        }

    }

    public class MyOnPageChangerListener implements OnPageChangeListener {

        @Override
        public void onPageScrollStateChanged(int arg0) {

        }

        @Override
        public void onPageScrolled(int arg0, float arg1, int arg2) {

        }

        @Override
        public void onPageSelected(int arg0) {
            // 翻页时当前page，改变当前状态节点图片
            chageImage(arg0);
        }

    }

    private void chageImage(int index){
        for (int i = 0,length=imageViews.size(); i <length ; i++) {
            if (index == i) {
                imageViews.get(index).setImageDrawable(getResources().getDrawable(R.drawable.page_now));
            }else {
                imageViews.get(i).setImageDrawable(getResources().getDrawable(R.drawable.page));
            }
        }
    }
}

清单文件

AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.douguofood"
    android:versionCode="1"
    android:versionName="1.0" >

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

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity android:name="com.example.douguofood.activity.WellcomeActivity"
            android:theme="@android:style/Theme.Light.NoTitleBar.Fullscreen">
            <intent-filter >
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
        </activity>
    </application>

</manifest>

效果图