Android-ViewPager滑动导航

来源:互联网 发布:淘宝如何做推广活动 编辑:程序博客网 时间:2024/05/18 21:41

目标效果:

   

程序运行显示第一个页面,下边页面导航也显示第一页,向左滑动可以显示第二页第三页第四页,并且使用Toast打印页面导航。


1.activity_main.xml页面放置ViewPager控件和PagerTabStrip子控件。

activity_main.xml页面:

<RelativeLayout 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"    tools:context=".MainActivity" >    <!-- android-support-v4是谷歌公司为了解决版本问题提供的兼容包,在新建工程中libs下,ViewPager是其中的一个控件 -->    <android.support.v4.view.ViewPager        android:id="@+id/pager"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center">                <!-- PagerTabStrip是用来显示title的下划线,如果为了实现导航功能,则不需要这个子标签组件 -->        <android.support.v4.view.PagerTabStrip            android:id="@+id/tab"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="bottom">        </android.support.v4.view.PagerTabStrip>                    </android.support.v4.view.ViewPager></RelativeLayout>


2.layout文件夹新建view1.xml页面,view2.xml页面,view3.xml页面,view4.xml页面,用于设置每个页面的样式,这里四个页面都只有一个TextView,所以以view1.xml举例,后边三个只不过是文本不同。
view1.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" >    <TextView     android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:text="@string/view1Textview">    </TextView></LinearLayout>


3.本例中TextView的文本都存放于strings.xml页面。
strings.xml页面:
<?xml version="1.0" encoding="utf-8"?><resources>    <string name="app_name">左右滑动</string>    <string name="action_settings">Settings</string>    <string name="hello_world">Hello world!</string>    <string name="view1Textview">第一个界面</string>    <string name="view2Textview">第二个界面</string>    <string name="view3Textview">第三个界面</string>    <string name="view4Textview">第四个界面</string></resources>


4.新建一个适配器,用于处理数据源。
myPagerAdapter.java页面:
package com.example.adapter;import java.util.List;import android.support.v4.view.PagerAdapter;import android.view.View;import android.view.ViewGroup;public class myPagerAdapter extends PagerAdapter{private List<View>viewList;//页卡集合private List<String>titleList;//页卡标题集合/*适配器构造方法*/public myPagerAdapter(List<View>viewList,List<String>titleList){this.viewList=viewList;this.titleList=titleList;}/*返回的是ViewPager页卡数量*/@Overridepublic int getCount() {return viewList.size();//页卡数量等于集合大小}/*当前View视图是否来自对象*/@Overridepublic boolean isViewFromObject(View arg0, Object arg1) {return arg0==arg1;}/*实例化一个页卡*/@Overridepublic Object instantiateItem(ViewGroup container, int position) {container.addView(viewList.get(position));//需要添加到ViewGroup中return viewList.get(position);}/*销毁一个页卡*/@Overridepublic void destroyItem(ViewGroup container, int position, Object object) {container.removeView(viewList.get(position));//需要从ViewGroup中移除}/*设置ViewPager页卡的标题*/@Overridepublic CharSequence getPageTitle(int position) {return titleList.get(position);}}


5.MainActivity.java最后对适配器和数据源进行关联并且设置滑动事件。
MainActivity.java页面:
package com.example.viewpager;import java.util.ArrayList;import java.util.List;import com.example.adapter.myPagerAdapter;import android.os.Bundle;import android.app.Activity;import android.graphics.Color;import android.support.v4.view.PagerTabStrip;import android.support.v4.view.ViewPager;import android.support.v4.view.ViewPager.OnPageChangeListener;import android.view.Menu;import android.view.View;import android.widget.Toast;public class MainActivity extends Activity implements OnPageChangeListener{private List<View>viewList;private ViewPager pager;private PagerTabStrip tab;//底部的导航private List<String>titleList;myPagerAdapter adapter;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);viewList=new ArrayList<View>();/*通过View对象去作为ViewPager的数据源*/View view1=View.inflate(this,R.layout.view1,null);View view2=View.inflate(this,R.layout.view2,null);View view3=View.inflate(this,R.layout.view3,null);View view4=View.inflate(this,R.layout.view4,null);viewList.add(view1);viewList.add(view2);viewList.add(view3);viewList.add(view4);/*为ViewPager页卡设置标题*/titleList=new ArrayList<String>();titleList.add("第一页");titleList.add("第二页");titleList.add("第三页");titleList.add("第四页");/*为PagerTabStrip设置一些属性*/tab=(PagerTabStrip) findViewById(R.id.tab);tab.setBackgroundColor(Color.YELLOW);//设置背景颜色tab.setTextColor(Color.RED);//设置文字颜色tab.setDrawFullUnderline(false);//去掉长线tab.setTabIndicatorColor(Color.GREEN);//设置短线颜色/*初始化ViewPager*/pager=(ViewPager) findViewById(R.id.pager);/*创建PagerAdapter适配器(自己编写的类)*/adapter=new myPagerAdapter(viewList,titleList);/*ViewPager加载适配器*/pager.setAdapter(adapter);/*添加监听器*/pager.setOnPageChangeListener(this);}@Overridepublic boolean onCreateOptionsMenu(Menu menu) {getMenuInflater().inflate(R.menu.main, menu);return true;}@Overridepublic void onPageScrollStateChanged(int arg0) {}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {}/*页面改变时触发的方法*/@Overridepublic void onPageSelected(int position) {Toast.makeText(MainActivity.this,titleList.get(position),Toast.LENGTH_SHORT).show();}}


6.程序运行就可以了。








0 0
原创粉丝点击