效果图:
实现起来还是比较简单的,代码中都有注释了。
直接看代码:
/**
* 分段控件
*
* @author MichaelYe
* @since 2012-8-21
*
* */
public class SegmentBar extends LinearLayout implements OnClickListener
{
private String[] stringArray;
public SegmentBar(Context context, AttributeSet attrs)
{
super(context, attrs);
}
public SegmentBar(Context context)
{
super(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.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.left_button_bg_selector));
//button.setBackgroundResource(R.drawable.left_button_bg_selector);
}
else if(i != 0 && i < (length-1))//右边的按钮
{
button.setBackgroundResource(R.drawable.middle_button_bg_selector);
}
else//中间的按钮
{
button.setBackgroundResource(R.drawable.right_button_bg_selector);
}
this.addView(button);
}
}
private int lastIndex = 0;//记录上一次点击的索引
@Override
public void onClick(View v)
{
int index = (Integer)v.getTag();
onSegmentBarChangedListener.onBarItemChanged(index);
this.getChildAt(lastIndex).setSelected(false);
this.getChildAt(index).setSelected(true);
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;
this.getChildAt(index).setSelected(true);
}
/**
* 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;
}
}
布局文件中:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<com.michael.component.segmentbar.SegmentBar
android:id="@+id/segment_bar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true" />
<TextView
android:id="@+id/text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="@string/hello_world"
android:textSize="30sp"
tools:context=".MainActivity" />
</RelativeLayout>
如何在Activity中使用:
/**
* This class shows how to use SegmentBar component.
* You can set the number of bar items,text size,text color,and specify the default selected bar.
*
* 这个类展示的是如何使用分段控件。
* 你可以设置分段控件中子按钮的数量,文字的大小和颜色,并制定默认选中的子按钮
*
* @author MichaelYe
* @since 2012-8-21
* */
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.text_view);
SegmentBar segmentBar = (SegmentBar)findViewById(R.id.segment_bar);
segmentBar.setValue(MainActivity.this, new String[]{"Item0", "Item1", "Item2", "Item3"});
segmentBar.setTextSize(13);
segmentBar.setTextColor(this.getResources().getColor(R.color.deep_gray));
segmentBar.setDefaultBarItem(0);
segmentBar.setOnSegmentBarChangedListener(new OnSegmentBarChangedListener()
{
@Override
public void onBarItemChanged(int segmentItemIndex)
{
textView.setText(segmentItemIndex+"");
}
});
}
}
项目地址:https://github.com/michaelye/DemoSegmentBar
这里需要解释一下:我的分段控件的按钮是使用shapeDrawable来做的,我的手机是4.1系统的,由于在3.0之前shapeDrawable存在一个bug,就是<corners/>中的两个属性
android:bottomLeftRadius
android:bottomRightRadius
是相反的!这个bug在3.0之后被修复了。因此你的手机或模拟器如果系统版本大于3.0,那么应该可以正常显示。那么如何克服这个问题呢?
解决方法可以参考:
http://stackoverflow.com/questions/6003382/how-can-i-work-around-android-issue-9161-where-bottomrightradius-and-bottomleft
http://code.google.com/p/android/issues/detail?id=9161
但是我觉得这样做不是很好。太麻烦了。有兴趣的同学可以自己研究下。我的建议是:
使用photoshop来做图,圆角矩形是很容易制作好的。然后将这个圆角矩形3等分,分为左,中,右3张图片,然后使用sdk tools中的9.png制作工具,让图片可以自由拉伸,用这些制作好的图片替换我在项目中使用的图片,这样就可以很好滴实现想要的效果了!
如果发现问题欢迎指正。
- 大小: 42.1 KB
分享到:
相关推荐
在iOS和Android的设计规范中,标签导航(Tabs)和分段控件(Segmented Control)是两种常见的界面元素,它们各自具有独特的功能和适用场景。本文将深入解析这两种控件的特性和使用注意事项。 首先,标签导航是...
类似iPhone翻页控件源码资源包
在Android开发中,有时我们需要创建一个与iPhone滚桶控件(Picker)类似的用户界面元素,以便用户能够方便地从一系列选项中进行选择。这个控件通常用于日期选择、时间选择或者是一系列数值的选择,提供了良好的交互...
android-segmentedradiobutton, iPhone控件分段的Android实现 分割的用于Android的单选按钮这是我通过扩展RadioGroup和RadioButton来实现对Android的ios控件分段的实现。 包含的示例项目。屏幕截图 用法对于只有文本...
iphone开发控件大全,介绍常用控件的属性,方法,可以在开发过程中查阅
这个【标题】"(0165)-iOS/iPhone/iPAD/iPod源代码-分段选择(Segment)-SegmentedControl"表明我们将探讨如何自定义和使用UISegmentedControl。【描述】中提到,我们可以对Segment的文字、颜色和图片进行定制...
总的来说,"Android仿iPhone滚动控件源码"是一个为Android开发者提供的工具,它允许他们在应用中实现类似iOS的滚动效果,从而提升用户体验。通过研究源码,开发者不仅可以学习到如何创建自定义视图和滚动效果,还能...
"类似iPhone的JS日期选择控件"是一个专题,旨在为网页应用提供与苹果iPhone设备上日期选择器相似的功能,提升用户体验。这样的控件通常是基于JavaScript实现,允许用户在网页上方便地选择日期,而无需离开当前页面或...
在iOS开发中,"ios-新闻顶部分段联动控件.zip" 提供的是一个实现新闻应用顶部分段控制器(Segmented Control)与内容区域联动的示例代码。这个控件通常用于显示多个不同新闻类别,用户可以通过点击或滑动顶部的分段...
iPhone上的时间控件遵循苹果的iUI设计规范,提供了直观且一致的用户体验。在这个主题中,我们将深入探讨iPhone时间控件的使用、设计特点以及如何在应用中实现它。 1. **时间控件的设计** iPhone的时间控件呈现出...
在Android平台上,模仿iPhone的开关控件是一种常见的设计需求,以提供用户熟悉的交互体验。这篇博客 "android制作仿iphone开关控件" 提供了实现这一功能的详细步骤和源码,下面将对其中的关键知识点进行深入阐述。 ...
在iOS应用开发中,iPhone平台提供了丰富的用户界面控件,使得开发者可以构建出美观且功能齐全的应用。"iphone开发控件的demo"是专为初学者设计的学习资源,包含了多种常用控件的示例代码,帮助开发者快速掌握控件的...
"Android仿iPhone滚动控件源码.zip"这个资源正是针对这一需求,它包含了一套用于Android平台的滚动控件实现,旨在模仿iPhone的滚动效果。这个源码包可以帮助开发者轻松地在Android应用中集成类似于iPhone的滚动效果...
### 模仿iPhone实现控件抖动 在移动应用开发中,为了提升用户体验与界面的交互性,开发者经常需要模拟一些特殊效果,如按钮点击反馈、控件抖动等。本文将详细介绍如何在Android平台上模仿iPhone实现控件的抖动效果...
在Android开发中,为了提供与iOS类似的用户体验,开发者经常需要实现一种叫做“下拉刷新”(Pull-to-Refresh)的功能,这在iPhone设备上是非常常见的交互模式。本篇将详细介绍如何在Android应用中创建一个仿iPhone...
在Android开发中,为了提供与iOS相似的用户体验,开发者经常需要创建自定义控件来模拟iPhone的特定功能。本项目就是一个实例,它实现了一个仿iPhone的滑动控件,特别适用于展示时间或选项选择,就像HTC设备上的时间...
直接COPY至\My Documents\My Axure RP Libraries即可使用
"Iphone控件Demo大全"提供了一系列实用的示例,旨在帮助新手快速熟悉并掌握iPhone应用开发中的常见控件。以下是对这些控件及其用法的详细讲解: 1. UIButton:按钮是iOS应用中最基础的交互元素,用于触发某些事件或...
在Android开发中,有时我们可能需要创建一个与iPhone相似的滚轮控件,以实现滚动选择功能。"android-wheel"库就是为了解决这个问题而设计的。它允许开发者在Android应用中实现类似iOS滚轮的效果,提供了一种美观且...