Android使用ViewPager实现类似laucher左右拖动效果

 更新时间:2018年05月04日 10:31:12   作者:cjjky  
这篇文章主要为大家详细介绍了Android使用ViewPager实现类似laucher左右拖动效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

现在很多Android应用在首次安装完都会有指引如何使用该应用的某些功能的指引界面,这样会获得很好的用户体验,能够帮助用户更好使用应用的某些功能。其实该功能和Android主界面的 luncher 的功能完全一样的效果,可以实现左右拖动。

下面结合 ViewPager 的实例来展示如何实现该功能,先看下该Demo的结构图:

注:ViewPager类是实现左右两个屏幕平滑地切换的一个类,是由Google 提供的, 使用ViewPager首先需要引入android-support-v4.jar这个jar包。其中工程项目中的 libs 文件夹下存放着 android-support-v4.jar这个jar包。drawable文件夹下包含有图片资源文件。

以下是工程中各个文件的源码:

main.xml源码:

<?xml version="1.0" encoding="utf-8"?> 
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" 
 android:layout_width="fill_parent" 
 android:layout_height="fill_parent" 
 android:orientation="vertical" > 
 
 <android.support.v4.view.ViewPager 
 android:id="@+id/guidePages" 
 android:layout_width="fill_parent" 
 android:layout_height="wrap_content"/> 
  
 <RelativeLayout 
 android:layout_width="fill_parent" 
 android:layout_height="wrap_content" 
 android:orientation="vertical" > 
 <LinearLayout 
 android:id="@+id/viewGroup" 
 android:layout_width="fill_parent" 
 android:layout_height="wrap_content" 
 android:layout_alignParentBottom="true" 
 android:layout_marginBottom="30dp" 
 android:gravity="center_horizontal" 
 android:orientation="horizontal" > 
 </LinearLayout> 
 </RelativeLayout> 
 
</FrameLayout> 

item01.xml源码:

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
 android:layout_width="fill_parent" 
 android:layout_height="fill_parent" 
 android:orientation="vertical" > 
 
 <ImageView 
 android:layout_width="fill_parent" 
 android:layout_height="fill_parent" 
 android:background="@drawable/feature_guide_0" > 
 </ImageView> 
 
</LinearLayout> 

其中item02.xml,item03.xml,item04.xml布局文件的源码和item01.xml布局文件一样,只是 ImageView 中的 android:background 属性的背景图片不同而已。

GuideViewDemoActivity.java 源码:

package com.andyidea.guidedemo; 
 
import java.util.ArrayList; 
 
import android.app.Activity; 
import android.os.Bundle; 
import android.os.Parcelable; 
import android.support.v4.view.PagerAdapter; 
import android.support.v4.view.ViewPager; 
import android.support.v4.view.ViewPager.OnPageChangeListener; 
import android.view.LayoutInflater; 
import android.view.View; 
import android.view.ViewGroup; 
import android.view.ViewGroup.LayoutParams; 
import android.view.Window; 
import android.widget.ImageView; 
 
public class GuideViewDemoActivity extends Activity { 
 
 private ViewPager viewPager; 
 private ArrayList<View> pageViews; 
 private ViewGroup main, group; 
 private ImageView imageView; 
 private ImageView[] imageViews; 
 
 /** Called when the activity is first created. */ 
 @Override 
 public void onCreate(Bundle savedInstanceState) { 
 super.onCreate(savedInstanceState); 
 this.requestWindowFeature(Window.FEATURE_NO_TITLE); 
  
 LayoutInflater inflater = getLayoutInflater(); 
 pageViews = new ArrayList<View>(); 
 pageViews.add(inflater.inflate(R.layout.item01, null)); 
 pageViews.add(inflater.inflate(R.layout.item02, null)); 
 pageViews.add(inflater.inflate(R.layout.item03, null)); 
 pageViews.add(inflater.inflate(R.layout.item04, null)); 
 
 imageViews = new ImageView[pageViews.size()]; 
 main = (ViewGroup)inflater.inflate(R.layout.main, null); 
  
 // group是R.layou.main中的负责包裹小圆点的LinearLayout. 
 group = (ViewGroup)main.findViewById(R.id.viewGroup); 
 
 viewPager = (ViewPager)main.findViewById(R.id.guidePages); 
 
 for (int i = 0; i < pageViews.size(); i++) { 
  imageView = new ImageView(GuideViewDemoActivity.this); 
  imageView.setLayoutParams(new LayoutParams(20,20)); 
  imageView.setPadding(20, 0, 20, 0); 
  imageViews[i] = imageView; 
  if (i == 0) { 
  //默认选中第一张图片 
  imageViews[i].setBackgroundResource(R.drawable.page_indicator_focused); 
  } else { 
  imageViews[i].setBackgroundResource(R.drawable.page_indicator); 
  } 
  group.addView(imageViews[i]); 
 } 
 
 setContentView(main); 
 
 viewPager.setAdapter(new GuidePageAdapter()); 
 viewPager.setOnPageChangeListener(new GuidePageChangeListener()); 
 } 
 
