android 指引界面的设计

android 引导界面的设计

最近在研究如何做出仿微信，仿新浪等应用，第一次安装使用的使用展示应用程序的新特性和用法。

实现功能：左右手势滑屏

    底部小圆点随当前显示页跳动

    浮动按钮显示。当触屏事件发生显示，否则就渐渐消失

第一种： ViewFlipper + GestureDetector

第二种： ActivityGroup +   GestureDetector

第三种： ViewPager  (Android3.0+)

第四种： ViewFlow (开源项目)

话不多说，先放上效果图

向右滑动，或者点击按钮向右

怎么样，是不是很心动~~~！哈哈、

实现左右滑屏是需要一个叫做ViewPager的东西。具体ViewPager怎么用我就不赘述了。（PS注意导入ViewPager的兼容包)

接下来是代码：

首先在main.xml中声明ViewPager：

<LinearLayout android:id="@+id/linearLayout01" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" > <android.support.v4.view.ViewPager android:id="@+id/guidePages" android:layout_width="fill_parent" android:layout_height="fill_parent"/> </LinearLayout>和一个viewGroup放小圆点 <LinearLayout android:id="@+id/viewGroup" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_marginBottom="40dp" android:gravity="center_horizontal" android:orientation="horizontal" > </LinearLayout>

接着在item01.xml等几个xml中放置要显示的图片,因为几个都一样，就不都贴上来了。

<ImageView android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="@drawable/feature_guide_0" > </ImageView>
接下来是核心代码：

