Android 仿照IOS的分段控件SegmentContro(自定义控件 + 事件监听 + 背景选择器)

最新推荐文章于 2024-05-12 09:55:07 发布

Danielntz

最新推荐文章于 2024-05-12 09:55:07 发布

阅读量2.3k

点赞数

分类专栏： Android 开发文章标签： Android 分段控件仿IOS 事件监听

本文链接：https://blog.csdn.net/Danielntz/article/details/50547606

版权

Android 开发专栏收录该内容

20 篇文章 1 订阅

订阅专栏

在做项目的过程中，为了使界面美观，仿照IOS系统中的分段控件，写了一个android版的如下图：

1框架结构

2 主要类SegmentControlView.java文件

整体为自定义控件，继承LinearLayout,主要完成的功能有初始化组件，设定组件的大小，给组件添加文字和颜色和大小，给组件设置背景选择器，组件在布局中的位置，在布局中添加组件，添加自定义控件事件监听。

package com.example.testsegmentcontrol;

import org.xmlpull.v1.XmlPullParser;



import android.annotation.SuppressLint;
import android.content.Context;
import android.content.res.ColorStateList;
import android.util.AttributeSet;
import android.view.Gravity;
import android.view.View;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.view.View.OnClickListener;

public class SegmentView  extends LinearLayout {

     private TextView lateone = null;      //最近一周
     private TextView latetwo = null;      //最近一月
     private TextView latethree = null;    //最近三月
     private  View     line = null;        //竖线
     private  View     line1 = null;       //竖线
     private Onsegmentlistenerclicker  listener;
     private   SegmentView view1 = null;
     public SegmentView(Context context) {
		super(context);
		init();
		// TODO Auto-generated constructor stub
	}
     
     public SegmentView(Context context, AttributeSet attrs) {
  		super(context, attrs);
  		init();
  	}
  	
  	@SuppressLint("NewApi")
 	public SegmentView(Context context, AttributeSet attrs, int defStyleAttr) {
  		super(context, attrs, defStyleAttr);
  		init();
  	}
     //初始化
      public void init(){
      lateone = new TextView(getContext());
      latetwo = new TextView(getContext());
      latethree =   new TextView(getContext());
      line     =  new TextView(getContext());
      line1   =  new TextView(getContext());
      
      //用來描述控件的大小
      lateone.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT,1)); //参数为宽度和高度
      line.setLayoutParams(new LayoutParams(1,LayoutParams.MATCH_PARENT));
      latetwo.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT,1));
      line1.setLayoutParams(new LayoutParams(1,LayoutParams.MATCH_PARENT));
      latethree.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT,1));
      
      //添加控件文字及大小
      lateone.setText("最近一周");
      latetwo.setText("最近一月");
      latethree.setText("最近三月");
      lateone.setTextSize(16);
      latetwo.setTextSize(16);
      latethree.setTextSize(16);
      //设置文字的颜色
		XmlPullParser xrp = getResources().getXml(R.drawable.changewenzi); 
	    try {  
	        ColorStateList csl = ColorStateList.createFromXml(getResources(), xrp);  
	        lateone.setTextColor(csl);
	        latetwo.setTextColor(csl);
	        latethree.setTextColor(csl);
	      } catch (Exception e) {  
	    } 
      
      //控件在布局中的位置
      lateone.setGravity(Gravity.CENTER);
      latetwo.setGravity(Gravity.CENTER);
      latethree.setGravity(Gravity.CENTER);
      lateone.setPadding(3, 6, 3, 6);
      latetwo.setPadding(3, 6, 3, 6);
      latethree.setPadding(3, 6, 3, 6);
      lateone.setBackgroundResource(R.drawable.left);
      latetwo.setBackgroundResource(R.drawable.middle);
      latethree.setBackgroundResource(R.drawable.right);
      line.setBackgroundColor(getResources().getColor(R.color.blue));
      line1.setBackgroundColor(getResources().getColor(R.color.blue));
      
      //在此布局上添加组件
      this.removeAllViews();
      this.addView(lateone);
      this.addView(line);
      this.addView(latetwo);
      this.addView(line1);
      this.addView(latethree);
      this.invalidate();
      lateone.setSelected(true);
      
      
      //添加监听事件
      lateone.setOnClickListener(new OnClickListener() {
		
		@Override
		public void onClick(View v) {
			// TODO Auto-generated method stub
			if(lateone.isSelected()){
				return ;
			}
			lateone.setSelected(true);
            latetwo.setSelected(false);	
            latethree.setSelected(false);
            if(listener !=null){
            	 listener.setOnsegment(lateone, 0);
            }
		}
	});
      
      latetwo.setOnClickListener(new OnClickListener() {
		
		@Override
		public void onClick(View v) {
			// TODO Auto-generated method stub
			if(latetwo.isSelected()){
				return ;
			}
			lateone.setSelected(false);
            latetwo.setSelected(true);	
            latethree.setSelected(false);
            if(listener !=null){
                listener.setOnsegment(latetwo, 1);
            }
		}
		
	});
      
      latethree.setOnClickListener(new OnClickListener() {
  		
  		@Override
  		public void onClick(View v) {
  			// TODO Auto-generated method stub
  			if(latethree.isSelected()){
  				return ;
  			}
  			lateone.setSelected(false);
              latetwo.setSelected(false);	
              latethree.setSelected(true);
              if(listener !=null){
              	  listener.setOnsegment(latethree, 2);
              }
  		}
  		
  	});
		
	
    }
     
      
      public void setOnsegmentlistenerclicker( Onsegmentlistenerclicker listener){
    	       if(listener != null) 
    	     this.listener = listener;
      }   
	  
     
}

