常用的底部分段控件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<View> 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<View>();
	    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

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_gravity="center"
    android:background="@drawable/bg_bottom"
    android:gravity="center"
    android:orientation="horizontal" >

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1" >

        <Button
            android:id="@+id/btn_item_one"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/bottom_item_selector"
            android:drawableTop="@drawable/bottom_bar_icon_me_selector"
            android:text="@string/bottom_item_one"
            android:textColor="@color/bottom_item_text_selector"
            android:textSize="12sp" />

        <TextView
            android:id="@+id/tv_warming"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:background="@drawable/bottom_item_warming_icon"
            android:gravity="center"
            android:textColor="@android:color/white"
            android:textSize="13sp"
            android:textStyle="bold"
            android:visibility="gone" />
    </RelativeLayout>

    <View
        android:layout_width="0.5dip"
        android:layout_height="fill_parent"
        android:layout_marginTop="8dip"
        android:background="@color/bottom_item_line_color" />

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1" >

        <Button
            android:id="@+id/btn_item_two"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/bottom_item_selector"
            android:drawableTop="@drawable/bottom_bar_icon_me_selector"
            android:text="@string/bottom_item_two"
            android:textColor="@color/bottom_item_text_selector"
            android:textSize="12sp" />
    </RelativeLayout>

    <View
        android:layout_width="0.5dip"
        android:layout_height="fill_parent"
        android:layout_marginTop="8dip"
        android:background="@color/bottom_item_line_color" />

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1" >

        <Button
            android:id="@+id/btn_item_three"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/bottom_item_selector"
            android:drawableTop="@drawable/bottom_bar_icon_team_selector"
            android:text="@string/bottom_item_three"
            android:textColor="@color/bottom_item_text_selector"
            android:textSize="12sp" />
    </RelativeLayout>

    <View
        android:layout_width="0.5dip"
        android:layout_height="fill_parent"
        android:layout_marginTop="8dip"
        android:background="@color/bottom_item_line_color" />

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1" >

        <Button
            android:id="@+id/btn_item_four"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/bottom_item_selector"
            android:drawableTop="@drawable/bottom_bar_icon_search_selector"
            android:text="@string/bottom_item_four"
            android:textColor="@color/bottom_item_text_selector"
            android:textSize="12sp" />
    </RelativeLayout>

    <View
        android:layout_width="0.5dip"
        android:layout_height="fill_parent"
        android:layout_marginTop="8dip"
        android:background="@color/bottom_item_line_color" />

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1" >

        <Button
            android:id="@+id/btn_item_five"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/bottom_item_selector"
            android:drawableTop="@drawable/bottom_bar_icon_set_selector"
            android:text="@string/bottom_item_five"
            android:textColor="@color/bottom_item_text_selector"
            android:textSize="12sp" />
    </RelativeLayout>

</LinearLayout>

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

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/bg_login"
    android:orientation="vertical" >

    <RelativeLayout
        android:id="@+id/rl_title"
        android:layout_width="fill_parent"
        android:layout_height="45dip"
        android:layout_alignParentTop="true"
        android:layout_centerVertical="true"
        android:background="@drawable/bg_title_bar"
        android:gravity="center" >

        <Button
            android:id="@+id/btn_back"
            android:layout_width="70dip"
            android:layout_height="fill_parent"
            android:layout_alignParentLeft="true"
            android:layout_marginBottom="5dip"
            android:layout_marginLeft="8dip"
            android:layout_marginTop="5dip"
            android:background="@drawable/title_btn_back_selector"
            android:text="@string/workbench_home_page"
            android:textColor="@color/title_button_color_gray" />

        <Button
            android:id="@+id/btn_add"
            android:layout_width="70dip"
            android:layout_height="fill_parent"
            android:layout_alignParentRight="true"
            android:layout_marginBottom="5dip"
            android:layout_marginRight="8dip"
            android:layout_marginTop="5dip"
            android:background="@drawable/title_btn_rect_selector"
            android:text="@string/workbench_add_task"
            android:textColor="@color/title_button_color_gray" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:layout_centerInParent="true"
            android:gravity="center"
            android:text="@string/workbench_title"
            android:textColor="@color/title_color_white"
            android:textSize="22sp" />
    </RelativeLayout>

    <TextView
        android:id="@+id/tv_show"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:textColor="@color/title_color_white"
        android:textSize="30sp" />

    <Button
        android:id="@+id/btn_show_or_hide_indicate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tv_show"
        android:text="@string/button_text" />

    <com.michael.widget.BottomBar
        android:id="@+id/ll_bottom_bar"
        android:layout_width="fill_parent"
        android:layout_height="60dip"
        android:layout_alignParentBottom="true" />

</RelativeLayout>

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

项目下载地址：

https://github.com/michaelye/DemoSegmentBarWithIndicate

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

猜你喜欢