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