码迷,mamicode.com
首页 > 其他好文 > 详细

ViewPager实现导航页

时间:2015-03-22 09:19:12      阅读:168      评论:0      收藏:0      [点我收藏+]

标签:viewpager   android   界面   

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

activity_main.xml:
<span style="font-size:14px;"><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"
    android:paddingBottom= "@dimen/activity_vertical_margin"
    android:paddingLeft= "@dimen/activity_horizontal_margin"
    android:paddingRight= "@dimen/activity_horizontal_margin"
    android:paddingTop= "@dimen/activity_vertical_margin"
    tools:context="com.example.guidepage.MainActivity" >

    <TextView
        android:layout_width= "wrap_content"
        android:layout_height ="wrap_content"
        android:text ="主界面"
        android:textSize ="22dp"
        android:layout_centerInParent ="true"
        />

</RelativeLayout>
</span>

我们在Layout下新建一个guide.xml作为导航页的布局:
guide.xml:

<span style="font-size:14px;"><?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" >
   
    <FrameLayout
        android:layout_width= "match_parent"
        android:layout_height="match_parent"
        android:background= "#ff1874CD"
        >
       
        <android.support.v4.view.ViewPager
            android:id= "@+id/guide_viewpager"
            android:layout_width= "match_parent"
            android:layout_height="match_parent"
            />
       
        <!-- 假设导航页有5页 -->
        <!-- 下面这里是设置五个导航点指示 -->
       
        <LinearLayout
            android:layout_width= "wrap_content"
            android:layout_height="wrap_content"
            android:orientation= "horizontal"
            android:layout_gravity="center|bottom"
            android:gravity= "center"
            >
            <ImageView
                android:id= "@+id/dot_01"
                android:layout_width= "0dp"
                android:layout_height="wrap_content"
                      android:layout_weight="1.0"
                android:src= "@drawable/dot_img_selected"
                android:layout_margin="2dp"
                />
            <ImageView
                android:id= "@+id/dot_02"
                android:layout_width= "0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1.0"
                android:src= "@drawable/dot_img"
                android:layout_margin="2dp"
                />
            <ImageView
                android:id= "@+id/dot_03"
                android:layout_width= "0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1.0"
                android:src= "@drawable/dot_img"
                android:layout_margin="2dp"
                />
            <ImageView
                android:id= "@+id/dot_04"
                android:layout_width= "0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1.0"
                android:src= "@drawable/dot_img"
                android:layout_margin="2dp"
                />
            <ImageView
                android:id= "@+id/dot_05"
                android:layout_width= "0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1.0"
                android:src= "@drawable/dot_img"
                android:layout_margin="2dp"
                />
        </LinearLayout >
    </FrameLayout >
</LinearLayout>
</span>

注意:ViewPager组件用的时候一定要写成<android.support.v4.view.ViewPager/>,这个组件中放置的是切换的页面,我们这里还要使用FrameLayout布局,以便于把导航点放置在上面,“导航点”图片dot_img和dot_img_selected分别如下图所示,这个可以自己随便制作一下:

技术分享


好了,到了这里导航页的布局算是写完了,很简单吧~ O(∩_∩)O

既然需要页面切换,所以我们还需要有五个页面进行介绍。
所以我们再新建五个布局,用于承载五个导航介绍页面,新建scene1.xml:

<span style="font-size:14px;"><?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"
    android:gravity="center"
    >
    <TextView
        android:layout_width= "wrap_content"
        android:layout_height ="0dp"
        android:gravity= "center"
        android:text ="一款手机操作系统"
        android:textColor= "#ffffffff"
        android:textSize= "22sp"
        android:layout_weight ="1.0"
        />
   
    <LinearLayout
        android:layout_width= "match_parent"
        android:layout_height ="0dp"
        android:layout_weight ="5.0"
        android:gravity= "center"
        >
        <ImageView
        android:layout_width= "wrap_content"
        android:layout_height ="wrap_content"
        android:background= "@drawable/android_logo"
        />
    </LinearLayout >
</LinearLayout>
</span>

android_logo是一张图片。
这里我们简单起见,一个scenne只放一张图和一行文字,依照这样的方法,分别又新建了scene2、scene3、scene4。

scene5我们可以加个按钮,点击可以进入应用程序的主界面。scene5.xml:

<span style="font-size:14px;"><? 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"
    android:gravity= "center"
    >
    <TextView
        android:layout_width= "wrap_content"
        android:layout_height ="0dp"
        android:gravity= "center"
        android:text ="欢迎您的使用"
        android:textSize= "22sp"
        android:layout_weight ="1.0"
        android:textColor= "#ffffffff"
        />
   
    <LinearLayout
        android:layout_width= "match_parent"
        android:layout_height ="0dp"
        android:layout_weight ="5.0"
        android:gravity= "center"
        >
        <ImageView
        android:layout_width= "wrap_content"
        android:layout_height ="wrap_content"
        android:background= "@drawable/android_cicle"
        />
    </LinearLayout >
   
    <LinearLayout
        android:layout_width= "wrap_content"
        android:layout_height ="0dp"
        android:layout_weight ="1.0"
        android:gravity= "center_horizontal"
        >
    <Button
        android:id= "@+id/enter_button"
        android:background= "@drawable/enter_button_bg"
        android:layout_width= "160dp"
        android:layout_height ="wrap_content"
        android:text ="马上体验"
        android:textColor= "#ffffffff"
        android:layout_marginBottom ="40dp"
        />
    </LinearLayout >
