ViewPage实现Tab 底部导航（如微信,微票儿主界面）

来源：互联网发布：vs2005操作mysql 编辑：程序博客网时间：2024/05/16 14:10

效果图针对图来阅读代码：

顶部设计top.xml

</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>

屏幕中间显示的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);

}

}

0 0

ViewPage实现Tab 底部导航 （如微信,微票儿主界面）

ViewPage实现Tab 底部导航（如微信,微票儿主界面）