ViewPager 导航页-轮播图
来源：互联网 发布：华为mate8 软件 编辑：程序博客网 时间：2024/06/12 18:57
首次导航页
guard_main.xml布局
<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.v4.view.ViewPager android:id="@+id/id_guide_pages" android:layout_width="match_parent" android:layout_height="match_parent"></android.support.v4.view.ViewPager> <RelativeLayout android:id="@+id/point_layout" 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/guide_points" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal"></LinearLayout> <View android:id="@+id/red_point" android:layout_width="10dip" android:layout_height="10dip" android:background="@drawable/red_point"></View> </RelativeLayout> <Button android:id="@+id/bt_guide_startexp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:layout_marginBottom="45dip" android:background="@drawable/btn_selector" android:paddingBottom="5dip" android:paddingLeft="10dip" android:paddingRight="10dip" android:paddingTop="5dip" android:text="开始体验" android:textColor="@color/btn_colors" android:textSize="18sp" android:visibility="gone" /></RelativeLayout>red_point.xml
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <corners android:radius="5dip"></corners> <solid android:color="#ff0000"></solid></shape>gray_point.xml
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <corners android:radius="5dip"></corners> <solid android:color="#CCCCCC"></solid></shape>
GuardActivityimport android.app.Activity;import android.content.Intent;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.view.Window;import android.widget.Button;import android.widget.ImageView;import android.widget.LinearLayout;import android.widget.RelativeLayout;import java.util.ArrayList;import java.util.List;public class GuardActivity extends Activity { private ViewPager vp_guard; private LinearLayout guide_points; private View red_point; private Button bt_startexp; private intdisPoints;//点与点之间的距离 private List<ImageView> guards; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); requestWindowFeature(Window.FEATURE_NO_TITLE);//去掉标题 initView();//初始化界面 initData();//初始化数据 initEvent();//初始化事件 } private void initView() { setContentView(R.layout.guard_main); //ViewPage组件 vp_guard = (ViewPager) findViewById(R.id.id_guide_pages); //动态加点容器 guide_points = (LinearLayout) findViewById(R.id.guide_points); //红点 red_point = findViewById(R.id.red_point); //开始体验的按钮 bt_startexp = (Button) findViewById(R.id.bt_guide_startexp); } private void initData() { //图片的数据 int[] pics = new int[]{R.mipmap.guide_1, R.mipmap.guide_2, R.mipmap.guide_3}; //定义ViewPager使用的容器 guards = new ArrayList<>(); for (int i = 0; i < pics.length; i++) { ImageView iv_temp = new ImageView(getApplicationContext()); iv_temp.setBackgroundResource(pics[i]); //添加界面的数据 guards.add(iv_temp); //添加灰点 View gray_point = new View(getApplicationContext()); gray_point.setBackgroundResource(R.drawable.gray_point); int dip = 10; // 设置灰色点的大小 LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(DensityUtil.dip2px(getApplicationContext(), dip), DensityUtil.dip2px(getApplicationContext(), dip));// 注意单位是px 不是dp // 设置点与点直接的空隙 // 第一个点不需要指定 if (i != 0) layoutParams.leftMargin = 10;// px gray_point.setLayoutParams(layoutParams); //添加灰点到线性布局中 guide_points.addView(gray_point); } vp_guard.setAdapter(new MyAapter()); } private void initEvent() { //监听布局完成 ，触发的结果 red_point.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() { @Override public void onGlobalLayout() { red_point.getViewTreeObserver().removeOnGlobalLayoutListener(this); //计算点与点之间的距离 disPoints = (guide_points.getChildAt(1).getLeft() - guide_points.getChildAt(0) .getLeft()); } }); vp_guard.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { //positionOffset 移动的比例值 //计算红点的左边距 float leftMargin = disPoints * (position + positionOffset); //设置红点的左边距 RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) red_point.getLayoutParams(); layoutParams.leftMargin = Math.round(leftMargin);//对float类型四舍五入 //重新设置布局 red_point.setLayoutParams(layoutParams); } @Override public void onPageSelected(int position) { //当前ViewPager显示的页码 //如果ViewPager滑动到第三个页码(最后一页)，显示button if (position == guards.size() - 1) { bt_startexp.setVisibility(View.VISIBLE);//设置设置按钮的显示 } else { //不是最后一页，隐藏该button按钮 bt_startexp.setVisibility(View.GONE); } } @Override public void onPageScrollStateChanged(int state) { } }); //给按钮添加点击事件 bt_startexp.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { //进入主界面 Intent main = new Intent(GuardActivity.this,MainActivity.class); startActivity(main);//启动主界面 //关闭自己 finish(); } }); } public class MyAapter extends PagerAdapter{ @Override public int getCount() { return guards==null?0:guards.size(); } @Override public boolean isViewFromObject(View view, Object object) { return view == object; } @Override public Object instantiateItem(ViewGroup container, int position) { container.addView(guards.get(position)); return guards.get(position); } @Override public void destroyItem(ViewGroup container, int position, Object object) { container.removeView(guards.get(position)); } } }DensityUtil.javapublic class DensityUtil{ /** * 根据手机的分辨率从 dip 的单位 转成为 px(像素) */ public static int dip2px(Context context, float dpValue) { final float scale = context.getResources().getDisplayMetrics().density; return (int) (dpValue * scale + 0.5f); } /** * 根据手机的分辨率从 px(像素) 的单位 转成为 dp */ public static int px2dip(Context context, float pxValue) { final float scale = context.getResources().getDisplayMetrics().density; return (int) (pxValue / scale + 0.5f); } }
轮播图
layout_main.xml<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="example.com.myapplication.MainActivity"> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="200dp" ></android.support.v4.view.ViewPager> <LinearLayout android:layout_alignBottom="@id/viewpager" android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="5dp" android:orientation="vertical" android:background="#77000000"> <TextView android:id="@+id/pic_desc" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:textColor="#ffffff" android:text="welcome to shanghai" /> <LinearLayout android:id="@+id/pic_points" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_gravity="center_horizontal" android:orientation="horizontal" ></LinearLayout> </LinearLayout></RelativeLayout>MainActivityimport android.os.Bundle;import android.os.Handler;import android.support.v4.view.PagerAdapter;import android.support.v4.view.ViewPager;import android.support.v7.app.AppCompatActivity;import android.view.MotionEvent;import android.view.View;import android.view.ViewGroup;import android.widget.ImageView;import android.widget.LinearLayout;import android.widget.TextView;import com.squareup.picasso.Picasso;public class MainActivity extends AppCompatActivity { private TextView pic_desc;//图片的描述 private LinearLayout pic_points;//轮播图的每张图片对应的点得组合 private ViewPager viewpager;//ViewPager组件 private String[] imageurls = new String[]{"http://192.168.1.6:8080/pic.jpg", "http://192.168.1.6:8080/pic2.jpg", "http://192.168.1.6:8080/pic3.jpg"}; private LunBoAdapter lunBoAdapter; LunBoTask lunboTask = new LunBoTask(); @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initView(); initData(); intEvent(); } private void intEvent() { viewpager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { //状态改变的时候调用，其中arg0这个参数 //有三种状态（0，1，2）。arg0 ==1的时辰默示正在滑动，arg0==2的时辰默示滑动完毕了，arg0==0的时辰默示什么都没做 @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } //页面滑动完后得到调用 @Override public void onPageSelected(int position) { setPicDescAndPointSelect(); } //页面滑动过程触发的事件 @Override public void onPageScrollStateChanged(int state) { } }); } private void initData() { lunBoAdapter = new MainActivity.LunBoAdapter(); viewpager.setAdapter(lunBoAdapter); int centerValue = Integer.MAX_VALUE/2; int value = centerValue % imageurls.length; //设置viewPager的第一页为最大整数的中间数，实现伪无限循环 viewpager.setCurrentItem(centerValue-value); //轮播图对应的点处理 initPoints();//初始化轮播图的点 //设置图片描述和点得选中效果 setPicDescAndPointSelect(); //启动轮播图 lunboTask.startLunbo(); } private void setPicDescAndPointSelect() { int currentPage = viewpager.getCurrentItem() % imageurls.length; pic_desc.setText("我是第" + currentPage + "个页面"); for (int i = 0; i < imageurls.length; i++) { pic_points.getChildAt(i).setEnabled(i == currentPage); } } private void initPoints() { //清空以前存在的点 pic_points.removeAllViews(); //轮播图有几张 加几个点 for (int i = 0; i < imageurls.length; i++) { View v_point = new View(MainActivity.this); //设置点得背景选择器 v_point.setBackgroundResource(R.drawable.point_seletor); v_point.setEnabled(false);//默认是灰色的点 //设置点得大小 LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(DensityUtil.dip2px(MainActivity.this, 5), DensityUtil.dip2px(MainActivity.this, 5)); //设置点得间距 if (i!=0) params.leftMargin = DensityUtil.dip2px(MainActivity.this, 10); //设置参数 v_point.setLayoutParams(params); pic_points.addView(v_point); } } private void initView() { pic_desc = (TextView) findViewById(R.id.pic_desc); pic_points = (LinearLayout) findViewById(R.id.pic_points); viewpager = (ViewPager) findViewById(R.id.viewpager); } class LunBoAdapter extends PagerAdapter { @Override public int getCount() { return Integer.MAX_VALUE; } @Override public boolean isViewFromObject(View view, Object object) { return view == object; } @Override public Object instantiateItem(ViewGroup container, int position) { ImageView iv_lunbo_pic = new ImageView(MainActivity.this); iv_lunbo_pic.setScaleType(ImageView.ScaleType.FIT_XY); String imageUrl = imageurls[position%imageurls.length];//图片url //把url的图片给iv_lunbo_pic Picasso.with(MainActivity.this).load(imageUrl).//异步加载图片 placeholder(R.mipmap.pic_item_list_default).//当图片未正常显示时默认的图片 into(iv_lunbo_pic);//显示到组件中 container.addView(iv_lunbo_pic); //给图片添加触摸事件 iv_lunbo_pic.setOnTouchListener(new View.OnTouchListener() { private long downTime; private float downY; private float downX; @Override public boolean onTouch(View v, MotionEvent event) { switch (event.getAction()) { case MotionEvent.ACTION_DOWN://按下 System.out.println("按下"); downX = event.getX(); downY = event.getY(); downTime = System.currentTimeMillis(); lunboTask.stopLunbo();//停止轮播 break; case MotionEvent.ACTION_UP: System.out.println("松开"); float upX = event.getX(); float upY = event.getY(); if (upX == downX && upY == downY) { long upTime = System.currentTimeMillis(); if (upTime - downTime < 500) { //点击 lunboPicClick("被单击了。。。。。"); } } lunboTask.startLunbo(); break; case MotionEvent.ACTION_CANCEL://事件 取消 System.out.println("事件取消"); lunboTask.startLunbo(); break; } return true; } private void lunboPicClick(String s) { //处理图片的点击事件 System.out.println(s); } }); return iv_lunbo_pic; } @Override public void destroyItem(ViewGroup container, int position, Object object) { container.removeView((View) object); } } class LunBoTask extends Handler implements Runnable { public void stopLunbo() { //移除当前所有的任务 removeCallbacksAndMessages(null); } public void startLunbo() { stopLunbo(); postDelayed(this, 4000); } @Override public void run() { viewpager.setCurrentItem(viewpager.getCurrentItem() + 1); postDelayed(this, 4000); } }}
代码:http://download.csdn.net/detail/u014695188/9652121
0 0
- ViewPager 导航页-轮播图
- ViewPager实现导航页
- ViewPager制作导航页
- viewpager导航页
- 导航页viewpager
- 使用ViewPager实现导航页
- ViewPager导航
- ViewPager导航滑动Demo
- ViewPager导航栏
- 使用ViewPager实现导航
- viewpager实现静态导航
- ViewPager界面导航
- ViewPager实现导航
- 使用ViewPager实现导航
- ViewPager实现导航
- ViewPager顶部导航
- Android-ViewPager滑动导航
- ViewPager添加导航栏
- B. Little Robber Girl's Zoo
- WiFi天线分集和MIMO的区别比较
- 浅谈C# 多态的魅力（虚方法，抽象，接口实现）
- Memcached分布式布置方案--普通Hash分布（余数分布法/取模分布法）
- windows 10安装ubuntu 16，双系统安装教程
- ViewPager 导航页-轮播图
- JS Lesson2 : Math()、parseInt()、parseFloat()、isNaN()、isInfinity()方法汇总
- hover时出现蒙版暂停播放效果
- 两个框架 一个前台一个后台 跨域请求
- mysql主从备份
- 机械硬盘（HDD）种类
- JavaEE_day02
- Android-自定义输入法的功能按钮
- HTML头文件的各种meta设置
