viewpager欢迎页面底部点的滑动效果
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent">
<androidx.viewpager.widget.ViewPager
android:id="@+id/vp_guide"
android:layout_width="match_parent"
android:layout_height="match_parent">
</androidx.viewpager.widget.ViewPager> <RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="30dip"> <LinearLayout
android:id="@+id/ll_guide_points"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
</LinearLayout> <View
android:id="@+id/v_guide_redpoint"
android:layout_width="10px"
android:layout_height="10px"
android:background="@drawable/shap"/> </RelativeLayout> </RelativeLayout>
public class MyAdapter extends PagerAdapter {
private List<ImageView> mGuids; public MyAdapter(Context ctx, List<ImageView> guids) {
this.mGuids = guids;
} @Override
public int getCount() {
return mGuids.size();// 返回数据的个数
} @Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;// 过滤和缓存的作用
} @Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);//从viewpager中移除掉
} @Override
public Object instantiateItem(ViewGroup container, int position) {
// container viewpaper
//获取View
View child = mGuids.get(position);
// 添加View
container.addView(child);
return child;
}
}
public class MainActivity extends AppCompatActivity {
private ViewPager mVp_Guide;
private View mGuideRedPoint;
private LinearLayout mLlGuidePoints;
private int[] mPics = new int[]{R.drawable.lunch1, R.drawable.lunch2, R.drawable.lunch3, R.drawable.lunch4};
private View v_point;
private int disPoints;
private int currentItem;
private MyAdapter adapter;
private List<ImageView> guids;
private int width;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main); // UIUtils.init(getApplicationContext());
WindowManager windowManager = (WindowManager) getApplicationContext().getSystemService(Context.WINDOW_SERVICE);
//获取屏幕的宽度
Point size = new Point();
windowManager.getDefaultDisplay().getSize(size);
width = size.x;
initView();
initData();
initEvent(); } private void initView() {
mVp_Guide = (ViewPager) findViewById(R.id.vp_guide);
mGuideRedPoint = findViewById(R.id.v_guide_redpoint);
mLlGuidePoints = (LinearLayout) findViewById(R.id.ll_guide_points);
} private void initData() {
// viewpaper adapter适配器
guids = new ArrayList<ImageView>(); //创建viewpager的适配器
for (int i = 0; i < mPics.length; i++) {
ImageView iv_temp = new ImageView(getApplicationContext());
iv_temp.setBackgroundResource(mPics[i]); //添加界面的数据
guids.add(iv_temp); //灰色的点在LinearLayout中绘制:
//获取点
v_point = new View(getApplicationContext());
v_point.setBackgroundResource(R.drawable.shap2);//灰点背景色
//设置灰色点的显示大小
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(10, 10);
//设置点与点的距离,第一个点除外
if (i != 0)
params.leftMargin = 47;
v_point.setLayoutParams(params); mLlGuidePoints.addView(v_point);
} // 创建viewpager的适配器
adapter = new MyAdapter(getApplicationContext(), guids);
// 设置适配器
mVp_Guide.setAdapter(adapter);
} private void initEvent() {
//监听界面绘制完成
mGuideRedPoint.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
@Override
public void onGlobalLayout() {
//取消注册界面而产生的回调接口
mGuideRedPoint.getViewTreeObserver().removeGlobalOnLayoutListener(this);
//计算点于点之间的距离
disPoints = (mLlGuidePoints.getChildAt(1).getLeft() - mLlGuidePoints.getChildAt(0).getLeft());
}
}); //滑动事件监听滑动距离,点更随滑动。
mVp_Guide.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageSelected(int position) {
/* //当前viewpager显示的页码
//如果viewpager滑动到第三页码(最后一页),显示进入的button
if (position == guids.size() - 1) {
bt_startExp.setVisibility(View.VISIBLE);//设置按钮的显示
} else {
//隐藏该按钮
bt_startExp.setVisibility(View.GONE);
}*/
currentItem = position;
} /**
*页面滑动调用,拿到滑动距离设置视图的滑动状态
* @param position 当前页面位置
* @param positionOffset 移动的比例值
* @param positionOffsetPixels 便宜的像素
*/
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
//计算红点的左边距
float leftMargin = disPoints * (position + positionOffset);
//设置红点的左边距
RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) mGuideRedPoint.getLayoutParams();
//对folat类型进行四舍五入,
layoutParams.leftMargin = Math.round(leftMargin);
//设置位置
mGuideRedPoint.setLayoutParams(layoutParams);
} @Override
public void onPageScrollStateChanged(int state) {
}
}); //给页面设置触摸事件
mVp_Guide.setOnTouchListener(new View.OnTouchListener() {
float startX;
float endX; @Override
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
startX = event.getX();
break;
case MotionEvent.ACTION_UP:
endX = event.getX(); //首先要确定的是,是否到了最后一页,然后判断是否向左滑动,并且滑动距离是否符合,我这里的判断距离是屏幕宽度的4分之一(这里可以适当控制)
if (currentItem == (guids.size() - 1) && startX - endX >= (width / 4)) {
Toast.makeText( MainActivity.this, "跳转", Toast.LENGTH_SHORT ).show();
//进入主页
// Intent intent = new Intent(MainActivity.this, Main2Activity.class);
// startActivity(intent);
// //这部分代码是切换Activity时的动画,看起来就不会很生硬
// overridePendingTransition(android.R.anim.slide_in_left, android.R.anim.slide_out_right);
// finish();
}
break;
}
return false;
}
});
} @Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
return true;
} }
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval"> <corners android:radius="10dp"/>
<solid android:color="#e7e7e7"/>
<size android:width="10px"
android:height="10px"/> </shape>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<corners android:radius="10dp"/>
<solid android:color="#FF393939"/>
<size android:width="10px"
android:height="10px"/> </shape>
viewpager欢迎页面底部点的滑动效果的更多相关文章
- CSS实现页面切换时的滑动效果
最近在开发手机端APP页面功能时遇到一个需求:某个页面查询的数据有三种分类,需要展示在同一页面上,用户通过点击分类标签来查看不同类型的数据, 期望效果是 用户点击标签切换时另一个页面能够以一个平滑切入 ...
- Android ViewPager实现软件的第一次加载的滑动效果
public class MainActivity extends Activity { private ViewPager viewPager; private List<View> V ...
- 转:Android ViewPager多页面滑动切换以及动画效果
一.首先,我们来看一下效果图,这是新浪微博的Tab滑动效果.我们可以手势滑动,也可以点击上面的头标进行切换.与此同方式, 白色横条会移动到相应的页卡头标下.这是一个动画效果,白条是缓慢滑动过去的.好了 ...
- 【Android 界面效果27】利用ViewPager、Fragment、PagerTabStrip实现多页面滑动效果
本文主要介绍如何利用ViewPager.Fragment.PagerTabStrip实现多页面滑动效果.即google play首页.新浪微博消息(at.评论.私信.广播)页面的效果.ViewPage ...
- Android ViewPager多页面滑动切换以及动画效果
一.首先,我们来看一下效果图,这是新浪微博的Tab滑动效果.我们可以手势滑动,也可以点击上面的头标进行切换.与此同方式,白色横条会移动到相应的页卡头标下.这是一个动画效果,白条是缓慢滑动过去的.好了, ...
- Android——ViewPager多页面滑动切换以及动画效果
一.首先,我们来看一下效果图,这是新浪微博的Tab滑动效果.我们可以手势滑动,也可以点击上面的头标进行切换.与此同方式,白色横条会移动到相应的页卡头标下.这是一个动画效果,白条是缓慢滑动过去的.好了, ...
- Android 利用ViewPager、Fragment、PagerTabStrip实现多页面滑动效果
本文主要介绍如何利用ViewPager.Fragment.PagerTabStrip实现多页面滑动效果.即google play首页.新浪微博消息(at.评论.私信.广播)页面的效果.ViewPage ...
- Android ViewPager实现Tabhost选项卡底部滑块动态滑动过渡
<Android ViewPager实现Tabhost选项卡底部滑块动态滑动过渡> 之前基于github上的第三方开源控件ViewPagerIndicator的UnderlinePa ...
- vue项目使用前端框架开发,实现滑动效果,若不刷新页面则无法达到预期效果的问题及解决方法
滑动等效果的初始化时机很重要,在vue项目开发中,需到mounted()钩子函数 (当组件中的DOM结构被渲染好并放到页面中后,会执行这个钩子函数,此时即可初始化滑动效果的js代码). 若组件未挂载到 ...
随机推荐
- c++11 新特性实战 (一):多线程操作
c++11多线程操作 线程 thread int main() { thread t1(Test1); t1.join(); thread t2(Test2); t2.join(); thread t ...
- Spring学习(九)--Spring的AOP
1.配置ProxyFactoryBean Spring IOC容器中创建Spring AOP的方法. (1)配置ProxyFactoryBean的Advisor通知器 通知器实现定义了对目标对象进行增 ...
- FastDFS 分布式文件系统详解
什么是文件系统 文件系统是操作系统用于在磁盘或分区上组织文件的方法和数据结构.磁盘空间是什么样的我们并不清楚,但文件系统可以给我们呈现一个非常清晰的表象,我们可以创建.删除.修改和复制这些文件,而实现 ...
- Centos-检查文件系统并尝试修复-fsck
fsck 检查文件系统并尝试修改错误,修复对象为设备,本质上是调用 /sbin/fsck.filesystemName 命令, filesystemName是指定设备的文件系统类型,如图分区中有文件丢 ...
- VS2015中无法查找或打开 PDB 文件
装载:https://blog.csdn.net/aalonso/article/details/90672072 MFCApplication1.exe"(Win32): 已加载" ...
- RHSA-2018:0151-重要: 内核 安全和BUG修复更新(需要重启、存在EXP、本地提权)
[root@localhost ~]# cat /etc/redhat-release CentOS Linux release 7.2.1511 (Core) 修复命令: 使用root账号登陆She ...
- spring-boot-route(十三)整合RabbitMQ
这篇是SpringBoot整合消息队列的第一篇文章,我们详细介绍下消息队列的相关内容. 消息队列简介 1. 什么是消息队列 MQ(Message Quene):通过典型的生产者和消费者模型,生产者不断 ...
- MVC与MVVM理解
MVC MVC是一种软件架构模式,也有人叫做设计模式 M: Model 数据模型(专门用来操作数据,数据的CRUD) V:View 视图(对于前端来说,就是页面) C:Controller 控制器(是 ...
- 持续集成工具之Jenkins使用配置
在上一篇博客中,我们主要介绍了DevOps理念以及java环境和jenkins的安装,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/13805666.html: ...
- Cypress系列(63)- 使用 Custom Commands
如果想从头学起Cypress,可以看下面的系列文章哦 https://www.cnblogs.com/poloyy/category/1768839.html Custom Commands 自定义命 ...