（转）android中利用 ViewPage 实现滑动屏

最新推荐文章于 2021-05-31 17:31:43 发布
最新推荐文章于 2021-05-31 17:31:43 发布
阅读量82 收藏
点赞数
原文链接：http://www.cnblogs.com/wade-pcb/p/4646351.html
版权

 

 

最近实现了这样的一个效果：滑动界面出现拖拽效果，可翻动3屏，也可点击按钮翻动页面。

 

主要利用android.support.v4.view.ViewPager控件来实现。

 

第一个界面：

[android] <wbr>利用 <wbr>ViewPage <wbr>实现滑动屏

滑动屏幕：
[android] <wbr>利用 <wbr>ViewPage <wbr>实现滑动屏

换到下一屏：
[android] <wbr>利用 <wbr>ViewPage <wbr>实现滑动屏

 

布局文件：

主界面 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="wrap_content"
    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_alignParentTop="true" 
        android:gravity="center_horizontal" 
        android:orientation="horizontal" > 
   <Button
      android:id="@+id/pre_one_button"
    android:layout_width="wrap_content"
   android:layout_height="50dp"
   android:layout_weight = "1"
   android:textSize="18sp"
   android:textColor="@android:color/black"
   android:text="本周"
   android:padding="7dp"
   android:textStyle="bold"
   android:background="@drawable/button_selected"
      />
   <Button
      android:id="@+id/pre_two_button"
    android:layout_width="wrap_content"
   android:layout_height="50dp"
   android:layout_weight = "1"
   android:textSize="18sp"
   android:textColor="@android:color/black"
   android:text="前一周"
   android:padding="7dp"
   android:textStyle="bold"
   android:background="@drawable/button_unselected"
      />
   <Button
      android:id="@+id/pre_three_button"
    android:layout_width="wrap_content"
   android:layout_height="50dp"
   android:layout_weight = "1"
   android:textSize="18sp"
   android:textColor="@android:color/black"
   android:text="前二周"
   android:padding="7dp"
   android:textStyle="bold"
   android:background="@drawable/button_unselected"
      />
   </LinearLayout>
    </RelativeLayout>

</FrameLayout>

第一屏界面：page01.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" >
   
    <ListView
     android:id="@+id/lv01"
  android:layout_width="fill_parent"
     android:layout_height="fill_parent"
     android:layout_marginTop="50dp"
     android:textColor="@android:color/black"
     android:cacheColorHint="#00000000" 
     android:scrollbars="none"
  />   
</LinearLayout>

第二屏 ，第三屏与第一屏布局一样，分别叫page02.xml page03.xml，并且要把ListView的 id 改为 lv02 lv03

 

列表条目布局：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:id="@+id/subjectLayout"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:padding="10dp"
  android:background="@android:color/white"
  >
   <ImageView
       android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/homework_icon"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        />
 <TextView
  android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@android:color/black"
        android:id="@+id/homework_name"
        android:layout_toRightOf="@id/homework_icon"
        />
 <TextView
  android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@android:color/black"
        android:textSize="18sp"
        android:id="@+id/homework_subject"
        android:layout_toRightOf="@id/homework_icon"
        android:layout_below="@id/homework_name"
        />
 <TextView
  android:layout_width="wrap_content"
        android:layout_height="wrap_content"
         android:textColor="@android:color/black"
        android:id="@+id/homework_teacher"
        android:layout_toRightOf="@id/homework_icon"
        android:layout_below="@id/homework_subject"
        />
 <TextView
  android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@android:color/black"
        android:id="@+id/homework_submit_date"
        android:layout_toRightOf="@id/homework_icon"
        android:layout_below="@id/homework_teacher"
        />
</RelativeLayout>

 

 

Java代码：

public class MainActivity extends Activity {
  
     private ViewPager viewPager; 
     private ArrayList<View> pageViews; 
     private ViewGroup buttonsLine;  
     private Button button01; 
     private Button button02; 
     private Button button03; 
     private Button[] buttons;
     private ListView lv01;
     private ListView lv02;
     private ListView lv03;
    
    
     @Override
     public void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         this.requestWindowFeature(Window.FEATURE_NO_TITLE);
        
