Android随笔--使用ViewPager实现简单地图片的左右滑动切换
Android中图片的左右切换随处可见,今天我也试着查阅资料试着做了一下,挺简单的一个小Demo,却也发现了一些问题,话不多说,上代码~:
- 使用了3个xml文件作为ViewPager的滑动page,布局都是相同的,如下只展示其中之一:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@mipmap/view1"/> </LinearLayout>只是用了一个ImageView作为显示图片的容器
- 主页面布局:
<?xml version="1.0" encoding="UTF-8"?> <RelativeLayout android:orientation="vertical"
android:layout_height="match_parent"
android:layout_width="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"> <!-- 切换卡 --> <android.support.v4.view.ViewPager
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:id="@+id/viewPager"></android.support.v4.view.ViewPager> <!-- 点点 --> <LinearLayout
android:orientation="horizontal"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:id="@+id/viewGroup"
android:layout_alignParentBottom="true"
android:gravity="center_horizontal"
android:layout_marginBottom="40dp"></LinearLayout>
</RelativeLayout> - 接下来就是主函数的的代码了:
package com.yztc.lx.homework; import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.ViewGroup.LayoutParams;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView; import java.util.ArrayList;
import java.util.List; /**
* Created by Lx on 2016/8/6.
*/ public class Layout1Activity extends Activity {
private ViewPager viewPager;
private PagerAdapter adapter;
private List<View> viewPages = new ArrayList<>(); //包裹点点的LinearLayout
private ViewGroup group;
private ImageView imageView;
//定义一个ImageVIew数组,来存放生成的小园点
private ImageView[] imageViews; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.layout1); initView();
initPageAdapter();
initPointer();
initEvent();
} //为控件绑定事件,绑定适配器
private void initEvent() {
viewPager.setAdapter(adapter);
viewPager.addOnPageChangeListener(new GuidePageChangeListener());
} //初始化ViewPager
private void initPageAdapter() {
/**
* 对于这几个想要动态载入的page页面,使用LayoutInflater.inflate()来找到其布局文件,并实例化为View对象
*/
LayoutInflater inflater = LayoutInflater.from(this);
View page1 = inflater.inflate(R.layout.page1, null);
View page2 = inflater.inflate(R.layout.page2, null);
View page3 = inflater.inflate(R.layout.page3, null); //添加到集合中
viewPages.add(page1);
viewPages.add(page2);
viewPages.add(page3); adapter = new PagerAdapter() {
//获取当前界面个数
@Override
public int getCount() {
return viewPages.size();
} //判断是否由对象生成页面
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
} @Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(viewPages.get(position));
} //返回一个对象,这个对象表明了PagerAdapter适配器选择哪个对象放在当前的ViewPager中
@Override
public Object instantiateItem(ViewGroup container, int position) {
View view = viewPages.get(position);
container.addView(view);
return view;
}
};
} //绑定控件
private void initView() {
viewPager = (ViewPager) findViewById(R.id.viewPager);
group = (ViewGroup) findViewById(R.id.viewGroup);
} //初始化下面的小圆点的方法
private void initPointer() {
//有多少个界面就new多长的数组
imageViews = new ImageView[viewPages.size()];
for (int i = 0; i < imageViews.length; i++) {
imageView = new ImageView(this);
//设置控件的宽高
imageView.setLayoutParams(new LayoutParams(25, 25));
//设置控件的padding属性
imageView.setPadding(20, 0, 20, 0);
imageViews[i] = imageView;
//初始化第一个page页面的图片的原点为选中状态
if (i == 0) {
//表示当前图片
imageViews[i].setBackgroundResource(R.mipmap.page_indicator_focused);
/**
* 在java代码中动态生成ImageView的时候
* 要设置其BackgroundResource属性才有效
* 设置ImageResource属性无效
*/ } else {
imageViews[i].setBackgroundResource(R.mipmap.page_indicator_unfocused);
}
group.addView(imageViews[i]);
}
} //ViewPager的onPageChangeListener监听事件,当ViewPager的page页发生变化的时候调用
public class GuidePageChangeListener implements ViewPager.OnPageChangeListener {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } //页面滑动完成后执行
@Override
public void onPageSelected(int position) {
//判断当前是在那个page,就把对应下标的ImageView原点设置为选中状态的图片
for (int i = 0; i < imageViews.length; i++) {
imageViews[position].setBackgroundResource(R.mipmap.page_indicator_focused);
if (position != i) {
imageViews[i].setBackgroundResource(R.mipmap.page_indicator_unfocused);
}
}
} //监听页面的状态,0--静止 1--滑动 2--滑动完成
@Override
public void onPageScrollStateChanged(int state) { }
} } - 这样,一个简单地滑动图片的Demo就完成了,需要注意的地方有:在java代码中生成ImageView的时候,如果想为其设置显示的图片,要使用setBackgroundResource()方法而不是setImageResource()方法
Android随笔--使用ViewPager实现简单地图片的左右滑动切换的更多相关文章
- Android开发之ViewPager+ActionBar+Fragment实现响应式可滑动Tab
今天我们要实现的这个效果呢,在Android的应用中十分地常见,我们可以看到下面两张图,无论是系统内置的联系人应用,还是AnyView的阅读器应用,我们总能找到这样的影子,当我们滑动屏幕时,Tab可 ...
- [js开源组件开发]js轮播图片支持手机滑动切换
js轮播图片支持手机滑动切换 carousel-image 轮播图片,支持触摸滑动. 例子见DEMO http://www.lovewebgames.com/jsmodule/carousel-ima ...
- jQuery左侧图片右侧文字滑动切换代码
分享一款jQuery左侧图片右侧文字滑动切换代码.这是一款基于jQuery实现的列表图片控制图片滑动切换代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div cla ...
- Android开发之ViewPager的简单使用
ViewPager是V4包中的,如果你的编译器敲不出ViewPager,那么你就需要添加,看下面: 第一步:点击+号 第二步:选择第一个Library 第三步:添加这个包: 然后点击ok-->o ...
- Android自定义顶部栏及侧滑菜单和fragment+viewpag滑动切换的实现
嘿嘿嘿,关于android滑动的操作,是不是经常都会用到呢. 我肯定也要学习一下啦. https://blog.csdn.net/u013184970/article/details/82882107 ...
- Fragment+ViewPager实现仿微信点击和滑动切换界面
这是在我写的新闻App中实现的界面切换 贴出切换界面的主要代码: xml代码: <span style="font-size:14px;"> <android.s ...
- Android中用URL模拟一个简单的图片加载器
首先,需要添加权限. <uses-permission android:name="android.permission.INTERNET"/> 整体代码如下: pac ...
- Android 使用TabLayout、ViewPager和Fragment实现顶部菜单可滑动切换
效果图如下 首先,要使用控件需要添加design library,在Android Studio中添加 compile 'com.android.support:design:23.4.0' 然后是布 ...
- Android典型界面设计——ViewPage+Fragment实现区域顶部tab滑动切换
一.问题描写叙述 本系列将结合案例应用,陆续向大家介绍一些Android典型界面的设计,首先说说tab导航,导航分为一层和两层(底部区块+区域内头部导航).主要实现方案有RadioGroup+View ...
随机推荐
- ffmpeg转码时对编码率和固定码率的处理
http://www.rosoo.net/a/201107/14663.html 一般fps在代码里这样表示 Fps = den/num 如果den = 15,num=1,则fps = 15. 如果帧 ...
- BASM遵循的规则
任何情况下,在寄存器的使用上,BASM遵循如下的规则: ASM 语句执行过程中,必须保存EDI.ESI.ESP.EBP.EBX 的值(5个寄存器,意思是可以用,但最后得恢复成原模原样). ASM ...
- 304. Range Sum Query 2D - Immutable
题目: Given a 2D matrix matrix, find the sum of the elements inside the rectangle defined by its upper ...
- MyBatis学习总结_07_Mybatis缓存
一.MyBatis缓存介绍 正如大多数持久层框架一样,MyBatis 同样提供了一级缓存和二级缓存的支持 一级缓存: 基于PerpetualCache 的 HashMap本地缓存,其存储作用域为 Se ...
- Sublime Text2 多行编辑快捷键
鼠标选中多行,按下 Ctrl Shift L (Command Shift L) 即可同时编辑这些行:鼠标选中文本,反复按 CTRL D (Command D) 即可继续向下同时选中下一个相同的文本进 ...
- Data Flow ->> Multicast
Multicast的中文意思是组播或者多播.那自然这个组件干的事情就是可以把一份数据库输入给多少接收组件作为输入.这里有篇别人的博文讲到了Multicast的主要作用和应用场景:http://www. ...
- Data Base sqlServer基础知识
sqlServer 基础知识 大纲 创建数据库 1 创建表 2 备份表 3 删除表 4 修改表 5 查询出重复的数据 6 增删改查 7 添加约束 8 分页存储过程 9 排序 10 类型转换 11 ...
- gitlab的搭建和linux客户端的连接
一.安装 1.新建 /etc/yum.repos.d/gitlab-ce.repo,添加以下内容 1 2 3 4 5 6 7 [gitlab-ce] name=gitlab-ce baseurl=ht ...
- leetcode:Search a 2D Matrix(数组,二分查找)
Write an efficient algorithm that searches for a value in an m x n matrix. This matrix has the follo ...
- 导出到Excel并且取消默认的科学计算法
导出Excel的代码很多,其中这种最简单: protected void btnDCAll_Click(object sender, EventArgs e) { ...