Android仿iOS7的UISegmentedControl 分段

效果图：

这里只简单做了两个按钮的。

首先是两个按钮的背景：

res/drawable/seg_left.xml

[html] view
plaincopy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <selector xmlns:android="http://schemas.android.com/apk/res/android" >  
3.     <item android:state_selected="true">  
4.         <shape >  
5.             <stroke android:color="#0079FF" android:width="1dp"/>  
6.             <solid android:color="#0079FF"/>  
7.             <corners android:topLeftRadius="3dp" android:bottomLeftRadius="3dp" android:topRightRadius="0dp" android:bottomRightRadius="0dp"/>  
8.         </shape>  
9.     </item>  
10.     <item>  
11.         <shape >  
12.             <stroke android:color="#0079FF" android:width="1dp"/>  
13.             <solid android:color="#FFFFFF"/>  
14.             <corners android:topLeftRadius="3dp" android:bottomLeftRadius="3dp" android:topRightRadius="0dp" android:bottomRightRadius="0dp"/>  
15.         </shape>  
16.     </item>  
17. </selector>  

res/drawable/seg_right.xml

[html] view
plaincopy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <selector xmlns:android="http://schemas.android.com/apk/res/android" >  
3.     <item android:state_selected="true">  
4.         <shape >  
5.             <stroke android:color="#0079FF" android:width="1dp"/>  
6.             <solid android:color="#0079FF"/>  
7.             <corners android:topLeftRadius="0dp" android:bottomLeftRadius="0dp" android:topRightRadius="3dp" android:bottomRightRadius="3dp"/>  
8.         </shape>  
9.     </item>  
10.     <item>  
11.         <shape >  
12.             <stroke android:color="#0079FF" android:width="1dp"/>  
13.             <solid android:color="#FFFFFF"/>  
14.             <corners android:topLeftRadius="0dp" android:bottomLeftRadius="0dp" android:topRightRadius="3dp" android:bottomRightRadius="3dp"/>  
15.         </shape>  
16.     </item>  
17. </selector>  

字体颜色：

res/drawable/seg_text_color_selector.xml

[html] view
plaincopy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <selector xmlns:android="http://schemas.android.com/apk/res/android" >  
3.     <item android:state_selected="true" android:color="#FFFFFF"/>  
4.     <item android:color="#0079FF"/>  
5. </selector>  

这几个是对选中状态进行设置。

下面对LinearLayout进行改造~~~

其实就是放两个TextView。

SegmentView.java

[java] view
plaincopy

