效果图 针对图来阅读代码:
顶部设计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:layout_height="45dp"
android:gravity="center"
android:background="@drawable/title_bar_bg"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="豆客儿"
android:textColor="#ffffff"
android:textSize="20sp"
android:layout_gravity="center"
android:textStyle="bold"/>
</LinearLayout>
底部 bottom.xml
<?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="55dp"
android:background="@drawable/title_bar_bg"
android:orientation="horizontal" >
<LinearLayout
android:id="@+id/ll_zhuye"
android:orientation="vertical"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:gravity="center"
android:layout_weight="1">
<ImageButton
android:id="@+id/img_zhuye"
android:layout_width="30dp"
android:layout_height="30dp"
android:scaleType="fitXY"
android:background="#00000000"
android:src="@drawable/icon_main_bottom_navigation_movie_normal_bg"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#ffffff"
android:text="主页"/>
</LinearLayout>
<LinearLayout
android:id="@+id/ll_yingyuan"
android:orientation="vertical"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:gravity="center"
android:layout_weight="1">
<ImageButton
android:id="@+id/img_yingyuan"
android:layout_width="30dp"
android:layout_height="30dp"
android:scaleType="fitXY"
android:background="#00000000"
android:src="@drawable/icon_main_bottom_navigation_cinema_normal_bg"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#ffffff"
android:text="影院"/>
</LinearLayout>
<LinearLayout
android:id="@+id/ll_faxian"
android:orientation="vertical"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:gravity="center"
android:layout_weight="1">
<ImageButton
android:id="@+id/img_faxian"
android:layout_width="30dp"
android:layout_height="30dp"
android:scaleType="fitXY"
android:background="#00000000"
android:src="@drawable/icon_main_bottom_navigation_activity_normal_bg"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#ffffff"
android:text="发现"/>
</LinearLayout>
<LinearLayout
android:id="@+id/ll_my"
android:orientation="vertical"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:gravity="center"
android:layout_weight="1">
<ImageButton
android:id="@+id/img_my"
android:layout_width="30dp"
android:layout_height="30dp"
android:scaleType="fitXY"
android:background="#00000000"
android:src="@drawable/icon_main_bottom_navigation_my_normal_bg"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#ffffff"
android:text="我的"/>
</LinearLayout>
</LinearLayout>
Main.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/vp"
android:layout_width="fill_parent"
android:layout_weight="1"
android:layout_height="0dp"></android.support.v4.view.ViewPager>
<include layout="@layout/bottom"/>
</LinearLayout>
屏幕中间显示的This is zhuye Tab
把这个复制4份就可以了 其他3份一样的,在这里就不写了
tab.xml
<?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/item01"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="This is Zhuye Tab"
android:textSize="30sp"
android:gravity="center"
android:textStyle="bold"/>
</LinearLayout>
MainActivity.java
import java.util.ArrayList;
import java.util.List;
import android.app.Activity;
import android.os.Bundle;
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.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.view.Window;
import android.widget.ImageView;
import android.widget.LinearLayout;
public class MainActivity extends Activity implements OnClickListener {
private ViewPager mVp;
private LinearLayout mTabZhuye;
private LinearLayout mTabYingyuan;
private LinearLayout mTabFaxian;
private LinearLayout mTabMy;
private ImageView mZhuye;
private ImageView mYingyuan;
private ImageView mFaxian;
private ImageView mMy;
private List<View> mViews = new ArrayList<View>();
private PagerAdapter mAdapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
initView();
initEvent();
}
private void initEvent() {
mZhuye.setOnClickListener(this);
mYingyuan.setOnClickListener(this);
mFaxian.setOnClickListener(this);
mMy.setOnClickListener(this);
mVp.setOnPageChangeListener(new OnPageChangeListener() {
@Override
public void onPageSelected(int position) {
int currentItem = mVp.getCurrentItem();
resetImg();
switch (currentItem) {
case 0:
mZhuye.setImageResource(R.drawable.icon_main_bottom_navigation_movie_select_bg);
break;
case 1:
mYingyuan
.setImageResource(R.drawable.icon_main_bottom_navigation_cinema_select_bg);
break;
case 2:
mFaxian.setImageResource(R.drawable.icon_main_bottom_navigation_activity_select_bg);
break;
case 3:
mMy.setImageResource(R.drawable.icon_main_bottom_navigation_my_select_bg);
break;
}
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
@Override
public void onPageScrollStateChanged(int arg0) {
}
});
}
// 将所有图片切换为暗色
private void resetImg() {
mZhuye.setImageResource(R.drawable.icon_main_bottom_navigation_movie_normal_bg);
mYingyuan
.setImageResource(R.drawable.icon_main_bottom_navigation_cinema_normal_bg);
mFaxian.setImageResource(R.drawable.icon_main_bottom_navigation_activity_normal_bg);
mMy.setImageResource(R.drawable.icon_main_bottom_navigation_my_normal_bg);
}
@Override
public void onClick(View v) {
resetImg();//恢复默认图片
switch (v.getId()) {
case R.id.img_zhuye:
mVp.setCurrentItem(0);
mZhuye.setImageResource(R.drawable.icon_main_bottom_navigation_movie_select_bg);//点击图片 当前图片变亮
break;
case R.id.img_yingyuan:
mVp.setCurrentItem(1);
mYingyuan
.setImageResource(R.drawable.icon_main_bottom_navigation_cinema_select_bg);
break;
case R.id.img_faxian:
mVp.setCurrentItem(2);
mFaxian.setImageResource(R.drawable.icon_main_bottom_navigation_activity_select_bg);
break;
case R.id.img_my:
mVp.setCurrentItem(3);
mMy.setImageResource(R.drawable.icon_main_bottom_navigation_my_select_bg);
break;
}
}
//初始化控件
private void initView() {
mVp = (ViewPager) findViewById(R.id.vp);
mTabZhuye = (LinearLayout) findViewById(R.id.ll_zhuye);
mTabYingyuan = (LinearLayout) findViewById(R.id.ll_yingyuan);
mTabFaxian = (LinearLayout) findViewById(R.id.ll_faxian);
mTabMy = (LinearLayout) findViewById(R.id.ll_my);
mZhuye = (ImageView) findViewById(R.id.img_zhuye);
mYingyuan = (ImageView) findViewById(R.id.img_yingyuan);
mFaxian = (ImageView) findViewById(R.id.img_faxian);
mMy = (ImageView) findViewById(R.id.img_my);
// 先找到4个布局
LayoutInflater mInflater = LayoutInflater.from(this);
View tab01 = mInflater.inflate(R.layout.tab01, null);
View tab02 = mInflater.inflate(R.layout.tab02, null);
View tab03 = mInflater.inflate(R.layout.tab03, null);
View tab04 = mInflater.inflate(R.layout.tab04, null);
// 然后添加到list中
mViews.add(tab01);
mViews.add(tab02);
mViews.add(tab03);
mViews.add(tab04);
//创建pageAdapter
mAdapter = new PagerAdapter() {
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
}
@Override
public int getCount() {
return mViews.size();
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(mViews.get(position));
return mViews.get(position);
}
@Override
public void destroyItem(ViewGroup container, int position,
Object object) {
container.removeView(mViews.get(position));
}
};
mVp.setAdapter(mAdapter);
}
}