在Android当中并没有分段控件,怎样去实现一个这样的分段控件,那就要自己去自定义了;
整体的思路:
1. 设置分段控件背景资源
2. 自定义segmentView继承LinearLayout
3. 设置分段控件的属性(文字的颜色、文字的大小…)
4. 通过TextView中的setSelected()方法控制哪个分段控件被选择
5. 自定义一个接口告知Activity分段控件是否被选中
segment_left_background.xml –>左边分段控件的背景资源
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true">
<shape>
<solid android:color="#ffffff" />
<corners android:bottomLeftRadius="10dp" android:bottomRightRadius="0dp" android:topLeftRadius="10dp" android:topRightRadius="0dp" />
shape>
item>
<item>
<shape>
<stroke android:width="1dp" android:color="#ffffff" />
<solid android:color="#3c87d7" />
<corners android:bottomLeftRadius="10dp" android:bottomRightRadius="0dp" android:topLeftRadius="10dp" android:topRightRadius="0dp" />
shape>
item>
selector>
segment_right_background.xml –>右边分段控件的背景资源
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true">
<shape>
<solid android:color="#ffffff" />
<corners android:topLeftRadius="0dp" android:bottomLeftRadius="0dp" android:topRightRadius="10dp" android:bottomRightRadius="10dp" />
shape>
item>
<item>
<shape>
<stroke android:color="#ffffff" android:width="1dp" />
<solid android:color="#3c87d7" />
<corners android:topLeftRadius="0dp" android:bottomLeftRadius="0dp" android:topRightRadius="10dp" android:bottomRightRadius="10dp" />
shape>
item>
selector>
segmentView.java –>自定义segmentView 继承LinearLayout
public class segmentView extends LinearLayout {
private TextView leftTextView;
private TextView rightTextView;
private onSegmentViewClickListener segmentListener;
public segmentView(Context context) {
this(context, null);
}
public segmentView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public segmentView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initView();
}
private void initView() {
leftTextView = new TextView(getContext());
rightTextView = new TextView(getContext());
//设置文字大小
leftTextView.setText("消息");
rightTextView.setText("电话");
setSegmentTextSize(16);
leftTextView.setLayoutParams(new LayoutParams(0, LayoutParams.WRAP_CONTENT, 1));
rightTextView.setLayoutParams(new LayoutParams(0, LayoutParams.WRAP_CONTENT, 1));
//设置textView的内容位置居中
leftTextView.setGravity(Gravity.CENTER);
rightTextView.setGravity(Gravity.CENTER);
//设置textView的内边距
leftTextView.setPadding(5, 6, 5, 6);
rightTextView.setPadding(5, 6, 5, 6);
//设置背景资源
leftTextView.setBackgroundResource(R.drawable.segment_left_background);
rightTextView.setBackgroundResource(R.drawable.segment_right_background);
//默认左侧textView为选中状态
leftTextView.setSelected(true);
setSelectTextColor(0);
this.removeAllViews();
//加入textView
this.addView(leftTextView);
this.addView(rightTextView);
this.invalidate();
leftTextView.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
if (leftTextView.isSelected()) {
return;
}
leftTextView.setSelected(true);
rightTextView.setSelected(false);
setSelectTextColor(0);
if (segmentListener != null) {
segmentListener.onSegmentViewClick(leftTextView, 0);
}
}
});
rightTextView.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
if (rightTextView.isSelected()) {
return;
}
rightTextView.setSelected(true);
leftTextView.setSelected(false);
setSelectTextColor(1);
if (segmentListener != null) {
segmentListener.onSegmentViewClick(rightTextView, 1);
}
}
});
}
/**
* 设置字体大小
*
* @param size
*/
private void setSegmentTextSize(int size) {
leftTextView.setTextSize(TypedValue.COMPLEX_UNIT_SP, size);
rightTextView.setTextSize(TypedValue.COMPLEX_UNIT_SP, size);
}
/**
* 设置选中的状态并改变字体的颜色
*
* @param position
*/
public void setSelectTextColor(int position) {
if (position == 0) {
leftTextView.setSelected(true);
rightTextView.setSelected(false);
//设置字体的颜色
leftTextView.setTextColor(getResources().getColor(R.color.text_selected));
rightTextView.setTextColor(getResources().getColor(R.color.text_noselected));
}
if (position == 1) {
leftTextView.setSelected(false);
rightTextView.setSelected(true);
rightTextView.setTextColor(getResources().getColor(R.color.text_selected));
leftTextView.setTextColor(getResources().getColor(R.color.text_noselected));
}
}
/**
* 设置控件显示的文字
*
* @param text
* @param position
*/
public void setSegmentText(CharSequence text, int position) {
if (position == 0) {
leftTextView.setText(text);
}
if (position == 1) {
rightTextView.setText(text);
}
}
//定义一个接口接收点击事件
public interface onSegmentViewClickListener {
void onSegmentViewClick(View view, int position);
}
public void setOnSegmentViewClickListener(onSegmentViewClickListener segmentListener) {
this.segmentListener = segmentListener;
}
}
MainActivity.java
public class MainActivity extends AppCompatActivity implements onSegmentViewClickListener {
private segmentView segmentView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
segmentView = (segmentView) findViewById(R.id.segmentView);
segmentView.setOnSegmentViewClickListener(this);
}
@Override
public void onSegmentViewClick(View view, int position) {
switch (position) {
case 0:
Toast.makeText(this, "消息", Toast.LENGTH_SHORT).show();
break;
case 1:
Toast.makeText(this, "电话", Toast.LENGTH_SHORT).show();
break;
}
}
}
布局文件
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.storm.segmentview.MainActivity">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#3c87d7">
<com.example.storm.segmentview.segmentView
android:id="@+id/segmentView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal" />
android.support.v7.widget.Toolbar>
RelativeLayout>
如有那里不对的地方或者那里写的不清楚,欢迎大家商讨…