【Android实战】ScrollView+GridView+ViewPager实现导航页

按照常规思路,实现导航页有专门的TabHost或ViewPager,但自定义空间不大,再者,自己想熟悉一下多重布局和动画效果的使用,因此采用这种ScrollView+GridView+ViewPager的效果。

其中比较麻烦的是GridView实现横向的加载,并且下面的滚动条随着滑动也得滚动和动态发生位置变化。

public class MainAct extends FragmentActivity {
	ViewPager viewPager;
	HorizontalScrollView scrollView;
	String[] titles = { "首页", "新闻", "交友", "购物", "娱乐", "视频", "阅读", "运动", "医疗",
			"食品" };
	LayoutParams textLayoutParams;
	private MyGridView gridView;
	int[] tabmoving = new int[2];
	View downView;
	long dutime = 500;
	boolean right = true;
	int old = 0;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		setContentView(R.layout.scrollpager);
		textLayoutParams = new LayoutParams(LayoutParams.MATCH_PARENT,
				LayoutParams.MATCH_PARENT);
		textLayoutParams.setMargins(10, 10, 10, 10);
		viewPager = (ViewPager) findViewById(R.id.pager);
		scrollView = (HorizontalScrollView) findViewById(R.id.myscroll);
		gridView = (MyGridView) findViewById(R.id.gridview);
		downView = (View) findViewById(R.id.down);
		final MyAdapter adapter = new MyAdapter();

		PagerAdapter myAdapter = new PagerAdapter(getSupportFragmentManager());
		viewPager.setAdapter(myAdapter);

		int size = titles.length;
		final DisplayMetrics dm = new DisplayMetrics();
		getWindowManager().getDefaultDisplay().getMetrics(dm);
		float density = dm.density;
		int allWidth = (int) (110 * (size) * density) - (titles.length) * 10;
		final int itemWidth = (int) (100 * density);

		downView.setLayoutParams(new LayoutParams(itemWidth, 8));

		LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
				allWidth, LinearLayout.LayoutParams.FILL_PARENT);
		gridView.setLayoutParams(params);
		gridView.setColumnWidth(itemWidth);
		gridView.setHorizontalSpacing(10);
		gridView.setStretchMode(GridView.NO_STRETCH);
		gridView.setNumColumns(size);
		gridView.setAdapter(adapter);
		viewPager.setCurrentItem(0);
		gridView.getParent().requestDisallowInterceptTouchEvent(true);
		viewPager.setOnPageChangeListener(new OnPageChangeListener() {

			@Override
			public void onPageSelected(int arg0) {
				// TODO Auto-generated method stub

				View view = gridView.getChildAt(arg0);
				if (view == null)
					return;
				view.getLocationOnScreen(tabmoving);
				if (old <= tabmoving[0]) {
					right = true;
				} else {
					right = false;
				}
				old = tabmoving[0];

				int difvalue = dm.widthPixels - tabmoving[0] - itemWidth;

				if (difvalue < 0) {
					scrollView.scrollBy(Math.abs(difvalue), 0);
					TranslateAnimation tt = new TranslateAnimation(
							dm.widthPixels - 2 * itemWidth - 10, dm.widthPixels
									- itemWidth, 0, 0);
					tt.setDuration(dutime);

					tt.setFillAfter(true);
					downView.startAnimation(tt);
				}

				else if (tabmoving[0] < 0) {
					scrollView.scrollBy(tabmoving[0], 0);

					TranslateAnimation tt = new TranslateAnimation(
							itemWidth + 10, 0, 0, 0);
					tt.setDuration(dutime);
					tt.setFillAfter(true);
					downView.startAnimation(tt);

					gridView.setSelection(arg0);
					adapter.notifyDataSetChanged();
				} else {
					if (right) {
						TranslateAnimation tt = new TranslateAnimation(
								tabmoving[0] - itemWidth - 10, tabmoving[0], 0,
								0);
						tt.setDuration(dutime);
						tt.setFillAfter(true);
						downView.startAnimation(tt);

					} else {
						TranslateAnimation tt = new TranslateAnimation(
								tabmoving[0], tabmoving[0] - itemWidth - 10, 0,
								0);
						tt.setDuration(dutime);
						tt.setFillAfter(true);
						downView.startAnimation(tt);
					}
				}

			}

			@Override
			public void onPageScrolled(int arg0, float arg1, int arg2) {
				// TODO Auto-generated method stub

			}

			@Override
			public void onPageScrollStateChanged(int arg0) {
				// TODO Auto-generated method stub

			}
		});
	}

	class PagerAdapter extends FragmentStatePagerAdapter {

		Fragment[] fs = { new MyFragment(titles[0]), new MyFragment(titles[1]),
				new MyFragment(titles[2]), new MyFragment(titles[3]),
				new MyFragment(titles[4]), new MyFragment(titles[5]),
				new MyFragment(titles[6]), new MyFragment(titles[7]),
				new MyFragment(titles[8]), new MyFragment(titles[9]) };

		public PagerAdapter(FragmentManager fm) {
			super(fm);
			// TODO Auto-generated constructor stub

		}

		@Override
		public Fragment getItem(int arg0) {
			// TODO Auto-generated method stub
			return fs[arg0];
		}

		@Override
		public int getCount() {
			// TODO Auto-generated method stub
			return fs.length;
		}
	}

	class MyAdapter extends BaseAdapter {

		@Override
		public int getCount() {
			// TODO Auto-generated method stub
			return titles.length;
		}

		@Override
		public Object getItem(int position) {
			// TODO Auto-generated method stub
			return titles[position];
		}

		@Override
		public long getItemId(int position) {
			// TODO Auto-generated method stub
			return position;
		}

		@Override
		public View getView(int position, View convertView, ViewGroup parent) {
			// TODO Auto-generated method stub
			TextView textView = new TextView(getApplicationContext());
			textView.setText(titles[position]);
			// textView.setWidth(240);
			// textView.setHeight(100);
			textView.setGravity(Gravity.CENTER);
			textView.setTextColor(Color.BLACK);
			textView.setBackgroundResource(R.drawable.s);
			textView.setPadding(30, 30, 30, 30);
			// textView.setLayoutParams(textLayoutParams);
			return textView;
		}
	}

}
时间: 2024-10-21 17:42:05

