ViewPager欢迎界面

一、几张图片组成欢迎界面下方有几个点对应每个图片当图片被选中时对应的点会变亮，当对应的点被点击时也会切换到指定画面

以下是代码

 package com.example.viewpager_1;

 import java.util.ArrayList;

 import java.util.List;

 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.View;

 import android.view.ViewGroup;

 import android.widget.ImageView;

 import android.widget.ImageView.ScaleType;

 import android.widget.LinearLayout;

 import android.widget.LinearLayout.LayoutParams;

 import android.widget.Toast;

 public class MainActivity extends Activity {

     private ViewPager vPager;

     private List<ImageView> views;//ViewPager中显示的所有页面，PagerAdapter使用的数据源

     private PagerAdapter adapter;

     private LinearLayout navLayout;//导航布局空间

     private LinearLayout.LayoutParams layoutParams;//线性布局中子控件使用的布局参数，作用设置子控件大小，外边距 

     @Override

     protected void onCreate(Bundle savedInstanceState) {

         super.onCreate(savedInstanceState);

         setContentView(R.layout.activity_main);

         navLayout = (LinearLayout) findViewById(R.id.navLayouttId);

         vPager = (ViewPager) findViewById(R.id.viewPager);

         inintViews();//初始化显示的页面

         //设置viewpager的页面滑动事件

         vPager.setOnPageChangeListener(new OnPageChangeListener() {

             @Override

             public void onPageSelected(int position) {

                 // 指定的位置的页面被选择

                 selectNav(position);

             }

             private void selectNav(int position) {

                 // 选择指定位置的导航图片为选择图片，选择的图片要重置一下

                 ImageView navImg  = null;

                 //遍历 导航布局中所有的子控件，判断子控件的位置是否为选择位置，若是，则改变图片的内容

                 for(int i=0;i<navLayout.getChildCount();i++){

                     navImg = (ImageView) navLayout.getChildAt(i );//获取布局中指定位置的子控件

                     if(i==position)

                         navImg.setImageResource(R.drawable.page_now);

                     else

                         navImg.setImageResource(R.drawable.page);

                 }

             }

             /*

              * 第一个参数： 滚动页面开始的位置

              * 第二个参数：  两个页面之间滚动的偏移量，范围是0-1

              * 第三个参数：两个页面之间滚动的像素偏移量

              */

             @Override

             public void onPageScrolled(int position, float offset, int offsetPixels) {

                 // TODO 从当前页面位置开始滚动事件

             }

             @Override

             public void onPageScrollStateChanged(int state) {

                 // 页面滚动状态发生变化时事件： 开始滚动，停止滚动，正在设置页面

 //                ViewPager.SCROLL_STATE_DRAGGING 开始滚动

 //                ViewPager.SCROLL_STATE_IDLE 停止滚动

 //                ViewPager.SCROLL_STATE_SETTLING 正在设置页面，即将要停止，并且设置当前的页面

                 switch (state) {

                 case ViewPager.SCROLL_STATE_DRAGGING:

                     break;

                 case ViewPager.SCROLL_STATE_IDLE:

                     break;

                 case ViewPager.SCROLL_STATE_SETTLING:

                     break;

                 default:

                     break;

                 }

             }

         });

     }

     private void inintViews() {

         // TODO 加载viewpager中显示的额页面

         views = new ArrayList<ImageView>();

         ImageView imgView = null;

         ImageView navImg = null;

         layoutParams =    new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);

         layoutParams.leftMargin=20;

         layoutParams.rightMargin=20;//px

         for(int i=1;i<=3;i++){

             //实例化viewpager中要显示图片的空间

             imgView = new ImageView(getApplicationContext());

             imgView.setScaleType(ScaleType.CENTER_CROP);

             //根据资源名和类型获取 这一资源的标示 -->R.drawable.slide1

             int resId = getResources().getIdentifier("slide"+i, "drawable", getPackageName());

             imgView.setImageResource(resId);//设置图片控件显示的图片资源

             if(i==3){

                 imgView.setOnClickListener(new View.OnClickListener() {

                     @Override

                     public void onClick(View v) {

                         Toast.makeText(getApplicationContext(), "正在跳转。。。。", 0).show();

                     }

                 });

             }

             views.add(imgView);//将实例化的空间添加到数据源中。

             navImg = new ImageView(getApplicationContext());

             navImg.setScaleType(ScaleType.CENTER_CROP);

             if(i==1)

                 navImg.setImageResource(R.drawable.page_now);

             else

                 navImg.setImageResource(R.drawable.page);

             //设置导航图片的标签： 当前导航图片的位置

             navImg.setTag(i-1);

             navImg.setOnClickListener(new View.OnClickListener() {

                 @Override

                 public void onClick(View v) {

                     // 点击导航图片的事件方法： 读取图片控件中的标签，转化为与ViewPager页面对应的位置，最后选择页面

                     int position = (Integer) v.getTag();

                     vPager.setCurrentItem(position);//切换viewpager显示的位置

                 }

             });

             navLayout.addView(navImg,layoutParams);

         }

         //实例化PagerAdapter适配器

         adapter = new WelcomePagerAdapter();

         vPager.setAdapter(adapter);

         //设置移除UI的间隔大小

 //        vPager.setOffscreenPageLimit(3);//默认值不能小于1，建议不要 改变默认值。

     }

     //声明PagerAdapter的子类，用于管理ViewPager中显示的View控件

     class WelcomePagerAdapter extends PagerAdapter{

         @Override

         public int getCount() {

             // TODO 显示返回页面的总大小

             return views.size();

         }

         @Override

         public Object instantiateItem(ViewGroup container, int position) {

             // TODO 获取指定位置的view，并增加到ViewPager中，同时作为当前页面的数据返回

             container.addView(views.get(position));

             return views.get(position);//作为当前页面的数据返回

         }

         @Override

         public void destroyItem(ViewGroup container, int position, Object object) {

             // TODO 当前 位置与viewpager当中正显示页面的位置的间隔超出了一页时，需要将当前

             //位置的页面移除掉.同时 实例化三个页面

             container.removeView(views.get(position));

         }

         //固定写法；

         @Override

         public boolean isViewFromObject(View arg0, Object arg1) {

             // TODO 判断当前显示的页面的UI对象和数据对象是否 一致

             return arg0==arg1;

         }

     }

 }

MainActivity.java

 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

     xmlns:tools="http://schemas.android.com/tools"

     android:layout_width="match_parent"

     android:layout_height="match_parent"

     tools:context=".MainActivity" >

     <!-- 使用v4包下的可左右滑动的控件，其显示的页面需要通过PagerAdapter适配器增加或移除 -->

     <android.support.v4.view.ViewPager

         android:id="@+id/viewPager"

         android:layout_width="match_parent"

         android:layout_height="match_parent" />

     <!-- 导航小图片所在的布局 -->

     <LinearLayout

         android:id="@+id/navLayoutId"

         android:layout_width="match_parent"

         android:layout_height="wrap_content"

         android:layout_gravity="bottom"

         android:layout_marginBottom="10dp"

         android:background="#4000"

         android:gravity="center"

         android:orientation="horizontal"

         android:padding="20dp" />

 </FrameLayout>

activity_main.xml

效果图

巴特西

ViewPager欢迎界面

最新文章

热门文章