2、 Android UI--ViewPager扩展Tab标签指示

最新推荐文章于 2022-09-23 08:00:00 发布

zwcshy

最新推荐文章于 2022-09-23 08:00:00 发布

阅读量477

点赞数

分类专栏： Android开发篇文章标签： android

Android开发篇专栏收录该内容

14 篇文章

订阅专栏

本文介绍如何使用 Android 的 ViewPager 控件，并通过自定义适配器实现具有美观指示效果的 Tab 标签。包括布局代码、适配器实现以及关键逻辑解析，提供参考代码及示例效果。

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

Android UI--ViewPager扩展Tab标签指示

2013年8月30日出来冒冒泡

ViewPager这个控件已经不算是陌生的了，各种玩Android的小伙伴们都有发表相应的文章来讲它。我看过一些文章，感觉其他网站博客贴的代码很不好看，文章排版也不好。小巫还是喜欢自己写写，弄些好看的效果图，把代码贴好一点，别人参考起来也会舒服很多。我之前也有在其他网站发表过文章，比如51CTO、博客园等，我还是最喜欢优快云，虽然有时候也会麻烦一点，但相对而言，在优快云发表博客一定是个好去处。

先上几张效果图：

以上就是我实现Demo的效果啦

布局代码：

[html]view plaincopy 
    
 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
     android:layout_width="match_parent"  
     android:layout_height="match_parent" >  
   
     <LinearLayout  
         android:id="@+id/ll_viewpager"  
         android:layout_width="match_parent"  
         android:layout_height="wrap_content"  
         android:orientation="horizontal" >  
   
         <TextView  
             android:id="@+id/tv_guid1"  
             android:layout_width="wrap_content"  
             android:layout_height="wrap_content"  
             android:layout_weight="1.0"  
             android:gravity="center"  
             android:text="特性1"   
             android:textSize="18sp"/>  
   
         <TextView  
             android:id="@+id/tv_guid2"  
             android:layout_width="wrap_content"  
             android:layout_height="wrap_content"  
             android:layout_weight="1.0"  
             android:gravity="center"  
             android:text="特性2"   
             android:textSize="18sp"/>  
   
         <TextView  
             android:id="@+id/tv_guid3"  
             android:layout_width="wrap_content"  
             android:layout_height="wrap_content"  
             android:layout_weight="1.0"  
             android:gravity="center"  
             android:text="特性3 "   
             android:textSize="18sp"/>  
   
         <TextView  
             android:id="@+id/tv_guid4"  
             android:layout_width="wrap_content"  
             android:layout_height="wrap_content"  
             android:layout_weight="1.0"  
             android:gravity="center"  
             android:text="特性4"   
             android:textSize="18sp"/>  
     </LinearLayout>  
   
     <ImageView  
         android:id="@+id/cursor"  
         android:layout_width="wrap_content"  
         android:layout_height="wrap_content"  
         android:layout_below="@+id/ll_viewpager"  
         android:scaleType="matrix"  
         android:src="@drawable/cursor" />  
   
     <android.support.v4.view.ViewPager  
         android:id="@+id/viewpager"  
         android:layout_width="wrap_content"  
         android:layout_height="wrap_content"  
         android:layout_below="@+id/cursor"  
         android:flipInterval="30"  
         android:persistentDrawingCache="animation" />  
   
 </RelativeLayout>  

每一个标签页的布局

[html]view plaincopy 
    
 <?xml version="1.0" encoding="UTF-8"?>  
 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
     android:layout_width="fill_parent"  
     android:layout_height="fill_parent"  
     android:background="@drawable/guide_1" >  
 </RelativeLayout>  

其他都一样，不多贴

布局搞定之后，定义一个适配器如下：

[java]view plaincopy 
    
 package com.wwj.viewpager;  
   
 import java.util.List;  
   
 import android.support.v4.view.PagerAdapter;  
 import android.view.View;  
 import android.view.ViewGroup;  
   
 /** 
  * ViewPager适配器 
  *  
  * @author wwj 
  *  
  */  
 public class ViewPagerAdapter extends PagerAdapter {  
     // 界面列表  
     private List<View> views;  
   
     public ViewPagerAdapter(List<View> views) {  
         this.views = views;  
     }  
   
     @Override  
     public void destroyItem(ViewGroup container, int position, Object object) {  
         container.removeView(views.get(position));  
     }  
   
     @Override  
     public int getCount() {  
         if (views != null) {  
             return views.size();  
         }  
         return 0;  
     }  
   
     @Override  
     public Object instantiateItem(ViewGroup container, int position) {  
         container.addView(views.get(position)); // 把被点击的图片放入缓存中  
         return views.get(position); // 返回被点击图片对象  
     }  
   
     @Override  
     public boolean isViewFromObject(View arg0, Object arg1) {  
         return (arg0 == arg1);  
     }  
 }  

适配器搞定之后，直接去Activity

