自定义一个分段控件（仿QQ顶部的分段控件）

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zhiwenyan/article/details/52587867

在Android当中并没有分段控件，怎样去实现一个这样的分段控件，那就要自己去自定义了；

先看一张效果图:

整体的思路:
1. 设置分段控件背景资源
2. 自定义segmentView继承LinearLayout
3. 设置分段控件的属性(文字的颜色、文字的大小…)
4. 通过TextView中的setSelected()方法控制哪个分段控件被选择
5. 自定义一个接口告知Activity分段控件是否被选中

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="#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 –>右边分段控件的背景资源

<?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="#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;
        }
    }
}

布局文件

<?xml version="1.0" encoding="utf-8"?>
<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>

如有那里不对的地方或者那里写的不清楚，欢迎大家商讨…