常用的底部分段控件BottomBar（带有小图标）

之前已经对SegmentBar进行了封装。之前的做法是通过在代码中new Button的方式来做。这样做的好处是封装性强，利于使用。但是也有弊端，就是针对较为复杂的布局的时候，实现起来就比较吃力，就算是实现了，以后维护起来也是比较麻烦的。这就是为什么我要写这篇博客的原因了。通过另一只方法来做。使用布局文件，通过inflate这个布局文件，得到里面的控件。

下面先看效果：

 

可以很清楚的看到，底部实际上就是一个SegmentBar，但是，如果要加上那个红色的小图标，就比较麻烦了。

 

下面上代码：

BottomBar.java

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

import android.content.Context;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.michael.main.R;

/**
 * 将状态条单独封装起来
 * 
 * 这种封装方式和封装类似iPhone的SegmentBar不太一样，不是在代码中生成Button。
 * 这里与布局文件相结合。通过inflater布局文件，来得到每个Item。
 * 
 * @author MichaelYe
 * @since 2012-9-5
 * */
public class BottomBar extends LinearLayout implements OnClickListener
{

	private static final int TAG_0 = 0;
	private static final int TAG_1 = 1;
	private static final int TAG_2 = 2;
	private static final int TAG_3 = 3;
	private static final int TAG_4 = 4;
	private Context mContext;
	private TextView tvOne;
	public BottomBar(Context context, AttributeSet attrs) 
	{
		super(context, attrs);
		mContext = context;
		init();
	}

	public BottomBar(Context context) 
	{
		super(context);
		mContext = context;
		init();
	}

	private List itemList;
	/**
	 * get the buttons from layout
	 * 
	 * 得到布局文件中的按钮
	 * 
	 * */
	private void init()
	{
		LayoutInflater inflater = (LayoutInflater)mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);  
	    View layout = inflater.inflate(R.layout.bottom_bar, null);
	    layout.setLayoutParams(new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT, 1.0f));
	    tvOne = (TextView)layout.findViewById(R.id.tv_warming);
	    Button btnOne = (Button)layout.findViewById(R.id.btn_item_one);
	    Button btnTwo = (Button)layout.findViewById(R.id.btn_item_two);
	    Button btnThree = (Button)layout.findViewById(R.id.btn_item_three);
	    Button btnFour = (Button)layout.findViewById(R.id.btn_item_four);
	    Button btnFive = (Button)layout.findViewById(R.id.btn_item_five);
	    btnOne.setOnClickListener(this);
	    btnTwo.setOnClickListener(this);
	    btnThree.setOnClickListener(this);
	    btnFour.setOnClickListener(this);
	    btnFive.setOnClickListener(this);
	    btnOne.setTag(TAG_0);
	    btnTwo.setTag(TAG_1);
	    btnThree.setTag(TAG_2);
	    btnFour.setTag(TAG_3);
	    btnFive.setTag(TAG_4);
	    itemList = new ArrayList();
	    itemList.add(btnOne);
	    itemList.add(btnTwo);
	    itemList.add(btnThree);
	    itemList.add(btnFour);
	    itemList.add(btnFive);
	    this.addView(layout);
	}
	
	@Override
	public void onClick(View v)
	{
		int tag = (Integer)v.getTag();
		switch (tag) 
		{
			case TAG_0:
				setNormalState(lastButton);
				setSelectedState(tag);
				break;
			case TAG_1:
				setNormalState(lastButton);
				setSelectedState(tag);
				break;
			case TAG_2:
				setNormalState(lastButton);
				setSelectedState(tag);
				break;
			case TAG_3:
				setNormalState(lastButton);
				setSelectedState(tag);
				break;
			case TAG_4:
				setNormalState(lastButton);
				setSelectedState(tag);
				break;
		}
	}
	
	private int lastButton = -1;
	/**
	 * set the default bar item of selected
	 * 
	 * 设置默认选中的Item
	 * 
	 * */
	public void setSelectedState(int index)
	{
		if(index != -1 && onItemChangedListener != null)
		{
			if(index > itemList.size())
			{
				throw new RuntimeException("the value of default bar item can not bigger than string array's length");
			}
			itemList.get(index).setSelected(true);
			onItemChangedListener.onItemChanged(index);
			lastButton = index;
		}
	}
	
	/**
	 * set the normal state of the button by given index
	 * 
	 * 恢复未选中状态
	 * 
	 * */
	private void setNormalState(int index)
	{
		if(index != -1)
		{
			if(index > itemList.size())
			{
				throw new RuntimeException("the value of default bar item can not bigger than string array's length");
			}
			itemList.get(index).setSelected(false);
		}
	}
	
	/**
	 * make the red indicate VISIBLE
	 * 
	 * 设置我执行按钮右上角的红色小图标的可见
	 * 
	 * */
	public void showIndicate(int value)
	{
		tvOne.setText(value + "");
		tvOne.setVisibility(View.VISIBLE);
	}
	
	/**
	 * make the red indicate GONE
	 * 
	 * 隐藏 我执行按钮右上角的红色小图标
	 * 
	 * */
	public void hideIndicate()
	{
		tvOne.setVisibility(View.GONE);
	}
	
	public interface OnItemChangedListener
	{
		public void onItemChanged(int index);
	}
	
	private OnItemChangedListener onItemChangedListener;
	
	public void setOnItemChangedListener(OnItemChangedListener onItemChangedListener)
	{
	    this.onItemChangedListener = onItemChangedListener;
	}
}

 

布局文件：

bottom_bar.xml

 

MainActivity.java

/**
 * 
 * 这种方式和前面两种的封装方式又有所不同，前面两张是在代码中生成Button，
 * 而这种事通过布局文件来生成Button，效果都一样，但是布局文件更灵活，
 * 可以实现一些代码中难以实现的效果，比如在按钮的右上角加上一个小图标指示器等较为复杂的布局效果
 * 
 * @author MichaelYe
 * @since 2012-9-5
 * 
 * */
public class MainActivity extends Activity
{

    @Override
    public void onCreate(Bundle savedInstanceState) 
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        final TextView tvShow = (TextView)findViewById(R.id.tv_show);
        final BottomBar bottomBar = (BottomBar)findViewById(R.id.ll_bottom_bar);
        bottomBar.setOnItemChangedListener(new OnItemChangedListener() 
        {
			
			@Override
			public void onItemChanged(int index) 
			{

				tvShow.setText(index+"");
			}
		});
        bottomBar.setSelectedState(0);
        
        final Button btnShowOrHideIndicate = (Button)findViewById(R.id.btn_show_or_hide_indicate);
        btnShowOrHideIndicate.setOnClickListener(new OnClickListener() {
			
			@Override
			public void onClick(View v) {

				if(btnShowOrHideIndicate.getText().equals("显示图标"))
				{
					btnShowOrHideIndicate.setText("隐藏图标");
					bottomBar.showIndicate(12);
				}
				else
				{
					btnShowOrHideIndicate.setText("显示图标");
					bottomBar.hideIndicate();
				}
			}
		});
    }

}

 

activity_main.xml

 

也许你会问，如何能让红色的小图标显示在BottomBar的上方呢？实际上这里我对图片做了手脚，利用photoshop将原图片的顶部加入一款透明的约10个像素的空间就可以啦！也就是让原有的图片变得更高。哈哈，明白了吧？这样红色的小图标就可以显示出在BottomBar上方的效果了。

 

项目下载地址：

https://github.com/michaelye/DemoSegmentBarWithIndicate