Android带导航点的ViewPager

jopen 10年前

此处为显示的布局:


<LinearLayout xmlns:android=“http://schemas.android.com/apk/res/android”

android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent" > <android.support.v4.view.ViewPager android:id="@+id/navigation_page" android:layout_width="fill_parent" android:layout_height="fill_parent" /> <LinearLayout android:id="@+id/viewGroup" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:layout_marginBottom="40dp" android:gravity="center_horizontal" android:orientation="horizontal" > </LinearLayout> </RelativeLayout>

此处为ViewPager中显示的布局:

<?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" >    <ImageView      android:id="@+id/img_navigation_page"      android:layout_width="match_parent"      android:layout_height="match_parent"      android:scaleType="fitXY"/>    <RelativeLayout      android:layout_width="match_parent"      android:layout_height="match_parent" >        <ImageView          android:id="@+id/img_cancel"          android:layout_width="25dp"          android:layout_height="25dp"          android:layout_alignParentRight="true"          android:src="@drawable/ic_btn_chat_text" />        <Button          android:id="@+id/btn_enter"          android:layout_width="80dp"          android:layout_height="30dp"          android:layout_alignParentBottom="true"          android:layout_centerHorizontal="true"          android:layout_marginBottom="80dp"          android:background="@drawable/invite_btn_bg"          android:text="@string/trend_navigation"          android:textColor="@color/red"          android:textSize="15sp"          android:visibility="invisible" />  </RelativeLayout>


代码部分:
/* 装分页显示的view的数组 /

private ArrayList<View> pageViews;  private ImageView imageView;    /** 将小圆点的图片用数组表示 */  private ImageView[] imageViews;    // 包裹小圆点的LinearLayout  private LinearLayout mViewPoints;        //初始化要显示的页面,添加到view集合中  private void init(Context context) {      // 将要分页显示的View装入数组中      pageViews = new ArrayList<View>();      pageViews.add(inflater.inflate(R.layout.trend_descript_navigation_item,              null));      pageViews.add(inflater.inflate(R.layout.trend_descript_navigation_item,              null));      pageViews.add(inflater.inflate(R.layout.trend_descript_navigation_item,              null));      pageViews.add(inflater.inflate(R.layout.trend_descript_navigation_item,              null));      pageViews.add(inflater.inflate(R.layout.trend_descript_navigation_item,              null));      pageViews.add(inflater.inflate(R.layout.trend_descript_navigation_item,              null));  }

//初始化显示的控件,有viewpager和显示导航点的linearlayout
private void initView(Context context,View v) {

// 创建imageviews数组,大小是要显示的图片的数量      imageViews = new ImageView[pageViews.size()];      // 实例化小圆点的linearLayout和viewpager       mViewPoints = (LinearLayout) v.findViewById(R.id.viewGroup);       mViewPager = (ViewPager) v.findViewById(R.id.navigation_page);        // 添加小圆点的图片      for (int i = 0; i < pageViews.size(); i++) {          imageView = new ImageView(context);          // 设置小圆点imageview的参数          LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(                  10, 10);          layoutParams.setMargins(5, 0, 5, 0);          imageView.setLayoutParams(layoutParams);// 创建一个宽高均为20 的布局          // 将小圆点layout添加到数组中          imageViews[i] = imageView;          // 默认选中的是第一张图片,此时第一个小圆点是选中状态,其他不是          if (i == 0) {              imageViews[i]                      .setBackgroundResource(R.drawable.indicator_normal_pressed);          } else {              imageViews[i]                      .setBackgroundResource(R.drawable.indicator_normal);          }            // 将imageviews添加到小圆点视图组          mViewPoints.addView(imageViews[i]);      }      // 设置viewpager的适配器和监听事件      mViewPager.setAdapter(new NavigationPageAdapter());      mViewPager.setOnPageChangeListener(new NavigationPageChangeListener());    }      //设置要显示的pageradapter类  private class NavigationPageAdapter extends PagerAdapter {        // 销毁position位置的界面      @Override      public void destroyItem(View v, int position, Object arg2) {          ((ViewPager) v).removeView((View) arg2);      }        // 获取当前窗体界面数      @Override      public int getCount() {          return pageViews.size();      }        // 初始化position位置的界面      @Override      public Object instantiateItem(View v, int position) {          View contentView = pageViews.get(position);                  /**                        *显示页面的相关操作                        **/          ((ViewPager) v).addView(contentView, 0);          return pageViews.get(position);      }        @Override      public boolean isViewFromObject(View v, Object arg1) {          return v == arg1;      }        @Override      public void startUpdate(View arg0) {      }        @Override      public int getItemPosition(Object object) {          return super.getItemPosition(object);      }    }      //设置viewpager滑动的事件,实现导航点的滚动

private class NavigationPageChangeListener implements OnPageChangeListener {

@Override      public void onPageScrollStateChanged(int arg0) {      }        @Override      public void onPageScrolled(int arg0, float arg1, int arg2) {      }        @Override      public void onPageSelected(int position) {          for (int i = 0; i < imageViews.length; i++) {              imageViews[position]                      .setBackgroundResource(R.drawable.indicator_normal_pressed);              // 不是当前选中的page,其小圆点设置为未选中的状态              if (position != i) {                  imageViews[i]                          .setBackgroundResource(R.drawable.indicator_normal);              }          }      }    }