类似iPhone的分段控件SegmentBar（带有小图标）

这个相对于之前封装的那个空间，在每个Item中多了一个小图标，用来指示当前被点击了。

下面是效果图：

?

相对于之前封装的SegmentBar，代码的改动比较少，主要是控制Button的一个方法setCompoundDrawablesWithIntrinsicBounds(context.getResources().getDrawable(R.drawable.icon_arraw_bottom), null, null, null);

这个方法对应到布局文件中就是android:drawableLeft=""这个属性。

如果4个参数都为null，就代表不要图标。

?

下面直接上代码：

SegmentBar.java

import android.content.Context;import android.util.AttributeSet;import android.view.Gravity;import android.view.View;import android.view.View.OnClickListener;import android.widget.Button;import android.widget.LinearLayout;import com.michael.widget.segmentbarwithicon.R;/** * 带小图标的分段控件 *  * @author MichaelYe * @since 2012-8-21 *  * */public class SegmentBar extends LinearLayout implements OnClickListener{private String[] stringArray;private Context mContext;public SegmentBar(Context context, AttributeSet attrs){super(context, attrs);mContext = context;}public SegmentBar(Context context) {super(context);mContext = context;}/** * determine the number of segment bar items by the string array. *  * 根据传递进来的数组，决定分段的数量 *  *  * */public void setValue(Context context, String[] stringArray){this.stringArray = stringArray;if(stringArray.length <= 1){throw new RuntimeException("the length of String array must bigger than 1");}this.stringArray = stringArray;resolveStringArray(context);}/** * resolve the array and generate the items. *  * 对数组进行解析，生成具体的每个分段 *  * */private void resolveStringArray(Context context){int length = this.stringArray.length;for(int i = 0; i < length; i++){Button button = new Button(context);button.setText(stringArray[i]);button.setGravity(Gravity.CENTER);//button.setCompoundDrawablesWithIntrinsicBounds(context.getResources().getDrawable(R.drawable.icon_arraw_bottom), null, null, null);button.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT, 1));button.setTag(i);button.setOnClickListener(this);if(i == 0)//左边的按钮{button.setBackgroundDrawable(context.getResources().getDrawable(R.drawable.tab_bar_selector));//button.setBackgroundResource(R.drawable.left_button_bg_selector);}else if(i != 0 && i < (length-1))//右边的按钮{button.setBackgroundResource(R.drawable.tab_bar_selector);}else//中间的按钮{button.setBackgroundResource(R.drawable.tab_bar_selector);}this.addView(button);}}private int lastIndex = 0;//记录上一次点击的索引public void onClick(View v){int index = (Integer)v.getTag();onSegmentBarChangedListener.onBarItemChanged(index);Button lastButton = (Button)this.getChildAt(lastIndex);lastButton.setSelected(false);lastButton.setCompoundDrawablesWithIntrinsicBounds(null, null, null, null);//android:drawableTopButton currButton = (Button)this.getChildAt(index);currButton.setSelected(true);currButton.setCompoundDrawablesWithIntrinsicBounds(mContext.getResources().getDrawable(R.drawable.icon_arraw_bottom), null, null, null);lastIndex = index;}/** * set the default bar item of selected *  * 设置默认选中的SegmentBar *  * */public void setDefaultBarItem(int index){if(index > stringArray.length){throw new RuntimeException("the value of default bar item can not bigger than string array's length");}lastIndex = index;Button btn = (Button)this.getChildAt(index);btn.setSelected(true);btn.setCompoundDrawablesWithIntrinsicBounds(mContext.getResources().getDrawable(R.drawable.icon_arraw_bottom), null, null, null);if(onSegmentBarChangedListener != null){onSegmentBarChangedListener.onBarItemChanged(index);}}/** * set the text size of every item *  * 设置文字的大小 *  * */public void setTextSize(float sizeValue){int index = this.getChildCount();for(int i = 0; i < index; i++){((Button)this.getChildAt(i)).setTextSize(sizeValue);}}/** * set the text color of every item *  * 设置文字的颜色 *  * */public void setTextColor(int color){int index = this.getChildCount();for(int i = 0; i < index; i++){((Button)this.getChildAt(i)).setTextColor(color);}}private OnSegmentBarChangedListener onSegmentBarChangedListener;/** * define a interface used for listen the change event of Segment bar *  * 定义一个接口，用来实现分段控件Item的监听 *  * */public interface OnSegmentBarChangedListener{public void onBarItemChanged(int segmentItemIndex);}/** * set the segment bar item changed listener,if the bar item changed,  * the method onBarItemChanged()will be called. *  * 设置分段控件的监听器，当分段改变的时候，onBarItemChanged()会被调用 *  * */public void setOnSegmentBarChangedListener(OnSegmentBarChangedListener onSegmentBarChangedListener){this.onSegmentBarChangedListener = onSegmentBarChangedListener;}}

?

MainActivity.java

/** * This class shows how to use the custom widget some like the widget of SegmentBar with Icon. *  * 这个类展示的是如何使用制作类似iPhone的并且带有图标的SegmentBar控件 *  * @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 textView = (TextView)findViewById(R.id.tv_show);        SegmentBar segmentBar = (SegmentBar)findViewById(R.id.ll_segment_bar);          segmentBar.setValue(MainActivity.this, new String[]{"Item0", "Item1", "Item2", "Item3"});          segmentBar.setTextSize(13);          segmentBar.setTextColor(this.getResources().getColor(R.color.title_color_white));          segmentBar.setOnSegmentBarChangedListener(new OnSegmentBarChangedListener()          {              public void onBarItemChanged(int segmentItemIndex)               {                  textView.setText(segmentItemIndex+"");              }          });          segmentBar.setDefaultBarItem(0);      }}

?

布局文件：

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" >    <RelativeLayout        android:id="@+id/rl_title"        android:layout_width="fill_parent"        android:layout_height="45dip"        android:layout_alignParentTop="true"        android:background="@drawable/bg_title_bar"        android:gravity="center_vertical" >        <Button            android:id="@+id/btn_back"            android:layout_width="70dip"            android:layout_height="wrap_content"            android:layout_alignParentLeft="true"            android:layout_marginLeft="8dip"            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="wrap_content"            android:layout_alignParentRight="true"            android:layout_marginRight="8dip"            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="wrap_content"            android:layout_centerInParent="true"            android:gravity="center"            android:text="@string/workbench_title"            android:textColor="@color/title_color_white"            android:textSize="22sp" />    </RelativeLayout>    <com.michael.widget.SegmentBar        android:id="@+id/ll_segment_bar"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:layout_below="@+id/rl_title" />    <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" /></RelativeLayout>

?

项目下载地址：

https://github.com/michaelye/DemoSegmentBarWithIcon

?