 /** 指引页面Adapter */ 
 class GuidePageAdapter extends PagerAdapter { 
  
 @Override 
 public int getCount() { 
  return pageViews.size(); 
 } 
 
 @Override 
 public boolean isViewFromObject(View arg0, Object arg1) { 
  return arg0 == arg1; 
 } 
 
 @Override 
 public int getItemPosition(Object object) { 
  // TODO Auto-generated method stub 
  return super.getItemPosition(object); 
 } 
 
 @Override 
 public void destroyItem(View arg0, int arg1, Object arg2) { 
  // TODO Auto-generated method stub 
  ((ViewPager) arg0).removeView(pageViews.get(arg1)); 
 } 
 
 @Override 
 public Object instantiateItem(View arg0, int arg1) { 
  // TODO Auto-generated method stub 
  ((ViewPager) arg0).addView(pageViews.get(arg1)); 
  return pageViews.get(arg1); 
 } 
 
 @Override 
 public void restoreState(Parcelable arg0, ClassLoader arg1) { 
  // TODO Auto-generated method stub 
 
 } 
 
 @Override 
 public Parcelable saveState() { 
  // TODO Auto-generated method stub 
  return null; 
 } 
 
 @Override 
 public void startUpdate(View arg0) { 
  // TODO Auto-generated method stub 
 
 } 
 
 @Override 
 public void finishUpdate(View arg0) { 
  // TODO Auto-generated method stub 
 
 } 
 } 
 
 /** 指引页面改监听器 */ 
 class GuidePageChangeListener implements OnPageChangeListener { 
 
 @Override 
 public void onPageScrollStateChanged(int arg0) { 
  // TODO Auto-generated method stub 
 
 } 
 
 @Override 
 public void onPageScrolled(int arg0, float arg1, int arg2) { 
  // TODO Auto-generated method stub 
 
 } 
 
 @Override 
 public void onPageSelected(int arg0) { 
  for (int i = 0; i < imageViews.length; i++) { 
  imageViews[arg0] 
   .setBackgroundResource(R.drawable.page_indicator_focused); 
  if (arg0 != i) { 
   imageViews[i] 
    .setBackgroundResource(R.drawable.page_indicator); 
  } 
  } 
 
 } 
 
 } 
 
} 

运行上面的程序,效果截图如下: 

   

至此大功告成,已经采用ViewPager组件实现了左右滑动(拖动)效果。

源码下载:Android实现类似laucher左右拖动

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • Android实现自适应屏幕的弹窗广告

    Android实现自适应屏幕的弹窗广告

    这篇文章主要为大家详细介绍了Android实现自适应屏幕的弹窗广告,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-07-07
  • Android Studio 利用Splash制作APP启动界面的方法

    Android Studio 利用Splash制作APP启动界面的方法

    这篇文章主要介绍了Android Studio 利用Splash制作APP启动界面,本文通过图文并茂的形式给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-05-05
  • Android开发之在程序中时时获取logcat日志信息的方法(附demo源码下载)

    Android开发之在程序中时时获取logcat日志信息的方法(附demo源码下载)

    这篇文章主要介绍了Android开发之在程序中时时获取logcat日志信息的方法,结合实例形式较为详细的分析了实时获取logcat日志的原理、步骤与相关实现技巧,并附带相应的demo源码供读者下载参考,需要的朋友可以参考下
    2016-02-02
  • Android实现验证码登录

    Android实现验证码登录

    这篇文章主要为大家详细介绍了Android实现验证码登录,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-03-03
  • Android checkbox的listView具体操作方法

    Android checkbox的listView具体操作方法

    这篇文章主要介绍了Android checkbox的listView具体操作方法,重点就是存储每个checkbox的状态值,感兴趣的小伙伴们可以参考一下
    2015-12-12
  • Json数据解析模拟美团界面显示

    Json数据解析模拟美团界面显示

    这篇文章主要介绍了Json数据解析模拟美团界面显示,涉及到json数据解析相关知识,本文写的非常不错,具有参考价值,特此分享供大家学习
    2016-01-01
  • Android原生项目集成React Native的方法

    Android原生项目集成React Native的方法

    本篇文章主要介绍了Android原生项目集成React Native的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • Android开发之AlertDialog实现弹出对话框

    Android开发之AlertDialog实现弹出对话框

    这篇文章主要为大家详细介绍了Android开发之AlertDialog实现弹出对话框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-09-09
  • Android使用Gallery实现照片拖动的特效

    Android使用Gallery实现照片拖动的特效

    这篇文章主要介绍了Android如何使用Gallery实现照片拖动的特效,帮助大家更好的理解和利用Android进行开发,感兴趣的朋友可以了解下
    2021-01-01
  • Android中实现图文并茂的按钮实例代码

    Android中实现图文并茂的按钮实例代码

    这篇文章主要介绍了Android中实现图文并茂的按钮实例代码,代码简单易懂,非常不错,需要的朋友可以参考下
    2017-04-04

最新评论