android Viewpager HorizontalScrollView 实现分页栏拖拽

源码： http://files.cnblogs.com/android100/ViewPaperDemo.rar
首先我们先看一个效果： 

前两个是网易的，它做的title不能拖拽，。不过点击动画效果挺不错的，有待学习啊，后面两个是搜狐的，它做的效果不错，（注意看title）可以左右拖拽的，因为比较多嘛。

下面这两个图不错，是多米音乐客户端.它可以来回切换屏幕，（重要的是没有出现向viewpager动画那么恶心状态）这个做的很棒，

现在我做的是viewpager+HorizontalScrollView 实现来回切屏，并且title可以左右拖拽.

代码片段

   <span style="font-size:16px;"> 
  /** 
  *
      * init view
       
  */ 
  
      
  void InItView() { 
  
         pageViews =  
  new ArrayList<View>(); 
  
         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("activity03", 
  
                  
  new Intent( 
  this, MainActivity4. 
  class)).getDecorView(); 
  
         View view05 = getLocalActivityManager().startActivity("activity04", 
  
                  
  new Intent( 
  this, MainActivity5. 
  class)).getDecorView(); 
  
         View view06 = getLocalActivityManager().startActivity("activity05", 
  
                  
  new Intent( 
  this, MainActivity6. 
  class)).getDecorView(); 
  
         pageViews.add(view01); 
  
         pageViews.add(view02); 
  
         pageViews.add(view03); 
  
         pageViews.add(view04); 
  
         pageViews.add(view05); 
  
         pageViews.add(view06); 
  
     }</span> 
 

 

   <span style="font-size:16px;">  
  /** 
  *
     * init title
      
  */ 
  
     
  void InItTitle() { 
  
         
  int width = getWindowManager().getDefaultDisplay().getWidth() / 5; 
  
         
  for ( 
  int i = 0; i < title.length; i++) { 
  
            RadioButton radioButton =  
  new RadioButton( 
  this,  
  null, 
  
                    R.style.radioButton); 
  
            radioButton.setText(title[i]); 
  
            radioButton.setTextSize(17); 
  
            radioButton.setTextColor(com.jj.viewpager.R.color.black); 
  
            radioButton.setWidth(width); 
  
            radioButton.setHeight(height); 
  
            radioButton.setGravity(Gravity.CENTER); 
  
            radioGroup.addView(radioButton); 
  
        } 
  
    }</span> 
 

   <span style="font-size:16px;">  
  /** 
  *
     * init title
      
  */ 
  
     
  void InItTitle1() { 
  
        textViews =  
  new ArrayList<TextView>(); 
  
         
  int width = getWindowManager().getDefaultDisplay().getWidth() / 5; 
  
         
  int height = 70; 
  
         
  for ( 
  int i = 0; i < title.length; i++) { 
  
            TextView textView =  
  new TextView( 
  this); 
  
            textView.setText(title[i]); 
  
            textView.setTextSize(17); 
  
            textView.setTextColor(com.jj.viewpager.R.color.black); 
  
            textView.setWidth(width); 
  
            textView.setHeight(height - 30); 
  
            textView.setGravity(Gravity.CENTER); 
  
            textView.setId(i); 
  
            textView.setOnClickListener( 
  this); 
  
            textViews.add(textView); 
  
             
  // 
   分割线 
  
            View view =  
  new View( 
  this); 
  
            LinearLayout.LayoutParams layoutParams =  
  new LayoutParams( 
  
                    LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT); 
  
            layoutParams.width = 1; 
  
            layoutParams.height = height - 40; 
  
            layoutParams.gravity = Gravity.CENTER; 
  
            view.setLayoutParams(layoutParams); 
  
            view.setBackgroundColor(com.jj.viewpager.R.color.gray); 
  
            linearLayout.addView(textView); 
  
             
  if (i != title.length - 1) { 
  
                linearLayout.addView(view); 
  
            } 
  
 
  
        } 
  
    }</span> 
 

   <span style="font-size:16px;"> 
  /** 
  *
     * 选中效果
      
  */ 
  
     
  public  
  void setSelector( 
  int id) { 
  
         
  for ( 
  int i = 0; i < title.length; i++) { 
  
             
  if (id == i) { 
  
                Bitmap bitmap = BitmapFactory.decodeResource(getResources(), 
  
                        R.drawable.grouplist_item_bg_normal); 
  
                textViews.get(id).setBackgroundDrawable( 
  
                         
  new BitmapDrawable(bitmap)); 
  
                textViews.get(id).setTextColor(Color.RED); 
  
                viewPager.setCurrentItem(i); 
  
            } 
  
 
  
             
  else { 
  
                textViews.get(i).setBackgroundDrawable( 
  new BitmapDrawable()); 
  
                textViews.get(i).setTextColor(com.jj.viewpager.R.color.black); 
  
            } 
  
        } 
  
    } 
  
 
  
    @Override 
  
     
  public  
  void onCreate(Bundle savedInstanceState) { 
  
         
  super.onCreate(savedInstanceState); 
  
        setContentView(R.layout.main); 
  
        linearLayout = (LinearLayout) findViewById(R.id.ll_main); 
  
        viewPager = (ViewPager) findViewById(R.id.pager); 
  
        horizontalScrollView = (HorizontalScrollView) findViewById(R.id.horizontalScrollView); 
  
        InItTitle1(); 
  
        setSelector(0); 
  
        InItView(); 
  
        viewPager.setAdapter( 
  new myPagerView()); 
  
        viewPager.clearAnimation(); 
  
        viewPager.setOnPageChangeListener( 
  new OnPageChangeListener() { 
  
 
  
            @Override 
  
             
  public  
  void onPageSelected( 
  int arg0) { 
  
                setSelector(arg0); 
  
            } 
  
 
  
            @Override 
  
             
  public  
  void onPageScrolled( 
  int arg0,  
  float arg1,  
  int arg2) { 
  
 
  
            } 
  
 
  
            @Override 
  
             
  public  
  void onPageScrollStateChanged( 
  int arg0) { 
  
 
  
            } 
  
        }); 
  
    } 
  
 
  
    @Override 
  
     
  public  
  void onClick(View v) { 
  
        setSelector(v.getId()); 
  
    } 
  
 
  
     
  class myPagerView  
  extends PagerAdapter { 
  
         
  // 
   显示数目 
  
        @Override 
  
         
  public  
  int getCount() { 
  
             
  return pageViews.size(); 
  
        } 
  
 
  
        @Override 
  
         
  public  
  boolean isViewFromObject(View arg0, Object arg1) { 
  
             
  return arg0 == arg1; 
  
        } 
  
 
  
        @Override 
  
         
  public  
  int getItemPosition(Object object) { 
  
             
  // 
   TODO Auto-generated method stub 
  
             
  return  
  super.getItemPosition(object); 
  
        } 
  
 
  
        @Override 
  
         
  public  
  void destroyItem(View arg0,  
  int arg1, Object arg2) { 
  
             
  // 
   TODO Auto-generated method stub 
  
            ((ViewPager) arg0).removeView(pageViews.get(arg1)); 
  
        } 
  
 
  
         
  /** 
  *
         * 获取每一个item， 类于listview中的getview
          
  */ 
  
        @Override 
  
         
  public Object instantiateItem(View arg0,  
  int arg1) { 
  
            ((ViewPager) arg0).addView(pageViews.get(arg1)); 
  
             
  return pageViews.get(arg1); 
  
        } 
  
 
  
    }</span> 
 

实现起来不难，主要用了HorizontalScrollView 这个实现左右拖拽功能，网上大部分都是用RadioButton实现的，可是觉得有点复杂，我们何不直接对Textview进行控制呢，

 样式如下：

主要看title可以来回拖拽，主要是实现这个功能，其实很简单，看上面代码我想你一下就ok了。

现在说一下问题”首先，我们用的是viewpager来实现，滑动的时候效果很不错，可是当我们点击title切换屏幕的时候，效果就难看了，因为viewpager动画的缘故，如果由1屏-6屏，则它会动画经过2，3，4，5，效果是相当的难看，想找个方案禁止动画，可没有找到，如果知道的朋友麻烦告诉下，谢谢在先了。“   还有就是可以拖拽的标题分页，最好和activitygroup运用.搜狐那个就很不错.实在不行重写viewpaper吧，不过有点复杂，有时间了研究下.这里对viewpager只是简单用一下，不过前面几节都讲过，禁止屏幕滑动和缩回效果等.