ViewPager导航栏

[html]  view plain copy

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:tools="http://schemas.android.com/tools"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     tools:context=".MainActivity" >  
6. <!-- 用帧布局来形成一种叠加的效果 -->  
7.   <FrameLayout   
8.      android:layout_height="300dp"  
9.      android:layout_width="match_parent"  
10.       >  
11. <android.support.v4.view.ViewPager  
12.     android:layout_height="match_parent"  
13.     android:layout_width="match_parent"  
14.     android:id="@+id/pager"  
15.     android:background="#00ff00"  
16.     />  
17.       <LinearLayout  
18.           android:layout_width="match_parent"  
19.           android:layout_height="70dp"  
20.           android:layout_gravity="bottom"  
21.           android:orientation="vertical"  
22.           android:background="#33000000"  
23.        >  
24.           <LinearLayout   
25.               android:layout_height="60dp"  
26.               android:layout_width="match_parent"  
27.               android:orientation="vertical"  
28.                android:gravity="center_horizontal"  
29.               >  
30.             <TextView   
31.                   android:layout_height="match_parent"  
32.                   android:layout_width="wrap_content"  
33.                   android:textSize="20sp"  
34.                  android:gravity="center_horizontal"  
35.                  android:layout_marginTop="15dp"  
36.                  android:id="@+id/text"  
37.                   />  
38.             </LinearLayout>  
39.           <RelativeLayout   
40.               android:layout_height="10dp"  
41.               android:layout_width="match_parent"  
42.               >  
43.             <View   
44.                 android:layout_height="5dp"  
45.                 android:layout_width="5dp"  
46.                 android:background="@drawable/normal_focus"  
47.                 android:layout_centerHorizontal="true"  
48.                 android:id="@+id/v3"  
49.                 />        
50.               <View   
51.                 android:layout_height="5dp"  
52.                 android:layout_width="5dp"  
53.                 android:background="@drawable/normal_focus"  
54.                 android:id="@+id/v2"  
55.                 android:layout_toLeftOf="@id/v3"  
56.                 android:layout_marginRight="5dp"  
57.                 />        
58.                  <View   
59.                 android:id="@+id/v1"  
60.                 android:layout_height="5dp"  
61.                 android:layout_width="5dp"  
62.                 android:background="@drawable/normal_focus"  
63.                 android:layout_toLeftOf="@id/v2"  
64.                 android:layout_marginRight="5dp"  
65.                 />    
66.                 <View   
67.                 android:layout_height="5dp"  
68.                 android:layout_width="5dp"  
69.                 android:background="@drawable/normal_focus"  
70.                 android:id="@+id/v4"  
71.                 android:layout_toRightOf="@id/v3"  
72.                  android:layout_marginLeft="5dp"   
73.                 />    
74.                  <View   
75.                 android:layout_height="5dp"  
76.                 android:layout_width="5dp"  
77.                 android:background="@drawable/normal_focus"  
78.                 android:id="@+id/v5"  
79.                 android:layout_toRightOf="@id/v4"  
80.                  android:layout_marginLeft="5dp"   
81.                 />      
82.               </RelativeLayout>  
83.           </LinearLayout>  
84.   </FrameLayout>  
85. </RelativeLayout>  

使用自定以的xml文件作为Drawable背景，来实现两种不同的”点“的样式。

dot_focus.xml:被选中时显示的点样式

[html]  view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <shape xmlns:android="http://schemas.android.com/apk/res/android"   
3.     android:shape="oval"  
4.     >  
5.     <corners android:radius="5dp"/>  
6.     <solid android:color="#ff000000"/>  
7. </shape>  

normal_focus.xml:位选中的点样式：

[html]  view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <shape xmlns:android="http://schemas.android.com/apk/res/android"   
3.     android:shape="oval"  
4.     >  
5.     <corners android:radius="5dp"/>  
6.     <solid android:color="#ffff0000"/>  
7. </shape>  

[java]  view plain copy

