android–多View切换viewpager – MonkeyDLky – 博客园

网上看到viewpager的多view动画切换,模仿制作了一个  学习到了

先看效果图:

    

先看主类的layout

复制代码

<span style="color: #0000ff;">&lt;</span><span style="color: #800000;">LinearLayout </span><span style="color: #ff0000;">xmlns:android</span><span style="color: #0000ff;">="http://schemas.android.com/apk/res/android"</span><span style="color: #ff0000;"></p><p>    xmlns:tools</span><span style="color: #0000ff;">="http://schemas.android.com/tools"</span><span style="color: #ff0000;"></p><p>    android:layout_width</span><span style="color: #0000ff;">="fill_parent"</span><span style="color: #ff0000;"></p><p>    android:layout_height</span><span style="color: #0000ff;">="fill_parent"</span><span style="color: #ff0000;"></p><p>    android:orientation</span><span style="color: #0000ff;">="vertical"</span><span style="color: #ff0000;"></p><p>    android:background</span><span style="color: #0000ff;">="#222222"</span> <span style="color: #0000ff;">&gt;</span></p><p>    <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">LinearLayout</p><p>        </span><span style="color: #ff0000;">android:layout_width</span><span style="color: #0000ff;">="fill_parent"</span><span style="color: #ff0000;"></p><p>        android:layout_height</span><span style="color: #0000ff;">="wrap_content"</span><span style="color: #ff0000;"></p><p>        android:orientation</span><span style="color: #0000ff;">="horizontal"</span> <span style="color: #0000ff;">&gt;</span></p><p>        <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">TextView </p><p>            </span><span style="color: #ff0000;">android:id</span><span style="color: #0000ff;">="@+id/textView1"</span><span style="color: #ff0000;"></p><p>            android:layout_weight</span><span style="color: #0000ff;">="1"</span><span style="color: #ff0000;"></p><p>            android:layout_width</span><span style="color: #0000ff;">="wrap_content"</span><span style="color: #ff0000;"></p><p>            android:layout_height</span><span style="color: #0000ff;">="50dp"</span><span style="color: #ff0000;"></p><p>            android:background</span><span style="color: #0000ff;">="#999999"</span><span style="color: #ff0000;"></p><p>            android:gravity</span><span style="color: #0000ff;">="center"</span><span style="color: #ff0000;"></p><p>            android:text</span><span style="color: #0000ff;">="页面1"</span><span style="color: #ff0000;"></p><p>            android:textColor</span><span style="color: #0000ff;">="#222222"</span></p><p>            <span style="color: #0000ff;">/&gt;</span></p><p>        <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">TextView </p><p>            </span><span style="color: #ff0000;">android:id</span><span style="color: #0000ff;">="@+id/textView2"</span><span style="color: #ff0000;"></p><p>            android:layout_weight</span><span style="color: #0000ff;">="1"</span><span style="color: #ff0000;"></p><p>            android:layout_width</span><span style="color: #0000ff;">="wrap_content"</span><span style="color: #ff0000;"></p><p>            android:layout_height</span><span style="color: #0000ff;">="50dp"</span><span style="color: #ff0000;"></p><p>            android:background</span><span style="color: #0000ff;">="#999999"</span><span style="color: #ff0000;"></p><p>            android:gravity</span><span style="color: #0000ff;">="center"</span><span style="color: #ff0000;"></p><p>            android:text</span><span style="color: #0000ff;">="页面2"</span><span style="color: #ff0000;"></p><p>            android:textColor</span><span style="color: #0000ff;">="#222222"</span></p><p>            <span style="color: #0000ff;">/&gt;</span></p><p>        <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">TextView</p><p>            </span><span style="color: #ff0000;">android:id</span><span style="color: #0000ff;">="@+id/textView3"</span><span style="color: #ff0000;"></p><p>            android:layout_weight</span><span style="color: #0000ff;">="1"</span><span style="color: #ff0000;"></p><p>            android:layout_width</span><span style="color: #0000ff;">="wrap_content"</span><span style="color: #ff0000;"></p><p>            android:layout_height</span><span style="color: #0000ff;">="50dp"</span><span style="color: #ff0000;"></p><p>            android:background</span><span style="color: #0000ff;">="#999999"</span><span style="color: #ff0000;"></p><p>            android:gravity</span><span style="color: #0000ff;">="center"</span><span style="color: #ff0000;"></p><p>            android:text</span><span style="color: #0000ff;">="页面3"</span><span style="color: #ff0000;"></p><p>            android:textColor</span><span style="color: #0000ff;">="#222222"</span></p><p>            <span style="color: #0000ff;">/&gt;</span></p><p>    <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">LinearLayout</span><span style="color: #0000ff;">&gt;</span></p><p>    <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">ImageView </p><p>        </span><span style="color: #ff0000;">android:id</span><span style="color: #0000ff;">="@+id/cursor"</span><span style="color: #ff0000;"></p><p>        android:layout_width</span><span style="color: #0000ff;">="fill_parent"</span><span style="color: #ff0000;"></p><p>        android:layout_height</span><span style="color: #0000ff;">="wrap_content"</span><span style="color: #ff0000;"></p><p>        android:scaleType</span><span style="color: #0000ff;">="matrix"</span><span style="color: #ff0000;"></p><p>        android:src</span><span style="color: #0000ff;">="@drawable/cursor"</span><span style="color: #ff0000;"></p><p>        android:background</span><span style="color: #0000ff;">="#222222"</span><span style="color: #0000ff;">/&gt;</span></p><p>    <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">android.support.v4.view.ViewPager</p><p>        </span><span style="color: #ff0000;">android:id</span><span style="color: #0000ff;">="@+id/viewPager"</span><span style="color: #ff0000;"></p><p>        android:layout_width</span><span style="color: #0000ff;">="fill_parent"</span><span style="color: #ff0000;"></p><p>        android:layout_height</span><span style="color: #0000ff;">="fill_parent"</span></p><p>        <span style="color: #0000ff;">/&gt;</span></p><p>    </p><p><span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">LinearLayout</span><span style="color: #0000ff;">&gt;</span>

