在第一篇中,我介紹了ViewPager的應用以及禁用滑向下一頁.
這一篇將之加工一下,類比實現新浪裡面的功能,vierpager 分頁.
在新浪微博訊息一欄中是這樣的(注意看title):
上部分頁欄可以用gridview來實現,不過為了省事在這就用textview代替了.
貼出代碼:
/*** * ViewPager * * @author zhangjia * */public class MainActivity extends ActivityGroup implements OnClickListener {private LinearLayout layout;// titleprivate ViewPager pager;private ArrayList<View> pageViews;private LinearLayout layout2;private ArrayList<ImageView> imageViews;private LinearLayout linearLayout;private String title[] = { "one", "two", "three" };private TextView textView;private ArrayList<View> arrayList;// 用於裝載viewprivate final int linerlayout_height = 80;/*** * init title and pageview */void Init() {arrayList = new ArrayList<View>();// 擷取螢幕寬度int width = getWindowManager().getDefaultDisplay().getWidth()/ title.length;for (int i = 0; i < title.length; i++) {textView = new TextView(this);textView.setText(title[i]);textView.setWidth(width);textView.setHeight(linerlayout_height - 10);textView.setTextSize(20);textView.setTextColor(color.black);textView.setGravity(Gravity.CENTER);textView.setId(i);textView.setPadding(5, 5, 5, 5);textView.setOnClickListener(this);linearLayout.addView(textView);arrayList.add(textView);}pageViews = new ArrayList<View>();View view00 = getLocalActivityManager().startActivity("activity01",new Intent(this, NullActivity.class)).getDecorView();View view01 = getLocalActivityManager().startActivity("activity01",new Intent(this, MainActivity1.class)).getDecorView();View view02 = getLocalActivityManager().startActivity("activity02",new Intent(this, MainActivity2.class)).getDecorView();View view03 = getLocalActivityManager().startActivity("activity02",new Intent(this, MainActivity3.class)).getDecorView();View view04 = getLocalActivityManager().startActivity("activity01",new Intent(this, NullActivity.class)).getDecorView();pageViews.add(view00);pageViews.add(view01);pageViews.add(view02);pageViews.add(view03);pageViews.add(view04);}void Init_Point() {imageViews = new ArrayList<ImageView>();ImageView imageView;for (int i = 0; i < pageViews.size(); i++) {imageView = new ImageView(this);imageView.setLayoutParams(new LayoutParams(5, 5));imageView.setBackgroundResource(R.drawable.d1);LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(new ViewGroup.LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT));layoutParams.leftMargin = 20;layoutParams.rightMargin = 20;layout2.addView(imageView, layoutParams);// 第一個和最後一個讓她消失if (i == 0 || i == pageViews.size() - 1) {imageView.setVisibility(View.GONE);}if (i == 1) {imageView.setBackgroundResource(R.drawable.d2);}imageViews.add(imageView);}}public void draw_Point(int index) {for (int i = 1; i < imageViews.size(); i++) {if (index == i) {imageViews.get(i).setBackgroundResource(R.drawable.d2);} elseimageViews.get(i).setBackgroundResource(R.drawable.d1);}}@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setTitle("jjhappyforever...");setContentView(R.layout.main);pager = (ViewPager) findViewById(R.id.vp_contains);layout2 = (LinearLayout) findViewById(R.id.iv_image);linearLayout = (LinearLayout) findViewById(R.id.mian);// 建立linerlayout的大小LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(new ViewGroup.LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.FILL_PARENT));layoutParams.height = linerlayout_height;linearLayout.setLayoutParams(layoutParams);Init();Init_Point();pager.setAdapter(new myPagerView());arrayList.get(0).setBackgroundResource(R.drawable.renren_sdk_pay_repair_btn_down);pager.setCurrentItem(1);pager.setOnPageChangeListener(new OnPageChangeListener() {@Overridepublic void onPageSelected(int arg0) {draw_Point(arg0);// 描繪分頁點,一定要寫在這裡.// Toast.makeText(MainActivity.this, ""+arg0, 1000).show();// 如果是第一屏或者是最後一屏禁止滑動,其實這裡實現的是如果滑動的是第一屏則跳轉至第二屏,如果是最後一屏則跳轉到倒數第二屏.if (arg0 == imageViews.size() - 1 || arg0 == 0) {if (arg0 == 0) {pager.setCurrentItem(arg0 + 1);// 第二屏 會再次實現該回調方法實現跳轉.imageViews.get(1).setBackgroundResource(R.drawable.d2);} else {pager.setCurrentItem(arg0 - 1);// 倒數第二屏imageViews.get(arg0 - 1).setBackgroundResource(R.drawable.d2);}} else {//一定要卸載else裡面,viewpager挺變態的,寫在外面,(在你在最左邊往左拉的時候會執行兩次,最右邊也是.)setBackgroud(arg0 - 1);Toast.makeText(MainActivity.this, "" + arg0, 1000).show();}}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {}@Overridepublic void onPageScrollStateChanged(int arg0) {}});} /*** * 對title 選項卡處理 * @param index */public void setBackgroud(int index) {for (int i = 0; i < arrayList.size(); i++) {arrayList.get(i).setBackgroundDrawable(new BitmapDrawable());if (i == index)arrayList.get(index).setBackgroundResource(R.drawable.renren_sdk_pay_repair_btn_down);}} /*** * viewpager 的資料來源 * @author zhangjia * */class myPagerView extends PagerAdapter {// 顯示數目@Overridepublic int getCount() {return pageViews.size();}@Overridepublic boolean isViewFromObject(View arg0, Object arg1) {return arg0 == arg1;}@Overridepublic int getItemPosition(Object object) {// TODO Auto-generated method stubreturn super.getItemPosition(object);}@Overridepublic void destroyItem(View arg0, int arg1, Object arg2) {// TODO Auto-generated method stub((ViewPager) arg0).removeView(pageViews.get(arg1));}/*** * 擷取每一個item, 類於listview中的getview */@Overridepublic Object instantiateItem(View arg0, int arg1) {((ViewPager) arg0).addView(pageViews.get(arg1));return pageViews.get(arg1);}} /*** * 點擊事件 */@Overridepublic void onClick(View v) {switch (v.getId()) {case 0:setBackgroud(0);pager.setCurrentItem(1);break;case 1:setBackgroud(1);pager.setCurrentItem(2);break;case 2:setBackgroud(2);pager.setCurrentItem(3);break;default:break;}}}
上面就是所有的代碼,其實看起來有點小多,不過都挺容易理解的.還有就是前面我寫過一片關於viewpager的介紹,這裡也就不過多講解了.詳細請下載源碼看吧.
樣本樣本:
第一屏左垃 第一屏 滑向第二屏
第二屏 第三屏 第三屏右拉(會縮回)
源碼下載