Android仿iOS7的UISegmentedControl 分段

效果图:

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

首先是两个按钮的背景:

res/drawable/seg_left.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: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

<?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

<?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

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);
	}
}

布局文件引用

<?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 分段

时间: 2024-08-28 16:59:54

Android仿iOS7的UISegmentedControl 分段的相关文章

Android仿京东首页轮播文字(又名垂直跑马灯)

Android仿京东首页轮播文字(又名垂直跑马灯) 京东客户端的轮播文字效果: 本次要实现的只是后面滚动的文字(前面的用ImageView或者TextView实现即可),看一下实现的效果 实现思路 上图只是一个大概的思路,要实现还需要完善更多的细节,下面会一步步的来实现这个效果: 1.封装数据源:从图上可以看到,轮播的文字是分为两个部分的,暂且把它们分别叫做前缀和内容,而且实际的使用过程中点击轮播图肯定是需要跳转页面的,而且大部分应该是WebView,不妨我们就设置点击时候需要获取的内容就是一个

【Android 仿微信通讯录 导航分组列表-上】使用ItemDecoration为RecyclerView打造带悬停头部的分组列表

[Android 仿微信通讯录 导航分组列表-上]使用ItemDecoration为RecyclerView打造带悬停头部的分组列表 一 概述 本文是Android导航分组列表系列上,因时间和篇幅原因分上下,最终上下合璧,完整版效果如下: 上部残卷效果如下:两个ItemDecoration,一个实现悬停头部分组列表功能,一个实现分割线(官方demo) 网上关于实现带悬停分组头部的列表的方法有很多,像我看过有主席的自定义ExpandListView实现的,也看过有人用一个额外的父布局里面套 Rec

Android仿微信UI布局视图(圆角布局的实现)

圆角按钮,或布局可以在xml文件中实现,但也可以使用图片直接达到所需的效果,以前版本的微信就使用了这种方法. 实现效果图:    不得不说,这种做法还是比较方便的. 源代码: MainActivity(没写任何代码,效果全在布局文件中实现): package com.android_settings; import android.app.Activity; import android.os.Bundle; public class MainActivity extends Activity

Android仿IOS回弹效果 ScrollView回弹 总结

Android仿IOS回弹效果  ScrollView回弹 总结 应项目中的需求  需要仿IOS 下拉回弹的效果 , 我在网上搜了很多 大多数都是拿scrollview 改吧改吧 试了一些  发现总有点小问题 下面的代码是我对大家发布的做了点小修改   觉得没太大问题 package com.example.myscrollview; import android.content.Context; import android.graphics.Rect; import android.util

Android仿小米商城底部导航栏之二(BottomNavigationBar、ViewPager和Fragment的联动使用)

简介 在前文<Android仿小米商城底部导航栏(基于BottomNavigationBar)>我们使用BottomNavigationBar控件模仿实现了小米商城底部导航栏效果.接下来更进一步的,我们将通过BottomNavigationBar控件和ViewPager空间的联动使用来实现主界面的滑动导航. 导航是移动应用最重要的方面之一,对用户体验是良好还是糟糕起着至关重要的作用.好的导航可以让一款应用更加易用并且让用户快速上手.相反,糟糕的应用导航很容易让人讨厌,并遭到用户的抛弃.为了打造

Android仿微信下拉列表实现

林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 本文要实现微信6.1中点击顶部菜单栏的"+"号按钮时,会弹出一个列表框.这里用的了Activity实现,其实最好的方法可以用ActionBar,不过这货好像只支持3.0以后的版本.本文的接上文Android仿微信底部菜单栏+顶部菜单栏(附源码) 效果: 一.仿微信下拉列表布局pop_dialog.xml <?xml version="1.0" encodi

android 仿小米icon处理,加阴影和边框

本人自己在做一个launcher,所以需要处理icon,加阴影和边框等.这只是一种处理方法,其他的处理方法类似. 源代码: https://github.com/com314159/LauncherIconMaskEffect 效果图: 核心思想: 1. 绘制边框时,先取原图片的颜色,再根据颜色绘制边框,加上了渐变效果 2.添加阴影其实非常简单,只是加了一张背景图片 android 仿小米icon处理,加阴影和边框,布布扣,bubuko.com

android 仿ppt进入动画效果合集

EnterAnimation android 仿ppt进入动画效果合集, 百叶窗效果,擦除效果,盒状效果,阶梯效果,菱形效果,轮子效果,劈裂效果,棋盘效果, 切入效果,扇形展开效果,十字扩展效果,随机线条效果,向内溶解效果,圆形扩展效果, 适用于各种view和viewgroup,activity即用于页面根部viewgroup, 自定义viewgroup自动换行layout, 看效果图 Series of entrance animation effects just like ppt in A

Android 仿PhotoShop调色板应用(三) 主体界面绘制

版权声明:本文为博主原创文章,未经博主允许不得转载. Android 仿PhotoShop调色板应用(三) 主体界面绘制    关于PhotoShop调色板应用的实现我总结了两个最核心的部分:   1. 主体界面不同区域的绘制   2. 颜色选择的生成与交互 这里我讲述一下第一要点,也就是ColorPickerDialog对主体界面的绘制. 首先还是看一下ColorPickerDialog整体显示的效果(见图1)     图1 对应着效果图我画了一张界面结构分析图,相信看了之后会对该界面的组成很