[android] 利用 ViewPage 实现滑动屏 此博文包含图片 (2012-12-17 14:27:26)

最近实现了这样的一个效果：滑动界面出现拖拽效果，可翻动3屏，也可点击按钮翻动页面。

 

主要利用android.support.v4.view.ViewPager控件来实现。

 

第一个界面：

滑动屏幕：

换到下一屏：

 

布局文件：

主界面 main.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical" >

    <android.support.v4.view.ViewPager
        android:id="@+id/guidePages"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"/>
      
    <RelativeLayout 
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content" 
        android:orientation="vertical" >
    <LinearLayout 
        android:id="@+id/viewGroup" 
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content" 
        android:layout_alignParentTop="true" 
        android:gravity="center_horizontal" 
        android:orientation="horizontal" > 
   <Button
      android:id="@+id/pre_one_button"
    android:layout_width="wrap_content"
   android:layout_height="50dp"
   android:layout_weight = "1"
   android:textSize="18sp"
   android:textColor="@android:color/black"
   android:text="本周"
   android:padding="7dp"
   android:textStyle="bold"
   android:background="@drawable/button_selected"
      />
   <Button
      android:id="@+id/pre_two_button"
    android:layout_width="wrap_content"
   android:layout_height="50dp"
   android:layout_weight = "1"
   android:textSize="18sp"
   android:textColor="@android:color/black"
   android:text="前一周"
   android:padding="7dp"
   android:textStyle="bold"
   android:background="@drawable/button_unselected"
      />
   <Button
      android:id="@+id/pre_three_button"
    android:layout_width="wrap_content"
   android:layout_height="50dp"
   android:layout_weight = "1"
   android:textSize="18sp"
   android:textColor="@android:color/black"
   android:text="前二周"
   android:padding="7dp"
   android:textStyle="bold"
   android:background="@drawable/button_unselected"
      />
   </LinearLayout>
    </RelativeLayout>

</FrameLayout>

第一屏界面：page01.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
   
    <ListView
     android:id="@+id/lv01"
  android:layout_width="fill_parent"
     android:layout_height="fill_parent"
     android:layout_marginTop="50dp"
     android:textColor="@android:color/black"
     android:cacheColorHint="#00000000" 
     android:scrollbars="none"
  />   
</LinearLayout>

第二屏 ，第三屏与第一屏布局一样，分别叫page02.xml page03.xml，并且要把ListView的 id 改为 lv02 lv03

 

列表条目布局：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:id="@+id/subjectLayout"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:padding="10dp"
  android:background="@android:color/white"
  >
   <ImageView
       android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/homework_icon"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        />
 <TextView
  android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@android:color/black"
        android:id="@+id/homework_name"
        android:layout_toRightOf="@id/homework_icon"
        />
 <TextView
  android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@android:color/black"
        android:textSize="18sp"
        android:id="@+id/homework_subject"
        android:layout_toRightOf="@id/homework_icon"
        android:layout_below="@id/homework_name"
        />
 <TextView
  android:layout_width="wrap_content"
        android:layout_height="wrap_content"
         android:textColor="@android:color/black"
        android:id="@+id/homework_teacher"
        android:layout_toRightOf="@id/homework_icon"
        android:layout_below="@id/homework_subject"
        />
 <TextView
  android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@android:color/black"
        android:id="@+id/homework_submit_date"
        android:layout_toRightOf="@id/homework_icon"
        android:layout_below="@id/homework_teacher"
        />
</RelativeLayout>

 

 

Java代码：

public class MainActivity extends Activity {
  
     private ViewPager viewPager; 
     private ArrayList<View> pageViews; 
     private ViewGroup buttonsLine;  
     private Button button01; 
     private Button button02; 
     private Button button03; 
     private Button[] buttons;
     private ListView lv01;
     private ListView lv02;
     private ListView lv03;
    
    
     @Override
     public void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         this.requestWindowFeature(Window.FEATURE_NO_TITLE);
        
         LayoutInflater inflater = getLayoutInflater(); 
         pageViews = new ArrayList<View>(); 
         //每页de界面
         View page01=inflater.inflate(R.layout.page01, null);
         View page02=inflater.inflate(R.layout.page02, null);
         View page03=inflater.inflate(R.layout.page03, null);
         pageViews.add(page01);  //lee
         pageViews.add(page02);  //lee
         pageViews.add(page03);  //lee
         lv01 = (ListView) page01.findViewById(R.id.lv01);
         lv02 = (ListView) page02.findViewById(R.id.lv02);
         lv03 = (ListView) page03.findViewById(R.id.lv03);
         lv01.setAdapter(new HomeworkListAdapter(this));
         lv02.setAdapter(new HomeworkListAdapter(this));
         lv03.setAdapter(new HomeworkListAdapter(this));
        
         //按钮栏
         buttons = new Button[pageViews.size()]; 
         buttonsLine = (ViewGroup)inflater.inflate(R.layout.main, null); 
         button01 = (Button) buttonsLine.findViewById(R.id.pre_one_button);
         button02 = (Button) buttonsLine.findViewById(R.id.pre_two_button);
         button03 = (Button) buttonsLine.findViewById(R.id.pre_three_button);
         buttons[0] = button01;
         buttons[1] = button02;
         buttons[2] = button03;
         button01.setOnClickListener(new GuideButtonClickListener(0));
         button02.setOnClickListener(new GuideButtonClickListener(1));
         button03.setOnClickListener(new GuideButtonClickListener(2));
        
