学习内容来自“慕课网”
网站上一共有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
效果图：
