Android 高级UI设计笔记21：Android SegmentView（分段选择控件）

1. 分段控制（SegmentView）

首先我们先看看什么是SegmentView的效果，如下：

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

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;
                 }
             }
         });
     }

 }

部署程序到手机上，如下：