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

最新推荐文章于 2021-05-27 04:02:30 发布

黄枫_

最新推荐文章于 2021-05-27 04:02:30 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：【Android学习】文章标签： viewpager gridview 动画布局导航

本文链接：https://blog.youkuaiyun.com/scboyhj__/article/details/42747217

【Android学习】专栏收录该内容

36 篇文章

订阅专栏

本文介绍了一种使用ScrollView、GridView及ViewPager自定义实现导航页面的方法。通过这种方式可以更好地控制布局和动画效果，实现平滑的横向滚动效果及下方滚动条的同步动态变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

按照常规思路，实现导航页有专门的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;
		}
	}

}