Android仿IOS的UISegmentedContro分段控制器

先上效果图

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

其实原理很简单,重写了一个SegmentedControLayout继承LinearLayout,放两个TextView,添加背景和监听器,实现联动。

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

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



可自定义样式、功能全面的分段控件。项目地址:https://github.com/klongmitre/android-segmented-control-view效果图:如何使用xml中直接创建<org.mitre.ascv.AndroidSegmentedControlView         android:id="@ id/androidSegmentedControlView"         android:layout_width="match_parent"         android:layout_height="wrap_content"         ascv:ascv_defaultSelection="0"         ascv:ascv_unselectedTextColor="@color/test_attr_unselected_text_color"         ascv:ascv_selectedTextColor="@color/test_attr_selected_text_color"         ascv:ascv_selectedColor="@color/test_attr_selected_color"         ascv:ascv_unselectedColor="@color/test_attr_unselected_color"         ascv:ascv_items="@array/three_state_option"/>2. java中添加监听器,监听item的切换ascv = (AndroidSegmentedControlView)this.findViewById(R.id.androidSegmentedControlView); ascv.setIdentifier("ascv01"); //ascv.setItems(new String[]{"Test1aaaaa", "Test2", "Test3"}, new String[]{"1", "2", "3"}); ascv.setOnSelectionChangedListener(new OnSelectionChangedListener(){     @Override     public void newSelection(String identifier, String value) {//当item切换时触发  Toast.makeText(MainActivity.this, "identifier:" identifier "  value:" value, Toast.LENGTH_SHORT).show();     } });参数identifier是当有多个分段控件时,同时使用一个监听器时,用于区别是哪个触发了事件。属性说明属性名类型使用说明ascv_unselectedTextColorreference未选中的item的文字颜色ascv_unselectedColorreference未选中的item的背景颜色,不包括边框ascv_selectedColorreference选中的item背景的颜色以及边框的颜色ascv_selectedTextColorreference选中的item的文字颜色ascv_itemsreference控件item上显示的文字ascv_valuesreference控件item的值,会被传给监听器。未设置时,默认使用ascv_items。ascv_equalWidthboolean当item上的文字,即ascv_items设置的文字,长度不一致时,item的宽度是否还等长。ascv_stretchboolean是否被拉伸。即控件是否填充整个父容器。ascv_defaultSelectioninteger默认哪个item被选中,下标从0开始ascv_identifierstring控件的ID
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值