android 引导界面的设计

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

实现功能:左右手势滑屏

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

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

第一种: ViewFlipper + GestureDetector

第二种: ActivityGroup +   GestureDetector

第三种: ViewPager  (Android3.0+)

第四种: ViewFlow (开源项目)


话不多说,先放上效果图

android 引导界面的设计_第1张图片向右滑动,或者点击按钮向右android 引导界面的设计_第2张图片


怎么样,是不是很心动~~~!哈哈、


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

接下来是代码:

首先在main.xml中声明ViewPager:

[html]  view plain copy print ?
  1. <LinearLayout  
  2.    android:id="@+id/linearLayout01"  
  3.    android:layout_width="match_parent"  
  4.    android:layout_height="wrap_content"  
  5.    android:orientation="vertical" >  
  6. <android.support.v4.view.ViewPager  
  7.     android:id="@+id/guidePages"  
  8.     android:layout_width="fill_parent"  
  9.     android:layout_height="fill_parent"/>  
  10.   
  11. lt;/LinearLayout>  
[html]  view plain copy print ?
  1. <LinearLayout  
  2.    android:id="@+id/linearLayout01"  
  3.    android:layout_width="match_parent"  
  4.    android:layout_height="wrap_content"  
  5.    android:orientation="vertical" >  
  6. <android.support.v4.view.ViewPager  
  7.     android:id="@+id/guidePages"  
  8.     android:layout_width="fill_parent"  
  9.     android:layout_height="fill_parent"/>  
  10.   
  11. lt;/LinearLayout>  
[html]  view plain copy print ?
  1. 和一个viewGroup放小圆点  
[html]  view plain copy print ?
  1. 和一个viewGroup放小圆点  
[html]  view plain copy print ?
  1. <LinearLayout    
  2.     android:id="@+id/viewGroup"    
  3.     android:layout_width="fill_parent"    
  4.     android:layout_height="wrap_content"    
  5.     android:layout_alignParentBottom="true"    
  6.     android:layout_marginBottom="40dp"    
  7.     android:gravity="center_horizontal"    
  8.     android:orientation="horizontal" >    
  9.       
  10. </LinearLayout>  
[html]  view plain copy print ?
  1. <LinearLayout    
  2.     android:id="@+id/viewGroup"    
  3.     android:layout_width="fill_parent"    
  4.     android:layout_height="wrap_content"    
  5.     android:layout_alignParentBottom="true"    
  6.     android:layout_marginBottom="40dp"    
  7.     android:gravity="center_horizontal"    
  8.     android:orientation="horizontal" >    
  9.       
  10. </LinearLayout>  


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

[html]  view plain copy print ?
  1. <ImageView  
  2.     android:layout_width="fill_parent"  
  3.     android:layout_height="fill_parent"  
  4.     android:background="@drawable/feature_guide_0" >  
  5.   
  6. </ImageView>  
[html]  view plain copy print ?
  1. <ImageView  
  2.     android:layout_width="fill_parent"  
  3.     android:layout_height="fill_parent"  
  4.     android:background="@drawable/feature_guide_0" >  
  5.   
  6. </ImageView>  

接下来是核心代码:

