常用的底部分段控件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);}@Overridepublic 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() {@Overridepublic 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() {@Overridepublic 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
?