在apk中有很多的布局都用了viewpager+底部菜单栏来设置的.比如QQ,微信等.最近在项目中的设置也是用viewpager+底部菜单栏,在网上看了下他们的demo没有我想要的那样效果代码还很复制,最后觉得还是自定义一个底部菜单栏比较简单.首先我们把底部的菜单栏有几个功能键在布局中设置出来代码如下:这里只写了3个功能可以自己去扩展
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/custom_bar_layout"
android:layout_width="match_parent"
android:layout_height="60dp"
android:orientation="horizontal" >
<LinearLayout
android:id="@+id/custom_bar_home"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical" >
<ImageView
android:id="@+id/home_image"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginTop="4dp"
android:src="@drawable/abc_ic_voice_search_api_mtrl_alpha" />
<TextView
android:id="@+id/home_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:text="@string/custom_bar_home" />
</LinearLayout>
<LinearLayout
android:id="@+id/custom_bar_antenna"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical" >
<ImageView
android:id="@+id/antenna_image"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginTop="4dp"
android:src="@drawable/abc_ic_voice_search_api_mtrl_alpha" />
<TextView
android:id="@+id/antenna_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:text="@string/custom_bar_antenna" />
</LinearLayout>
<LinearLayout
android:id="@+id/custom_bar_stting"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical" >
<ImageView
android:id="@+id/stting_image"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginTop="4dp"
android:src="@drawable/abc_ic_voice_search_api_mtrl_alpha" />
<TextView
android:id="@+id/stting_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:text="@string/custom_bar_stting" />
</LinearLayout>
</LinearLayout>
接下来我们就去定义底部菜单:
代码如下:
import android.content.Context;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import com.example.cleanmaster.R;
import com.ijoysoft.cleanmaster.util.ScreenUtil;
public class CustomBar extends LinearLayout implements OnClickListener {
private Context context;
private View View;
private LayoutInflater inflater;
private LinearLayout layout;
//选中的功能
private int index = 0;
//默认背景图片
private int mImageViews[] = { R.drawable.ic_launcher,
R.drawable.ic_launcher, R.drawable.ic_launcher };
//选中时背景图片
private int selectViews[] = { R.drawable.ic_launcher,
R.drawable.ic_launcher, R.drawable.ic_launcher };
//选中是的接口
SelectListener mlistener;
public CustomBar(Context context) {
super(context, null);
}
public CustomBar(Context context, AttributeSet attrs) {
super(context, attrs);
this.context = context;
initView();
addView(View);
}
private void initView() {
inflater = LayoutInflater.from(context);
View = inflater.inflate(R.layout.custom_bar, null);
layout = (LinearLayout) View.findViewById(R.id.custom_bar_layout);
LayoutParams params = new LayoutParams(LayoutParams.MATCH_PARENT,
ScreenUtil.dip2px(context, 60));
layout.setLayoutParams(params);
//循环设置监听
for (int i = 0; i < layout.getChildCount(); i++) {
layout.getChildAt(i).setOnClickListener(this);
}
setChange(0);
}
//改变背景图片和字体颜色(表示选中)
public void setChange(int i) {
LinearLayout linearLayout;
ImageView imageView;
TextView textView;
for (int j = 0; j < layout.getChildCount(); j++) {
linearLayout = (LinearLayout) layout.getChildAt(j);
imageView = (ImageView) linearLayout.getChildAt(0);
textView = (TextView) linearLayout.getChildAt(1);
if (j == i) {
imageView.setImageResource(selectViews[i]);
textView.setTextColor(getResources().getColor(R.color.red));
} else {
imageView.setImageResource(mImageViews[i]);
textView.setTextColor(getResources().getColor(R.color.white));
}
}
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.custom_bar_home:
index = 0;
break;
case R.id.custom_bar_antenna:
index = 1;
break;
case R.id.custom_bar_stting:
index = 2;
break;
}
setChange(index);
//接口触发
if (mlistener != null) {
mlistener.getOnclick(index);
}
}
//接口调用
public void setSelectListener(SelectListener mlistener) {
this.mlistener = mlistener;
}
//初始化接口
public interface SelectListener {
void getOnclick(int i);
}
}
定义好了底部状态栏,下面就来看具体的调用,布局文件如下:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<android.support.v4.view.ViewPager
android:id="@+id/main_viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@+id/main_customBar" />
<com.ijoysoft.cleanmaster.view.CustomBar
android:id="@+id/main_customBar"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_alignParentBottom="true" />
</RelativeLayout>
Mainactivity代码如下:
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.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import com.example.cleanmaster.R;
import com.ijoysoft.cleanmaster.view.CustomBar;
import com.ijoysoft.cleanmaster.view.CustomBar.SelectListener;
public class MainActivity extends Activity implements OnPageChangeListener,
SelectListener {
private ViewPager pager;
private CustomBar bar;
private ImageView[] mImageViews;
private int[] imgIdArray = { R.drawable.xianjian01, R.drawable.xianjian01,
R.drawable.xianjian01 };
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
}
private void initView() {
pager = (ViewPager) findViewById(R.id.main_viewPager);
bar = (CustomBar) findViewById(R.id.main_customBar);
// 设置选中监听
bar.setSelectListener(this);
// 将图片装载到数组中
mImageViews = new ImageView[imgIdArray.length];
for (int i = 0; i < mImageViews.length; i++) {
ImageView imageView = new ImageView(this);
mImageViews[i] = imageView;
imageView.setBackgroundResource(imgIdArray[i]);
}
// 设置Adapter
pager.setAdapter(new MyAdapter());
// 设置监听,主要是设置点点的背景
pager.setOnPageChangeListener(this);
}
public class MyAdapter extends PagerAdapter {
@Override
public int getCount() {
return mImageViews.length;
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
}
@Override
public void destroyItem(View container, int position, Object object) {
((ViewPager) container).removeView(mImageViews[position]);
}
@Override
public Object instantiateItem(View container, int position) {
((ViewGroup) container).addView(mImageViews[position]);
return mImageViews[position];
}
}
@Override
public void onPageScrollStateChanged(int arg0) {
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
// TODO Auto-generated method stub
}
@Override
public void onPageSelected(int arg0) {
// 改变底部状态栏背景和字体颜色
bar.setChange(arg0);
}
@Override
public void getOnclick(int i) {
// 选中状态栏中的功能键切换viewpager的页面
pager.setCurrentItem(i, false);
}
}
全部代码已经贴出来了,大家可以做个参考,还有很多的扩展空间,自己去改成你想要的效果.希望能够帮助到大家.