android Viewpager HorizontalScrollView 實現分頁欄拖拽

來源:互聯網
上載者:User

首先我們先看一個效果:

                  
 

前兩個是網易的,它做的title不能拖拽,。不過點擊動畫效果挺不錯的,有待學習啊,後面兩個是搜狐的,它做的效果不錯,(注意看title)可以左右拖拽的,因為比較多嘛。

下面這兩個圖不錯,是多米音樂用戶端.它可以來回切換畫面,(重要的是沒有出現向viewpager動畫那麼噁心狀態)這個做的很棒,

      

現在我做的是viewpager+HorizontalScrollView 實現來回切屏,並且title可以左右拖拽.

程式碼片段

/*** * 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);}
 /***     * 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);}}

 /***     * 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);}}}

/*** * 選中效果 */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);}}}@Overridepublic 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() {@Overridepublic void onPageSelected(int arg0) {setSelector(arg0);}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {}@Overridepublic void onPageScrollStateChanged(int arg0) {}});}@Overridepublic void onClick(View v) {setSelector(v.getId());}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);}}


實現起來不難,主要用了HorizontalScrollView 這個實現左右拖拽功能,網上大部分都是用RadioButton實現的,可是覺得有點複雜,我們何不直接對Textview進行控制呢,

 樣式如下:

           
   

主要看title可以來回拖拽,主要是實現這個功能,其實很簡單,看上面代碼我想你一下就ok了。

現在說一下問題”首先,我們用的是viewpager來實現,滑動的時候效果很不錯,可是當我們點擊title切換畫面的時候,效果就難看了,因為viewpager動畫的緣故,如果由1屏-6屏,則它會動畫經過2,3,4,5,效果是相當的難看,想找個方案禁止動畫,可沒有找到,如果知道的朋友麻煩告訴下,謝謝在先了。“   還有就是可以拖拽的標題分頁,最好和activitygroup運用.搜狐那個就很不錯.實在不行重寫viewpaper吧,不過有點複雜,有時間了研究下.這裡對viewpager只是簡單用一下,不過前面幾節都講過,禁止螢幕滑動和縮回效果等.


      源碼下載



 




       


  

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.