Android 访IOS 分段选择控制器 SegmentView

来源：互联网发布：巨人网络有哪些手游编辑：程序博客网时间：2024/05/21 14:40

单位项目要求做一个分段式选择控制器，ios的有原生的，android感觉没有，于是看了下自己写了一个
效果图
这里写图片描述

参考资料
http://www.cnblogs.com/hebao0514/p/5649730.html

1.新建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>            <stroke android:width="1dp" android:color="#ffffff" />            <solid android:color="#ffffff"/>            <corners                android:bottomLeftRadius="5dp"                android:bottomRightRadius="0dp"                android:topLeftRadius="5dp"                android:topRightRadius="0dp" />        </shape>    </item>    <item>        <shape>            <stroke android:width="1dp" android:color="#ffffff"/>            <solid android:color="#FE8058"  />            <corners android:bottomLeftRadius="5dp"                     android:bottomRightRadius="0dp"                     android:topLeftRadius="5dp"                     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>            <stroke android:width="1dp" android:color="#ffffff" />            <solid android:color="#ffffff" />            <corners                android:bottomLeftRadius="0dp"                android:bottomRightRadius="5dp"                android:topLeftRadius="0dp"                android:topRightRadius="5dp" />        </shape>    </item>    <item>        <shape>            <stroke android:width="1dp" android:color="#ffffff" />            <solid android:color="#FE8058" />            <corners                android:bottomLeftRadius="0dp"                android:bottomRightRadius="5dp"                android:topLeftRadius="0dp"                android:topRightRadius="5dp" />        </shape>    </item></selector>

（3）Ok，上面资源文件都定义好了，接下来我们就可以自定义SegmentView，由于使用到了weight属性，我们让SegmentView继承自LinearLayout，使用两个TextView，如下：

public class SegmentView extends LinearLayout {    private TextView leftTextView;    private TextView rightTextView;    // 实现不同的按钮状态，不同的颜色    ColorStateList csl = getResources().getColorStateList(R.color.titleTextOn);    ColorStateList cs2 = getResources().getColorStateList(R.color.titleTextOff);    private onSegmentViewClickListener segmentListener;    // 这是代码加载ui必须重写的方法    public SegmentView(Context context) {        super(context);        initView();    }    // 这是在xml布局使用必须重写的方法    public SegmentView(Context context, @Nullable AttributeSet attrs) {        super(context, attrs);        initView();    }    public SegmentView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        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("背题模式");        leftTextView.setTextColor(csl);        rightTextView.setTextColor(cs2);        // 设置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) {                leftTextView.setTextColor(csl);                rightTextView.setTextColor(cs2);                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) {                leftTextView.setTextColor(cs2);                rightTextView.setTextColor(csl);                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:background="#FE8058"                tools:context="com.feng.segmentviewandroidtest.MainActivity">    <com.feng.segmentviewandroidtest.SegmentView        android:id="@+id/segmentview"        android:layout_marginTop="20dp"        android:layout_width="160dp"        android:layout_height="25dp"        android:layout_centerHorizontal="true"        >    </com.feng.segmentviewandroidtest.SegmentView></RelativeLayout>

（5）来到MainActivity，设置点击事件，事件可以切换fragment等等

public class MainActivity extends AppCompatActivity {    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;                }            }        });    }}

阅读全文

0 0