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积分哦。