         viewPager = (ViewPager)buttonsLine.findViewById(R.id.guidePages); 
         setContentView(buttonsLine); 
  
         viewPager.setAdapter(new GuidePageAdapter()); 
         viewPager.setOnPageChangeListener(new GuidePageChangeListener()); 
     }
 
  //列表适配
  public class HomeworkListAdapter extends BaseAdapter {
  
   private Context mContext = null;
   private LayoutInflater mInflater = null;
     
   public HomeworkListAdapter(Context c) {
    mContext = c;
    mInflater = LayoutInflater.from(this.mContext);
   }

   @Override
   public int getCount() {
    return 8;
   }

   @Override
   public Object getItem(int position) {
    return position;
   }

   @Override
   public long getItemId(int position) {
    return position;
   }

   @Override
   public View getView(int position, View convertView, ViewGroup parent) {

    ViewHolder holder = null;
    if (convertView == null) {
        holder = new ViewHolder();
        convertView = mInflater.inflate(R.layout.homework_item, null);
     //初始化组件
        holder.icon  =(ImageView) convertView. findViewById(R.id.homework_icon);
        holder.name = (TextView) convertView.findViewById(R.id.homework_name);
     holder.subject  = (TextView) convertView.findViewById(R.id.homework_subject);
     holder.teacher = (TextView) convertView.findViewById(R.id.homework_teacher);  
     holder.date = (TextView) convertView.findViewById(R.id.homework_submit_date); 
     convertView.setOnTouchListener(new OnTouchListener() {
      @Override
      public boolean onTouch(View v, MotionEvent event) {
       // TODO Auto-generated method stub
       switch (event.getAction()) {
       case MotionEvent.ACTION_DOWN:
        v.setBackgroundResource(R.drawable.item_seleted);
        break;
       case MotionEvent.ACTION_UP:
        v.setBackgroundResource(R.drawable.item_unseleted);
        break;
       case MotionEvent.ACTION_CANCEL:
        v.setBackgroundResource(R.drawable.item_unseleted);
        break;
       }
       return true;
      }
     });
     convertView.setTag(holder);
     
    } else {
     holder=(ViewHolder) convertView.getTag();
    }
    
    holder.icon.setBackgroundResource(R.drawable.ic_launcher);
    holder.name.setText(".getName()");
    holder.subject.setText(".getSubjectName()");
    holder.teacher.setText(".getTeacherName()");
    holder.date.setText(".getSubmitDate()");
    
    return convertView;
   }

   class ViewHolder {
    ImageView icon;
    TextView  name;
    TextView  subject;
    TextView  teacher;
    TextView  date;
   }
  }
    
    
    
     class GuidePageAdapter extends PagerAdapter { 
       
         @Override 
         public int getCount() { 
             return pageViews.size(); 
         } 
  
         @Override 
         public boolean isViewFromObject(View arg0, Object arg1) { 
             return arg0 == arg1; 
         } 
  
         @Override 
         public int getItemPosition(Object object) { 
             // TODO Auto-generated method stub 
             return super.getItemPosition(object); 
         } 
  
         @Override 
         public void destroyItem(View arg0, int arg1, Object arg2) { 
             // TODO Auto-generated method stub 
             ((ViewPager) arg0).removeView(pageViews.get(arg1)); 
         } 
  
         @Override 
         public Object instantiateItem(View arg0, int arg1) { 
             // TODO Auto-generated method stub 
             ((ViewPager) arg0).addView(pageViews.get(arg1)); 
             return pageViews.get(arg1); 
         } 
  
         @Override 
         public void restoreState(Parcelable arg0, ClassLoader arg1) { 
             // TODO Auto-generated method stub 
  
         } 
  
         @Override 
         public Parcelable saveState() { 
             // TODO Auto-generated method stub 
             return null; 
         } 
  
         @Override 
         public void startUpdate(View arg0) { 
             // TODO Auto-generated method stub 
  
         } 
  
         @Override 
         public void finishUpdate(View arg0) { 
             // TODO Auto-generated method stub 
  
         } 
     }
    
    
     class GuidePageChangeListener implements OnPageChangeListener { 
  
         @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 
         } 
  
         @Override 
         public void onPageSelected(int arg0) { 
             for (int i = 0; i < buttons.length; i++) { 
              buttons[arg0] 
                         .setBackgroundResource(R.drawable.button_selected); 
                 if (arg0 != i) { 
                  buttons[i] 
                             .setBackgroundResource(R.drawable.button_unselected); 
                 } 
             }
         } 
     }

    
    
     class GuideButtonClickListener implements OnClickListener { 
       private int index = 0;
      
          public GuideButtonClickListener(int i) {
              index = i;
          }
 
          @Override
          public void onClick(View v) {
           viewPager.setCurrentItem(index, true);
          }
     }
    
}