Android仿iOS7的UISegmentedControl 分段

转载

jdsjlzx 2022-08-15 20:08:46 博主文章分类：Android UI

文章标签 android xml 3d 文章分类 运维

效果图：

Android仿iOS7的UISegmentedControl 分段_android

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

首先是两个按钮的背景：

res/drawable/seg_left.xml

[html] 
   view plain
   copy 
   
 
   
 
 
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 plain
   copy 
   
 
   
 
 
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 plain
   copy 
   
 
   
 
 
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 plain
   copy 
   
 
   
 
 
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. new TextView(getContext());
33. new TextView(getContext());
34. new LayoutParams(0, LayoutParams.WRAP_CONTENT, 1));
35. new LayoutParams(0, LayoutParams.WRAP_CONTENT, 1));
36. "SEG1");
37. "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. 3, 6, 3, 6);
48. 3, 6, 3, 6);
49. 16);
50. textView1.setBackgroundResource(R.drawable.seg_left);
51. textView2.setBackgroundResource(R.drawable.seg_right);
52. true);
53. this.removeAllViews();
54. this.addView(textView1);
55. this.addView(textView2);
56. this.invalidate();
57. 
58. new OnClickListener() {
59. 
60. @Override
61. public void onClick(View v) {
62. if (textView1.isSelected()) {
63. return;
64. }
65. true);
66. false);
67. if (listener != null) {
68. 0);
69. }
70. }
71. });
72. new OnClickListener() {
73. 
74. @Override
75. public void onClick(View v) {
76. if (textView2.isSelected()) {
77. return;
78. }
79. true);
80. false);
81. if (listener != null) {
82. 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 plain
   copy 
   
 
   
 
 
1. <?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. "match_parent"
4. "match_parent"
5. "vertical" >
6. 
7. <cn.haiwan.app.widget.SegmentView
8. "160dp"
9. "wrap_content"
10. "center_horizontal"
11. />
12. </LinearLayout>