         LayoutInflater inflater = getLayoutInflater(); 
         pageViews = new ArrayList<View>(); 
         //每页de界面
         View page01=inflater.inflate(R.layout.page01, null);
         View page02=inflater.inflate(R.layout.page02, null);
         View page03=inflater.inflate(R.layout.page03, null);
         pageViews.add(page01);  //lee
         pageViews.add(page02);  //lee
         pageViews.add(page03);  //lee
         lv01 = (ListView) page01.findViewById(R.id.lv01);
         lv02 = (ListView) page02.findViewById(R.id.lv02);
         lv03 = (ListView) page03.findViewById(R.id.lv03);
         lv01.setAdapter(new HomeworkListAdapter(this));
         lv02.setAdapter(new HomeworkListAdapter(this));
         lv03.setAdapter(new HomeworkListAdapter(this));
        
         //按钮栏
         buttons = new Button[pageViews.size()]; 
         buttonsLine = (ViewGroup)inflater.inflate(R.layout.main, null); 
         button01 = (Button) buttonsLine.findViewById(R.id.pre_one_button);
         button02 = (Button) buttonsLine.findViewById(R.id.pre_two_button);
         button03 = (Button) buttonsLine.findViewById(R.id.pre_three_button);
         buttons[0] = button01;
         buttons[1] = button02;
         buttons[2] = button03;
         button01.setOnClickListener(new GuideButtonClickListener(0));
         button02.setOnClickListener(new GuideButtonClickListener(1));
         button03.setOnClickListener(new GuideButtonClickListener(2));
        
         viewPager = (ViewPager)buttonsLine.findViewById(R.id.guidePages); 
         setContentView(buttonsLine); 
  
         viewPager.setAdapter(new GuidePageAdapter()); 
         viewPager.setOnPageChangeListener(new GuidePageChangeListener()); 
     }
 
  //列表适配
  public class HomeworkListAdapter extends BaseAdapter {
  
   private Context mContext = null;
   private LayoutInflater mInflater = null;
     
   public HomeworkListAdapter(Context c) {
    mContext = c;
    mInflater = LayoutInflater.from(this.mContext);
   }

   @Override
   public int getCount() {
    return 8;
   }

   @Override
   public Object getItem(int position) {
    return position;
   }

   @Override
   public long getItemId(int position) {
    return position;
   }

   @Override
   public View getView(int position, View convertView, ViewGroup parent) {

    ViewHolder holder = null;
    if (convertView == null) {
        holder = new ViewHolder();
        convertView = mInflater.inflate(R.layout.homework_item, null);
     //初始化组件
        holder.icon  =(ImageView) convertView. findViewById(R.id.homework_icon);
        holder.name = (TextView) convertView.findViewById(R.id.homework_name);
     holder.subject  = (TextView) convertView.findViewById(R.id.homework_subject);
     holder.teacher = (TextView) convertView.findViewById(R.id.homework_teacher);  
     holder.date = (TextView) convertView.findViewById(R.id.homework_submit_date); 
     convertView.setOnTouchListener(new OnTouchListener() {
      @Override
      public boolean onTouch(View v, MotionEvent event) {
       // TODO Auto-generated method stub
       switch (event.getAction()) {
       case MotionEvent.ACTION_DOWN:
        v.setBackgroundResource(R.drawable.item_seleted);
        break;
       case MotionEvent.ACTION_UP:
        v.setBackgroundResource(R.drawable.item_unseleted);
        break;
       case MotionEvent.ACTION_CANCEL:
        v.setBackgroundResource(R.drawable.item_unseleted);
        break;
       }
       return true;
      }
     });
     convertView.setTag(holder);
     
    } else {
     holder=(ViewHolder) convertView.getTag();
    }
    
    holder.icon.setBackgroundResource(R.drawable.ic_launcher);
    holder.name.setText(".getName()");
    holder.subject.setText(".getSubjectName()");
    holder.teacher.setText(".getTeacherName()");
    holder.date.setText(".getSubmitDate()");
    
    return convertView;
   }

   class ViewHolder {
    ImageView icon;
    TextView  name;
    TextView  subject;
    TextView  teacher;
    TextView  date;
   }
  }
    
    
    
     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 < buttons.length; i++) { 
              buttons[arg0] 
                         .setBackgroundResource(R.drawable.button_selected); 
                 if (arg0 != i) { 
                  buttons[i] 
                             .setBackgroundResource(R.drawable.button_unselected); 
                 } 
             }
         } 
     }

    
    
     class GuideButtonClickListener implements OnClickListener { 
       private int index = 0;
      
          public GuideButtonClickListener(int i) {
              index = i;
          }
 
          @Override
          public void onClick(View v) {
           viewPager.setCurrentItem(index, true);
          }
     }
    
}