</ LinearLayout>
</span>

上面代码中的Button,我们可以看到background属性设置为“android:background="@drawable/enter_button_bg",enter_button_bg.xml是自定义的一个drawable资源文件,主要是控制Button的形状,这里我将它设置为白色边框圆角背景透明:

enter_button_bg.xml:

<? xml version= "1.0" encoding = "utf-8"?>
< shape xmlns:android ="http://schemas.android.com/apk/res/android" >
    <stroke
        android:width= "1.0dp"
        android:color= "#ffffffff"
        />
   
    <corners
        android:radius= "1.0dp"
        />
   
    <solid
        android:color= "#00000000"
        />

</ shape>


下面我们正式开始Activity部分了:

新建GuidePageActivity,
等等,在这之前,我们先写一个适配器,ViewPager和ListView一样,同样也需要适配器,这个适配器应该继承PagerAdapter。

所以我们先新建一个ViewPagerAdapter.java:

public class ViewPagerAdapter extends PagerAdapter{

     List<View> views; //用于放置导航页
      private Context context;
     
      public ViewPagerAdapter(List<View> views, Context context) {
            super();
            this. views = views;
            this. context = context;
     }

//   获取需要滑动的控件数量
      public int getCount() {
            // TODO Auto-generated method stub
            return views.size();
     }


//   判断是否是同一个元素
      public boolean isViewFromObject(View arg0, Object arg1) {
            // TODO Auto-generated method stub
            return arg0 == arg1;
     }
     
//   超出了缓存数量,销毁
      @Override
      public void destroyItem(View container, int position, Object object) {
            // TODO Auto-generated method stub
          ((ViewPager)container).removeView( views.get(position));
     }
     
//   初始化显示加载图片
      @Override
      public Object instantiateItem(View container, int position) {
           ((ViewPager)container).addView( views.get(position));
            return views.get(position);
     }
}

写完了适配器之后,我们就新建GuidePageActivity:

public class GuidePageActivity extends Activity implements OnPageChangeListener{


     private ViewPager viewPager;
     private List<View> views; //放置需要切换的页面
     private ViewPagerAdapter vpAdater; //适配器
     private int[] layoutIds; //切换页面的布局id
     private int[] dotsIds; //导航点的id
     private ImageView[] dots; //导航点集合
     private Button enterButton;
     
     protected void onCreate (Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
           requestWindowFeature(Window. FEATURE_NO_TITLE); //隐藏标题
           setContentView(R.layout. guide);
          getWindow().setFlags(WindowManager.LayoutParams. FLAG_FULLSCREEN,
                     WindowManager.LayoutParams. FLAG_FULLSCREEN); //设置全屏
           initViews(); //初始化组件
     }
     
     void initViews(){
           LayoutInflater inflater = LayoutInflater. from(this);
            layoutIds = new int[]{R.layout. scene1, R.layout.scene2, R.layout.scene3 ,
                     R.layout. scene4, R.layout. scene5};
            dotsIds = new int[]{R.id. dot_01, R.id. dot_02, R.id.dot_03,
                     R.id. dot_04, R.id. dot_05};
           
           
//         初始化views集合
            views = new ArrayList<View>();
            for( int i=0; i< layoutIds. length; i++){
                 views.add(inflater.inflate( layoutIds[i], null));
           }
           
//         初始化dots
            dots = new ImageView[ dotsIds. length];
            for( int i=0; i< dotsIds. length; i++){
                 dots[i] = (ImageView)findViewById( dotsIds[i]);
           }
           
            viewPager = (ViewPager)findViewById(R.id.guide_viewpager );
            vpAdater = new ViewPagerAdapter( views, this);
            viewPager.setAdapter( vpAdater); //为viewPager设置适配器
           
            //同时需要监听ViewPager滑动的情况,根据滑动的状态设置导航点
            viewPager.setOnPageChangeListener( this);
           
            enterButton = (Button)( views.get( views.size() - 1)).findViewById(R.id.enter_button );
            enterButton.setOnClickListener(
                      new OnClickListener() {
                            public void onClick(View v) {
                                 // TODO Auto-generated method stub
                                Intent intent = new Intent(GuidePageActivity.this , MainActivity.class);
                                startActivity(intent);
                                finish();
                           }
                     }
                     );
     }

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

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


     //根据选定的页面状态设置导航点
     public void onPageSelected( int arg0) {
            //选定arg0位置的页面
            for( int i=0; i< views.size(); i++){
                 if(i == arg0){
                      dots[i].setImageResource(R.drawable. dot_img_selected);
                }
                 else{
                      dots[i].setImageResource(R.drawable. dot_img);
                }
           }
     }
}


注意:requestWindowFeature必须放在setContentView前面,否则会报错:
android.util.AndroidRuntimeException: requestFeature() must be called before adding content.

最后别忘了设置AndroidManifest.xml,把GuidePageActivity设为主活动,原先的MainActivity也需要注册一下。

应该来说,看着注释是不难看懂的。

最后得到的效果:

技术分享

对了,如果你想要实现只有第一次安装时才导航的效果,其实也很简单,只要设置一个标志isFirst,利用SharedPreference进行存储,每次启动时判断下就行了,这里不再赘述。











ViewPager实现导航页

标签:viewpager   android   界面   

原文地址:http://blog.csdn.net/xiexinxinlove/article/details/44519731

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!