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

?