Android仿ＩＯＳ的UISegmentedContro分段控制器

先上效果图

效果如上，可以左右切换，也有监听事件，但缺点就是颜色没法设置，需要到ＸＭＬ中修改，也很简单。

其实原理很简单，重写了一个SegmentedControLayout继承LinearLayout，放两个ＴｅｘｔＶｉｅｗ，添加背景和监听器，实现联动。

首先是样式，总共有四个，分别为左右的选中和不选中状态，我给出一个，其他的可以修改：

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 内部颜色 -->
    <solid
        android:color="#1afead" />
    <!-- 边缘线条颜色 -->
    <stroke
        android:width="1dp"
        android:color="#1afead" />
    <!-- 圆角的幅度 -->
    <corners
        android:topLeftRadius="5dp"
        android:topRightRadius="0dp"
        android:bottomLeftRadius="5dp"
        android:bottomRightRadius="0dp" />

</shape>

布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical" >

        <LinearLayout
            android:id="@+id/top_bar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:orientation="horizontal"
            android:minHeight="@dimen/actionbar_height" >

            <RelativeLayout
                android:id="@+id/left_parent"
                android:layout_width="0dp"
                android:layout_height="@dimen/actionbar_height"
                android:layout_gravity="left|center_vertical"
                android:layout_weight="1.4"
                android:gravity="center_vertical|left" >
                <LinearLayout
                    android:layout_alignParentLeft="true"
                    android:id="@+id/option_imageview_layout_left"
                    android:layout_width="wrap_content"
                    android:paddingRight="14dp"
                    android:paddingLeft="14dp"
                    android:layout_height="match_parent"
                    android:gravity="center"
                    android:background="@drawable/titlebar_text_bg_selector"
                    >
                <ImageView
                    android:id="@id/option_imageview_left"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_vertical"
                    android:visibility="invisible" />
                </LinearLayout>
            </RelativeLayout>

            <LinearLayout
                android:id="@id/option_linearlayout_content"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="3"
                android:gravity="center"
                android:orientation="horizontal" >

                <TextView
                    android:id="@id/option_textview_title"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_vertical"
                    android:gravity="center"
                    android:maxLines="1"
                    android:textStyle="normal" />

            </LinearLayout>

            <RelativeLayout
                android:id="@+id/right_parent"
                android:layout_width="0dp"
                android:layout_height="@dimen/actionbar_height"
                android:layout_gravity="right|center_vertical"
                android:layout_marginRight="@dimen/actionbar_icon_margin"
                android:layout_weight="1.4"
                android:gravity="center_vertical|right" >

                <LinearLayout
                    android:layout_alignParentRight="true"
                    android:id="@+id/option_imageview_layout_right"
                    android:layout_width="wrap_content"
                    android:paddingRight="14dp"
                    android:paddingLeft="14dp"
                    android:layout_height="match_parent"
                    android:gravity="center"
                    android:background="@drawable/titlebar_text_bg_selector"
                    android:visibility="gone"
                    >
                <ImageView
                    android:id="@id/option_imageview_right"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_vertical"
                    />
                </LinearLayout>
                <TextView
                    android:layout_alignParentRight="true"
                    android:layout_marginRight="14dp"
                    android:id="@+id/option_textview_right"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_vertical"
                    android:textSize="16dp"
                    android:textColor="@color/white_text_color_selector"
                    />
            </RelativeLayout>
        </LinearLayout>

</LinearLayout>

然后就是代码，我一次性给出：

package com.international.cashou.common.widget;

import android.app.Activity;
import android.content.Context;
import android.content.res.TypedArray;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;

import com.international.cashou.R;

/**
 * Created by Administrator on 2017/8/7.
 */

public class SimpleOptionView extends LinearLayout {

    private ImageView mLeftImageView;
    private ImageView mRightImageView;
    private LinearLayout mRightImageViewLayout;
    private LinearLayout mLeftImageViewLayout;
    private TextView mRightTextView;
    private RelativeLayout mLeftParent;
    private RelativeLayout mRightParent;
    private TextView mTitleText;
    private View mCustomeView;
    private LinearLayout mTobBar;
    private boolean isSetBackOption = false;


    public SimpleOptionView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public SimpleOptionView(Context context) {
        this(context, null);
    }

