文档章节

带导航点的ViewPager

c
 cywaker
发布于 2013/11/25 18:32
字数 694
阅读 4587
收藏 10

此处为显示的布局:

<!-- lang: xml -->

<?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" > <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent" >

    <android.support.v4.view.ViewPager
        android:id="@+id/navigation_page"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />

    <LinearLayout
        android:id="@+id/viewGroup"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="40dp"
        android:gravity="center_horizontal"
        android:orientation="horizontal" >
    </LinearLayout>
</RelativeLayout>

</LinearLayout>

此处为ViewPager中显示的布局:

<!-- lang: xml -->
<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" > <ImageView android:id="@+id/img_navigation_page" android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="fitXY"/>

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <ImageView
        android:id="@+id/img_cancel"
        android:layout_width="25dp"
        android:layout_height="25dp"
        android:layout_alignParentRight="true"
        android:src="@drawable/ic_btn_chat_text" />

    <Button
        android:id="@+id/btn_enter"
        android:layout_width="80dp"
        android:layout_height="30dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="80dp"
        android:background="@drawable/invite_btn_bg"
        android:text="@string/trend_navigation"
        android:textColor="@color/red"
        android:textSize="15sp"
        android:visibility="invisible" />
</RelativeLayout>

</FrameLayout> 代码部分: /** 装分页显示的view的数组 */ private ArrayList<View> pageViews; private ImageView imageView;

/** 将小圆点的图片用数组表示 */
private ImageView[] imageViews;

// 包裹小圆点的LinearLayout
private LinearLayout mViewPoints;

    //初始化要显示的页面,添加到view集合中
private void init(Context context) {
	// 将要分页显示的View装入数组中
	pageViews = new ArrayList<View>();
	pageViews.add(inflater.inflate(R.layout.trend_descript_navigation_item,
			null));
	pageViews.add(inflater.inflate(R.layout.trend_descript_navigation_item,
			null));
	pageViews.add(inflater.inflate(R.layout.trend_descript_navigation_item,
			null));
	pageViews.add(inflater.inflate(R.layout.trend_descript_navigation_item,
			null));
	pageViews.add(inflater.inflate(R.layout.trend_descript_navigation_item,
			null));
	pageViews.add(inflater.inflate(R.layout.trend_descript_navigation_item,
			null));
}

//初始化显示的控件,有viewpager和显示导航点的linearlayout private void initView(Context context,View v) {

	// 创建imageviews数组,大小是要显示的图片的数量
	imageViews = new ImageView[pageViews.size()];
	// 实例化小圆点的linearLayout和viewpager
	 mViewPoints = (LinearLayout) v.findViewById(R.id.viewGroup);
	 mViewPager = (ViewPager) v.findViewById(R.id.navigation_page);

	// 添加小圆点的图片
	for (int i = 0; i < pageViews.size(); i++) {
		imageView = new ImageView(context);
		// 设置小圆点imageview的参数
		LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(
				10, 10);
		layoutParams.setMargins(5, 0, 5, 0);
		imageView.setLayoutParams(layoutParams);// 创建一个宽高均为20 的布局
		// 将小圆点layout添加到数组中
		imageViews[i] = imageView;
		// 默认选中的是第一张图片,此时第一个小圆点是选中状态,其他不是
		if (i == 0) {
			imageViews[i]
					.setBackgroundResource(R.drawable.indicator_normal_pressed);
		} else {
			imageViews[i]
					.setBackgroundResource(R.drawable.indicator_normal);
		}

		// 将imageviews添加到小圆点视图组
		mViewPoints.addView(imageViews[i]);
	}
	// 设置viewpager的适配器和监听事件
	mViewPager.setAdapter(new NavigationPageAdapter());
	mViewPager.setOnPageChangeListener(new NavigationPageChangeListener());

}
    //设置要显示的pageradapter类
private class NavigationPageAdapter extends PagerAdapter {

	// 销毁position位置的界面
	@Override
	public void destroyItem(View v, int position, Object arg2) {
		((ViewPager) v).removeView((View) arg2);
	}

	// 获取当前窗体界面数
	@Override
	public int getCount() {
		return pageViews.size();
	}

	// 初始化position位置的界面
	@Override
	public Object instantiateItem(View v, int position) {
		View contentView = pageViews.get(position);
                /**
                      *显示页面的相关操作
                      **/
		((ViewPager) v).addView(contentView, 0);
		return pageViews.get(position);
	}

