Android仿iOS7的UISegmentedControl 分段-阿里云开发者社区

Android仿iOS7的UISegmentedControl 分段

2015-07-25 2071

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

效果图：

这里只简单做了两个按钮的。

首先是两个按钮的背景：

res/drawable/seg_left.xml

[html]view plaincopy 
   
<?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:color="#0079FF" android:width="1dp"/>  
            <solid android:color="#0079FF"/>  
            <corners android:topLeftRadius="3dp" android:bottomLeftRadius="3dp" android:topRightRadius="0dp" android:bottomRightRadius="0dp"/>  
        </shape>  
    </item>  
    <item>  
        <shape >  
            <stroke android:color="#0079FF" android:width="1dp"/>  
            <solid android:color="#FFFFFF"/>  
            <corners android:topLeftRadius="3dp" android:bottomLeftRadius="3dp" android:topRightRadius="0dp" android:bottomRightRadius="0dp"/>  
        </shape>  
    </item>  
</selector>  

res/drawable/seg_right.xml

[html]view plaincopy 
   
<?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:color="#0079FF" android:width="1dp"/>  
            <solid android:color="#0079FF"/>  
            <corners android:topLeftRadius="0dp" android:bottomLeftRadius="0dp" android:topRightRadius="3dp" android:bottomRightRadius="3dp"/>  
        </shape>  
    </item>  
    <item>  
        <shape >  
            <stroke android:color="#0079FF" android:width="1dp"/>  
            <solid android:color="#FFFFFF"/>  
            <corners android:topLeftRadius="0dp" android:bottomLeftRadius="0dp" android:topRightRadius="3dp" android:bottomRightRadius="3dp"/>  
        </shape>  
    </item>  
</selector>  

字体颜色：

res/drawable/seg_text_color_selector.xml

[html]view plaincopy 
   
<?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 android:color="#0079FF"/>  
</selector>  

这几个是对选中状态进行设置。

下面对LinearLayout进行改造~~~

其实就是放两个TextView。

SegmentView.java

[java]view plaincopy 
   
package cn.haiwan.app.widget;  
  
import org.xmlpull.v1.XmlPullParser;  
  
import android.R.integer;  
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.widget.LinearLayout;  
import android.widget.TextView;  
import cn.haiwan.R;  
  
public class SegmentView extends LinearLayout {  
    private TextView textView1;  
    private TextView textView2;  
    private onSegmentViewClickListener listener;  
    public SegmentView(Context context, AttributeSet attrs) {  
        super(context, attrs);  
        init();  
    }  
      
    public SegmentView(Context context) {  
        super(context);  
        init();  
    }  
  
    private void init() {  
//      this.setLayoutParams(new LinearLayout.LayoutParams(dp2Px(getContext(), 60), LinearLayout.LayoutParams.WRAP_CONTENT));  
        textView1 = new TextView(getContext());  
        textView2 = new TextView(getContext());  
        textView1.setLayoutParams(new LayoutParams(0, LayoutParams.WRAP_CONTENT, 1));  
        textView2.setLayoutParams(new LayoutParams(0, LayoutParams.WRAP_CONTENT, 1));  
        textView1.setText("SEG1");  
        textView2.setText("SEG2");  
        XmlPullParser xrp = getResources().getXml(R.drawable.seg_text_color_selector);    
        try {    
            ColorStateList csl = ColorStateList.createFromXml(getResources(), xrp);    
            textView1.setTextColor(csl);  
            textView2.setTextColor(csl);  
          } catch (Exception e) {    
        }   
        textView1.setGravity(Gravity.CENTER);  
        textView2.setGravity(Gravity.CENTER);  
        textView1.setPadding(3, 6, 3, 6);  
        textView2.setPadding(3, 6, 3, 6);  
        setSegmentTextSize(16);  
        textView1.setBackgroundResource(R.drawable.seg_left);  
        textView2.setBackgroundResource(R.drawable.seg_right);  
        textView1.setSelected(true);  
        this.removeAllViews();  
        this.addView(textView1);  
        this.addView(textView2);  
        this.invalidate();  
          
        textView1.setOnClickListener(new OnClickListener() {  
              
            @Override  
            public void onClick(View v) {  
                if (textView1.isSelected()) {  
                    return;  
                }  
                textView1.setSelected(true);  
                textView2.setSelected(false);  
                if (listener != null) {  
                    listener.onSegmentViewClick(textView1, 0);  
                }  
            }  
        });  
        textView2.setOnClickListener(new OnClickListener() {  
              
            @Override  
            public void onClick(View v) {  
                if (textView2.isSelected()) {  
                    return;  
                }  
                textView2.setSelected(true);  
                textView1.setSelected(false);  
                if (listener != null) {  
                    listener.onSegmentViewClick(textView2, 1);  
                }  
            }  
        });  
    }  
    /** 
     * 设置字体大小 单位dip 
     * <p>2014年7月18日</p> 
     * @param dp 
     * @author RANDY.ZHANG 
     */  
    public void setSegmentTextSize(int dp) {  
        textView1.setTextSize(TypedValue.COMPLEX_UNIT_DIP, dp);  
        textView2.setTextSize(TypedValue.COMPLEX_UNIT_DIP, dp);  
    }  
      
    private static int dp2Px(Context context, float dp) {  
        final float scale = context.getResources().getDisplayMetrics().density;  
        return (int) (dp * scale + 0.5f);  
    }  
      
    public void setOnSegmentViewClickListener(onSegmentViewClickListener listener) {  
        this.listener = listener;  
    }  
      
      
    /** 
     * 设置文字 
     * <p>2014年7月18日</p> 
     * @param text 
     * @param position 
     * @author RANDY.ZHANG 
     */  
    public void setSegmentText(CharSequence text,int position) {  
        if (position == 0) {  
            textView1.setText(text);  
        }  
        if (position == 1) {  
            textView2.setText(text);  
        }  
    }  
      
    public static interface onSegmentViewClickListener{  
        /** 
         *  
         * <p>2014年7月18日</p> 
         * @param v 
         * @param position 0-左边 1-右边 
         * @author RANDY.ZHANG 
         */  
        public void onSegmentViewClick(View v,int position);  
    }  
}  

布局文件引用

[java]view plaincopy 
   
<?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="match_parent"  
    android:orientation="vertical" >  
     
    <cn.haiwan.app.widget.SegmentView   
        android:layout_width="160dp"  
        android:layout_height="wrap_content"  
        android:layout_gravity="center_horizontal"  
        />  
</LinearLayout>  

Android仿iOS7的UISegmentedControl 分段

热门文章

最新文章

相关课程

相关电子书

推荐镜像

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

Android仿iOS7的UISegmentedControl 分段

热门文章

最新文章

相关课程

相关电子书

推荐镜像