安卓开发_慕课网_ViewPager实现Tab(App主界面)

学习内容来自“慕课网”

网站上一共有4种方法来实现APP主界面的TAB方法

这里学习第一种

ViewPager实现Tab

布局文件有7个，

主界面acitivity.layout

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:orientation="vertical"
      >
     <include layout="@layout/top"/>

      <android.support.v4.view.ViewPager
          android:id="@+id/id_viewpager"
         android:layout_width="fill_parent"
         android:layout_height="0dp"
         android:layout_weight="">

     </android.support.v4.view.ViewPager>

     <include layout="@layout/bottom"/>
 </LinearLayout>
     

activity_main.xml

头部部分top.xml

 <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:background="@drawable/title_bar"
     android:layout_height="45dp"
     android:gravity="center"
     android:orientation="vertical" >
     <TextView
         android:layout_height="wrap_content"
         android:layout_width="wrap_content"
         android:layout_gravity="center"
         android:text="微信"
         android:textColor="#ffffff"
         android:textSize="20sp"
         android:textStyle="bold"

         />

 </LinearLayout>

top.xml

底部部分bottom.xml

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:orientation="vertical"
      >
     <include layout="@layout/top"/>

      <android.support.v4.view.ViewPager
          android:id="@+id/id_viewpager"
         android:layout_width="fill_parent"
         android:layout_height="0dp"
         android:layout_weight="">

     </android.support.v4.view.ViewPager>

     <include layout="@layout/bottom"/>
 </LinearLayout>
     

bottom.xml

这里有个需要注意的地方，就是ImageButton  他有一个属性android:clickable="false"

注意点在于为LinearLayout设置监听器的时候，会出现点击文字能响应监听事件，而点击图片不会响应的情况，问题在于LinearLayout会把监听事件先交给ImageButton，因为它是可以点击的，而ImageButton中未实现监听器，所以不能响应。解决方法就是设置它不能被点击。在XML文件中，添加android:clickable="false"，就可以。

（大家可以试试没有这行属性的情况下，点击图片是否有响应）

还有4个对应功能的layout

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

     <TextView
         android:id="@+id/textView1"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_gravity="center_horizontal"
         android:text="微信"
         android:textAppearance="?android:attr/textAppearanceMedium" />

 </LinearLayout>

tab(相同的四个)

