android IM应用学习之导航页面viewpager的学习(一)

经常看到很多应用在第一次打开时，出现很多可以滑动的导航图片，顿时把应用弄的高大上了，同时微信的主界面也能通过左右滑动切换，

也把应用打造得十分有趣，所以今天也学习这个功能的具体实现方式。

在android 中有个控件为viewpager,其具体用法如下：(参考http://blog.csdn.net/wangjinyu501/article/details/8169924)

利用viewpager可以做应用导航，和页面菜单，这些在平常使用应用时已经有了体验，类似于使用listview，我们需要一个adapter来对其进行

布局设计。

接下来我们用一个demo来学习如何使用viewpager制作页面导航。

首先是在xml中进行布局的设计，代码如下：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"             android:layout_width="match_parent"             android:layout_height="match_parent"             android:orientation="vertical" >    <!--现在使用viewpager-->    <android.support.v4.view.ViewPager        android:id="@+id/viewpager"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center">        <!--为viewpager增加手势滑动效果-->        <android.support.v4.view.PagerTitleStrip            android:id="@+id/pagertitle"            android:layout_height="0dp"            android:layout_width="wrap_content"            android:layout_gravity="bottom"            android:background="#0000"            android:textColar="#fff"/>    </android.support.v4.view.ViewPager>    <!--为viewpager的页面设置编号-->    <LinearLayout            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_gravity="bottom"            android:gravity="center"            android:orientation="horizontal"            android:layout_marginBottom="30dp"            >        <!--viewpager编号的样式-->        <!--这里再学习一下android:scaleType        其具体有如下的用法：        android:scaleType="center"        以原图的几何中心点和ImagView的几何中心点为基准,按图片的原来size居中显示，不缩放，        当图片长/宽超过View的长/宽，则截取图片的居中部分显示ImageView的size.当图片小于View        的长宽时，只显示图片的size,不剪裁。        android:scaleType="centerCrop"        以原图的几何中心点和ImagView的几何中心点为基准,按比例扩大(图片小于View的宽时)图片的        size居中显示，使得图片长 (宽)等于或大于View的长(宽),并按View的大小截取图片。当原图        的size大于ImageView时，按比例缩小图片，使得长宽中有一向等于ImageView,另一向大于        ImageView。实际上，使得原图的size大于等于ImageView的长(宽)。        android:scaleType="centerInside"        以原图的几何中心点和ImagView的几何中心点为基准，将图片的内容完整居中显示，通过按比例        缩小原来的size使得图片长(宽)等于或小于ImageView的长(宽)。        android:scaleType="fitCenter" 把图片按比例扩大(缩小)到View的宽度，居中显示        android:scaleType="fitEnd" 把图片按比例扩大(缩小)到View的宽度，显示在View的下部分位置        android:scaleType="fitStart" 把图片按比例扩大(缩小)到View的宽度，显示在View的上部分位置        android:scaleType="fitXY" 把图片按照指定的大小在View中显示，拉伸显示图片，不保持原比例，填满View.        android:scaleType="matrix" 用matrix来绘制（默认）。        -->        <ImageView                android:id="@+id/page0"                android:layout_width="30dp"                android:layout_height="30dp"                android:scaleType="matrix"                android:src="@drawable/page_now"/>        <ImageView                android:id="@+id/page1"                android:layout_width="30dp"                android:layout_height="30dp"                android:scaleType="matrix"                android:src="@drawable/page"/>        <ImageView                android:id="@+id/page2"                android:layout_width="30dp"                android:layout_height="30dp"                android:scaleType="matrix"                android:src="@drawable/page"/>        <ImageView                android:id="@+id/page3"                android:layout_width="30dp"                android:layout_height="30dp"                android:scaleType="matrix"                android:src="@drawable/page"/>    </LinearLayout>        <LinearLayout                android:layout_width="match_parent"                android:layout_height="match_parent"                android:orientation="horizontal" >                <ImageView                    android:id="@+id/page_now"                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:layout_gravity="bottom"                    android:layout_marginBottom="30dp"                    android:layout_marginLeft="20dp"                    android:scaleType="matrix"                    />        </LinearLayout>    <Button            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="跳过向导，直接进入"            android:background="@drawable/button_bg"            android:layout_gravity="right"

<span style="white-space:pre"></span>    android:onClick="startbutton"            android:textSize="12sp"/></FrameLayout>

效果图为：

 在设置好viewpager后，我们还需要对viewpager的4个view进行设置，下面分别给出这4个view的布局

view1:

<?xml version="1.0" encoding="UTF-8"?>    <RelativeLayout  xmlns:android="http://schemas.android.com/apk/res/android"      android:background="@drawable/w01"      android:layout_width="fill_parent"      android:layout_height="fill_parent"  >          <TextView              android:layout_width="wrap_content"              android:layout_height="wrap_content"              android:layout_alignParentBottom="true"              android:layout_centerHorizontal="true"              android:layout_marginBottom="89dp"              android:text="第一页"              android:textColor="#fff"                            android:textSize="18sp" />      </RelativeLayout>

view2:

<?xml version="1.0" encoding="UTF-8"?>    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"        android:layout_width="fill_parent"        android:layout_height="fill_parent"        android:background="@drawable/w02">                <TextView              android:layout_width="wrap_content"              android:layout_height="wrap_content"              android:layout_alignParentTop="true"              android:layout_centerHorizontal="true"              android:layout_marginTop="96dp"              android:text="第二页"              android:textColor="#fff"               android:gravity="center_horizontal"                           android:textSize="18sp" />    </RelativeLayout>

view3:

<?xml version="1.0" encoding="UTF-8"?>    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"        android:layout_width="fill_parent"        android:layout_height="fill_parent"        android:background="@drawable/w03">                <TextView              android:layout_width="wrap_content"              android:layout_height="wrap_content"              android:layout_alignParentTop="true"              android:layout_centerHorizontal="true"              android:layout_marginTop="96dp"              android:text="第三页"              android:textColor="#fff"               android:gravity="center_horizontal"                           android:textSize="18sp" />    </RelativeLayout>

<?xml version="1.0" encoding="UTF-8"?>    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"        android:layout_width="fill_parent"        android:layout_height="fill_parent"        android:background="@drawable/w01">                <Button              android:id="@+id/startBtn"              android:layout_width="wrap_content"              android:layout_height="wrap_content"              android:layout_alignParentBottom="true"              android:layout_centerHorizontal="true"              android:layout_marginBottom="98dp"              android:text="开始体验"              android:textSize="18sp"              android:textColor="#fff"              android:background="@drawable/button_bg"                android:layout_gravity="center_vertical"  android:onClick="startbutton"              />                    </RelativeLayout>

这是其中一幅view的效果图：

最后，上在activity中的代码

<pre name="code" class="java">package cn.buaa.myweixin;import android.app.Activity;import android.content.Intent;import android.os.Bundle;import android.support.v4.view.PagerAdapter;import android.support.v4.view.ViewPager;import android.view.LayoutInflater;import android.view.View;import android.view.animation.Animation;import android.view.animation.TranslateAnimation;import android.widget.ImageView;import cn.buaa.myweixin.R;import java.util.ArrayList;public class MainActivity extends Activity {    private ViewPager mViewPager;    private ImageView mPageImg;    private int currIndex = 0;    private ImageView mPage0;    private ImageView mPage1;    private ImageView mPage2;    private ImageView mPage3;    @Override    public void onCreate(Bundle savedInstanceState) {        //定义好MainActivity的显示布局        super.onCreate(savedInstanceState);        setContentView(R.layout.myviewpager);        mViewPager = (ViewPager)findViewById(R.id.viewpager);        mViewPager.setOnPageChangeListener(new MyOnPageChangeListener());        //定义4个导航页面的imageview        mPage0 = (ImageView)findViewById(R.id.page0);        mPage1 = (ImageView)findViewById(R.id.page1);        mPage2 = (ImageView)findViewById(R.id.page2);        mPage3 = (ImageView)findViewById(R.id.page3);        //找到导航页面的布局        LayoutInflater mLi = LayoutInflater.from(this);        View view1 = mLi.inflate(R.layout.view1, null);        View view2 = mLi.inflate(R.layout.view2, null);        View view3 = mLi.inflate(R.layout.view3, null);        View view4 = mLi.inflate(R.layout.view4, null);        //定义一个子元素为view的list        final ArrayList<View> views = new ArrayList<View>();        views.add(view1);        views.add(view2);        views.add(view3);        views.add(view4);        final ArrayList<String> titles = new ArrayList<String>();        titles.add("1");        titles.add("2");        titles.add("3");        titles.add("4");        //viewpager的adapter        PagerAdapter mPagerAdapter = new PagerAdapter() {            @Override            public boolean isViewFromObject(View arg0, Object arg1) {                return arg0 == arg1;            }            @Override            public int getCount() {                return views.size();            }            @Override            public void destroyItem(View container, int position, Object object) {                ((ViewPager)container).removeView(views.get(position));            }            @Override            public CharSequence getPageTitle(int position) {                return titles.get(position);            }            @Override            public Object instantiateItem(View container, int position) {                ((ViewPager)container).addView(views.get(position));                return views.get(position);            }        };        mViewPager.setAdapter(mPagerAdapter);    }    public class MyOnPageChangeListener implements ViewPager.OnPageChangeListener {        @Override        public void onPageSelected(int arg0) {            Animation animation = null;            switch (arg0) {                case 0:                    mPage0.setImageDrawable(getResources().getDrawable(R.drawable.page_now));                    mPage1.setImageDrawable(getResources().getDrawable(R.drawable.page));                    if (currIndex == arg0+1) {                        animation = new TranslateAnimation(20*(arg0+1), 20*arg0, 0, 0);                    }                    break;                case 1:                    mPage1.setImageDrawable(getResources().getDrawable(R.drawable.page_now));                    mPage0.setImageDrawable(getResources().getDrawable(R.drawable.page));                    mPage2.setImageDrawable(getResources().getDrawable(R.drawable.page));                    if (currIndex == arg0-1) {                        animation = new TranslateAnimation(20*(arg0-1), 20*arg0, 0, 0);                    } else if (currIndex == arg0+1) {                        animation = new TranslateAnimation(20*(arg0+1), 20*arg0, 0, 0);                    }                    break;                case 2:                    mPage2.setImageDrawable(getResources().getDrawable(R.drawable.page_now));                    mPage1.setImageDrawable(getResources().getDrawable(R.drawable.page));                    mPage3.setImageDrawable(getResources().getDrawable(R.drawable.page));                    if (currIndex == arg0-1) {                        animation = new TranslateAnimation(20*(arg0-1), 20*arg0, 0, 0);                    } else if (currIndex == arg0+1) {                        animation = new TranslateAnimation(20*(arg0+1), 20*arg0, 0, 0);                    }                    break;                case 3:                    mPage3.setImageDrawable(getResources().getDrawable(R.drawable.page_now));                    mPage2.setImageDrawable(getResources().getDrawable(R.drawable.page));                    if (currIndex == arg0-1) {                        animation = new TranslateAnimation(20*(arg0-1), 20*arg0, 0, 0);                    } else if (currIndex == arg0+1) {                        animation = new TranslateAnimation(20*(arg0+1), 20*arg0, 0, 0);                    }                    break;            }            currIndex = arg0;            animation.setFillAfter(true);            animation.setDuration(300);        }        @Override        public void onPageScrolled(int arg0, float arg1, int arg2) {        }        @Override        public void onPageScrollStateChanged(int arg0) {        }    }    public void startbutton(View v) {//        Intent intent = new Intent();//        intent.setClass(MainActivity.this,Next.class);//        startActivity(intent);//        this.finish();    }}

这样就完成了导航页面的功能。