    public SimpleOptionView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);

        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.SimpleOptionView);
        String title = a.getString(R.styleable.SimpleOptionView_option_title);
        int barheight = a.getDimensionPixelSize(R.styleable.SimpleOptionView_option_barheight, -1);
        int textSize = a.getDimensionPixelSize(R.styleable.SimpleOptionView_option_textsize, -1);
        int right_textSize = a.getDimensionPixelSize(R.styleable.SimpleOptionView_option_right_textsize, -1);
        int bgColor = a.getColor(R.styleable.SimpleOptionView_option_backgroundcolor, -1);
        int textColor = a.getColor(R.styleable.SimpleOptionView_option_textcolor, -1);

        LayoutInflater inflater = (LayoutInflater) context
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        inflater.inflate(R.layout.simple_action_bar, this, true);

        mTitleText = (TextView) findViewById(R.id.option_textview_title);
        mLeftParent = (RelativeLayout) findViewById(R.id.left_parent);
        mRightParent = (RelativeLayout) findViewById(R.id.right_parent);
        mTobBar = (LinearLayout) findViewById(R.id.top_bar);
        mLeftImageView = (ImageView) findViewById(R.id.option_imageview_left);
        mRightTextView = (TextView) findViewById(R.id.option_textview_right);
        mRightImageView = (ImageView) findViewById(R.id.option_imageview_right);
        mRightImageViewLayout = (LinearLayout) findViewById(R.id.option_imageview_layout_right);
        mLeftImageViewLayout = (LinearLayout) findViewById(R.id.option_imageview_layout_left);

        mTitleText.setText(title);
        if (barheight != -1) {
            mTobBar.setMinimumHeight(barheight);
        }
        if (textSize != -1) {
            mTitleText.setTextSize(TypedValue.COMPLEX_UNIT_PX, textSize);
        }
        if (right_textSize != -1) {
            mRightTextView.setTextSize(TypedValue.COMPLEX_UNIT_PX, right_textSize);
        }
        if (bgColor != -1) {
            mTobBar.setBackgroundColor(bgColor);
        }
        if (textColor != -1) {
            mTitleText.setTextColor(textColor);
            //mRightTextView.setTextColor(textColor);
        }

        setBackOption(true);
    }

    public void setCenterCustomeView(View v) {
        if (mCustomeView != v) {
            mCustomeView = v;
            ViewGroup vg = (ViewGroup) mTitleText.getParent();
            mTitleText.setVisibility(View.GONE);
            vg.addView(v);
        }
    }

    public void removeCenterCustomeView() {
        if (mCustomeView != null) {
            ViewGroup vg = (ViewGroup) mTitleText.getParent();
            vg.removeView(mCustomeView);
            mCustomeView = null;
            mTitleText.setVisibility(View.VISIBLE);
        }
    }

    public void setLeftOption(int resId, OnClickListener listener) {
        mLeftImageView.setTag(resId);
        mLeftImageViewLayout.setVisibility(View.VISIBLE);
        mLeftImageView.setImageResource(resId);
        mLeftParent.setOnClickListener(listener);
        isSetBackOption = false;
    }

    public void setLeftGone(boolean isGone) {
        if (isGone) {
            mLeftImageView.setVisibility(View.GONE);
        } else {
            mLeftImageView.setVisibility(View.VISIBLE);
        }
    }

    public void setRightOption(int resId, OnClickListener listener) {
        mRightImageViewLayout.setVisibility(View.VISIBLE);
        mRightTextView.setVisibility(View.GONE);
        mRightImageView.setImageResource(resId);
        mRightParent.setOnClickListener(listener);
    }

    public void setRightOptionGon(boolean isGone) {
        if (isGone) {
            mRightImageView.setVisibility(View.GONE);
        } else {
            mRightImageView.setVisibility(View.VISIBLE);
        }

    }

    public void setRightText(int resId, OnClickListener listener) {
        mRightTextView.setVisibility(View.VISIBLE);
        mRightImageViewLayout.setVisibility(View.GONE);
        mRightTextView.setText(resId);
        mRightParent.setOnClickListener(listener);
    }

    public void setRightText(String text, OnClickListener listener) {
        mRightTextView.setVisibility(View.VISIBLE);
        mRightImageViewLayout.setVisibility(View.GONE);
        mRightTextView.setText(text);
        mRightParent.setOnClickListener(listener);
    }

    public void setRightViewVisibility(int visibility) {
        mRightTextView.setVisibility(visibility);
    }

    public void setRightOptionEnabled(boolean b) {
        mRightParent.setEnabled(b);

    }

    private OnClickListener leftClickListener;

    /**
     * 设置返回按钮的点击事件
     *
     * @param leftClickListener
     */
    public void setLeftClickListener(OnClickListener leftClickListener) {
        this.leftClickListener = leftClickListener;
    }

    public void setBackOption(boolean b) {
        if (isSetBackOption != b) {
            isSetBackOption = b;
            if (b) {
                mLeftImageView.setImageResource(R.drawable.back_selector);
                mLeftParent.setOnClickListener(new OnClickListener() {

                    @Override
                    public void onClick(View view) {
                        if (leftClickListener != null) {
                            leftClickListener.onClick(view);
                        }
                        ((Activity) getContext()).onBackPressed();
                    }
                });
                mLeftImageView.setContentDescription("back Icon");

            } else {
                mLeftParent.setOnClickListener(null);
            }
        }
        if (b) {
            mLeftImageView.setVisibility(View.VISIBLE);
        } else {
            mLeftImageView.setVisibility(View.INVISIBLE);
        }
    }

    public void setRightCustomeView(View v) {
        if (mRightParent != null) {
            mRightParent.removeAllViews();
            if (v.getParent() == null) {
                mRightParent.addView(v);
            }
        }
    }


    public CharSequence getTitle() {
        return mTitleText.getText();
    }

    public void setTitle(CharSequence str) {
        mTitleText.setText(str);
        mTitleText.setVisibility(View.VISIBLE);
        if (mCustomeView != null) {
            ViewGroup vg = (ViewGroup) mTitleText.getParent();
            vg.removeView(mCustomeView);
            mCustomeView = null;
        }
    }

    public void setTitle(int resId) {
        mTitleText.setText(resId);
        mTitleText.setVisibility(View.VISIBLE);
        if (mCustomeView != null) {
            ViewGroup vg = (ViewGroup) mTitleText.getParent();
            vg.removeView(mCustomeView);
            mCustomeView = null;
        }
    }

}

使用：

segmentedControLayout=(SegmentedControLayout)findViewById(R.id.my_scrollIndicatorDown);
        segmentedControLayout.setOnTabChangListener(new SegmentedControLayout.OnTabChangListener() {
            @Override
            public void onLeftClick() {
                Toast.makeText(mContext,"左",Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onRightClick() {
                Toast.makeText(mContext,"右",Toast.LENGTH_SHORT).show();
            }
        });

最后的最后， 完整DEMO，只要1积分哦。