高仿QQ顶部控件之IOS SegmentView

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

高仿QQ顶部控件之IOS SegmentView
首先是定义文字的颜色，在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上就简单多了。期待大家一起交流学习吧。

秒客网

高仿QQ顶部控件之IOS SegmentView

相关文章