转载于:https://www.cnblogs.com/wade-pcb/p/4646351.html

weixin_30300523
关注
ViewPage实现一屏多页面显示（进阶版），android高级面试题库
wq221aas的博客
01-23 463
import android.app.Activity; import android.os.Bundle; import android.view.View; import android.view.ViewGroup; import android.widget.ImageView; import android.widget.LinearLayout; import androidx.annotation.NonNull; import androidx.viewpager.widget.PagerA
android 3d翻转动画 viewpage,利用ViewPager实现3D画廊效果及其图片加载优化
weixin_29122543的博客
05-25 1627
前言对于ViewPager，相信大家都已经很熟悉了，在各种切换场景比如Fragment切换、选项卡的切换或者顶部轮播图片等都可以用ViewPager去实现。那么本篇文章带来ViewPager的一种实现效果：3D画廊。直接上图来看：ic.gif从上面的图我们可以看出，整个页面分成三个部分，中间的是大图，正中地显示给用户；而两边的是侧图，而这两幅图片又有着角度的旋转，与大图看起来不在同一平面上，这就形...
采用ViewPage+FragmentStatePagerAdapter实现的左右滑屏
01-20
Android studio项目整体打包源码，实现效果见博文：https://blog.csdn.net/bigc2001/article/details/112851368
用ViewPage实现不同的滑动效果
hbyh632的博客
09-29 547
给ViewPager滑动加一个动画. 在我之前的博客模仿知乎安卓客户端的banner广告条以及一些思考中有写到利用viewPager的PageTransformer来实现各种不同的viewPager的滑动效果,这次我就写了9种不同的效果来练习一下. 代码在我的 github 这里面用的知识点也不是很多,主要是和view变换有关的 0.View.setAlpha()设置透明度 1. V
Android ViewPager多页面滑动切换以及动画效果
小地盘的诺克萨斯
03-28 1036
转载：http://blog.csdn.net/zhuifeng11/article/details/7604734 http://www.cnblogs.com/dwinter/archive/2012/02/27/AndroidViewPager%E5%A4%9A%E9%A1%B5%E9%9D%A2%E6%BB%91%E5%8A%A8%E5%88%87%E6%8D%A2%E4%BB%
Android开发——ViewPage的使用
一只特立独行的猪
07-11 953
**（注：本篇文章的例子使用的是ConstraintLayout布局方式） ViewPage有两种使用方式，一是直接加载布局文件（使用PagerAdapter），二是加载fragment（使用FragmentPagerAdapter）。** 效果图： 一、直接加载布局文件1.在主布局中加入ViewPage<?xml version="1.0" encoding="utf-8"?> <andro
Android实现ViewPage轮播图效果
08-27
本篇文章将详细讲解如何利用`ViewPager`组件在Android中实现轮播图效果。 首先，我们需要了解`ViewPager`。`ViewPager`是Android SDK中的一个视图容器，它允许用户通过水平滑动来浏览多个页面。在这个场景中，我们...
Android编程中ViewPage判断左右滑动方向的方法
01-20
在Android编程中，`ViewPager` 是一个非常常用的组件，它允许用户通过左右滑动来浏览多个页面。在某些场景下，我们可能需要监听`ViewPager`的滑动方向，例如为了执行特定的操作或动画。在提供的代码中，作者创建了一...
Android引导页面的滑动实现，解决ViewPage侧滑与ListView滑动的冲突问题
08-19
在Android应用开发中，用户界面的设计和交互是关键部分，其中引导页面的滑动体验尤为重要。引导页面通常用于展示新特性或吸引用户关注特定功能，而`ViewPage`是Android SDK提供的一种常用的滑动浏览组件，它允许用户...
Android 实现联动ViewPager。两个ViewPage实现同步滑动~ 源码
10-10
本篇文章将深入探讨如何在Android中实现这种功能，并基于提供的源码`LinkedViewPager-master`进行分析。 首先，我们需要了解ViewPager的基本用法。ViewPager通常配合PagerAdapter或FragmentPagerAdapter使用，用于...
android 打开屏幕,android打开关闭屏幕
weixin_31953691的博客
05-31 1061
打开和关闭手机屏幕方法：1.关闭屏幕//设备管理者private DevicePolicyManager mDevicePolicyManager;//关屏组件private ComponentName mCompName;onCreate(){mDevicePolicyManager = (DevicePolicyManager) getSystemService(Context.DEVICE_...
仿android桌面滑屏 ViewPage
05-26 5516
相信大家都对android桌面左右划屏操作很羡慕吧，QQ，新浪weibo，AndroidMarket都有这种操作，而且很多都作为主界面使用，可见其用户交互性特别好。     今天就把这种操作亲手实现，大家共同学习。ViewPage是Google最近在Compatibilit package发布的，支持android1.6+,可以在SDK安装目录下找到   \android-sdk-window
实现ViewPager一次滑动多页（保持居中）
weixin_30797027的博客
07-04 697
项目中开发日历功能，需求是可以连续滑动多页，有列表的流畅。又要保持当前页居中显示。 参考文献：http://www.open-open.com/lib/view/open1435026935638.html http://mp.weixin.qq.com/s/DMksgHOuGWhztESGfDgucA?utm_source=tuicool&...
android横竖屏切换viewpage,GitHub - open-android/ViewPager: 一分钟实现ViewPager横竖屏切换滑动...
weixin_35148271的博客
05-31 316
支持水平方向上滑动和竖直方向上的滑动，直接修改的官方提供的ViewPager的源码，注入了方向判断，使用起来和官方的ViewPager基本一样，还有监听事件也是一样的，支持setOffscreenPageLimit()可以放心滑动，以及TabLayout等。详细的使用方法在DEMO里面都演示啦,如果你觉得这个库还不错,请赏我一颗star吧~~~欢迎关注微信公众号、长期为您推荐优秀博文、开源项目、视...
Android ViewPager使用方法小结
一直学，你始终是学生，但是只要创造一招，你便是宗师。
03-26 5097
android-support-v4.jar 是谷歌提供给我们的一个兼容低版本安卓设备的软件包，里面包囊了只有在 Android 3.0 以上可用的API。而 ViewPager 就是其中之一。利用它，我们可以做很多事情，从最简单的导航，到页面菜单等等。
com.pureharmony.exception.CloudBackupFailureException.md
11-11
鸿蒙开发中碰到的报错，问题已解决，写个文档记录一下这个问题及解决方案
PikaPython 是一个完全重写的超轻量级python引擎，零依赖，零配置，可以在少于4KB的RAM下运行 极易部署和扩展
11-11
PikaPython 是一个完全重写的超轻量级python引擎，零依赖，零配置，可以在少于4KB的RAM下运行(如stm32g030c8和stm32f103c8)，极易部署和扩展
DeFi去中心化金融实验备份
最新发布
11-11
DeFi去中心化金融实验备份
com.harmonyos.exception.BluetoothPairingException(解决方案).md
11-11
鸿蒙开发中碰到的报错，问题已解决，写个文档记录一下这个问题及解决方案
androidstudio使用Viewpage和tablayout实现滑动效果
06-09
好的，下面是使用ViewPager和TabLayout实现滑动效果的步骤： 1.在布局文件中添加ViewPager和TabLayout组件 ```xml <android.support.design.widget.TabLayout android:id="@+id/tabLayout" android:layout_width...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值