android 导航页模板

效果图：

 

ViewPager是用来展示一组数据的，所以肯定需要Adapter来绑定数据和view。首先写一个Adapter： 类名 ViewPagerAdapter.java      

 

           

 1 package com.example.viewpager;
 2 
 3 import java.util.List;
 4 
 5 import android.os.Parcelable;
 6 import android.support.v4.view.PagerAdapter;
 7 import android.support.v4.view.ViewPager;
 8 import android.view.View;
 9 
10 public class ViewPagerAdapter extends PagerAdapter {
11     
12     //界面列表  
13     private List<View> views;
14     
15     public ViewPagerAdapter (List<View> views){
16         this.views=views;
17     }
18      //销毁arg1位置的界面  
19     @Override  
20     public void destroyItem(View arg0, int arg1, Object arg2) {  
21         ((ViewPager) arg0).removeView(views.get(arg1));       
22     } 
23     @Override  
24     public void finishUpdate(View arg0) {  
25         // TODO Auto-generated method stub  
26           
27     }  
28     
29     //获得当前界面数 
30     @Override
31     public int getCount() {
32          if (views != null)  
33             {  
34                 return views.size();  
35             }  
36               
37             return 0;  
38     }
39     //初始化arg1位置的界面  
40     @Override  
41     public Object instantiateItem(View arg0, int arg1) {  
42           
43         ((ViewPager) arg0).addView(views.get(arg1), 0);  
44           
45         return views.get(arg1);  
46     }  
47     
48     @Override
49     public boolean isViewFromObject(View arg0, Object arg1) {
50         // TODO Auto-generated method stub
51         return (arg0 == arg1);
52     }
53     
54     public void retoreState(Parcelable arg0,ClassLoader arg1){
55         
56     }
57       @Override  
58         public Parcelable saveState() {  
59             // TODO Auto-generated method stub  
60             return null;  
61         }  
62        @Override  
63         public void startUpdate(View arg0) {  
64             // TODO Auto-generated method stub  
65               
66         }  
67 }

 

然后是布局文件：activity_main.xml

 

<RelativeLayout 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">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">
        
    </android.support.v4.view.ViewPager> 

     <LinearLayout   
        android:id="@+id/ll"   
        android:orientation="horizontal"   
        android:layout_width="wrap_content"   
        android:layout_height="wrap_content"   
        android:layout_marginBottom="24.0dip"   
        android:layout_alignParentBottom="true"   
        android:layout_centerHorizontal="true">  
          
        <ImageView  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:layout_gravity="center_vertical"  
            android:clickable="true"  
            android:padding="15.0dip"  
            android:src="@drawable/dot" />  
  
        <ImageView  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:layout_gravity="center_vertical"  
            android:clickable="true"  
            android:padding="15.0dip"  
            android:src="@drawable/dot" />  
  
        <ImageView  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:layout_gravity="center_vertical"  
            android:clickable="true"  
            android:padding="15.0dip"  
            android:src="@drawable/dot" />  
  
        <ImageView  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:layout_gravity="center_vertical"  
            android:clickable="true"  
            android:padding="15.0dip"  
            android:src="@drawable/dot" />  
  
    </LinearLayout>

     
 
</RelativeLayout>

 

新建drawable下的 dot.xml

其中小点的图片用一个selector来控制颜色（设置item的enable为true或者false）

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    
    <item android:state_enabled="true" android:drawable="@drawable/select_off" />  
    <item android:state_enabled="false" android:drawable="@drawable/select_on" />
</selector>

 

 

最后是：MainActivity.java

package com.example.viewpager;

import java.util.ArrayList;
import java.util.List;

import android.os.Bundle;
import android.R.integer;
import android.app.Activity;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.Menu;
import android.view.View;
import android.view.Window;
import android.view.View.OnClickListener;
import android.widget.ImageView;
import android.widget.LinearLayout;

public class MainActivity extends Activity implements OnClickListener, OnPageChangeListener{

        private ViewPager vp;  
        private ViewPagerAdapter vpAdapter;  
        private List<View> views;  
        
        //引导图片资源  
        private static final int[] pics = { R.drawable.ww,  
                R.drawable.ww1, R.drawable.ww2,  
                R.drawable.ww3 };  
      //底部小店图片  
        private ImageView[] dots;
      //记录当前选中位置  
        private int currentIndex;
        
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
        
        views = new ArrayList<View>();
        LinearLayout.LayoutParams mParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,
                LinearLayout.LayoutParams.WRAP_CONTENT);
        //初始化引导图片列表 
        for (int i = 0; i < pics.length; i++) {
            ImageView iv= new ImageView(this);
            iv.setLayoutParams(mParams);
            iv.setImageResource(pics[i]);
            views.add(iv);
        }
        vp=(ViewPager)findViewById(R.id.viewpager);
      //初始化Adapter  
        vpAdapter= new ViewPagerAdapter(views);
        vp.setAdapter(vpAdapter);
      //绑定回调  
        vp.setOnPageChangeListener(this);
        //初始化底部小点  
        initDots(); 
    }

    private void initDots() {
        LinearLayout ll = (LinearLayout)findViewById(R.id.ll);
        dots= new ImageView[pics.length];
         //循环取得小点图片  
        for (int i = 0; i < pics.length; i++) {
            dots[i]=(ImageView)ll.getChildAt(i);
               dots[i].setEnabled(true);//都设为灰色  
                dots[i].setOnClickListener(this);  
                dots[i].setTag(i);//设置位置tag，方便取出与当前位置对应 
        }
        currentIndex=0;
        dots[currentIndex].setEnabled(false);//设置为白色，即选中状态  
    }

     /** 
     *设置当前的引导页  
     */  
    private void setCurView(int position)  
    {  
        if (position < 0 || position >= pics.length) {  
            return;  
        }  
  
        vp.setCurrentItem(position);  
    }  
  
    /** 
     *这只当前引导小点的选中  
     */  
    private void setCurDot(int positon)  
    {  
        if (positon < 0 || positon > pics.length - 1 || currentIndex == positon) {  
            return;  
        }  
  
        dots[positon].setEnabled(false);  
        dots[currentIndex].setEnabled(true);  
  
        currentIndex = positon;  
    }  
  
    //当滑动状态改变时调用  
    @Override  
    public void onPageScrollStateChanged(int arg0) {  
          
          
    }  
  
    //当当前页面被滑动时调用  
    @Override
    public void onPageScrolled(int arg0, float arg1, int arg2) {
        
        
    }
     //当新的页面被选中时调用  
    @Override
    public void onPageSelected(int arg0) {
      //设置底部小点选中状态 
        setCurDot(arg0);
        
    }

    @Override
    public void onClick(View v) {
    int position = (Integer)v.getTag();
    setCurView(position);
    setCurDot(position);
    }

}

 

转载于:https://www.cnblogs.com/zyd1807/p/5092330.html