复制代码

 

viewPager需要一个pagerAdapter的子类

复制代码

<span style="color: #0000ff;">package</span><span style="color: #000000;"> com.example.myview;</p><p></span><span style="color: #0000ff;">import</span><span style="color: #000000;"> java.util.List;</p><p></span><span style="color: #0000ff;">import</span><span style="color: #000000;"> android.support.v4.view.PagerAdapter;</p><p></span><span style="color: #0000ff;">import</span><span style="color: #000000;"> android.view.View;</p><p></span><span style="color: #0000ff;">import</span><span style="color: #000000;"> android.support.v4.view.ViewPager;</p><p></span><span style="color: #0000ff;">public</span> <span style="color: #0000ff;">class</span> MyAdapter <span style="color: #0000ff;">extends</span><span style="color: #000000;"> PagerAdapter{</p><p>    List</span>&lt;View&gt;<span style="color: #000000;"> viewLists;</p><p>    </p><p>    </span><span style="color: #0000ff;">public</span> MyAdapter(List&lt;View&gt;<span style="color: #000000;"> lists)</p><p>    {</p><p>        viewLists </span>=<span style="color: #000000;"> lists;</p><p>    }</p><p>    @Override</p><p>    </span><span style="color: #0000ff;">public</span> <span style="color: #0000ff;">int</span><span style="color: #000000;"> getCount() {                                                                 //获得size</p><p>        </span><span style="color: #008000;">//</span><span style="color: #008000;"> TODO Auto-generated method stub</span></p><p>        <span style="color: #0000ff;">return</span><span style="color: #000000;"> viewLists.size();</p><p>    }</p><p>    @Override</p><p>    </span><span style="color: #0000ff;">public</span> <span style="color: #0000ff;">boolean</span><span style="color: #000000;"> isViewFromObject(View arg0, Object arg1) {                         </p><p>        </span><span style="color: #008000;">//</span><span style="color: #008000;"> TODO Auto-generated method stub</span></p><p>        <span style="color: #0000ff;">return</span> arg0 ==<span style="color: #000000;"> arg1;</p><p>    }</p><p>    </p><p>    @Override</p><p>    </span><span style="color: #0000ff;">public</span> <span style="color: #0000ff;">void</span> destroyItem(View view, <span style="color: #0000ff;">int</span><span style="color: #000000;"> position, Object object)                       //销毁Item</p><p>    {</p><p>        ((ViewPager) view).removeView(viewLists.get(position));</p><p>    }</p><p>    </p><p>    @Override</p><p>    </span><span style="color: #0000ff;">public</span> Object instantiateItem(View view, <span style="color: #0000ff;">int</span><span style="color: #000000;"> position)                                //实例化Item</p><p>    {</p><p>        ((ViewPager) view).addView(viewLists.get(position), </span>0<span style="color: #000000;">);</p><p>        </span><span style="color: #0000ff;">return</span><span style="color: #000000;"> viewLists.get(position);</p><p>    }</p><p>    </p><p>}</span>

复制代码

最后Main类

复制代码

<span style="color: #000000;">package com.example.myview;</p><p>import java.util.List;</p><p>import java.util.ArrayList;</p><p>import android.os.Bundle;</p><p>import android.app.Activity;</p><p>import android.view.Menu;</p><p>import android.support.v4.view.ViewPager;</p><p>import android.view.View;</p><p>import android.widget.TextView;</p><p>import android.graphics.Bitmap;</p><p>import android.graphics.BitmapFactory;</p><p>import android.util.DisplayMetrics;</p><p>import android.graphics.Matrix;</p><p>import android.widget.ImageView;</p><p>import android.view.animation.Animation;</p><p>import android.view.animation.TranslateAnimation;</p><p></span><span style="color: #0000ff;">public</span> <span style="color: #0000ff;">class</span><span style="color: #000000;"> MainActivity extends Activity {</p><p>    </span><span style="color: #0000ff;">private</span><span style="color: #000000;"> ViewPager viewPager;</p><p>    </span><span style="color: #0000ff;">private</span><span style="color: #000000;"> ImageView imageView;</p><p>    </span><span style="color: #0000ff;">private</span> List&lt;View&gt; lists = <span style="color: #0000ff;">new</span> ArrayList&lt;View&gt;<span style="color: #000000;">();</p><p>    </span><span style="color: #0000ff;">private</span><span style="color: #000000;"> MyAdapter myAdapter;</p><p>    </span><span style="color: #0000ff;">private</span><span style="color: #000000;"> Bitmap cursor;</p><p>    </span><span style="color: #0000ff;">private</span> <span style="color: #0000ff;">int</span><span style="color: #000000;"> offSet;</p><p>    </span><span style="color: #0000ff;">private</span> <span style="color: #0000ff;">int</span><span style="color: #000000;"> currentItem;</p><p>    </span><span style="color: #0000ff;">private</span> Matrix matrix = <span style="color: #0000ff;">new</span><span style="color: #000000;"> Matrix();</p><p>    </span><span style="color: #0000ff;">private</span> <span style="color: #0000ff;">int</span><span style="color: #000000;"> bmWidth;</p><p>    </span><span style="color: #0000ff;">private</span><span style="color: #000000;"> Animation animation;</p><p>    </span><span style="color: #0000ff;">private</span><span style="color: #000000;"> TextView textView1;</p><p>    </span><span style="color: #0000ff;">private</span><span style="color: #000000;"> TextView textView2;</p><p>    </span><span style="color: #0000ff;">private</span><span style="color: #000000;"> TextView textView3;</p><p>    </p><p>    @Override</p><p>    </span><span style="color: #0000ff;">public</span> <span style="color: #0000ff;">void</span><span style="color: #000000;"> onCreate(Bundle savedInstanceState) {</p><p>        super.onCreate(savedInstanceState);</p><p>        setContentView(R.layout.activity_main);</p><p>        </p><p>        imageView </span>=<span style="color: #000000;"> (ImageView) findViewById (R.id.cursor);</p><p>        textView1 </span>=<span style="color: #000000;"> (TextView) findViewById (R.id.textView1);</p><p>        textView2 </span>=<span style="color: #000000;"> (TextView) findViewById (R.id.textView2);</p><p>        textView3 </span>=<span style="color: #000000;"> (TextView) findViewById (R.id.textView3);</p><p>        </p><p>        lists.add(getLayoutInflater().inflate(R.layout.layout1, </span><span style="color: #0000ff;">null</span><span style="color: #000000;">));</p><p>        lists.add(getLayoutInflater().inflate(R.layout.layout2, </span><span style="color: #0000ff;">null</span><span style="color: #000000;">));</p><p>        lists.add(getLayoutInflater().inflate(R.layout.layout3, </span><span style="color: #0000ff;">null</span><span style="color: #000000;">));</p><p>        </p><p>        initeCursor();</p><p>        </p><p>        myAdapter </span>= <span style="color: #0000ff;">new</span><span style="color: #000000;"> MyAdapter(lists);</p><p>        </p><p>        viewPager </span>=<span style="color: #000000;"> (ViewPager) findViewById (R.id.viewPager);</p><p>        viewPager.setAdapter(myAdapter);</p><p>        viewPager.setOnPageChangeListener(</span><span style="color: #0000ff;">new</span><span style="color: #000000;"> ViewPager.OnPageChangeListener() {</p><p>            </p><p>            @Override</p><p>            </span><span style="color: #0000ff;">public</span> <span style="color: #0000ff;">void</span> onPageSelected(<span style="color: #0000ff;">int</span><span style="color: #000000;"> arg0) {                                 //当滑动式,顶部的imageView是通过animation缓慢的滑动</p><p>                </span><span style="color: #008000;">//</span><span style="color: #008000;"> TODO Auto-generated method stub</span></p><p>                <span style="color: #0000ff;">switch</span><span style="color: #000000;"> (arg0)</p><p>                {</p><p>                </span><span style="color: #0000ff;">case</span> <span style="color: #800080;">0</span><span style="color: #000000;">:</p><p>                    </span><span style="color: #0000ff;">if</span> (currentItem == <span style="color: #800080;">1</span><span style="color: #000000;">)</p><p>                    {</p><p>                        animation </span>= <span style="color: #0000ff;">new</span><span style="color: #000000;"> TranslateAnimation(</p><p>                                offSet </span>* <span style="color: #800080;">2</span> + bmWidth, <span style="color: #800080;">0</span> , <span style="color: #800080;">0</span>, <span style="color: #800080;">0</span><span style="color: #000000;">);</p><p>                    }</p><p>                    </span><span style="color: #0000ff;">else</span> <span style="color: #0000ff;">if</span>(currentItem == <span style="color: #800080;">2</span><span style="color: #000000;">)</p><p>                    {</p><p>                        animation </span>= <span style="color: #0000ff;">new</span><span style="color: #000000;"> TranslateAnimation(</p><p>                                offSet </span>* <span style="color: #800080;">4</span> + <span style="color: #800080;">2</span> * bmWidth, <span style="color: #800080;">0</span>, <span style="color: #800080;">0</span>, <span style="color: #800080;">0</span><span style="color: #000000;">);</p><p>                    }</p><p>                    </span><span style="color: #0000ff;">break</span><span style="color: #000000;">;</p><p>                </span><span style="color: #0000ff;">case</span> <span style="color: #800080;">1</span><span style="color: #000000;">:</p><p>                    </span><span style="color: #0000ff;">if</span> (currentItem == <span style="color: #800080;">0</span><span style="color: #000000;">)</p><p>                    {</p><p>                        animation </span>= <span style="color: #0000ff;">new</span><span style="color: #000000;"> TranslateAnimation(</p><p>                                </span><span style="color: #800080;">0</span>, offSet * <span style="color: #800080;">2</span> + bmWidth, <span style="color: #800080;">0</span>, <span style="color: #800080;">0</span><span style="color: #000000;">);</p><p>                    }</p><p>                    </span><span style="color: #0000ff;">else</span> <span style="color: #0000ff;">if</span> (currentItem == <span style="color: #800080;">2</span><span style="color: #000000;">)</p><p>                    {</p><p>                        animation </span>= <span style="color: #0000ff;">new</span><span style="color: #000000;"> TranslateAnimation(</p><p>                                </span><span style="color: #800080;">4</span> * offSet + <span style="color: #800080;">2</span> * bmWidth, offSet * <span style="color: #800080;">2</span> + bmWidth, <span style="color: #800080;">0</span>, <span style="color: #800080;">0</span><span style="color: #000000;">);</p><p>                    }</p><p>                    </span><span style="color: #0000ff;">break</span><span style="color: #000000;">;</p><p>                </span><span style="color: #0000ff;">case</span> <span style="color: #800080;">2</span><span style="color: #000000;">:</p><p>                    </span><span style="color: #0000ff;">if</span> (currentItem == <span style="color: #800080;">0</span><span style="color: #000000;">)</p><p>                    {</p><p>                        animation </span>= <span style="color: #0000ff;">new</span><span style="color: #000000;"> TranslateAnimation(</p><p>                                </span><span style="color: #800080;">0</span>, <span style="color: #800080;">4</span> * offSet + <span style="color: #800080;">2</span> * bmWidth, <span style="color: #800080;">0</span>, <span style="color: #800080;">0</span><span style="color: #000000;">);</p><p>                    }</p><p>                    </span><span style="color: #0000ff;">else</span> <span style="color: #0000ff;">if</span> (currentItem == <span style="color: #800080;">1</span><span style="color: #000000;">)</p><p>                    {</p><p>                        animation </span>= <span style="color: #0000ff;">new</span><span style="color: #000000;"> TranslateAnimation(</p><p>                                offSet </span>* <span style="color: #800080;">2</span> + bmWidth, <span style="color: #800080;">4</span> * offSet + <span style="color: #800080;">2</span> * bmWidth, <span style="color: #800080;">0</span>, <span style="color: #800080;">0</span><span style="color: #000000;">);</p><p>                    }</p><p>                }</p><p>                currentItem </span>=<span style="color: #000000;"> arg0;</p><p>                </p><p>                animation.setDuration(</span><span style="color: #800080;">500</span><span style="color: #000000;">);</p><p>                animation.setFillAfter(</span><span style="color: #0000ff;">true</span><span style="color: #000000;">);</p><p>                imageView.startAnimation(animation);</p><p>                </p><p>            }</p><p>            </p><p>            @Override</p><p>            </span><span style="color: #0000ff;">public</span> <span style="color: #0000ff;">void</span> onPageScrolled(<span style="color: #0000ff;">int</span> arg0, <span style="color: #0000ff;">float</span> arg1, <span style="color: #0000ff;">int</span><span style="color: #000000;"> arg2) {</p><p>                </span><span style="color: #008000;">//</span><span style="color: #008000;"> TODO Auto-generated method stub</span></p><p><span style="color: #000000;">                </p><p>            }</p><p>            </p><p>            @Override</p><p>            </span><span style="color: #0000ff;">public</span> <span style="color: #0000ff;">void</span> onPageScrollStateChanged(<span style="color: #0000ff;">int</span><span style="color: #000000;"> arg0) {</p><p>                </span><span style="color: #008000;">//</span><span style="color: #008000;"> TODO Auto-generated method stub</span></p><p><span style="color: #000000;">                </p><p>            }</p><p>        });</p><p>        </p><p>        textView1.setOnClickListener(</span><span style="color: #0000ff;">new</span><span style="color: #000000;"> View.OnClickListener() {</p><p>            </p><p>            @Override</p><p>            </span><span style="color: #0000ff;">public</span> <span style="color: #0000ff;">void</span><span style="color: #000000;"> onClick(View arg0) {</p><p>                </span><span style="color: #008000;">//</span><span style="color: #008000;"> TODO Auto-generated method stub</span></p><p>                viewPager.setCurrentItem(<span style="color: #800080;">0</span><span style="color: #000000;">);</p><p>            }</p><p>        });</p><p>        </p><p>        textView2.setOnClickListener(</span><span style="color: #0000ff;">new</span><span style="color: #000000;"> View.OnClickListener() {</p><p>            </p><p>            @Override</p><p>            </span><span style="color: #0000ff;">public</span> <span style="color: #0000ff;">void</span><span style="color: #000000;"> onClick(View arg0) {</p><p>                </span><span style="color: #008000;">//</span><span style="color: #008000;"> TODO Auto-generated method stub</span></p><p>                viewPager.setCurrentItem(<span style="color: #800080;">1</span><span style="color: #000000;">);</p><p>            }</p><p>        });</p><p>        </p><p>        textView3.setOnClickListener(</span><span style="color: #0000ff;">new</span><span style="color: #000000;"> View.OnClickListener() {</p><p>            </p><p>            @Override</p><p>            </span><span style="color: #0000ff;">public</span> <span style="color: #0000ff;">void</span><span style="color: #000000;"> onClick(View arg0) {</p><p>                </span><span style="color: #008000;">//</span><span style="color: #008000;"> TODO Auto-generated method stub</span></p><p>                viewPager.setCurrentItem(<span style="color: #800080;">2</span><span style="color: #000000;">);</p><p>            }</p><p>        });</p><p>    }</p><p>    @Override</p><p>    </span><span style="color: #0000ff;">public</span><span style="color: #000000;"> boolean onCreateOptionsMenu(Menu menu) {</p><p>        getMenuInflater().inflate(R.menu.activity_main, menu);</p><p>        </span><span style="color: #0000ff;">return</span> <span style="color: #0000ff;">true</span><span style="color: #000000;">;</p><p>    }</p><p>    </p><p>    </span><span style="color: #0000ff;">private</span> <span style="color: #0000ff;">void</span><span style="color: #000000;"> initeCursor()</p><p>    {</p><p>        cursor </span>=<span style="color: #000000;"> BitmapFactory.decodeResource(getResources(), R.drawable.cursor);</p><p>        bmWidth </span>=<span style="color: #000000;"> cursor.getWidth();</p><p>        </p><p>        DisplayMetrics dm;</p><p>        dm </span>=<span style="color: #000000;"> getResources().getDisplayMetrics();</p><p>        </p><p>        offSet </span>= (dm.widthPixels - <span style="color: #800080;">3</span> * bmWidth) / <span style="color: #800080;">6</span><span style="color: #000000;">;</p><p>        matrix.setTranslate(offSet, </span><span style="color: #800080;">0</span><span style="color: #000000;">);</p><p>        imageView.setImageMatrix(matrix);                                             //需要iamgeView的scaleType为matrix</p><p>        currentItem </span>= <span style="color: #800080;">0</span><span style="color: #000000;">;</p><p>    }</p><p>}</span>

复制代码

类外还有3个layout:layout1,layout2, layout3是最简单,就是定义了不同的背景颜色,这里不给出。

来源URL:http://www.cnblogs.com/lky-mily/archive/2012/09/01/2666712.html