Android 高级UI设计笔记21:Android SegmentView(分段选择控件)

1. 分段控制(SegmentView)

首先我们先看看什么是SegmentView的效果,如下:

Android 高级UI设计笔记21:Android SegmentView(分段选择控件)

分段控制这个View控件是ios7的分段控制,和QQ消息页面顶部的效果一样,android没有这个控件,不过实现起来也比较简单,下面来实现这个样式,实现的样式最终效果如下:

Android 高级UI设计笔记21:Android SegmentView(分段选择控件)

2. SegmentView自定义实现的逻辑过程:

(1)首先我们要定义文字的颜色,文字是交给TextView显示的,当TextView选中和没有选中两者颜色是不一样的,我们在res/color下:

新建segment_text_color_selector.xml文件:

 <?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android"> <item
android:state_selected="true"
android:color="#ffffff">
</item> <item
android:color="#288455">
</item> </selector>

(2)然后在res/drawable下新建segment_left_background.xml和segment_right_background.xml

这两个都是Segment-消息 和 Segment-电话 选中和没有选中两种状态对应的不同背景填充

segment_left_background.xml:

 <?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_selected="true">
<shape>
<solid android:color="#00c17c" /> <corners
android:bottomLeftRadius="15dp"
android:bottomRightRadius="0dp"
android:topLeftRadius="15dp"
android:topRightRadius="0dp" />
</shape>
</item> <item>
<shape>
<stroke android:width="1dp" android:color="#00c17c" />
<solid android:color="#ffffff" />
<corners android:bottomLeftRadius="15dp"
android:bottomRightRadius="0dp"
android:topLeftRadius="15dp"
android:topRightRadius="0dp" />
</shape>
</item> </selector>

segment_right_background.xml:

 <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_selected="true">
<shape>
<solid android:color="#00c17c" /> <corners
android:bottomLeftRadius="0dp"
android:bottomRightRadius="15dp"
android:topLeftRadius="0dp"
android:topRightRadius="15dp" />
</shape>
</item> <item>
<shape>
<stroke android:width="1dp" android:color="#00c17c" />
<solid android:color="#ffffff" />
<corners
android:bottomLeftRadius="0dp"
android:bottomRightRadius="15dp"
android:topLeftRadius="0dp"
android:topRightRadius="15dp" />
</shape>
</item> </selector>

(3)Ok,上面资源文件都定义好了,接下来我们就可以自定义SegmentView,由于使用到了weight属性,我们让SegmentView继承自LinearLayout,使用两个TextView,如下:

 package com.himi.segmentviewdemo;

 import android.content.Context;
import android.content.res.ColorStateList;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.Gravity;
import android.view.View;
import android.widget.LinearLayout;
import android.widget.TextView; public class SegmentView extends LinearLayout {
private TextView leftTextView;
private TextView rightTextView;
private onSegmentViewClickListener segmentListener; // 这是代码加载ui必须重写的方法
public SegmentView(Context context) {
super(context);
initView();
} // 这是在xml布局使用必须重写的方法
public SegmentView(Context context, AttributeSet attrs) {
super(context, attrs);
initView();
} private void initView() {
leftTextView = new TextView(getContext());
rightTextView = new TextView(getContext()); // 设置textview的布局宽高并设置为weight属性都为1
leftTextView.setLayoutParams(new LayoutParams(0, LayoutParams.WRAP_CONTENT, 1));
rightTextView.setLayoutParams(new LayoutParams(0, LayoutParams.WRAP_CONTENT, 1)); // 初始化的默认文字
leftTextView.setText("消息");
rightTextView.setText("电话"); // 实现不同的按钮状态,不同的颜色
ColorStateList csl = getResources().getColorStateList(R.color.segment_text_color_selector);
leftTextView.setTextColor(csl);
rightTextView.setTextColor(csl); // 设置textview的内容位置居中
leftTextView.setGravity(Gravity.CENTER);
rightTextView.setGravity(Gravity.CENTER); // 设置textview的内边距
leftTextView.setPadding(5, 6, 5, 6);
rightTextView.setPadding(5, 6, 5, 6); // 设置文字大小
setSegmentTextSize(16); // 设置背景资源
leftTextView.setBackgroundResource(R.drawable.segment_left_background);
rightTextView.setBackgroundResource(R.drawable.segment_right_background); // 默认左侧textview为选中状态
leftTextView.setSelected(true); // 加入textview
this.removeAllViews();
this.addView(leftTextView);
this.addView(rightTextView);
this.invalidate();//重新draw() leftTextView.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
if (leftTextView.isSelected()) {
return;
}
leftTextView.setSelected(true);
rightTextView.setSelected(false);
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);
if (segmentListener != null) {
segmentListener.onSegmentViewClick(rightTextView, 1);
}
}
}); } /**
* 设置字体大小
*
* @param dp
*/
private void setSegmentTextSize(int dp) {
leftTextView.setTextSize(TypedValue.COMPLEX_UNIT_DIP, dp);
rightTextView.setTextSize(TypedValue.COMPLEX_UNIT_DIP, dp);
} /**
* 手动设置选中的状态
*
* @param i
*/
public void setSelect(int i) {
if (i == 0) {
leftTextView.setSelected(true);
rightTextView.setSelected(false);
} else {
leftTextView.setSelected(false);
rightTextView.setSelected(true);
}
} /**
* 设置控件显示的文字
*
* @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 {
public void onSegmentViewClick(View view, int postion);
} public void setOnSegmentViewClickListener(onSegmentViewClickListener segmentListener) {
this.segmentListener = segmentListener;
}
}

(4)上面定义好了SegmentView,接下来去xml布局直接使用就可以了,如下:

 <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"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.himi.segmentviewdemo.MainActivity" > <com.himi.segmentviewdemo.SegmentView
android:id="@+id/segmentview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true" >
</com.himi.segmentviewdemo.SegmentView> </RelativeLayout>

(5)来到MainActivity,设置点击事件,事件可以切换fragment等等

 package com.himi.segmentviewdemo;

 import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Toast; public class MainActivity extends Activity { private SegmentView mSegmentView; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main); mSegmentView = (SegmentView) findViewById(R.id.segmentview);
mSegmentView.setOnSegmentViewClickListener(new SegmentView.onSegmentViewClickListener() {
@Override
public void onSegmentViewClick(View view, int postion) {
switch (postion) {
case 0:
Toast.makeText(MainActivity.this, "点击了消息" + postion,
Toast.LENGTH_SHORT).show();
break;
case 1:
Toast.makeText(MainActivity.this, "点击了电话" + postion,
Toast.LENGTH_SHORT).show();
break;
default:
break;
}
}
});
} }

部署程序到手机上,如下:

Android 高级UI设计笔记21:Android SegmentView(分段选择控件)

Android 高级UI设计笔记21:Android SegmentView(分段选择控件)

上一篇:Java知多少(40)接口和抽象类的区别


下一篇:mysql高级排序&高级匹配查询示例