【Android实战】ScrollView+GridView+ViewPager实现导航页的相关文章

ViewPager实现导航页

我们在首次安装app时,往往会发现会有导航页. 导航页一般用于介绍功能和引导使用,那我们其实可以用ViewPager实现. ViewPager用于实现多页面的滑动切换效果,使用时需要引入"android.support.v4"包. 好了,我们现在开始就来做一个简单的导航页引导. 首先我们新建一个Android Application Project,我们把自动生成的MainActivity作为应用程序的主界面: 其布局文件我们简单设置下: activity_main.xml: <

Android高级控件——ViewPager、GridView、popwindow、SlideMenu(中)

Android高级控件--ViewPager.GridView.popwindow.SlideMenu(中) android:screenOrientation="locked"锁屏 android:screenOrientation="landscape"横屏锁定   <!--android:theme="@android:style/Theme.NoTitleBar.Fullscreen"  Activity 直接extends Act

可滑动的顶部导航页ViewPager和Fragment的使用

可滑动的顶部导航页ViewPager和Fragment的使用 通过ViewPager和Fragment实现侧滑切换导航栏的功能,如下图所示. 一.定义主布局文件main.xml 最上面是一个导航栏,分别有三个textview构成,然后再textview下面设置一个标签卡最下面是使用Android.support.v4.view.viewpager构成 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 2

Android:简单实现ViewPager+TabHost+TabWidget实现导航栏导航和滑动切换

viewPager是v4包里的一个组件,可以实现滑动显示多个界面. android也为viewPager提供了一个adapter,此adapter最少要重写4个方法: public int getCount() public boolean isViewFromObject(View view, Object o) public void destroyItem(ViewGroup container, int position, Object object)  public Object in

android viewpager 图片翻页例子

使用ViewPager这个类可以轻松实现多个页面的滑动功能 viewpager默认在工具界面上是找不到的,需求添加android-support-v4.jar包: 如果没有找到,需要打开Android SDK Manager在Extras中进行下载,最后记得引入工程中并build path. (不过,我把代码直接COPY到.XML好像就会自动添加了) 例子说明:item01..item08是要翻页的图片,page_indicator_focused,page_indicator_unfocuse

Android 实现个性的ViewPager切换动画 实战PageTransformer(兼容Android3.0以下)

1.介绍如何使用setPageTransformer设置切换动画: 2.自定义PageTransformer实现个性的切换动画: 3.该方法在SDK11以下的版本不起作用,我们会对其做一定修改,让其向下兼容. 官方示例地址:http://developer.android.com/training/animation/screen-slide.html 有兴趣的可以去看看~~ 好了,下面开始编写代码~~ 2.setPageTransformer的使用 首先我们迅速的实现一个传统的ViewPage

Android实战简易教程-第六十四枪(Android APP 引导页实现-第一次应用进入时加载)

APP引导页是每个优质APP必备的元素,下面我们研究一下如何只在第一次进入应用时进行加载引导页的方法. 1.判断是否第一次进入应用的方法: package com.yayun.guide; import android.app.Activity; import android.content.Context; import android.content.Intent; import android.content.SharedPreferences; import android.os.Bun

Android实战简易教程-第十八枪(ViewPager组件详解)

对于ViewPager组件我们知道: 1)ViewPager类直接继承了ViewGroup类,所有它是一个容器类,可以在其中添加其他的view类. 2)ViewPager类需要一个PagerAdapter适配器类给它提供数据. 3)ViewPager经常和Fragment一起使用,并且提供了专门的FragmentPagerAdapter和FragmentStatePagerAdapter类供Fragment中的ViewPager使用. 下面我们通过实例看一下ViewPager的使用. 一 实现V

Android实战简易教程-第二十六枪(基于ViewPager实现微信页面切换效果)

1.头部布局文件top.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="40dp" an