[转载][android] 利用 ViewPage 实现滑动屏

作者：​​李华颖​​

最近实现了这样的一个效果：滑动界面出现拖拽效果，可翻动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()];