1. public class MainActivity extends Activity {  
2.   
3.     private ArrayList<ImageView>images;  
4.     private ViewPager pager;  
5.     private PagerAdapter adapter;  
6.     private int oldIndex;  
7.     private String[] titles;  
8.     private TextView title;  
9.     private View v1,v2,v3,v4,v5;  
10.     private ArrayList<View>imageView;  
11.     @Override  
12.     protected void onCreate(Bundle savedInstanceState) {  
13.         super.onCreate(savedInstanceState);  
14.         setContentView(R.layout.activity_main);  
15.         v1=(View)findViewById(R.id.v1);  
16.         v2=(View)findViewById(R.id.v2);  
17.         v3=(View)findViewById(R.id.v3);  
18.         v4=(View)findViewById(R.id.v4);  
19.         v5=(View)findViewById(R.id.v5);  
20.         images=new ArrayList<ImageView>();  
21.         imageView=new ArrayList<View>();  
22.         imageView.add(v1);  
23.         imageView.add(v2);  
24.         imageView.add(v3);  
25.         imageView.add(v4);  
26.         imageView.add(v5);  
27.         int[]imageid=new int[]{R.drawable.a,R.drawable.b,R.drawable.c,R.drawable.d,R.drawable.e};  
28.         for(int i=0;i<5;i++)  
29.         {  
30.             ImageView image=new ImageView(this);  
31.             image.setBackgroundResource(imageid[i]);  
32.             images.add(image);  
33.         }  
34.           
35.         //下面的代码会报错。。。。原因是什么呢？  
36.         /*ImageView image=new ImageView(this); 
37.             image.setBackgroundResource(R.drawable.a); 
38.             images.add(image); 
39.             image.setBackgroundResource(R.drawable.b); 
40.             images.add(image); 
41.             image.setBackgroundResource(R.drawable.c); 
42.             images.add(image); 
43.             image.setBackgroundResource(R.drawable.d); 
44.             images.add(image); 
45.             image.setBackgroundResource(R.drawable.e); 
46.             images.add(image);*/  
47.           
48.           
49.          titles = new String[]{  
50.                     "巩俐不低俗，我就不能低俗",   
51.                     "扑树又回来啦！再唱经典老歌引万人大合唱",    
52.                     "揭秘北京电影如何升级",     
53.                     "乐视网TV版大派送",      
54.                     "热血屌丝的反杀"  
55.                 };  
56.         pager=(ViewPager)findViewById(R.id.pager);  
57.         title=(TextView)findViewById(R.id.text);  
58.         //默认显示第一张图片和第一个标题，以一个点也使用不同的背景  
59.         title.setText(titles[0]);  
60.         v1.setBackgroundResource(R.drawable.dot_focus);  
61.         oldIndex=0;  
62.         adapter=new PagerAdapter()  
63.         {  
64.   
65.             @Override  
66.             public int getCount() {  
67.               
68.                 return images.size();  
69.             }  
70.   
71.             //用于判断当前viewpager所显示的图片和要加载的图片是不是同一张图片  
72.             @Override  
73.             public boolean isViewFromObject(View arg0, Object arg1) {  
74.                 return arg0==arg1;  
75.             }  
76.   
77.             @Override  
78.             public void destroyItem(ViewGroup container, int position,  
79.                     Object object) {  
80.                 //将视图从pager里移除。PagerAdapter默认在内存中最多加载三张图片  
81.                 container.removeView(images.get(position));  
82.                 //super.destroyItem(container, position, object);  
83.             }  
84.   
85.             @Override  
86.             public Object instantiateItem(ViewGroup container, int position) {  
87.                 container.addView(images.get(position));  
88.                 return images.get(position);  
89.             }  
90.               
91.         };  
92.         pager.setAdapter(adapter);  
93.         pager.setOnPageChangeListener(new OnPageChangeListener(){  
94.   
95.             @Override  
96.             public void onPageScrollStateChanged(int arg0) {  
97.   
98.             }  
99.   
100.             @Override  
101.             public void onPageScrolled(int arg0, float arg1, int arg2) {  
102.   
103.             }  
104.   
105.             @Override  
106.             public void onPageSelected(int arg0) {  
107.                 //实现图片切换时图片和标点也随着改变的关键关键  
108.                 title.setText(titles[arg0]);  
109.                 imageView.get(arg0).setBackgroundResource(R.drawable.dot_focus);  
110.                 imageView.get(oldIndex).setBackgroundResource(R.drawable.normal_focus);  
111.                 oldIndex=arg0;  
112.             }  
113.               
114.         });  
115.     }  
116.   
117.     @Override  
118.     public boolean onCreateOptionsMenu(Menu menu) {  
119.         getMenuInflater().inflate(R.menu.activity_main, menu);  
120.         return true;  
121.     }  
122.   
123. }