Android30_ViewPager
2015-07-27 15:33
239 查看
ViewPager
一、ViewPager简介:
(一)、作用:
ViewPager的功能就是可以使视图滑动,就像Lanucher左右滑动那样。ViewPager用于实现多页面的切换效果。该类存在于Google的兼容包里面,android.support.v4.view.ViewPager。
(二)、ViewPager的常规使用步骤:
1、在布局文件中定义ViewPager组件(android.support.v4.view.ViewPager节点);
2、在Activity中设置ViewPager中放置的view内容;
3、给ViewPager对象设置适配器(PagerAdapter)。
ViewPager的适配器是PagerAdapter,它是基类。提供适配器来填充ViewPager的内部。一般做法都是继承PagerAdapter,自定义一个MyAdapter。
也可以使用一个更具体的实现,如FragmentPagerAdapter或FragmentStatePagerAdapter。谷歌官方推荐ViewPager和Fragment一起使用。当然在3.0以下版本中,没有必要这么做。
(三)、实现PagerAdapter必须重写的方法:
1、getCount()
2、isViewFromObject(View, Object)
3、instantiateItem(ViewGroup, int)
4、destroyItem(ViewGroup, int, Object)
【备注:】最少要实现上面四个方法,当然如果想让程序更健壮或是功能更全面,你可以重写其他的方法。
二、ViewPager实现基本导航效果一(TAB标题会滚动):
(一)、布局核心代码:
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical"> <android.support.v4.view.ViewPager android:id="@+id/viewpager_main" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center"> <android.support.v4.view.PagerTabStrip android:id="@+id/pagerTabStrip_main" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="top"> </android.support.v4.view.PagerTabStrip> </android.support.v4.view.ViewPager> </LinearLayout>
【备注:】
1、这里ViewPager和 PagerTabStrip都要把包名写全了,不然会ClassNotFount;
2、API中说:在布局xml把PagerTabStrip当做ViewPager的一个子标签来用,不能拿出来,不然还是会报错;
3、在PagerTabStrip标签中可以用属性android:layout_gravity=TOP|BOTTOM来指定title的位置;
4、如果要显示出PagerTabStrip中的title,必须在BaseAdapter中重写getPageTitle(int)。
(三)、Activity中使用ViewPager的核心代码:
publicclass MainActivity extends Activity { private List<View> list_views; private List<String> list_titles; private ViewPager viewPager_main; private PagerTabStrip pagerTabStrip_main; @Override protectedvoid onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); viewPager_main = (ViewPager) findViewById(R.id.viewpager_main); pagerTabStrip_main = (PagerTabStrip) findViewById(R.id.pagerTabStrip_main); pagerTabStrip_main.setTabIndicatorColor(Color.YELLOW); pagerTabStrip_main.setDrawFullUnderline(true); pagerTabStrip_main.setBackgroundColor(Color.GRAY); pagerTabStrip_main.setTextSpacing(50); list_views = new ArrayList<View>(); list_titles = new ArrayList<String>(); LayoutInflater inflater = LayoutInflater.from(this); View view1 = inflater.inflate(R.layout.view1_viewpager, null); View view2 = inflater.inflate(R.layout.view2_viewpager, null); View view3 = inflater.inflate(R.layout.view3_viewpager, null); View view4 = inflater.inflate(R.layout.view4_viewpager, null); list_views.add(view1); list_views.add(view2); list_views.add(view3); list_views.add(view4); list_titles.add("View1"); list_titles.add("View2"); list_titles.add("View3"); list_titles.add("View4"); viewPager_main.setAdapter(new MyAdapter(list_views, list_titles)); } class MyAdapter extends PagerAdapter { private List<View> list = null; private List<String> list_titles = null; public MyAdapter(List<View> list, List<String> list_titles) { this.list = list; this.list_titles = list_titles; } @Override publicint getCount() { if (list != null) { returnlist.size(); } return 0; } @Override publicboolean isViewFromObject(View arg0, Object arg1) { return arg0 == arg1; } @Override public Object instantiateItem(ViewGroup container, int position) { container.addView(list.get(position)); returnlist.get(position); } @Override publicvoiddestroyItem(ViewGroup container, int position, Object object) { container.removeView(list.get(position)); } @Override public CharSequence getPageTitle(int position) { returnlist_titles.get(position); } } }
三、ViewPager实现基本导航效果二(TAB标题固定,不随ViewPager而滚动):
(一)、布局核心代码:
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical"> <LinearLayout android:id="@+id/layout_main_tabtitle" android:layout_width="match_parent" android:layout_height="wrap_content"> <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:textSize="24sp" android:background="#999" android:text="Tab1"/> <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:textSize="24sp" android:background="#999" android:layout_marginLeft="1dp" android:text="Tab2"/> <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:textSize="24sp" android:background="#999" android:layout_marginLeft="1dp" android:text="Tab3"/> </LinearLayout> <TextView android:layout_width="match_parent" android:layout_height=“1px" android:background="#00f" android:text=""/> <android.support.v4.view.ViewPager android:id="@+id/viewPager_main" android:layout_width="match_parent" android:layout_height="wrap_content"/> </LinearLayout>
(二)、Activity中使用ViewPager的核心代码:
private ViewPager viewPager_main; private List<View> list = null; private TextView[] arr_titles = null; @Override protectedvoid onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); viewPager_main = (ViewPager) findViewById(R.id.viewPager_main); list = new ArrayList<View>(); LayoutInflater inflater = LayoutInflater.from(this); View view1 = inflater.inflate(R.layout.view1_viewpager, null); View view2 = inflater.inflate(R.layout.view2_viewpager, null); View view3 = inflater.inflate(R.layout.view3_viewpager, null); list.add(view1); list.add(view2); list.add(view3); viewPager_main.setAdapter(new MyAdapter(list)); viewPager_main.setOnPageChangeListener(new OnPageChangeListener() { @Override publicvoid onPageSelected(int position) { // 当页面切换改变时,让所有的“点”都变成可操作。 for (int j = 0; j < arr_titles.length; j++) { arr_titles[j].setEnabled(true); arr_titles[j].setBackgroundColor(Color.GRAY); } // 让当前点击的“点”变成不可以操作。 arr_titles[position].setEnabled(false); arr_titles[position].setBackgroundColor(Color.BLUE); } @Override publicvoid onPageScrolled(int arg0, float arg1, int arg2) { } @Override publicvoid onPageScrollStateChanged(int arg0) { } }); initTitle(); } privatevoid initTitle() { LinearLayout layout = (LinearLayout) findViewById(R.id.layout_main_tabtitle); arr_titles = new TextView[3]; for (int i = 0; i < 3; i++) { TextView textView = (TextView) layout.getChildAt(i); arr_titles[i] = textView; arr_titles[i].setEnabled(true); arr_titles[i].setBackgroundColor(Color.GRAY); arr_titles[i].setTag(i); arr_titles[i].setOnClickListener(new OnClickListener() { @Override publicvoid onClick(View v) { // 根据当前点击的position,设置ViewPager的当前item viewPager_main.setCurrentItem((Integer) v.getTag()); } }); } arr_titles[0].setEnabled(false); arr_titles[0].setBackgroundColor(Color.BLUE); } class MyAdapter extends PagerAdapter { private List<View> list = null; public MyAdapter(List<View> list) { this.list = list; } @Override publicint getCount() { returnlist.size(); } @Override publicboolean isViewFromObject(View arg0, Object arg1) { return arg0 == arg1; } @Override public Object instantiateItem(ViewGroup container, int position) { container.addView(list.get(position)); returnlist.get(position); } @Override publicvoid destroyItem(ViewGroup container, int position, Object object) { container.removeView(list.get(position)); } }
四、ViewPager实现程序欢迎界面(介绍性图片可以滚动,下方有几个点,可以提示当前item的位置):
(一)、效果图:
(二)、布局核心代码:
<RelativeLayoutxmlns: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.support.v4.view.ViewPager android:id="@+id/viewPager_main" android:layout_width="wrap_content" android:layout_height="match_parent"/> <LinearLayout android:id="@+id/layout_main" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:layout_marginBottom="80dp" android:orientation="horizontal"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/dot" android:adjustViewBounds="true" android:maxWidth="10dp" android:layout_marginRight="10dp"/> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/dot" android:adjustViewBounds="true" android:maxWidth="10dp" android:layout_marginRight="10dp"/> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/dot" android:adjustViewBounds="true" android:maxWidth="10dp" android:layout_marginRight="10dp"/> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/dot" android:adjustViewBounds="true" android:maxWidth="10dp"/> </LinearLayout> </RelativeLayout>
(三)、dot.xml中的核心代码:
<?xmlversion="1.0"encoding="UTF-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <itemandroid:state_enabled="true"android:drawable="@drawable/icon02"/> <itemandroid:state_enabled="false"android:drawable="@drawable/icon01"/> </selector> <!-- android:state_selected选中 android:state_focused获得焦点 android:state_pressed点击 android:state_enabled设置是否响应事件,指所有事件 -->
(四)、Activity中使用ViewPager的核心代码:
publicclass MainActivity extends Activity { private ViewPager viewPager_main; private List<View> list = null; privateint[] imgIds = newint[] { R.drawable.img012, R.drawable.img017, R.drawable.img021, R.drawable.img030 }; private ImageView[] dots = null; private SoundPool pool = null; private HashMap<Integer, Integer> poolMap = null; @Override protectedvoid onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); viewPager_main = (ViewPager) findViewById(R.id.viewPager_main); list = new ArrayList<View>(); for (int i = 0; i < imgIds.length; i++) { ImageView imgView = new ImageView(this); imgView.setImageResource(imgIds[i]); list.add(imgView); } viewPager_main.setAdapter(new MyAdapter(list)); viewPager_main.setOnPageChangeListener(new OnPageChangeListener() { @Override publicvoid onPageSelected(int position) { for (int j = 0; j < dots.length; j++) { dots[j].setEnabled(true); } dots[position].setEnabled(false); playSound(1); } @Override publicvoid onPageScrolled(int arg0, float arg1, int arg2) { } @Override publicvoid onPageScrollStateChanged(int arg0) { } }); initDots(); initSoundPool();//初始化声音池 } privatevoid initDots() { LinearLayout layout = (LinearLayout) findViewById(R.id.layout_main); dots = new ImageView[imgIds.length]; // 循环取得小点图片 for (int i = 0; i < imgIds.length; i++) { // 得到一个LinearLayout下面的每一个子元素 dots[i] = (ImageView) layout.getChildAt(i); dots[i].setEnabled(true); dots[i].setTag(i); dots[i].setOnClickListener(new OnClickListener() { @Override publicvoid onClick(View v) { viewPager_main.setCurrentItem((Integer) v.getTag()); } }); } dots[0].setEnabled(false); } class MyAdapter extends PagerAdapter { private List<View> list = null; public MyAdapter(List<View> list) { this.list = list; } @Override publicint getCount() { if (list != null) { returnlist.size(); } return 0; } @Override publicboolean isViewFromObject(View arg0, Object arg1) { return arg0 == arg1; } @Override public Object instantiateItem(ViewGroup container, int position) { container.addView(list.get(position)); returnlist.get(position); } @Override publicvoid destroyItem(ViewGroup container, int position, Object object) { container.removeView(list.get(position)); } } publicvoid initSoundPool() { pool = new SoundPool(5, AudioManager.STREAM_MUSIC, 0); poolMap = new HashMap<Integer, Integer>(); poolMap.put(1, pool.load(this, R.raw.ding, 1)); poolMap.put(2, pool.load(this, R.raw.ringin, 1)); } publicvoid playSound(int sound) { pool.play(poolMap.get(sound), // 播放的音乐id 1, // 左声道音量 1, // 右声道音量 1, // 优先级,0为最低 0, // 循环次数,0:不循环,-1:永远循环 1 // 回放速度 ,该值在0.5-2.0之间,1为正常速度 ); } }
(五)、完善程序欢迎程序:
一般来说,引导界面是出现第一次运行时出现的,之后不会再出现。所以需要记录是否是第一次使用程序,办法有很多,最容易想到的就是使用SharedPreferences来保存。
1、完善思路如下:
程序进入欢迎引导界面,在onCreate()方法中读取SharedPreferences里面的变量,如果SharedPreferences文件不存在,则返回true,继续执行欢迎引导界面的内容。否则,则将SharedPreferences里面的变量设置为false。此后每次进入欢迎界面读取SharedPreferences里面的变量,因为值是false,所以直接进入默认主界面,而不再执行引导界面了。
2、核心示例代码:(只需要在onCreate()方法中增加一部分代码即可)
private ViewPager viewPager_main; private List<View> list = null; privateint[] imgIds = newint[] { R.drawable.img012, R.drawable.img017, R.drawable.img021, R.drawable.img030 }; private ImageView[] dots = null; private SoundPool pool = null; private HashMap<Integer, Integer> poolMap = null; privatestaticfinal String SHAREDPREFERENCES_NAME = "prefs_log"; private SharedPreferences prefs = null; booleanisFirstIn = false; @Override protectedvoid onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); prefs = getSharedPreferences(SHAREDPREFERENCES_NAME, MODE_PRIVATE); // 取得相应的值,如果没有该值,说明还未写入,用true作为默认值 isFirstIn = prefs.getBoolean("isFirstIn", true); // 判断程序与第几次运行,如果是第一次运行则跳转到引导界面,否则跳转到主界面 if (!isFirstIn) { Intent intent = new Intent(this, NextActivity.class); startActivity(intent); finish(); } else { Editor editor = prefs.edit(); // 存入数据 editor.putBoolean("isFirstIn", false); // 提交修改 editor.commit(); } viewPager_main = (ViewPager) findViewById(R.id.viewPager_main); list = new ArrayList<View>(); for (int i = 0; i < imgIds.length; i++) { ImageView imgView = new ImageView(this); imgView.setImageResource(imgIds[i]); list.add(imgView); } viewPager_main.setAdapter(new MyAdapter(list)); viewPager_main.setOnPageChangeListener(new OnPageChangeListener() { @Override publicvoid onPageSelected(int position) { for (int j = 0; j < dots.length; j++) { dots[j].setEnabled(true); } dots[position].setEnabled(false); playSound(1); } @Override publicvoid onPageScrolled(int arg0, float arg1, int arg2) { } @Override publicvoid onPageScrollStateChanged(int arg0) { } }); initDots(); initSoundPool(); }
五、ViewPager+Fragment结合使用,实现仿QQ界面:
(一)、效果图:
(二)、布局文件核心代码:
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="98dp" android:background="@drawable/top_theme_blue" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="48dp"> <ImageView android:id="@+id/imageView1" android:layout_width="36dp" android:layout_height="36dp" android:layout_gravity="center_vertical" android:layout_marginLeft="10dp" android:src="@drawable/headimg"/> <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:layout_marginLeft="10dp" android:text="Android开发团队" /> <ImageView android:id="@+id/imageView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:paddingLeft="10dp" android:src="@drawable/status_online"/> </LinearLayout> <LinearLayout android:id="@+id/layout_main_tabtitle" android:layout_width="fill_parent" android:layout_height="wrap_content" android:paddingBottom="5dp" android:paddingTop="10dp"> <TextView android:id="@+id/text_tab_activity" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="1.0" android:gravity="center" android:text="动态" android:textColor="#fff" android:textSize="18sp"/> <TextView android:id="@+id/text_tab_groups" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="1.0" android:gravity="center" android:text="群组" android:textColor="#ddd" android:textSize="18sp"/> <TextView android:id="@+id/text_tab_friends" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="1.0" android:gravity="center" android:text="好友" android:textColor="#ddd" android:textSize="18sp"/> <TextView android:id="@+id/text_tab_chat" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="1.0" android:gravity="center" android:text="会话" android:textColor="#ddd" android:textSize="18sp"/> </LinearLayout> <LinearLayout android:id="@+id/layout_indicateline" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="bottom" android:paddingBottom="2dp"> <TextView android:layout_width="0dp" android:layout_height="4dp" android:layout_marginLeft="15dp" android:layout_marginRight="15dp" android:layout_weight="1"/> <TextView android:layout_width="0dp" android:layout_height="4dp" android:layout_marginLeft="15dp" android:layout_marginRight="15dp" android:layout_weight="1"/> <TextView android:layout_width="0dp" android:layout_height="4dp" android:layout_marginLeft="15dp" android:layout_marginRight="15dp" android:layout_weight="1"/> <TextView android:layout_width="0dp" android:layout_height="4dp" android:layout_marginLeft="15dp" android:layout_marginRight="15dp" android:layout_weight="1"/> </LinearLayout> </LinearLayout> <android.support.v4.view.ViewPager android:id="@+id/viewPager_main" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:background="#fff"/> </LinearLayout>
(三)、Fragment文件核心代码:
publicclass MyFragment extends Fragment { private String data = ""; private String defaultData = "default value"; static MyFragment newInstance(String info) { MyFragment newFragment = new MyFragment(); Bundle bundle = new Bundle(); bundle.putString("data_msg", info); newFragment.setArguments(bundle); return newFragment; } @Override publicvoid onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); Bundle bundle = getArguments(); if (bundle == null) { data = defaultData; } else { data = bundle.getString("data_msg"); } } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment_my, container, false); TextView text_myfragment_info = (TextView) view .findViewById(R.id.text_myfragment_info); text_myfragment_info.setText(data); return view; } }
(四)、Activity文件核心代码:
publicclass MainActivity extends FragmentActivity { private ViewPager viewPager_main; private List<Fragment> fragmentsList; private TextView[] arr_titles; private TextView[] arr_lines; @Override protectedvoid onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initIndicateLine(); initTextView(); initViewPager(); } privatevoid initTextView() { LinearLayout layout = (LinearLayout) findViewById(R.id.layout_main_tabtitle); arr_titles = new TextView[4]; for (int i = 0; i < arr_titles.length; i++) { TextView textView = (TextView) layout.getChildAt(i); arr_titles[i] = textView; arr_titles[i].setEnabled(true); arr_titles[i].setTag(i); arr_titles[i].setOnClickListener(new OnClickListener() { @Override publicvoid onClick(View v) { viewPager_main.setCurrentItem((Integer) v.getTag()); } }); arr_titles[0].setEnabled(false); } } privatevoid initViewPager() { viewPager_main = (ViewPager) findViewById(R.id.viewPager_main); fragmentsList = new ArrayList<Fragment>(); Fragment activityfragment = MyFragment .newInstance(" Activity Fragment欢迎您!"); Fragment groupFragment = MyFragment.newInstance(" Group Fragment欢迎您!"); Fragment friendsFragment = MyFragment .newInstance(" Friends Fragment欢迎您!"); Fragment chatFragment = MyFragment.newInstance(" Chat Fragment欢迎您!"); fragmentsList.add(activityfragment); fragmentsList.add(groupFragment); fragmentsList.add(friendsFragment); fragmentsList.add(chatFragment); viewPager_main.setAdapter(new MyAdapter(getSupportFragmentManager(), fragmentsList)); viewPager_main.setOnPageChangeListener(new OnPageChangeListener() { @Override publicvoid onPageScrollStateChanged(int position) { } @Override publicvoid onPageScrolled(int arg0, float arg1, int arg2) { } @Override publicvoid onPageSelected(int position) { for (int i = 0; i < arr_titles.length; i++) { arr_titles[i].setEnabled(true); arr_lines[i].setBackgroundColor(Color.TRANSPARENT); } arr_titles[position].setEnabled(false); arr_lines[position].setBackgroundColor(Color.WHITE); } }); viewPager_main.setCurrentItem(0); } privatevoid initIndicateLine() { LinearLayout layout = (LinearLayout) findViewById(R.id.layout_indicateline); arr_lines = new TextView[4]; for (int i = 0; i < arr_lines.length; i++) { TextView view = (TextView) layout.getChildAt(i); arr_lines[i] = view; arr_lines[i].setTag(i); arr_lines[i].setBackgroundColor(Color.TRANSPARENT); } arr_lines[0].setBackgroundColor(Color.WHITE); } class MyAdapter extends FragmentPagerAdapter { private List<Fragment> fragmentsList = null; public MyAdapter(FragmentManager fm) { super(fm); } public MyAdapter(FragmentManager fm, List<Fragment> fragmentsList) { super(fm); this.fragmentsList = fragmentsList; } @Override public Fragment getItem(int arg0) { returnfragmentsList.get(arg0); } @Override publicint getCount() { returnfragmentsList.size(); } } }
相关文章推荐
- Android透明动画
- Android透明动画
- 笔记118--Android延时执行的四种方法
- 各大android上线市场地址
- 【小技巧】让Android EditText失去焦点,防止自动弹出键盘
- Android时时监测手机的旋转角度 根据旋转角度确定在什么角度加载竖屏布局 在什么时候加载横屏布局
- Android 开发之:Intent.createChooser() 妙用
- ThinkAndroid快速开发框架中界面之间数据的传递
- android HorizontalListView
- Android学习笔记---Matrix矩阵
- Android TextView的各种属性
- Android(java)学习笔记132:ListViewProject案例(ListView + ArrayAdapter)
- 清除android程序中的多余资源
- Android界面视图的类图
- android:elevation
- Android的权限机制总结
- Android 、切换主题的实现
- Android旋转动画
- Android的权限机制之—— “沙箱”机制sharedUserId跟签名
- android setClickable 不起作用 没有作用