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


首先是定义文字的颜色,在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的更多相关文章

  1. 史上最简单,一步集成侧滑(删除)菜单,高仿QQ、IOS。

    重要的话 开头说,not for the RecyclerView or ListView, for the Any ViewGroup. 本控件不依赖任何父布局,不是针对 RecyclerView. ...

  2. iOS天气动画、高仿QQ菜单、放京东APP、高仿微信、推送消息等源码

    iOS精选源码 TYCyclePagerView iOS上的一个无限循环轮播图组件 iOS高仿微信完整项目源码 想要更简单的推送消息,看本文就对了 ScrollView嵌套ScrolloView解决方 ...

  3. 高仿QQ即时聊天软件开发系列之三登录窗口用户选择下拉框

    上一篇高仿QQ即时聊天软件开发系列之二登录窗口界面写了一个大概的布局和原理 这一篇详细说下拉框的实现原理 先上最终效果图 一开始其实只是想给下拉框加一个placeholder效果,让下拉框在未选择未输 ...

  4. 高仿QQ即时聊天软件开发系列之二登录窗口界面

    继上一篇高仿QQ即时聊天软件开发系列之一开端之后,开始做登录窗口 废话不多说,先看效果,只有界面 可能还有一些细节地方没有做,例如那个LOGO嘛,不要在意这些细节 GIF虽短,可是这做起来真难,好吧因 ...

  5. 高仿QQ即时聊天软件开发系列之一开端

    前段时间在园子里看到一个大神做了一个GG2014IM软件,仿QQ的,那感觉···,赶快下载源码过来试试,还真能直接跑起来,效果也不错.但一看源码,全都给封装到了ESFramework里面了,音视频那部 ...

  6. 安卓高仿QQ头像截取升级版

    观看此篇文章前,请先阅读上篇文章:高仿QQ头像截取: 本篇之所以为升级版,是在截取头像界面添加了与qq类似的阴影层(裁剪区域以外的部分),且看效果图:   为了适应大家不同需求,这次打了两个包,及上图 ...

  7. Android实现高仿QQ附近的人搜索展示

    本文主要实现了高仿QQ附近的人搜索展示,用到了自定义控件的方法 最终效果如下 1.下面展示列表我们可以使用ViewPager来实现(当然如果你不觉得麻烦,你也可以用HorizontalScrollVi ...

  8. 高仿QQ的即时通讯应用带服务端软件安装

    Android 基于xmpp协议,smack包,openfire服务端(在下面)的高仿QQ的即时通讯实现.实现了注册,登录,读取好友列表,搜索好友,添加分组,添加好友,删除好友,修改心情,两个客户端之 ...

  9. 高仿qq聊天界面

    高仿qq聊天界面,给有需要的人,界面效果如下: 真心觉得做界面非常痛苦,给有需要的朋友. chat.xml <?xml version="1.0" encoding=&quo ...

随机推荐

  1. [linux]阿里云主机的免登陆安全SSH配置与思考

    公司服务器使用的第三方云端服务,即阿里云,而本地需要经常去登录到服务器做相应的配置工作,鉴于此,每次登录都要使用密码是比较烦躁的,本着极速思想,我们需要配置我们的免登陆. 一 理论概述 SSH介绍 S ...

  2. 火焰图分析openresty性能瓶颈

    注:本文操作基于CentOS 系统 准备工作 用wget从https://sourceware.org/systemtap/ftp/releases/下载最新版的systemtap.tar.gz压缩包 ...

  3. 如何一步一步用DDD设计一个电商网站(三)—— 初涉核心域

    一.前言 结合我们本次系列的第一篇博文中提到的上下文映射图(传送门:如何一步一步用DDD设计一个电商网站(一)—— 先理解核心概念),得知我们这个电商网站的核心域就是销售子域.因为电子商务是以信息网络 ...

  4. C语言 · 最大值与最小值计算

    输入11个整数,计算它们的最大值和最小值. 样例输入 0 1 2 3 4 5 6 7 8 9 10 样例输出 10 0   #include<stdio.h> int main(){ ]; ...

  5. 事务日志已满,原因为“ACTIVE_TRANSACTION”

    汇总篇:http://www.cnblogs.com/dunitian/p/4822808.html#tsql 异常处理汇总-数据库系列  http://www.cnblogs.com/dunitia ...

  6. Hawk 5. 数据库系统

    Hawk在设计之初,就是以弱schema风格定义的.没有严格的列名和列属性.用C#这样的静态强类型语言编写Hawk,其实并不方便.但弱schema让Hawk变得更灵活更强大. 因此,Hawk虽然之前支 ...

  7. zookeeper源码分析之一服务端启动过程

    zookeeper简介 zookeeper是为分布式应用提供分布式协作服务的开源软件.它提供了一组简单的原子操作,分布式应用可以基于这些原子操作来实现更高层次的同步服务,配置维护,组管理和命名.zoo ...

  8. 用MongoDB分析合肥餐饮业

    看了<从数据角度解析福州美食>后难免心痒,动了要分析合肥餐饮业的念头,因此特地写了Node.js爬虫爬取了合肥的大众点评数据.分析数据库我并没有采用MySQL而是用的MongoDB,是因为 ...

  9. 热修复-Tinker

    微信开源,真是喜出望外,必须要去看看啊,比起nuwa来微信好很多,而且github上也有专门的官方文档说明,还有很多资料查询 参考地址:https://github.com/Tencent/tinke ...

  10. Create a bridge using a tagged vlan (8021.q) interface

    SOLUTION VERIFIED April 27 2013 KB26727 Environment Red Hat Enterprise Linux 5 Red Hat Enterprise Li ...