	@Override
	public boolean isViewFromObject(View v, Object arg1) {
		return v == arg1;
	}

	@Override
	public void startUpdate(View arg0) {
	}

	@Override
	public int getItemPosition(Object object) {
		return super.getItemPosition(object);
	}

}
    //设置viewpager滑动的事件,实现导航点的滚动

private class NavigationPageChangeListener implements OnPageChangeListener {

	@Override
	public void onPageScrollStateChanged(int arg0) {
	}

	@Override
	public void onPageScrolled(int arg0, float arg1, int arg2) {
	}

	@Override
	public void onPageSelected(int position) {
		for (int i = 0; i < imageViews.length; i++) {
			imageViews[position]
					.setBackgroundResource(R.drawable.indicator_normal_pressed);
			// 不是当前选中的page,其小圆点设置为未选中的状态
			if (position != i) {
				imageViews[i]
						.setBackgroundResource(R.drawable.indicator_normal);
			}
		}
	}

}

© 著作权归作者所有

c
粉丝 1
博文 25
码字总数 5895
作品 0
福州
私信 提问
加载中

评论(1)

SPRING-Z
SPRING-Z
那个,怎样实现点击小圆点到跳相应的图片呢?
TabLayout实现顶部导航(一)

前言 顶部导航栏,是我们在开发中比较常见的一种显示布局,它的实现可以有多种方式,那么今天我们就来讲讲 TabLayout 对它的实现。 此篇文章参考以下链接 TabLayout轻松实现仿今日头条顶部t...

奔跑的佩恩
01/07
0
0
Android开源控件ViewPager Indicator的使用方法

Android Viewpager Indicator是Android开发中最常用的控件之一,几乎所有的新闻类APP中都有使用,下面介绍其基本使用方法。 1. ViewPager Indicator的Library 查看Viewpager Indicator的Lib...

linsea
2014/03/14
0
0
Android viewpager+fragment+viewpager+fragment 的问题

用了viewpager+fragment 嵌套viewpager+fragment, 第一个viewpager自定义了禁止滑动的功能,通过点击底部的导航栏进行切换,然后第二个viewpager可以滑动,但是当第二个viewpager滑动到最后...

飘渺的火
2017/12/11
43
0
Android ViewPager使用详解

这是谷歌官方给我们提供的一个兼容低版本安卓设备的软件包,里面包囊了只有在安卓3.0以上可以使用的api。而viewpager就是其中之一利用它,我们可以做很多事情,从最简单的导航,到页面菜单等...

Remix_jx
2014/10/27
0
0
android中ViewPager详解--视图滑动、界面卡等效果 (一)

这是谷歌官方给我们提供的一个兼容低版本安卓设备的软件包,里面包囊了只有在安卓3.0以上可以使用的api。而viewpager就是其中之一。利用它,我们可以做很多事情,从最简单的导航,到页面菜单...

一别经年
2014/01/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

利用mybatis generator生成实体类、Mapper接口以及对应的XML文件

项目中通常会遇到数据的持久化,如果是采用mybatis的orm,就会涉及到生成xml的问题,刚好mybatis官网提供了这么个插件MyBatis Generator,效果简直是棒呆。 1. 首先需要在build.gradle文件中...

啊哈关关
今天
2
0
SpringSocial相关的知识点

使用SprigSocial开发第三方登录 核心类 ServiceProvider(AbstractOauth2ServiceProvider):主要负责实现server提供商(例如QQ,微信等共有的东西),默认实现类是AbstractOauth2ServiceProvider...

chendom
今天
3
0
Java并发之AQS详解

一、概述   谈到并发,不得不谈ReentrantLock;而谈到ReentrantLock,不得不谈AbstractQueuedSynchronizer(AQS)!   类如其名,抽象的队列式的同步器,AQS定义了一套多线程访问共享资源...

群星纪元
昨天
3
0
Fabric-sdk-java最新教程

Fabric Java SDK是Fabric区块链官方提供的用于Java应用开发的SDK,全称为Fabric-sdk-java,网上可用资料不多,本文列出了精心整理的针对Fabric Java SDK的最新精选教程。 如果希望快速掌握F...

汇智网教程
昨天
3
0
react 子组件监听props 变化

componentWillReceiveProps //已经被废弃 getDerivedStateFromProps// 推荐使用//如果条件不存在必须要返回null static getDerivedStateFromProps(props, current_stat...

一箭落旄头
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部