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

}

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