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