Android利用ViewPager仿微信主界面-android学习之旅(78)
2016-11-09 00:00
351 查看
首先是介绍ViewPager这个控件 ,这个控件需要pagerAdapter作为容器来提供数据,同时pagerAdapter的数据源是View数组
效果图如下
部分代码如下,实现如下的方法
mPagerAdapter = new PagerAdapter(){ @Override public int getCount() { return mViews.size(); } @Override public boolean isViewFromObject(View view, Object o) { return view == o; } @Override public Object instantiateItem(ViewGroup container, int position) { View view = mViews.get(position); container.addView(view); return view; } @Override public void destroyItem(ViewGroup container, int position, Object object) { container.removeView(mViews.get(position)); } };
View数组就是几个LinearLayout,代码如下
private List<View> mViews = new ArrayList<View>(); View tab01 = inflater.inflate(R.layout.tab01,null); View tab02 = inflater.inflate(R.layout.tab02,null); View tab03 = inflater.inflate(R.layout.tab03,null); View tab04 = inflater.inflate(R.layout.tab04,null); mViews.add(tab01); mViews.add(tab02); mViews.add(tab03); mViews.add(tab04);
ViewPager的滑动点击事件
viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int i, float v, int i2) { } @Override public void onPageSelected(int i) { int currentItem = viewPager.getCurrentItem(); resetImg(); switch(currentItem){ case 0: btnWeixin.setImageResource(R.drawable.tab_weixin_pressed); break; case 1: btnFriend.setImageResource(R.drawable.tab_find_frd_pressed); break; case 2: btnAddress.setImageResource(R.drawable.tab_address_pressed); break; case 3: btnSetting.setImageResource(R.drawable.tab_settings_pressed); break; default: break; } } @Override public void onPageScrollStateChanged(int i) { } });
仿微信主页面,实现的效果是滑动ViewPager的各个页面之后,下面的图标也是随着相应的界面变亮,然后点击底部,相应的页面也会跳转
点击底部跳转的逻辑在于代码,ViewPager对各个页面是从0开始编号的
viewPager.setCurrentItem(1);
布局主要代码
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="45dp" android:gravity="center" android:background="@drawable/title_bar"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="微信" android:textColor="#ffffff" android:textSize="20sp" android:layout_gravity="center" android:textStyle="bold"/> </LinearLayout>
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="55dp" android:gravity="center" android:background="@drawable/bottom_bar" > <LinearLayout android:id="@+id/tab_weixin" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center" android:orientation="vertical" > <ImageButton android:id="@+id/tab_weixin_img" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/tab_weixin_pressed" android:background="#00000000" android:clickable="false" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="微信" android:textColor="#ffffffff"/> </LinearLayout> <LinearLayout android:id="@+id/tab_friend" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center" android:orientation="vertical" > <ImageButton android:id="@+id/tab_friend_img" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/tab_find_frd_normal" android:background="#00000000" android:clickable="false" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="朋友" android:textColor="#ffffffff"/> </LinearLayout> <LinearLayout android:id="@+id/tab_address" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center" android:orientation="vertical" > <ImageButton android:id="@+id/tab_address_img" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/tab_address_normal" android:background="#00000000" android:clickable="false" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="通讯录" android:textColor="#ffffffff"/> </LinearLayout> <LinearLayout android:id="@+id/tab_setting" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center" android:orientation="vertical" > <ImageButton android:id="@+id/tab_setting_img" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/tab_settings_normal" android:background="#00000000" android:clickable="false" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="设置" android:textColor="#ffffffff"/> </LinearLayout> </LinearLayout>
<LinearLayout 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" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:paddingBottom="@dimen/activity_vertical_margin" android:orientation="vertical" > <include layout="@layout/top"/> <android.support.v4.view.ViewPager android:id="@+id/viewPager" android:layout_width="fill_parent" android:layout_height="0dp" android:layout_weight="1"> </android.support.v4.view.ViewPager> <include layout="@layout/bottom"/> </LinearLayout>
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
项目源码代码地址是
https://github.com/fengsehng/WeixinTest
相关文章推荐
- Android利用ViewPager仿微信主界面-android学习之旅(78)
- Android利用ViewPager仿微信主界面-android学习之旅(78)
- Android利用ViewPager仿微信主界面-android学习之旅(78)
- Android利用ViewPager仿微信主界面
- Android ViewPager+Fragment超高仿微信主界面
- fragment+viewpager学习一(高仿微信5.2.1主界面)
- 2014-11-3Android学习------利用ViewPager实现滑动的菜单--------GIF动画实现
- Android ViewPager+RadioGroup+Fragment超高仿微信主界面
- Android ViewPager+Fragment超高仿微信主界面(带底部图标切换动画)
- Android ViewPager+RadioGroup+Fragment超高仿微信主界面
- ViewPager学习之仿微信主界面
- android actionbar viewpager 实现类微信主界面布局
- Android ViewPager+RadioGroup+Fragment超高仿微信主界面
- Android学习篇章62-ViewPager-滑动窗口-FragmentActivity
- Android的 ViewPager 学习笔记
- Android 利用ViewPager、Fragment、PagerTabStrip实现多页面滑动效
- Android实现滑动图片(ViewPager)学习之一:布局
- Android学习篇章61-ViewPager-滑动窗口
- Android开发学习之基于ViewPager实现Gallery画廊效果