`

类似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:drawableTop
		
		Button 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

 

  • 大小: 79.6 KB
分享到:
评论

相关推荐

    iOS和Android规范解析-标签导航和分段控件.doc

    在iOS和Android的设计规范中,标签导航(Tabs)和分段控件(Segmented Control)是两种常见的界面元素,它们各自具有独特的功能和适用场景。本文将深入解析这两种控件的特性和使用注意事项。 首先,标签导航是...

    类似iPhone翻页控件源码资源包.zip

    类似iPhone翻页控件源码资源包

    Android 实现 类似于 iPhone 滚桶控件

    在Android开发中,有时我们需要创建一个与iPhone滚桶控件(Picker)类似的用户界面元素,以便用户能够方便地从一系列选项中进行选择。这个控件通常用于日期选择、时间选择或者是一系列数值的选择,提供了良好的交互...

    android-segmentedradiobutton, iPhone控件分段的Android实现.zip

    android-segmentedradiobutton, iPhone控件分段的Android实现 分割的用于Android的单选按钮这是我通过扩展RadioGroup和RadioButton来实现对Android的ios控件分段的实现。 包含的示例项目。屏幕截图 用法对于只有文本...

    类似IPHONE界面设计的png图标

    "类似IPHONE界面设计的png图标"这一主题,聚焦于借鉴iPhone的界面风格来创作PNG图标,这是一种广泛应用于移动应用和网站设计的方法。PNG是一种无损压缩的图像文件格式,其透明度特性使得它成为图标设计的首选格式。 ...

    iphone开发控件大全

    iphone开发控件大全,介绍常用控件的属性,方法,可以在开发过程中查阅

    (0165)-iOS/iPhone/iPAD/iPod源代码-分段选择(Segment)-SegmentedControl

    这个【标题】"(0165)-iOS/iPhone/iPAD/iPod源代码-分段选择(Segment)-SegmentedControl"表明我们将探讨如何自定义和使用UISegmentedControl。【描述】中提到,我们可以对Segment的文字、颜色和图片进行定制...

    类似iphone的 js日期选择控件

    "类似iPhone的JS日期选择控件"是一个专题,旨在为网页应用提供与苹果iPhone设备上日期选择器相似的功能,提升用户体验。这样的控件通常是基于JavaScript实现,允许用户在网页上方便地选择日期,而无需离开当前页面或...

    ios-新闻顶部分段联动控件.zip

    在iOS开发中,"ios-新闻顶部分段联动控件.zip" 提供的是一个实现新闻应用顶部分段控制器(Segmented Control)与内容区域联动的示例代码。这个控件通常用于显示多个不同新闻类别,用户可以通过点击或滑动顶部的分段...

    仿IPhone图标抖动效果

    在Android平台上实现类似iPhone的图标抖动效果是一个有趣且实用的UI交互设计。抖动效果常见于iPhone系统中,如用户输入错误密码或点击无效按钮时,对应的图标或元素会以一种模拟现实世界中物体振动的方式进行反馈。...

    Android仿iPhone滚动控件源码

    - 在iOS中,常见的滚动控件有UIScrollView、UIPickerView等,它们提供了平滑且可定制的滚动体验。Android中的仿iOS滚动控件可能模仿了这些特性,例如实现类似于UIPickerView的滚动选择器。 2. **自定义视图**: -...

    iphone 时间控件

    iPhone上的时间控件遵循苹果的iUI设计规范,提供了直观且一致的用户体验。在这个主题中,我们将深入探讨iPhone时间控件的使用、设计特点以及如何在应用中实现它。 1. **时间控件的设计** iPhone的时间控件呈现出...

    iphone开发控件的demo

    在iOS应用开发中,iPhone平台提供了丰富的用户界面控件,使得开发者可以构建出美观且功能齐全的应用。"iphone开发控件的demo"是专为初学者设计的学习资源,包含了多种常用控件的示例代码,帮助开发者快速掌握控件的...

    android制作仿iphone开关控件

    在Android平台上,模仿iPhone的开关控件是一种常见的设计需求,以提供用户熟悉的交互体验。这篇博客 "android制作仿iphone开关控件" 提供了实现这一功能的详细步骤和源码,下面将对其中的关键知识点进行深入阐述。 ...

    Iphone控件Demo大全

    以上只是部分常见的iOS控件,每个控件都有丰富的定制选项和交互方式,深入理解和熟练运用这些控件,将有助于你构建出功能丰富且用户体验良好的iOS应用。在学习过程中,结合"Iphone控件Demo大全"中的实例,实践操作并...

    模仿iphone 实现 控件抖动

    ### 模仿iPhone实现控件抖动 在移动应用开发中,为了提升用户体验与界面的交互性,开发者经常需要模拟一些特殊效果,如按钮点击反馈、控件抖动等。本文将详细介绍如何在Android平台上模仿iPhone实现控件的抖动效果...

    iPhone类似文件查看标题栏的小控件

    标题提到的"iPhone类似文件查看标题栏的小控件"显然是一款为模仿iPhone系统中文件查看器标题栏而设计的自定义控件。这个控件可能包含了常见的功能,如标题显示、滑动手势以调整分割线(红色间隔)的位置,以及可能的...

    IPHONE-UI控件库

    直接COPY至\My Documents\My Axure RP Libraries即可使用

    android 仿iphone滑动控件

    在Android开发中,为了提供与iOS相似的用户体验,开发者经常需要创建自定义控件来模拟iPhone的特定功能。本项目就是一个实例,它实现了一个仿iPhone的滑动控件,特别适用于展示时间或选项选择,就像HTC设备上的时间...

Global site tag (gtag.js) - Google Analytics