Android 高级UI设计笔记21:Android SegmentView(分段选择控件)
1. 分段控制(SegmentView)
首先我们先看看什么是SegmentView的效果,如下:
分段控制这个View控件是ios7的分段控制,和QQ消息页面顶部的效果一样,android没有这个控件,不过实现起来也比较简单,下面来实现这个样式,实现的样式最终效果如下:
2. SegmentView自定义实现的逻辑过程:
(1)首先我们要定义文字的颜色,文字是交给TextView显示的,当TextView选中和没有选中两者颜色是不一样的,我们在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:state_selected="true"
android:color="#ffffff">
</item> <item
android:color="#288455">
</item> </selector>
(2)然后在res/drawable下新建segment_left_background.xml和segment_right_background.xml
这两个都是Segment-消息 和 Segment-电话 选中和没有选中两种状态对应的不同背景填充
segment_left_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="#00c17c" /> <corners
android:bottomLeftRadius="15dp"
android:bottomRightRadius="0dp"
android:topLeftRadius="15dp"
android:topRightRadius="0dp" />
</shape>
</item> <item>
<shape>
<stroke android:width="1dp" android:color="#00c17c" />
<solid android:color="#ffffff" />
<corners android:bottomLeftRadius="15dp"
android:bottomRightRadius="0dp"
android:topLeftRadius="15dp"
android:topRightRadius="0dp" />
</shape>
</item> </selector>
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="#00c17c" /> <corners
android:bottomLeftRadius="0dp"
android:bottomRightRadius="15dp"
android:topLeftRadius="0dp"
android:topRightRadius="15dp" />
</shape>
</item> <item>
<shape>
<stroke android:width="1dp" android:color="#00c17c" />
<solid android:color="#ffffff" />
<corners
android:bottomLeftRadius="0dp"
android:bottomRightRadius="15dp"
android:topLeftRadius="0dp"
android:topRightRadius="15dp" />
</shape>
</item> </selector>
(3)Ok,上面资源文件都定义好了,接下来我们就可以自定义SegmentView,由于使用到了weight属性,我们让SegmentView继承自LinearLayout,使用两个TextView,如下:
package com.himi.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.widget.LinearLayout;
import android.widget.TextView; public class SegmentView extends LinearLayout {
private TextView leftTextView;
private TextView rightTextView;
private onSegmentViewClickListener segmentListener; // 这是代码加载ui必须重写的方法
public SegmentView(Context context) {
super(context);
initView();
} // 这是在xml布局使用必须重写的方法
public SegmentView(Context context, AttributeSet attrs) {
super(context, attrs);
initView();
} private void initView() {
leftTextView = new TextView(getContext());
rightTextView = new TextView(getContext()); // 设置textview的布局宽高并设置为weight属性都为1
leftTextView.setLayoutParams(new LayoutParams(0, LayoutParams.WRAP_CONTENT, 1));
rightTextView.setLayoutParams(new LayoutParams(0, LayoutParams.WRAP_CONTENT, 1)); // 初始化的默认文字
leftTextView.setText("消息");
rightTextView.setText("电话"); // 实现不同的按钮状态,不同的颜色
ColorStateList csl = getResources().getColorStateList(R.color.segment_text_color_selector);
leftTextView.setTextColor(csl);
rightTextView.setTextColor(csl); // 设置textview的内容位置居中
leftTextView.setGravity(Gravity.CENTER);
rightTextView.setGravity(Gravity.CENTER); // 设置textview的内边距
leftTextView.setPadding(5, 6, 5, 6);
rightTextView.setPadding(5, 6, 5, 6); // 设置文字大小
setSegmentTextSize(16); // 设置背景资源
leftTextView.setBackgroundResource(R.drawable.segment_left_background);
rightTextView.setBackgroundResource(R.drawable.segment_right_background); // 默认左侧textview为选中状态
leftTextView.setSelected(true); // 加入textview
this.removeAllViews();
this.addView(leftTextView);
this.addView(rightTextView);
this.invalidate();//重新draw() leftTextView.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
if (leftTextView.isSelected()) {
return;
}
leftTextView.setSelected(true);
rightTextView.setSelected(false);
if (segmentListener != null) {
segmentListener.onSegmentViewClick(leftTextView, 0);
}
}
}); rightTextView.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
if (rightTextView.isSelected()) {
return;
}
rightTextView.setSelected(true);
leftTextView.setSelected(false);
if (segmentListener != null) {
segmentListener.onSegmentViewClick(rightTextView, 1);
}
}
}); } /**
* 设置字体大小
*
* @param dp
*/
private void setSegmentTextSize(int dp) {
leftTextView.setTextSize(TypedValue.COMPLEX_UNIT_DIP, dp);
rightTextView.setTextSize(TypedValue.COMPLEX_UNIT_DIP, dp);
} /**
* 手动设置选中的状态
*
* @param i
*/
public void setSelect(int i) {
if (i == 0) {
leftTextView.setSelected(true);
rightTextView.setSelected(false);
} else {
leftTextView.setSelected(false);
rightTextView.setSelected(true);
}
} /**
* 设置控件显示的文字
*
* @param text
* @param position
*/
public void setSegmentText(CharSequence text, int position) {
if (position == 0) {
leftTextView.setText(text);
}
if (position == 1) {
rightTextView.setText(text);
}
} // 定义一个接口接收点击事件
public interface onSegmentViewClickListener {
public void onSegmentViewClick(View view, int postion);
} public void setOnSegmentViewClickListener(onSegmentViewClickListener segmentListener) {
this.segmentListener = segmentListener;
}
}
(4)上面定义好了SegmentView,接下来去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"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.himi.segmentviewdemo.MainActivity" > <com.himi.segmentviewdemo.SegmentView
android:id="@+id/segmentview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true" >
</com.himi.segmentviewdemo.SegmentView> </RelativeLayout>
(5)来到MainActivity,设置点击事件,事件可以切换fragment等等
package com.himi.segmentviewdemo; import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Toast; public class MainActivity extends Activity { private SegmentView mSegmentView; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main); mSegmentView = (SegmentView) findViewById(R.id.segmentview);
mSegmentView.setOnSegmentViewClickListener(new SegmentView.onSegmentViewClickListener() {
@Override
public void onSegmentViewClick(View view, int postion) {
switch (postion) {
case 0:
Toast.makeText(MainActivity.this, "点击了消息" + postion,
Toast.LENGTH_SHORT).show();
break;
case 1:
Toast.makeText(MainActivity.this, "点击了电话" + postion,
Toast.LENGTH_SHORT).show();
break;
default:
break;
}
}
});
} }
部署程序到手机上,如下:
Android 高级UI设计笔记21:Android SegmentView(分段选择控件)的更多相关文章
- Android 高级UI设计笔记11:Gallery(画廊控件)之Gallery基本使用
1. 这里要向大家介绍Android控件Gallery(画廊控件) Gallery控件主要用于横向显示图像列表,不过按常规做法.Gallery组件只能有限地显示指定的图像.也就是说,如果为Galler ...
- Android 高级UI设计笔记14:Gallery(画廊控件)之 3D图片浏览
1. 利用Gallery组件实现 3D图片浏览器的功能,如下: 2. 下面是详细的实现过程如下: (1)这里我是测试性代码,我的图片是自己添加到res/drawable/目录下的,如下: 但是开发中不 ...
- Android 高级UI设计笔记13:Gallery(画廊控件)之 循环显示图像
1. 循环显示图像的原理 循环显示有些类似于循环链表,最后一个结点的下一个结点又是第1个结点.循环显示图像也可以模拟这一点. 也许细心的读者从上一节实现的ImageAdapter类中会发现些什么.对 ...
- Android 高级UI设计笔记07:RecyclerView 的详解
1. 使用RecyclerView 在 Android 应用程序中列表是一个非常重要的控件,适用场合非常多,如新闻列表.应用列表.消息列表等等,但是从Android 一出生到现在并没有非常 ...
- Android 高级UI设计笔记06:仿微信图片选择器(转载)
仿微信图片选择器: 一.项目整体分析: 1. Android加载图片的3个目标: (1)尽可能的去避免内存溢出. a. 根据图片的显示大小去压缩图片 b. 使用缓存对我们图片进行管理(LruCache ...
- Android 高级UI设计笔记19:PopupWindow使用详解
1. PopupWindow使用 PopupWindow这个类用来实现一个弹出框,可以使用任意布局的View作为其内容,这个弹出框是悬浮在当前activity之上的. 2. PopupWindow使用 ...
- Android 高级UI设计笔记08:Android开发者常用的7款Android UI组件(转载)
Android开发是目前最热门的移动开发技术之一,随着开发者的不断努力和Android社区的进步,Android开发技术已经日趋成熟,当然,在Android开源社区中也涌现了很多不错的开源UI项目,它 ...
- Android 高级UI设计笔记02:可以拖动交换item位置的GridView(转载)
如果大家不知道GridView基本使用,可以先参见:Android(java)学习笔记154:使用GridView以及重写BaseAdapter 1. 首先我们明白GridView拖拽的思路: ()根 ...
- Android 高级UI设计笔记23:Android 夜间模式之 两种常用方法(降低屏幕亮度+替换theme)
1. 夜间模式 所谓的夜间模式,就是能够根据不同的设定,呈现不同风格的界面给用户,而且晚上看着不伤眼睛.特别是一些新闻类App实现夜间模式是非常人性化的,增强用户体验. 2. 我根据网上的资料 以及自 ...
随机推荐
- 个人用户安装SEP注意事项
一.安装时选择“非管控客户端” 二.安装时选择“自定义安装” 三.不要安装“应用程序与设备控制”,否则会拖慢开机 离线病毒库下载地址 http://www.symantec.com/securit ...
- POJ3321 Apple Tree (树状数组)
Apple Tree Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 16180 Accepted: 4836 Descr ...
- hdoj 5326 Work
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5326 #include<stdio.h> #include<cstring> ...
- EFFECTIVE OBJECTIVE-C 2.0 TIPS 总结 CHAPTER 1 & CHAPTER 2
下面只是对读到的所有 Tips 结合我平时开发中遇到的问题进行总结,每一个 Tips 和书中的每一条对应,本文的目的是去掉书中的大部分讨论的内容,让人能够马上使用这些 Tips,建议阅读过原书后食用更 ...
- ASP.NET MVC- 解决HTML转码
在MVC里从Controller发送一段带有HTML的文字到View视图时,MVC是会将这段代码进行转码的. 一.使用MvcHtmlString转HTML转码 如果想不让这段文字进行转码,以HTML的 ...
- git/github 使用
原文:http://www.cnblogs.com/fnng/archive/2011/08/25/2153807.html git/github学习笔记 Posted on 2011-08-25 2 ...
- 网页打印时设置A4大小
最近开发项目时遇到了网页打印的问题,这是问题之二,打印宽度设置 在公制长度单位与屏幕分辨率进行换算时,必须用到一个DPI(Dot Per Inch)指标. 经过我仔细的测试,发现了网页打印中,默认采用 ...
- STM32的TAMPER-RTC管脚作为Tamper使用 - 防拆机
当 TAMPER引脚上的信号从 0变成1或者从 1变成 0(取决于备份控制寄存器BKP_CR的 TPAL位),会产生一个侵入检测事件.侵入检测事件将所有数据备份寄存器内容清除. 然而为了避免丢失侵入 ...
- Java常见排序算法之堆排序
在学习算法的过程中,我们难免会接触很多和排序相关的算法.总而言之,对于任何编程人员来说,基本的排序算法是必须要掌握的. 从今天开始,我们将要进行基本的排序算法的讲解.Are you ready?Let ...
- Codeforces Round #307 (Div. 2) B. ZgukistringZ 暴力
B. ZgukistringZ Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/551/probl ...