高仿QQ顶部控件之IOS SegmentView

经常会看到QQ上面有一个 消息和电话 的顶部面板，这个空间是IOS7的分段控制，android中没有这个控件，
今天在威哥的微信公众号中成功gank到这个自定义控件的实现，下面跟着尝试一波。

首先是定义文字的颜色，在res/color下新建segment_text_color_selector.xml文件

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#2ccbf2" android:state_selected="true"/>
    <item android:color="#a7a7a7" android:state_selected="false"/>

</selector>

　　

然后在res/drawable下新建segment_left_background.xml和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="#cfcece"/>
            <corners android:bottomLeftRadius="5dp" android:topLeftRadius="5dp"
                     android:bottomRightRadius="0dp" android:topRightRadius="0dp"/>
        </shape>
    </item>
</selector>

　

<?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="#cfcece"/>
            <corners android:bottomLeftRadius="0dp" android:topLeftRadius="0dp"
                     android:bottomRightRadius="5dp" android:topRightRadius="5dp"/>
        </shape>
    </item>
</selector>

　　

　

Ok，资源文件已备好，下面开始自定义segmentView，由于要用到weight属性，我们继承LinearLayout，使用两个textview。

package com.example.nanchen.segmentviewdemo;

import android.content.Context;
import android.content.res.ColorStateList;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import android.widget.TextView;

/**
 * 自定义SegmentView 使用两个TextView
 * Created by 南尘 on 2016/7/11.
 */
public class SegmentView extends LinearLayout {
    private TextView tv_left;
    private TextView tv_right;
    private onSegmentViewClickListener segmentViewClickListener;

    /**
     * 这是代码加载UI必须重写的方法
     * @param context
     */
    public SegmentView(Context context) {
        super(context);
        initView();
    }

    /**
     * 这是在xml布局使用必须重写的方法
     * @param context
     * @param attrs
     */
    public SegmentView(Context context, AttributeSet attrs){
        super(context,attrs);
        initView();

    }
    private void initView() {
        tv_left = new TextView(getContext());
        tv_right = new TextView(getContext());

        //设置TextView的布局宽高并设置weight属性都为1
        tv_left.setLayoutParams(new LayoutParams(0, ViewGroup.LayoutParams.WRAP_CONTENT,1));;
        tv_right.setLayoutParams(new LayoutParams(0, ViewGroup.LayoutParams.WRAP_CONTENT,1));;

        //初始化默认文字
        tv_left.setText("消息");
        tv_right.setText("电话");

        //实现不同的按钮状态，不同的颜色
        ColorStateList csl = getResources().getColorStateList(R.color.segment_text_color_selector);
        tv_left.setTextColor(csl);
        tv_right.setTextColor(csl);

        //设置内容居中
        tv_left.setGravity(Gravity.CENTER);
        tv_right.setGravity(Gravity.CENTER);

        //设置TextView的内边距
        tv_left.setPadding(5,6,5,6);
        tv_right.setPadding(5,6,5,6);

        //设置文字大小
        setSegmentTextSize(14);

        //设置背景资源
        tv_left.setBackgroundResource(R.drawable.segment_left_background);
        tv_right.setBackgroundResource(R.drawable.segment_right_background);

        //默认左侧为选中状态
        tv_left.setSelected(true);

        //加入TextView
        this.removeAllViews();
        this.addView(tv_left);
        this.addView(tv_right);
        this.invalidate();

        tv_left.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                if (tv_left.isSelected()){
                    return;
                }
                tv_left.setSelected(true);
                tv_right.setSelected(false);
                if(segmentViewClickListener!=null){
                    segmentViewClickListener.onSegmentViewClick(tv_left,0);
                }
            }
        });
        tv_right.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                if (tv_right.isSelected()){
                    return;
                }
                tv_left.setSelected(false);
                tv_right.setSelected(true);
                if(segmentViewClickListener!=null){
                    segmentViewClickListener.onSegmentViewClick(tv_right,1);
                }
            }
        });
    }

    /**
     * 设置字体大小
     * @param dp
     */
    private void setSegmentTextSize(int dp){
        tv_left.setTextSize(TypedValue.COMPLEX_UNIT_DIP,dp);
        tv_right.setTextSize(TypedValue.COMPLEX_UNIT_DIP,dp);
    }

    /**
     * 定义一个接口用于接收点击事件
     */
    public interface onSegmentViewClickListener{
        public void onSegmentViewClick(View view,int position);
    }

    /**
     * 手动设置选中的状态
     *
     * @param i
     */
    public void setSelect(int i) {
        if (i == 0) {
            tv_left.setSelected(true);
            tv_right.setSelected(false);
        } else {
            tv_left.setSelected(false);
            tv_right.setSelected(true);
        }
    }

    public void setOnSegmentViewClickListener(
            onSegmentViewClickListener segmentViewClickListener) {
        this.segmentViewClickListener = segmentViewClickListener;
    }

    /**
     * 设置控件显示的文字
     *
     * @param text
     * @param position
     */
    public void setSegmentText(CharSequence text, int position) {
        if (position == 0) {
            tv_left.setText(text);
        }
        if (position == 1) {
            tv_right.setText(text);
        }
    }

}

　　

在XML文件中的引用：

<?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="wrap_content"
    android:background="#03fbc5"
    tools:context="com.example.nanchen.segmentviewdemo.MainActivity">

    <com.example.nanchen.segmentviewdemo.SegmentView
        android:orientation="horizontal"
        android:id="@+id/main_segment"
        android:layout_centerInParent="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

    </com.example.nanchen.segmentviewdemo.SegmentView>
</RelativeLayout>

　　

最后是我们的Activity

package com.example.nanchen.segmentviewdemo;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    private SegmentView segmentView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        segmentView = (SegmentView) findViewById(R.id.main_segment);

        segmentView.setOnSegmentViewClickListener(new SegmentView.onSegmentViewClickListener() {
            @Override
            public void onSegmentViewClick(View view, int position) {
                switch (position){
                    case 0:
                        Toast.makeText(MainActivity.this, "点击了消息"+position,Toast.LENGTH_SHORT).show();
                        break;
                    case 1:
                        Toast.makeText(MainActivity.this, "点击了电话"+position,Toast.LENGTH_SHORT).show();
                        break;
                    default:
                        break;
                }
            }
        });
    }
}

　　

其实这些东西都只是为了重温自定义View，理清其中必不可少的步骤，自定义View上就简单多了。期待大家一起交流学习吧。