1. package cn.haiwan.app.widget;  
2.   
3. import org.xmlpull.v1.XmlPullParser;  
4.   
5. import android.R.integer;  
6. import android.content.Context;  
7. import android.content.res.ColorStateList;  
8. import android.util.AttributeSet;  
9. import android.util.TypedValue;  
10. import android.view.Gravity;  
11. import android.view.View;  
12. import android.widget.LinearLayout;  
13. import android.widget.TextView;  
14. import cn.haiwan.R;  
15.   
16. public class SegmentView extends LinearLayout {  
17.     private TextView textView1;  
18.     private TextView textView2;  
19.     private onSegmentViewClickListener listener;  
20.     public SegmentView(Context context, AttributeSet attrs) {  
21.         super(context, attrs);  
22.         init();  
23.     }  
24.       
25.     public SegmentView(Context context) {  
26.         super(context);  
27.         init();  
28.     }  
29.   
30.     private void init() {  
31. //      this.setLayoutParams(new LinearLayout.LayoutParams(dp2Px(getContext(), 60), LinearLayout.LayoutParams.WRAP_CONTENT));  
32.         textView1 = new TextView(getContext());  
33.         textView2 = new TextView(getContext());  
34.         textView1.setLayoutParams(new LayoutParams(0, LayoutParams.WRAP_CONTENT, 1));  
35.         textView2.setLayoutParams(new LayoutParams(0, LayoutParams.WRAP_CONTENT, 1));  
36.         textView1.setText("SEG1");  
37.         textView2.setText("SEG2");  
38.         XmlPullParser xrp = getResources().getXml(R.drawable.seg_text_color_selector);    
39.         try {    
40.             ColorStateList csl = ColorStateList.createFromXml(getResources(), xrp);    
41.             textView1.setTextColor(csl);  
42.             textView2.setTextColor(csl);  
43.           } catch (Exception e) {    
44.         }   
45.         textView1.setGravity(Gravity.CENTER);  
46.         textView2.setGravity(Gravity.CENTER);  
47.         textView1.setPadding(3, 6, 3, 6);  
48.         textView2.setPadding(3, 6, 3, 6);  
49.         setSegmentTextSize(16);  
50.         textView1.setBackgroundResource(R.drawable.seg_left);  
51.         textView2.setBackgroundResource(R.drawable.seg_right);  
52.         textView1.setSelected(true);  
53.         this.removeAllViews();  
54.         this.addView(textView1);  
55.         this.addView(textView2);  
56.         this.invalidate();  
57.           
58.         textView1.setOnClickListener(new OnClickListener() {  
59.               
60.             @Override  
61.             public void onClick(View v) {  
62.                 if (textView1.isSelected()) {  
63.                     return;  
64.                 }  
65.                 textView1.setSelected(true);  
66.                 textView2.setSelected(false);  
67.                 if (listener != null) {  
68.                     listener.onSegmentViewClick(textView1, 0);  
69.                 }  
70.             }  
71.         });  
72.         textView2.setOnClickListener(new OnClickListener() {  
73.               
74.             @Override  
75.             public void onClick(View v) {  
76.                 if (textView2.isSelected()) {  
77.                     return;  
78.                 }  
79.                 textView2.setSelected(true);  
80.                 textView1.setSelected(false);  
81.                 if (listener != null) {  
82.                     listener.onSegmentViewClick(textView2, 1);  
83.                 }  
84.             }  
85.         });  
86.     }  
87.     /** 
88.      * 设置字体大小 单位dip 
89.      * <p>2014年7月18日</p> 
90.      * @param dp 
91.      * @author RANDY.ZHANG 
92.      */  
93.     public void setSegmentTextSize(int dp) {  
94.         textView1.setTextSize(TypedValue.COMPLEX_UNIT_DIP, dp);  
95.         textView2.setTextSize(TypedValue.COMPLEX_UNIT_DIP, dp);  
96.     }  
97.       
98.     private static int dp2Px(Context context, float dp) {  
99.         final float scale = context.getResources().getDisplayMetrics().density;  
100.         return (int) (dp * scale + 0.5f);  
101.     }  
102.       
103.     public void setOnSegmentViewClickListener(onSegmentViewClickListener listener) {  
104.         this.listener = listener;  
105.     }  
106.       
107.       
108.     /** 
109.      * 设置文字 
110.      * <p>2014年7月18日</p> 
111.      * @param text 
112.      * @param position 
113.      * @author RANDY.ZHANG 
114.      */  
115.     public void setSegmentText(CharSequence text,int position) {  
116.         if (position == 0) {  
117.             textView1.setText(text);  
118.         }  
119.         if (position == 1) {  
120.             textView2.setText(text);  
121.         }  
122.     }  
123.       
124.     public static interface onSegmentViewClickListener{  
125.         /** 
126.          *  
127.          * <p>2014年7月18日</p> 
128.          * @param v 
129.          * @param position 0-左边 1-右边 
130.          * @author RANDY.ZHANG 
131.          */  
132.         public void onSegmentViewClick(View v,int position);  
133.     }  
134. }  

布局文件引用

[java] view
plaincopy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:orientation="vertical" >  
6.      
7.     <cn.haiwan.app.widget.SegmentView   
8.         android:layout_width="160dp"  
9.         android:layout_height="wrap_content"  
10.         android:layout_gravity="center_horizontal"  
11.         />  
12. </LinearLayout>