首先我們先看一個效果:
前兩個是網易的,它做的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只是簡單用一下,不過前面幾節都講過,禁止螢幕滑動和縮回效果等.
源碼下載