现在的位置: 首页 > 综合 > 正文

android仿新浪引导界面

2013年01月20日 ⁄ 综合 ⁄ 共 3052字 ⁄ 字号 评论关闭

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

实现功能:左右手势滑屏

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

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

先转个文章:http://blog.csdn.net/feng88724/article/details/6973662

第一种: ViewFlipper + GestureDetector

第二种: ActivityGroup +   GestureDetector

第三种: ViewPager  (Android3.0+)

第四种: ViewFlow (开源项目)

话不多说,先放上效果图

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

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

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

接下来是代码:

首先在main.xml中声明ViewPager:

[html] view
plain
copy

  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

  1. 和一个viewGroup放小圆点  
[html] view
plain
copy

  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

  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

  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

  1. ...       
[java] view
plain
copy

  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 = 

抱歉!评论已关闭.