3 实现事件监听的接口设计OnSegmentControclickListener.java

package com.example.testsegmentcontrol;

import android.view.View;

public interface Onsegmentlistenerclicker {
      
	  public void setOnsegment(View v , int position);
}

4 MainActivity.java显示SegmentControl自定义控件并且实现监听事件作出相应的响应

package com.example.testsegmentcontrol;

import android.support.v7.app.ActionBarActivity;
import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Toast;

public class MainActivity extends Activity {
  
	   private     SegmentView  segmentview;
	
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		segmentview = (SegmentView)findViewById(R.id.showsegmentcontrol);
	   //设置对SegmentControl组件的监听
		segmentview.setOnsegmentlistenerclicker(new Onsegmentlistenerclicker() {
			
			@Override
			public void setOnsegment(View v, int position) {
				// TODO Auto-generated method stub
				     switch (position) {
					case 0:
						  Toast.makeText(getApplicationContext(), "nihao", 0).show();
						break;
	               case 1:
	            	   Toast.makeText(getApplicationContext(), "woshi", 0).show();
						break;
	              case 2:
	            	  Toast.makeText(getApplicationContext(), "haode", 0).show();
	              	break;

			
					}
			}
		});
	   
	
	
	
	
	
	}

	
}

4 背景选择器(在Drawable文件中)

changewenzi.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="@color/white"/>
	<item android:color="@color/blue"/>

</selector>

left.xml

solid 属性填充的颜色

corners 属性角的弧度

<?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="@color/blue" />
            <corners  android:topLeftRadius="3dip" android:bottomLeftRadius="3dip" android:topRightRadius="0dip" android:bottomRightRadius="0dip"/>
     </shape>
    </item>
    <item    >
        <shape   >
        <solid   android:color="@color/white"/>  
        <corners  android:topLeftRadius="3dip" android:bottomLeftRadius="3dip" android:topRightRadius="0dip" android:bottomRightRadius="0dip"/> 
        </shape>
 </item>

</selector>

middle.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="@color/blue"/>
           <corners android:topLeftRadius="0dip" android:bottomLeftRadius="0dip" android:topRightRadius="0dip" android:bottomRightRadius="0dip"/>
         </shape>
    </item>
    <item >
        <shape   >
         <solid   android:color="@color/white"/>
         <corners  android:topLeftRadius="0dip" android:bottomLeftRadius="0dip" android:topRightRadius="0dip" android:bottomRightRadius="0dip"/>
        </shape>
     </item>
</selector>

rigth.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="@color/blue"/>
            <corners android:topLeftRadius="0dip" android:bottomLeftRadius="0dip" android:topRightRadius="3dip" android:bottomRightRadius="3dip"/>
        </shape>
    </item>
 <item    >
     <shape   >
          <solid  android:color="@color/white"/>
          <corners android:topLeftRadius="0dip" android:bottomLeftRadius="0dip" android:topRightRadius="3dip" android:bottomRightRadius="3dip"/>
     </shape>
 </item>
    
    
</selector>

whole.xml

stroke 属性外围线条的属性(颜色，大小)

solid 属性填充的颜色

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item   >
         <shape >
             <stroke  android:color="@color/blue" android:width="3dip"/>
             <solid   android:color="@color/white"/>
             <corners android:topLeftRadius="3dip" android:bottomLeftRadius="3dip" android:topRightRadius="3dip" android:bottomRightRadius="3dip"/>
             
         </shape>
    </item>

</selector>

5 activity_main.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"
  >
      <com.example.testsegmentcontrol.SegmentView
             android:id="@+id/showsegmentcontrol"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
            android:background="@drawable/whole"
             android:padding="0.5dip"
             android:layout_centerInParent="true"
             >
        </com.example.testsegmentcontrol.SegmentView>
   

</RelativeLayout>

注意： android :padding="0.5dip"必须写上，否则whole.xml背景选择器物效果没有，因为padding属性指的是组件内的内容距离组件边缘的距离，如果不加，背景选择器无效果。

以上就是程序的主要代码，如果有什么建议可以给我说，欢迎评论，大家共同学习，源代码如下：

http://download.csdn.net/detail/danielntz/9411562