public class GuideViewActivity extends Activity {private ViewPager viewPager; private ArrayList<View> pageViews; private ImageView imageView; private ImageView[] imageViews; // 包裹滑动图片LinearLayout private ViewGroup main;// 包裹小圆点的LinearLayout private ViewGroup group; //左箭头按钮 private ImageView imageViewLeft; //右箭头按钮 private ImageView imageViewRight; //当前页码 private int currentIndex; //ImageView的alpha值 private int mAlpha = 0; private boolean isHide; /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); //将要显示的图片放到ArrayList当中，存到适配器中 LayoutInflater inflater = getLayoutInflater(); pageViews = new ArrayList<View>(); pageViews.add(inflater.inflate(R.layout.item01, null));... [java] view plaincopyprint?

1.        imageViews = new ImageView[pageViews.size()];           main = (ViewGroup)inflater.inflate(R.layout.main, null);    
2.                 group = (ViewGroup)main.findViewById(R.id.viewGroup);    
3.        viewPager = (ViewPager)main.findViewById(R.id.guidePages);           imageViewLeft = (ImageView)main.findViewById(R.id.imageView1);  
4.        imageViewRight = (ImageView)main.findViewById(R.id.imageView2);         imageViewLeft.setAlpha(0);  
5.        imageViewRight.setAlpha(0);           
6.        //将小圆点放到imageView数组当中          for (int i = 0; i < pageViews.size(); i++) {    
7.            imageView = new ImageView(GuideViewActivity.this);               imageView.setLayoutParams(new LayoutParams(20,20));    
8.            imageView.setPadding(20, 0, 20, 0);               imageViews[i] = imageView;    
9.                         if (i == 0) {    
10.             //默认选中第一张图片                  imageViews[i].setBackgroundResource(R.drawable.page_indicator_focused);    
11.            } else {                   imageViews[i].setBackgroundResource(R.drawable.page_indicator);    
12.            }                 
13.            group.addView(imageViews[i]);           }    
14.                 setContentView(main);  
15.                 viewPager.setAdapter(new GuidePageAdapter());    
16.        viewPager.setOnPageChangeListener(new GuidePageChangeListener());         imageViewLeft.setOnClickListener(new ButtonListener());  
17.        imageViewRight.setOnClickListener(new ButtonListener());     }  
18.         //左右切换屏幕的按钮监听器   
19.    class ButtonListener implements OnClickListener{    
20.     @Override      public void onClick(View v) {  
21.         // TODO Auto-generated method stub          int showNext=0;  
22.         if(v.getId() == R.id.imageView1) {              System.out.println("点击了向左的按钮");  
23.             if(currentIndex ==0 )                  showNext = currentIndex;  
24.             else                  showNext = currentIndex-1;  
25.             viewPager.setCurrentItem(showNext);          }  
26.         if(v.getId() == R.id.imageView2){              System.out.println("点击了向右的按钮");  
27.             if(currentIndex == imageViews.length)                  showNext = currentIndex;  
28.             else                  showNext = currentIndex+1;  
29.             viewPager.setCurrentItem(showNext);          }  
30.             System.out.println("当前页码："+showNext);            
31.     }        
32.    }       
33.    /**     * 设置按钮渐显效果 
34.     */     private Handler mHandler = new Handler()  
35.    {         public void handleMessage(Message msg) {  
36.            if(msg.what==1 && mAlpha<255){                            //通过设置不透明度设置按钮的渐显效果   
37.                mAlpha += 50;                   
38.                if(mAlpha>255)                     mAlpha=255;  
39.                                 imageViewLeft.setAlpha(mAlpha);  
40.                imageViewLeft.invalidate();                 imageViewRight.setAlpha(mAlpha);  
41.                imageViewRight.invalidate();                   
42.                if(!isHide && mAlpha<255)                     mHandler.sendEmptyMessageDelayed(1, 100);  
43.            }else if(msg.what==0 && mAlpha>0){                 mAlpha -= 3;  
44.                                 if(mAlpha<0)  
45.                    mAlpha=0;                 imageViewLeft.setAlpha(mAlpha);  
46.                imageViewLeft.invalidate();                 imageViewRight.setAlpha(mAlpha);  
47.                imageViewRight.invalidate();                   
48.                if(isHide && mAlpha>0)                     mHandler.sendEmptyMessageDelayed(0, 2);  
49.            }                     }  
50.    };       
51.    private void showImageButtonView(){         isHide = false;  
52.        mHandler.sendEmptyMessage(1);     }  
53.         private void hideImageButtonView(){  
54.        new Thread(){             public void run() {  
55.                try {                     isHide = true;  
56.                    mHandler.sendEmptyMessage(0);                 } catch (Exception e) {  
57.                    ;                 }  
58.            }         }.start();  
59.    }       
60.     
61.     
62. @Override  public boolean dispatchTouchEvent(MotionEvent ev) {  
63.     System.out.println("this is dispatch");      System.out.println("触碰屏幕");  
64.        switch (ev.getAction()) {             case MotionEvent.ACTION_MOVE:  
65.            case MotionEvent.ACTION_DOWN:                 showImageButtonView();              
66.                break;             case MotionEvent.ACTION_UP:  
67.                hideImageButtonView();                                 break;  
68.        }           
69.              return super.dispatchTouchEvent(ev);  
70. }    
71. // 指引页面数据适配器,实现适配器方法      class GuidePageAdapter extends PagerAdapter {    
72.                @Override    
73.        public int getCount() {               return pageViews.size();    
74.        }       
75.        @Override           public boolean isViewFromObject(View arg0, Object arg1) {    
76.            return arg0 == arg1;           }    
77.           @Override    
78.        public int getItemPosition(Object object) {               // TODO Auto-generated method stub    
79.            return super.getItemPosition(object);           }    
80.           @Override    
81.        public void destroyItem(View arg0, int arg1, Object arg2) {               // TODO Auto-generated method stub    
82.            ((ViewPager) arg0).removeView(pageViews.get(arg1));           }    
83.           @Override    
84.        public Object instantiateItem(View arg0, int arg1) {               // TODO Auto-generated method stub    
85.            ((ViewPager) arg0).addView(pageViews.get(arg1));               return pageViews.get(arg1);    
86.        }       
87.        @Override           public void restoreState(Parcelable arg0, ClassLoader arg1) {    
88.            // TODO Auto-generated method stub       
89.        }       
90.        @Override           public Parcelable saveState() {    
91.            // TODO Auto-generated method stub               return null;    
92.        }       
93.        @Override           public void startUpdate(View arg0) {    
94.            // TODO Auto-generated method stub       
95.        }       
96.        @Override           public void finishUpdate(View arg0) {    
97.            // TODO Auto-generated method stub       
98.        }       }   
99.      // 指引页面更改事件监听器,左右滑动图片时候，小圆点变换显示当前图片位置   
100.    class GuidePageChangeListener implements OnPageChangeListener {            
101.        @Override           public void onPageScrollStateChanged(int arg0) {    
102.            // TODO Auto-generated method stub       
103.        }       
104.        @Override           public void onPageScrolled(int arg0, float arg1, int arg2) {    
105.            // TODO Auto-generated method stub       
106.        }       
107.        @Override           public void onPageSelected(int arg0) {    
108.         currentIndex = arg0;             for (int i = 0; i < imageViews.length; i++) {    
109.                imageViews[arg0].setBackgroundResource(R.drawable.page_indicator_focused);                   
110.                if (arg0 != i) {                       imageViews[i].setBackgroundResource(R.drawable.page_indicator);    
111.                }               }  
112.        }       }    

查看更多 下一篇