[java]view plaincopy 
    
 package com.wwj.viewpager;  
   
 import java.util.ArrayList;  
 import java.util.List;  
   
 import android.app.Activity;  
 import android.graphics.BitmapFactory;  
 import android.graphics.Matrix;  
 import android.os.Bundle;  
 import android.support.v4.view.ViewPager;  
 import android.support.v4.view.ViewPager.OnPageChangeListener;  
 import android.util.DisplayMetrics;  
 import android.view.LayoutInflater;  
 import android.view.View;  
 import android.view.View.OnClickListener;  
 import android.view.animation.Animation;  
 import android.view.animation.TranslateAnimation;  
 import android.widget.ImageView;  
 import android.widget.TextView;  
 import android.widget.Toast;  
   
 public class MainActivity extends Activity {  
     ViewPager viewPager;  
     ViewPagerAdapter pagerAdapter;  
     View view1, view2, view3, view4; // 页面  
     List<View> views;              // Tab页面列表  
   
     ImageView img_cursor;   // 指示图片  
     TextView tv_guid1, tv_guid2, tv_guid3, tv_guid4; // 页卡头标  
     int offset = 0;         // 偏移量  
     int currIndex = 0;      // 当前页卡编号  
     int bmpW;               // 图片宽度  
   
     @Override  
     protected void onCreate(Bundle savedInstanceState) {  
         super.onCreate(savedInstanceState);  
         setContentView(R.layout.activity_main);  
   
         initImageView();  
         initTextView();  
   
         view1 = (View) findViewById(R.layout.viewpager1);  
         view2 = (View) findViewById(R.layout.viewpager2);  
         view3 = (View) findViewById(R.layout.viewpager3);  
         view4 = (View) findViewById(R.layout.viewpager4);  
   
         LayoutInflater inflater = LayoutInflater.from(this);  
         view1 = inflater.inflate(R.layout.viewpager1, null);  
         view2 = inflater.inflate(R.layout.viewpager2, null);  
         view3 = inflater.inflate(R.layout.viewpager3, null);  
         view4 = inflater.inflate(R.layout.viewpager4, null);  
   
         views = new ArrayList<View>();  
         views.add(view1);  
         views.add(view2);  
         views.add(view3);  
         views.add(view4);  
   
         pagerAdapter = new ViewPagerAdapter(views);  
         viewPager = (ViewPager) findViewById(R.id.viewpager);  
         viewPager.setAdapter(pagerAdapter);  
   
         viewPager.setCurrentItem(0);  
         viewPager.setOnPageChangeListener(new MyOnPageChangeListener());  
   
     }  
     /** 
      * 初始化动画图片 
      *  
      */  
     private void initImageView() {  
         img_cursor = (ImageView) findViewById(R.id.cursor);  
         bmpW = BitmapFactory.decodeResource(getResources(), R.drawable.cursor)  
                 .getWidth();  
   
         DisplayMetrics dm = new DisplayMetrics();  
         this.getWindowManager().getDefaultDisplay().getMetrics(dm);  
         int screenW = dm.widthPixels; // 获取手机屏幕宽度分辨率  
   
         offset = (screenW / 4 - bmpW) / 2; // 获取图片偏移量  
   
         // imageview设置平移，使下划线平移到初始位置（平移一个offset）  
         Matrix matrix = new Matrix();  
         matrix.postTranslate(offset, 0);  
         img_cursor.setImageMatrix(matrix);  
   
     }  
   
     /** 
      *  
      * 初始化TextView控件，和注册监听器 
      */  
     private void initTextView() {  
         tv_guid1 = (TextView) findViewById(R.id.tv_guid1);  
         tv_guid2 = (TextView) findViewById(R.id.tv_guid2);  
         tv_guid3 = (TextView) findViewById(R.id.tv_guid3);  
         tv_guid4 = (TextView) findViewById(R.id.tv_guid4);  
   
         tv_guid1.setOnClickListener(listener);  
         tv_guid2.setOnClickListener(listener);  
         tv_guid3.setOnClickListener(listener);  
         tv_guid4.setOnClickListener(listener);  
   
     }  
   
     OnClickListener listener = new OnClickListener() {  
   
         @Override  
         public void onClick(View v) {  
             switch (v.getId()) {  
             case R.id.tv_guid1:  
                 viewPager.setCurrentItem(0);  
                 break;  
             case R.id.tv_guid2:  
                 viewPager.setCurrentItem(1);  
                 break;  
             case R.id.tv_guid3:  
                 viewPager.setCurrentItem(2);  
                 break;  
             case R.id.tv_guid4:  
                 viewPager.setCurrentItem(3);  
                 break;  
   
             default:  
                 break;  
             }  
         }  
     };  
   
     // 当页面滑动时，开始动画并跳出Toast  
     public class MyOnPageChangeListener implements OnPageChangeListener {  
   
         private int one = offset * 2 + bmpW; // 页面1到页面2的偏移量  
   
         @Override  
         public void onPageScrollStateChanged(int arg0) {  
   
         }  
   
         @Override  
         public void onPageScrolled(int arg0, float arg1, int arg2) {  
   
         }  
   
         // 即将要被显示的页卡的index  
         @Override  
         public void onPageSelected(int arg0) {  
             // 初始化移动的动画（从当前位置，x平移到即将要到的位置）  
             Animation animation = new TranslateAnimation(currIndex * one, arg0  
                     * one, 0, 0);  
   
             currIndex = arg0;  
             animation.setFillAfter(true); // 动画终止时停留在最后一帧，不然会回到没有执行前的状态  
             animation.setDuration(200); // 动画持续时间，0.2秒  
             img_cursor.startAnimation(animation); // 是用imageview来显示动画  
             int i = currIndex + 1;  
             Toast.makeText(MainActivity.this, "您选择了第" + i + "个页卡",  
                     Toast.LENGTH_SHORT).show();  
         }  
   
     }  
   
 }  