经常会看到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平台 Oracle 10gR2(10.2.0.5)RAC安装 Part1:准备工作

    Linux平台 Oracle 10gR2(10.2.0.5)RAC安装 Part1:准备工作 环境:OEL 5.7 + Oracle 10.2.0.5 RAC 1.实施前准备工作 1.1 服务器安装操 ...

  2. win7安装时,避免产生100m系统保留分区的办法

    在通过光盘或者U盘安装Win7操作系统时,在对新硬盘进行分区时,会自动产生100m的系统保留分区.对于有洁癖的人来说,这个不可见又删不掉的分区是个苦恼.下面介绍通过diskpart消灭保留分区的办法: ...

  3. Web APi之认证(Authentication)两种实现方式【二】(十三)

    前言 上一节我们详细讲解了认证及其基本信息,这一节我们通过两种不同方式来实现认证,并且分析如何合理的利用这两种方式,文中涉及到的基础知识,请参看上一篇文中,就不再叙述废话. 序言 对于所谓的认证说到底 ...

  4. 开始学nodejs——net模块

    net模块的组成部分 详见 http://nodejs.cn/api/net.html 下面整理出了整个net模块的知识结构,和各个事件.方法.属性的用法 net.Server类 net.Socket ...

  5. My TWI

    前言 对TWI没有什么特别的印象,因为有一个更出名的TWU,而我去年又刚好错过了它,因此TWU的光辉完全掩盖了TWI.对TWI印象最深的是在邮件中看到的38th北京的这期,看到他们的图文记录,在圈子中 ...

  6. CRL快速开发框架系列教程十三(嵌套查询)

    本系列目录 CRL快速开发框架系列教程一(Code First数据表不需再关心) CRL快速开发框架系列教程二(基于Lambda表达式查询) CRL快速开发框架系列教程三(更新数据) CRL快速开发框 ...

  7. zookeeper源码分析之四服务端(单机)处理请求流程

    上文: zookeeper源码分析之一服务端启动过程 中,我们介绍了zookeeper服务器的启动过程,其中单机是ZookeeperServer启动,集群使用QuorumPeer启动,那么这次我们分析 ...

  8. LoadRunner函数百科叒叒叒更新了!

    首先要沉痛通知每周四固定栏目[学霸君]由于小编外派公干,本周暂停. 那么这周就由云层君来顶替了,当然要要说下自己做的内容啦,DuangDuang! <LoadRunner函数百科>更新通知 ...

  9. java中Action层、Service层和Dao层的功能区分

    Action/Service/DAO简介: Action是管理业务(Service)调度和管理跳转的. Service是管理具体的功能的. Action只负责管理,而Service负责实施. DAO只 ...

  10. 【SAP业务模式】之ICS(六):发票输出类型

    这篇开始主要讲述发票输出类型: 首先我们新建一个发票类型,用于公司间的发票MIV,而标准的发票类型还是F2保持不变: 一.新建发票类型: 目录:SPRO-销售与分销-出具发票-开票凭证-定义出具发票类 ...