App第一次启动时翻页介绍的简洁实现
应用第一次启动的时候,要给用户介绍这个应用。这时候就会选择ViewPager来实现。第一次运行微信的时候,出现一些翻页的界面,告诉你微信可以用语音来聊天,还可以在朋友圈分享生活。像这样:
中央布局变化的同时,下面的亮点也变化了,从第二个跳到了第三个。
然后,去看这个亮点跳动的源代码的时候,发现有一大堆冗长的代码(不用细看,瞄一下即可),
public class MyOnPageChangeListener implements OnPageChangeListener { @Override public void onPageSelected(int arg0) { switch (arg0) { case 0 : mPage0.setImageDrawable(getResources().getDrawable( R.drawable.page_now)); mPage1.setImageDrawable(getResources().getDrawable(R.drawable.page)); 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)); 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)); break; case 3 : mPage3.setImageDrawable(getResources().getDrawable( R.drawable.page_now)); mPage4.setImageDrawable(getResources().getDrawable(R.drawable.page)); mPage2.setImageDrawable(getResources().getDrawable(R.drawable.page)); break; case 4 : mPage4.setImageDrawable(getResources().getDrawable( R.drawable.page_now)); mPage3.setImageDrawable(getResources().getDrawable(R.drawable.page)); mPage5.setImageDrawable(getResources().getDrawable(R.drawable.page)); break; case 5 : mPage5.setImageDrawable(getResources().getDrawable( R.drawable.page_now)); mPage4.setImageDrawable(getResources().getDrawable(R.drawable.page)); break; } currIndex = arg0; // animation.setFillAfter(true);// True:图片停在动画结束位置 // animation.setDuration(300); // mPageImg.startAnimation(animation); } @Override public void onPageScrolled(int arg0, float arg1, int arg2) { } @Override public void onPageScrollStateChanged(int arg0) { } }
用数组的话可以写得更简洁些,同时代码也更加易读。修改后的版本:
class MyOnPageChangeListner implements OnPageChangeListener{ @Override public void onPageSelected(int page){ mPage[page].setImageDrawable(getResources(). getDrawable(R.drawable.page_now)); if(page!=0){ mPage[page-1].setImageDrawable(getResources(). getDrawable(R.drawable.page)); } if(page!=4){ mPage[page+1].setImageDrawable(getResources(). getDrawable(R.drawable.page)); } } @Override public void onPageScrolled(int arg0,float arg1, int arg2){ } @Override public void onPageScrollStateChanged(int arg0){ } }
这是一个页面变化的监听器。显然,来到某一页的话,就把那一页对应的点设置为亮点。暗点怎么设置呢?如果来到第一页,那么只可能是第二页来到第一页的,则只用第二个点的图片设为暗点。同理,来到最后一页的话,只能是倒数第二页滑到最后一页的,只用把倒数第二页设置为暗点。而其它页的话,则把左右两点设置为暗点即可。
之前的话,开个ImageView的数组,
其它的,设置ViewPager的话,先把所有布局文件加载到一个列表里面,
之后设置左右滑动的监听器,
MainActivity.java,
package lzw.model; import java.util.ArrayList; import lzw.chronometertest.R; import android.app.Activity; import android.os.Bundle; import android.support.v4.view.PagerAdapter; import android.support.v4.view.ViewPager; import android.support.v4.view.ViewPager.OnPageChangeListener; import android.view.LayoutInflater; import android.view.View; import android.widget.ImageView; public class MainActivity extends Activity { ViewPager pager; ImageView[] mPage=new ImageView[5]; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); pager=(ViewPager)findViewById(R.id.viewPager); pager.setOnPageChangeListener(new MyOnPageChangeListner()); LayoutInflater mLi=LayoutInflater.from(this); final ArrayList<View> views=new ArrayList<View>(); for(int i=0;i<5;i++){ String name="what"+i; views.add(mLi.inflate(getResources().getIdentifier(name, "layout",getPackageName()),null)); } mPage[0]=(ImageView)findViewById(R.id.page0); mPage[1]=(ImageView)findViewById(R.id.page1); mPage[2]=(ImageView)findViewById(R.id.page2); mPage[3]=(ImageView)findViewById(R.id.page3); mPage[4]=(ImageView)findViewById(R.id.page4); PagerAdapter adapter=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 Object instantiateItem(View container,int position){ ((ViewPager)container).addView(views.get(position)); return views.get(position); } }; pager.setAdapter(adapter); } class MyOnPageChangeListner implements OnPageChangeListener{ @Override public void onPageSelected(int page){ mPage[page].setImageDrawable(getResources(). getDrawable(R.drawable.page_now)); if(page!=0){ mPage[page-1].setImageDrawable(getResources(). getDrawable(R.drawable.page)); } if(page!=4){ mPage[page+1].setImageDrawable(getResources(). getDrawable(R.drawable.page)); } } @Override public void onPageScrolled(int arg0,float arg1, int arg2){ } @Override public void onPageScrollStateChanged(int arg0){ } } }
main.xml,
<?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:orientation="vertical" > <android.support.v4.view.ViewPager android:id="@+id/viewPager" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center"> </android.support.v4.view.ViewPager> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|center" android:layout_marginBottom="30dp" > <ImageView android:id="@+id/page0" android:layout_width="wrap_content" android:layout_height="wrap_content" 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:src="@drawable/page" /> <ImageView android:id="@+id/page2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="10dp" android:src="@drawable/page" /> <ImageView android:id="@+id/page3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="10dp" android:src="@drawable/page" /> <ImageView android:id="@+id/page4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="10dp" android:src="@drawable/page" /> </LinearLayout> </FrameLayout>
项目源码
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。