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

原文地址：[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()]; 
     

转载于:https://www.cnblogs.com/maxma/p/9169743.html