Mainactivity.java文件

 package com.example.viewpager_tab;

 import java.util.ArrayList;
 import java.util.List;

 import android.os.Bundle;
 import android.app.Activity;
 import android.support.v4.view.PagerAdapter;
 import android.support.v4.view.ViewPager;
 import android.support.v4.view.ViewPager.OnPageChangeListener;
 import android.view.LayoutInflater;
 import android.view.Menu;
 import android.view.View;
 import android.view.View.OnClickListener;
 import android.view.ViewGroup;
 import android.view.Window;
 import android.widget.Gallery.LayoutParams;
 import android.widget.ImageButton;
 import android.widget.LinearLayout;

 public class MainActivity extends Activity implements OnClickListener{

     private ViewPager mViewPager;
     private PagerAdapter mAdapter;
     private List<View> mviews = new ArrayList<View>();

     //Tab
     private LinearLayout mTabweixin;
     private LinearLayout mTabset;
     private LinearLayout mTabfrd;
     private LinearLayout mTabadd;

     private ImageButton mweixin_image;
     private ImageButton mfrd_image;
     private ImageButton madd_image;
     private ImageButton mset_image;
     @Override
     protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         requestWindowFeature(Window.FEATURE_NO_TITLE);
         setContentView(R.layout.activity_main);

         initView(); //初始化

         initEvent();//初始化事件

     }

         private void initEvent(){
             mTabweixin.setOnClickListener(this);
             mTabadd.setOnClickListener(this);
             mTabset.setOnClickListener(this);
             mTabfrd.setOnClickListener(this);   

             //设置view左右滑动的响应事件
             mViewPager.setOnPageChangeListener(new OnPageChangeListener() { 

                 @Override
                 public void onPageSelected(int arg0) {
                     // TODO Auto-generated method stub
                     int currentItem = mViewPager.getCurrentItem();
                     resgmit();
                     switch (currentItem) {
                     case :
                         mweixin_image.setImageResource(R.drawable.tab_weixin_pressed);
                         break;
                     case :
                         madd_image.setImageResource(R.drawable.tab_address_pressed);
                         break;
                     case :
                         mfrd_image.setImageResource(R.drawable.tab_find_frd_pressed);
                         break;
                     case :
                         mset_image.setImageResource(R.drawable.tab_settings_pressed);
                         break;
                     default:
                         break;
                     }

                 }

                 @Override
                 public void onPageScrolled(int arg0, float arg1, int arg2) {
                     // TODO Auto-generated method stub

                 }

                 @Override
                 public void onPageScrollStateChanged(int arg0) {
                     // TODO Auto-generated method stub

                 }
             });
         }

         private void initView(){
             mViewPager = (ViewPager) findViewById(R.id.id_viewpager);
             //layout
             mTabadd = (LinearLayout) findViewById(R.id.id_tab_add);
             mTabfrd = (LinearLayout) findViewById(R.id.id_tab_frd);
             mTabset = (LinearLayout) findViewById(R.id.id_tab_set);
             mTabweixin = (LinearLayout) findViewById(R.id.id_tab_weixin);

             //imagebutton
             mweixin_image = (ImageButton) findViewById(R.id.id_tab_weixin_image);
             madd_image = (ImageButton) findViewById(R.id.id_tab_add_image);
             mfrd_image = (ImageButton) findViewById(R.id.id_tab_frd_image);
             mset_image = (ImageButton) findViewById(R.id.id_tab_set_image);

             LayoutInflater mInflater = LayoutInflater.from(this);
             View tab_1 = mInflater.inflate(R.layout.tab_1, null);
             View tab_2 = mInflater.inflate(R.layout.tab_2, null);
             View tab_3 = mInflater.inflate(R.layout.tab_3, null);
             View tab_4 = mInflater.inflate(R.layout.tab_4, null);

             mviews.add(tab_1);
             mviews.add(tab_2);
             mviews.add(tab_3);
             mviews.add(tab_4);

             mAdapter = new PagerAdapter() {

                 @Override
                 public void destroyItem(View container, int position,
                         Object object) {
                     // TODO Auto-generated method stub
                     ((ViewPager) container).removeView(mviews.get(position));

                 }

                 @Override
                 public Object instantiateItem(View container, int position) {
                     // TODO Auto-generated method stub
                     View view = mviews.get(position);
                     ((ViewGroup) container).addView(view);
                     return view;
                 }

                 @Override
                 public boolean isViewFromObject(View arg0, Object arg1) {
                     // TODO Auto-generated method stub
                     return arg0 == arg1;
                 }

                 @Override
                 public int getCount() {
                     // TODO Auto-generated method stub
                     return mviews.size();
                 }
             };

             mViewPager.setAdapter(mAdapter);

         }

         @Override
         public void onClick(View v) {
             // TODO Auto-generated method stub

             resgmit();

             switch (v.getId()) {
             case R.id.id_tab_weixin:
                 mViewPager.setCurrentItem();
                 mweixin_image.setImageResource(R.drawable.tab_weixin_pressed);
                 break;
             case R.id.id_tab_add:
                 mViewPager.setCurrentItem();
                 madd_image.setImageResource(R.drawable.tab_address_pressed);
                 break;
             case R.id.id_tab_frd:
                 mViewPager.setCurrentItem();
                 mfrd_image.setImageResource(R.drawable.tab_find_frd_pressed);
                 break;
             case R.id.id_tab_set:
                 mViewPager.setCurrentItem();
                 mset_image.setImageResource(R.drawable.tab_settings_pressed);
                 break;

             default:
                 break;
             }

         }

         //将所有的图片切换为暗色
         private void resgmit() {
             // TODO Auto-generated method stub
             mweixin_image.setImageResource(R.drawable.tab_weixin_normal);
             madd_image.setImageResource(R.drawable.tab_address_normal);
             mfrd_image.setImageResource(R.drawable.tab_find_frd_normal);
             mset_image.setImageResource(R.drawable.tab_settings_normal);

         }

 }

MainActivity.java

效果图：