[java]  view plain copy print ?
  1. public class GuideViewActivity extends Activity {  
  2.       
  3.   
  4.     private ViewPager viewPager;    
  5.      private ArrayList<View> pageViews;    
  6.      private ImageView imageView;    
  7.      private ImageView[] imageViews;   
  8.     // 包裹滑动图片LinearLayout   
  9.      private ViewGroup main;  
  10.     // 包裹小圆点的LinearLayout   
  11.      private ViewGroup group;  
  12.      //左箭头按钮   
  13.      private ImageView imageViewLeft;  
  14.      //右箭头按钮   
  15.      private ImageView imageViewRight;  
  16.      //当前页码   
  17.      private int currentIndex;  
  18.        
  19.      //ImageView的alpha值      
  20.      private int mAlpha = 0;  
  21.      private boolean isHide;  
  22.        
  23.           
  24.     /** Called when the activity is first created. */  
  25.     @Override  
  26.     public void onCreate(Bundle savedInstanceState) {  
  27.           
  28.         super.onCreate(savedInstanceState);  
  29.   
  30.         //将要显示的图片放到ArrayList当中,存到适配器中   
  31.         LayoutInflater inflater = getLayoutInflater();    
  32.         pageViews = new ArrayList<View>();    
  33.         pageViews.add(inflater.inflate(R.layout.item01, null));  
[java]  view plain copy print ?
  1. public class GuideViewActivity extends Activity {  
  2.       
  3.   
  4.     private ViewPager viewPager;    
  5.      private ArrayList<View> pageViews;    
  6.      private ImageView imageView;    
  7.      private ImageView[] imageViews;   
  8.     // 包裹滑动图片LinearLayout  
  9.      private ViewGroup main;  
  10.     // 包裹小圆点的LinearLayout  
  11.      private ViewGroup group;  
  12.      //左箭头按钮  
  13.      private ImageView imageViewLeft;  
  14.      //右箭头按钮  
  15.      private ImageView imageViewRight;  
  16.      //当前页码  
  17.      private int currentIndex;  
  18.        
  19.      //ImageView的alpha值     
  20.      private int mAlpha = 0;  
  21.      private boolean isHide;  
  22.        
  23.           
  24.     /** Called when the activity is first created. */  
  25.     @Override  
  26.     public void onCreate(Bundle savedInstanceState) {  
  27.           
  28.         super.onCreate(savedInstanceState);  
  29.   
  30.         //将要显示的图片放到ArrayList当中,存到适配器中  
  31.         LayoutInflater inflater = getLayoutInflater();    
  32.         pageViews = new ArrayList<View>();    
  33.         pageViews.add(inflater.inflate(R.layout.item01, null));  
[java]  view plain copy print ?
  1. ...       
[java]  view plain copy print ?
  1. ...       
[java]  view plain copy print ?
  1.        imageViews = new ImageView[pageViews.size()];    
  2.        main = (ViewGroup)inflater.inflate(R.layout.main, null);    
  3.          
  4.        group = (ViewGroup)main.findViewById(R.id.viewGroup);    
  5.        viewPager = (ViewPager)main.findViewById(R.id.guidePages);    
  6.        imageViewLeft = (ImageView)main.findViewById(R.id.imageView1);  
  7.        imageViewRight = (ImageView)main.findViewById(R.id.imageView2);  
  8.        imageViewLeft.setAlpha(0);  
  9.        imageViewRight.setAlpha(0);  
  10.          
  11.        //将小圆点放到imageView数组当中   
  12.        for (int i = 0; i < pageViews.size(); i++) {    
  13.            imageView = new ImageView(GuideViewActivity.this);    
  14.            imageView.setLayoutParams(new LayoutParams(20,20));    
  15.            imageView.setPadding(200200);    
  16.            imageViews[i] = imageView;    
  17.              
  18.            if (i == 0) {    
  19.             //默认选中第一张图片   
  20.                imageViews[i].setBackgroundResource(R.drawable.page_indicator_focused);    
  21.            } else {    
  22.                imageViews[i].setBackgroundResource(R.drawable.page_indicator);    
  23.            }    
  24.              
  25.            group.addView(imageViews[i]);    
  26.        }    
  27.          
  28.        setContentView(main);  
  29.          
  30.        viewPager.setAdapter(new GuidePageAdapter());    
  31.        viewPager.setOnPageChangeListener(new GuidePageChangeListener());  
  32.        imageViewLeft.setOnClickListener(new ButtonListener());  
  33.        imageViewRight.setOnClickListener(new ButtonListener());  
  34.    }  
  35.      
  36.    //左右切换屏幕的按钮监听器   
  37.    class ButtonListener implements OnClickListener{  
  38.   
  39.     @Override  
  40.     public void onClick(View v) {  
  41.         // TODO Auto-generated method stub   
  42.         int showNext=0;  
  43.         if(v.getId() == R.id.imageView1) {  
  44.             System.out.println("点击了向左的按钮");  
  45.             if(currentIndex ==0 )  
  46.                 showNext = currentIndex;  
  47.             else  
  48.                 showNext = currentIndex-1;  
  49.             viewPager.setCurrentItem(showNext);  
  50.         }  
  51.         if(v.getId() == R.id.imageView2){  
  52.             System.out.println("点击了向右的按钮");  
  53.             if(currentIndex == imageViews.length)  
  54.                 showNext = currentIndex;  
  55.             else  
  56.                 showNext = currentIndex+1;  
  57.             viewPager.setCurrentItem(showNext);  
  58.         }  
  59.             System.out.println("当前页码:"+showNext);  
  60.           
  61.     }  
  62.       
  63.    }  
  64.      
  65.    /** 
  66.     * 设置按钮渐显效果 
  67.     */  
  68.    private Handler mHandler = new Handler()  
  69.    {  
  70.        public void handleMessage(Message msg) {  
  71.            if(msg.what==1 && mAlpha<255){             
  72.                //通过设置不透明度设置按钮的渐显效果   
  73.                mAlpha += 50;  
  74.                  
  75.                if(mAlpha>255)  
  76.                    mAlpha=255;  
  77.                  
  78.                imageViewLeft.setAlpha(mAlpha);  
  79.                imageViewLeft.invalidate();  
  80.                imageViewRight.setAlpha(mAlpha);  
  81.                imageViewRight.invalidate();  
  82.                  
  83.                if(!isHide && mAlpha<255)  
  84.                    mHandler.sendEmptyMessageDelayed(1100);  
  85.            }else if(msg.what==0 && mAlpha>0){  
  86.                mAlpha -= 3;  
  87.                  
  88.                if(mAlpha<0)  
  89.                    mAlpha=0;  
  90.                imageViewLeft.setAlpha(mAlpha);  
  91.                imageViewLeft.invalidate();  
  92.                imageViewRight.setAlpha(mAlpha);  
  93.                imageViewRight.invalidate();  
  94.                  
  95.                if(isHide && mAlpha>0)  
  96.                    mHandler.sendEmptyMessageDelayed(02);  
  97.            }              
  98.        }  
  99.    };  
  100.      
  101.    private void showImageButtonView(){  
  102.        isHide = false;  
  103.        mHandler.sendEmptyMessage(1);  
  104.    }  
  105.      
  106.    private void hideImageButtonView(){  
  107.        new Thread(){  
  108.            public void run() {  
  109.                try {  
  110.                    isHide = true;  
  111.                    mHandler.sendEmptyMessage(0);  
  112.                } catch (Exception e) {  
  113.                    ;  
  114.                }  
  115.            }  
  116.        }.start();  
  117.    }  
  118.      
  119.   
  120.   
  121.   
  122.   
  123. @Override  
  124. public boolean dispatchTouchEvent(MotionEvent ev) {  
  125.     System.out.println("this is dispatch");  
  126.     System.out.println("触碰屏幕");  
  127.        switch (ev.getAction()) {  
  128.            case MotionEvent.ACTION_MOVE:  
  129.            case MotionEvent.ACTION_DOWN:  
  130.                showImageButtonView();              
  131.                break;  
  132.            case MotionEvent.ACTION_UP:  
  133.                hideImageButtonView();                  
  134.                break;  
  135.        }  
  136.          
  137.          
  138.     return super.dispatchTouchEvent(ev);  
  139. }  
  140.   
  141. // 指引页面数据适配器,实现适配器方法   
  142.    class GuidePageAdapter extends PagerAdapter {    
  143.         
  144.        @Override    
  145.        public int getCount() {    
  146.            return pageViews.size();    
  147.        }    
  148.    
  149.        @Override    
  150.        public boolean isViewFromObject(View arg0, Object arg1) {    
  151.            return arg0 == arg1;    
  152.        }    
  153.    
  154.        @Override    
  155.        public int getItemPosition(Object object) {    
  156.            // TODO Auto-generated method stub     
  157.            return super.getItemPosition(object);    
  158.        }    
  159.    
  160.        @Override    
  161.        public void destroyItem(View arg0, int arg1, Object arg2) {    
  162.            // TODO Auto-generated method stub     
  163.            ((ViewPager) arg0).removeView(pageViews.get(arg1));    
  164.        }    
  165.    
  166.        @Override    
  167.        public Object instantiateItem(View arg0, int arg1) {    
  168.            // TODO Auto-generated method stub     
  169.            ((ViewPager) arg0).addView(pageViews.get(arg1));    
  170.            return pageViews.get(arg1);    
  171.        }    
  172.    
  173.        @Override    
  174.        public void restoreState(Parcelable arg0, ClassLoader arg1) {    
  175.            // TODO Auto-generated method stub     
  176.    
  177.        }    
  178.    
  179.        @Override    
  180.        public Parcelable saveState() {    
  181.            // TODO Auto-generated method stub     
  182.            return null;    
  183.        }    
  184.    
  185.        @Override    
  186.        public void startUpdate(View arg0) {    
  187.            // TODO Auto-generated method stub     
  188.    
  189.        }    
  190.    
  191.        @Override    
  192.        public void finishUpdate(View arg0) {    
  193.            // TODO Auto-generated method stub     
  194.    
  195.        }    
  196.    }   
  197.      
  198. // 指引页面更改事件监听器,左右滑动图片时候,小圆点变换显示当前图片位置   
  199.    class GuidePageChangeListener implements OnPageChangeListener {    
  200.         
  201.        @Override    
  202.        public void onPageScrollStateChanged(int arg0) {    
  203.            // TODO Auto-generated method stub     
  204.    
  205.        }    
  206.    
  207.        @Override    
  208.        public void onPageScrolled(int arg0, float arg1, int arg2) {    
  209.            // TODO Auto-generated method stub     
  210.    
  211.        }    
  212.    
  213.        @Override    
  214.        public void onPageSelected(int arg0) {    
  215.         currentIndex = arg0;  
  216.            for (int i = 0; i < imageViews.length; i++) {    
  217.                imageViews[arg0].setBackgroundResource(R.drawable.page_indicator_focused);  
  218.                  
  219.                if (arg0 != i) {    
  220.                    imageViews[i].setBackgroundResource(R.drawable.page_indicator);    
  221.                }    
  222.            }  
  223.        }    
  224.    }    

你可能感兴趣的:(android 引导界面的设计)