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

ViewPage

时间:2014-07-02 00:49:00      阅读:415      评论:0      收藏:0      [点我收藏+]

标签:android   des   style   blog   http   java   

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

 

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

 

第一个界面:

bubuko.com,布布扣

滑动屏幕:
bubuko.com,布布扣

换到下一屏:
bubuko.com,布布扣

 

布局文件:

主界面 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);
          }
     }
    
}

以上文字摘自:http://blog.sina.com.cn/s/blog_6dc41baf01019p8b.html

ViewPage,布布扣,bubuko.com

ViewPage

标签:android   des   style   blog   http   java   

原文地址:http://www.cnblogs.com/jinghua1425/p/3815834.html

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