天猫、淘宝、京东商品详情的图片手动滑动ViewPager
2016-11-26 15:25
961 查看
我测试了 粘贴复制修改图片及id就能运行,已经上传dome下边
http://download.csdn.net/detail/jingde_qin/9694357 网址在布局文件中定义ViewPager
相应的XML文件——需要注意的是布局文件中的ViewPager需要书写完整路径<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/rl_root" android:layout_width="match_parent" android:layout_height="match_parent" > <!-- 滑动的页面 --> <android.support.v4.view.ViewPager android:id="@+id/guide_pager" android:layout_width="match_parent" android:layout_height="match_parent" > </android.support.v4.view.ViewPager> <!-- 装点的容器 --> <RelativeLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:layout_marginBottom="25dp" > <LinearLayout android:id="@+id/gudie_point_container" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal" > </LinearLayout> <!-- 画选中的点 --> <View android:id="@+id/guide_point_selected" android:layout_width="10dp" android:layout_height="10dp" android:background="@drawable/point_seleted" /> </RelativeLayout> </RelativeLayout>123456789101112131415161718192021222324252627282930313233343536373839123456789101112131415161718192021222324252627282930313233343536373839
相关的drawable文件
point_seleted文件 shape=”oval”绘画出圆形图案 corners Android:radius=”5dp”设置圆角大小(圆角可以设置也可以不设置,并不影响) solid android:color=”#ff0000”图案的填充颜色<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" > <corners android:radius="5dp" /> <solid android:color="#ff0000" /> </shape>123456123456point_normal文件
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" > <corners android:radius="5dp"/> <solid android:color="@android:color/darker_gray" /> </shape>123456123456
在activity中动态设置布局文件的高度以及添加控件到布局文件中
package com.sjxz.demo; import android.app.Activity; import android.content.Context; import android.os.Bundle; import android.support.v4.view.PagerAdapter; import android.support.v4.view.ViewPager; import android.view.View; import android.view.ViewGroup; import android.view.ViewTreeObserver; import android.widget.FrameLayout; import android.widget.ImageView; import android.widget.LinearLayout; import android.widget.RelativeLayout; import java.util.ArrayList; import java.util.List; public class MainActivity extends Activity implements ViewPager.OnPageChangeListener { private ViewPager mPager; private LinearLayout mPointContainer; private RelativeLayout rl_root; private View mSeletedPoint; private int mPointSpace; private List<ImageView> mImgDatas; //在studio中引用图片是通过 R.mipmap.guide_1 //在eclipse中是通过R.drawable.guide_1 private int[] imgRes = new int[] { R.mipmap.guide_1, R.mipmap.guide_2, R.mipmap.guide_3 }; private int screenHeight; private int screenWidth; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); //获取屏幕的高度 screenHeight=getScreenHeight(MainActivity.this)/2; screenWidth=getScreenWidth(MainActivity.this); setContentView(R.layout.activity_main); initView(); initData(); } private void initView() { mPager = (ViewPager) findViewById(R.id.guide_pager); mPointContainer = (LinearLayout) findViewById(R.id.gudie_point_container); mSeletedPoint = findViewById(R.id.guide_point_selected); rl_root=(RelativeLayout)findViewById(R.id.rl_root); rl_root.setLayoutParams(new FrameLayout.LayoutParams(screenWidth,screenHeight)); // 添加全局布局的监听 mSeletedPoint.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() { @Override public void onGlobalLayout() { // 获得两个点间的距离(实时监听全局,只要出现两个之后就获取距离并移除监听) mPointSpace = mPointContainer.getChildAt(1).getLeft() - mPointContainer.getChildAt(0).getLeft(); mSeletedPoint.getViewTreeObserver().removeGlobalOnLayoutListener(this); } }); } private void initData() { // 对数据进行初始化 mImgDatas = new ArrayList<ImageView>(); for (int i = 0; i < imgRes.length; i++) { ImageView iv = new ImageView(this); iv.setImageResource(imgRes[i]); iv.setScaleType(ImageView.ScaleType.FIT_XY); // add mImgDatas.add(iv); // 动态的添加点 View view = new View(this); view.setBackgroundResource(R.drawable.point_normal); LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(dip2px(MainActivity.this,10), dip2px(MainActivity.this,10)); if (i != 0) { params.leftMargin = 10; } mPointContainer.addView(view, params); } // 给viewpager添加数据 mPager.setAdapter(new GuidePagerAdapter());// --->List // 设置viewpager的监听 mPager.setOnPageChangeListener(this); } //对ViewPager进行数据适配 class GuidePagerAdapter extends PagerAdapter { @Override public int getCount() { if (mImgDatas != null) { return mImgDatas.size(); } return 0; } @Override public boolean isViewFromObject(View view, Object object) { return view == object; } @Override public Object instantiateItem(ViewGroup container, int position) { // 获得imageView ImageView iv = mImgDatas.get(position); // 用pager添加 // mPager.addView(iv); container.addView(iv); return iv; } @Override public void destroyItem(ViewGroup container, int position, Object object) { //加载当前页面的左右两侧数据,其他的都会实时消除 container.removeView((View) object); } } @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { // 滚动时 // @positionOffset : // @positionOffsetPixels: 滚动的像素 // 1. 计算需要移动距离 // 通过两个点间的距离计算 和 positionOffset,移动的距离 //positionOffset的值是[0-1]移动的百分比 int left = (int) (mPointSpace * positionOffset + 0.5f); // 2. 改变选中点的marginleft RelativeLayout.LayoutParams params = (android.widget.RelativeLayout.LayoutParams) mSeletedPoint.getLayoutParams(); params.leftMargin = left + mPointSpace * position; mSeletedPoint.setLayoutParams(params); } @Override public void onPageSelected(int position) { } @Override public void onPageScrollStateChanged(int state) { } //可以将一下方法封装到一个Utils工具类中 /** * 把(Xml中)dp转换为像素px展现 */ public static int dip2px(Context context, float px) { final float scale = getScreenDensity(context); return (int) (px * scale + 0.5); } /** * 得到设备的(Xml中)dp */ public static float getScreenDensity(Context context) { return context.getResources().getDisplayMetrics().density; } /** * 得到设备屏幕的宽度 */ public static int getScreenWidth(Context context) { return context.getResources().getDisplayMetrics().widthPixels; } /** * 得到设备屏幕的高度 */ public static int getScreenHeight(Context context) { return context.getResources().getDisplayMetrics().heightPixels; } }
相关文章推荐
- Android中仿淘宝商品详情ViewPager页面数据手动滑动
- 实现淘宝商品详情页面的viewPager滑动到最后一张图片跳转的功能
- android仿淘宝详情页面viewPager滑动到最后一张图片跳转的功能
- 仿淘宝的商品详情拖动,ViewPager和ScrollView WebView的滑动冲突
- Android仿淘宝详情页面viewPager滑动到最后一张图片跳转的功能
- 仿淘宝、京东拖拽商品详情(可嵌套ViewPager、ListView、WebView、FragmentTabhost)
- 仿淘宝、京东拖拽上拉下拉商品详情(可嵌套ViewPager、ListView、WebView、FragmentTabhost)
- Android仿淘宝详情页面viewPager滑动到最后一张图片跳转的功能
- 仿淘宝、京东、美团使用ViewPager+GridView实现左右滑动查看更多分类导航功能
- 仿淘宝、京东、美团使用ViewPager+GridView实现左右滑动查看更多分类导航功能
- 淘宝商品图片最后一个 继续滑动查看图文详情
- iOS 跳转淘宝、天猫、京东商品详情页
- 仿京东、淘宝商品详情中上滑tableView的cell与headerView之间的动画效果
- 仿淘宝Banner:左右滑动ViewPager+最后一张滑动查看详情
- cc_美团 商品详情图片放大显示ViewPager
- 轮播图Viewpager支持手动滑动定时滑动和自动加载图片页数
- 使用viewpager嵌套实现上下左右滑动切换图片(IOS双向滚动翻页效果相同)
- Viewpager 自动左右无线滑动 手动滑动
- 使用viewpager嵌套实现上下左右滑动切换图片
- UIScrollView+UIPageControl+NSTimer实现图片的自动滑动以及用户可手动切换,UIPageControl可点击