文档章节

【安卓自定义控件系列】安卓自定义控件之组合控件

htq
 htq
发布于 2016/07/26 09:41
字数 1920
阅读 14
收藏 0


在安卓开发中,谷歌已经为我们提供了许多原生控件,基本上能够满足我们日常的开发需求,但是某些项目中原生控件可能达不到产品所要求的各式各样的酷炫效果或功能效果,这个时候我们只能自己自定义控件来满足项目需求,我们知道自定义控件包括三种方式:

1继承控件,即继承谷歌提供的原生控件,在此基础上提供一些原生控件不具备的功能,如github上各种酷炫效果的开源组件基本上都是采用的这种方式.

2组合控件:即组合多个原生控件来达到某些单个原生控件原本不具备的功能,这个在日常开发中应该是使用的比较多的,如基本上每个App都存在一个标题栏,而这些标题栏是可以被复用的,此时我们可以将其抽象出来组合为一个控件,这样在需要标题栏的地方直接使用该控件。(当然也可以采用include布局的方式,但是这样仅仅只是界面复用而已,功能不能复用)

3自绘控件:即直接继承自View类,然后自己重写onDraw方法,某些情况下可能需要重写onMeasure方法。


这三种方式,第一种方式我们使用的很少,因为github上大量优秀的开源组件就是采用的这种方式,如下拉刷新上拉加载的listView,侧滑删除的listView等,因此我们只需要直接拿来用就可以了,不要去重复造轮子,当然如果是学习自定义控件的知识的话,我们也可以直接去阅读这些开源项目的源代码,第二种方式我们使用的比较多的地方就是一个App的标题栏,通常都是采用的这种方式来完成的,第三种方式在一般的项目中很少使用到,除非项目需要完成一些复杂的效果。本博客将以第二中方式即组合控件为例来讲解安卓自定义控件的使用,将以模仿腾讯QQ的标题栏为例来教大家如何自定义组合控件。首先我们来看一下腾讯QQ的标题栏。然后按照这个样子我们自己模仿自定义一个标题栏控件。当然QQ的标题栏还是比较复杂的,因为标题栏中的文字会随着用户点击底部不同的button而显示不同的内容,当然这个功能个也很好实现,关键是如果要截图的话得截几张图,这里我就选择最具代表性的一个界面,其余的看官可以自己用QQ试一下。


可以看到在左侧是一个ImageView,中间是两个button,点击不同button显示不同内容,当然这是在消息界面,因此中间是两个button,而在联系人与动态界面中间只显示文字而已,因此此时中间是TextView,右侧基本上也是同样的道理。所以第一步我们需要在layout布局文件中组合控件来到达这样的一个界面效果。

common_title_bar的layout文件如下:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/relativeLayout1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" 
        android:background="#fff"
       >

    <hq.king.view.CircleImageView
        android:paddingLeft="4dp"
        android:id="@+id/title_bar_leftImg"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="7dp"
        android:background="@drawable/title_bar_image_shape"
        app:civ_border_width="1dp"
        app:civ_border_color="@color/blue"
        />
 
    <TextView
        android:id="@+id/center_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_marginLeft="14dp" />

    <Button
        android:id="@+id/title_bar_rightBtn"
        android:layout_width="35dp"
        android:layout_height="30dp"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:layout_marginTop="7dp"
        android:layout_marginRight="3dp"
        android:background="#fff"/>


    <LinearLayout
        android:id="@+id/title_bar_linearLayout"
        android:layout_width="150dp"
        android:layout_height="30dp"
        android:layout_centerInParent="true"
        android:layout_marginLeft="60dp"
        android:layout_toRightOf="@+id/imageView1" >



        <Button
            android:id="@+id/title_bar_linear_leftBtn"
            android:layout_width="70dp"
            android:layout_height="30dp"
            android:background="@drawable/title_bar_linear_leftbtn_shape"
             />

        <Button
            android:id="@+id/title_bar_linear_rightBtn"
            android:layout_width="70dp"
            android:layout_height="30dp"
            android:background="@drawable/title_bar_linear_rightbtn_shape"/>
        
    </LinearLayout>
</RelativeLayout>
可以看到该布局的根布局是一个RelativeLayout,当然这个是和具体的组合控件的界面相关的,不过像这种标题栏我们一般都使用RelativeLayout布局,然后在该布局中我们基本上按照前面的分析组合了几个原生的控件,当然那个ImageView为了达到和腾讯QQ一样的效果,我采用的是开源的CircleImageView,这些组合控件之间的位置关系通过相对布局来控制。

接下来就是自定义组合控件了,代码如下:

public class TitleBarView extends RelativeLayout {

	private Context mContext;
	Button rightBtn;
	TextView center_tv;
	LinearLayout title_linearlayout;
	Button linear_leftBtn;
	Button linear_rightBtn;
	ImageView leftImg;
	
	public TitleBarView(Context context) {
		super(context);
		mContext=context;
		findView();
		// TODO Auto-generated constructor stub
	}

	public TitleBarView(Context context, AttributeSet attrs) {
		super(context, attrs);
		mContext=context;
		findView();
	}
	public void findView()
	{
		
		LayoutInflater.from(mContext).inflate(R.layout.common_title_bar, this);
		
		 leftImg=(ImageView) findViewById(R.id.title_bar_leftImg);
		 rightBtn=(Button)findViewById(R.id.title_bar_rightBtn);
		 center_tv=(TextView) findViewById(R.id.center_tv);
		 title_linearlayout=(LinearLayout) findViewById(R.id.title_bar_linearLayout);
		 linear_leftBtn=(Button) findViewById(R.id.title_bar_linear_leftBtn);
		 linear_rightBtn=(Button) findViewById(R.id.title_bar_linear_rightBtn);
		
		
		
	}
	public void setCommonTitle(int leftImg_vi,int centerLinear_vi,int textView_vi,int rightBtn_vi)
	{
	   
		leftImg.setVisibility(leftImg_vi);
		title_linearlayout.setVisibility(centerLinear_vi);
		center_tv.setVisibility(textView_vi);
		rightBtn.setVisibility(rightBtn_vi);
		
	}
	public void setDefaultImgLeft(int icon){
		Drawable img=mContext.getResources().getDrawable(icon);
		leftImg.setImageDrawable(img);;
	}
	public void setUserImgLeft(Bitmap bitmap)
	{
		leftImg.setImageBitmap(bitmap);
		
	}
	public void setBtnRight(int icon)
	{
		rightBtn.setText(icon);
		
	}
	public void setBtnRightText(String str)
	{
		rightBtn.setText(str);
		
	}
	
	public void setBtnRightIcon(int icon)
	{
		
		Drawable img=mContext.getResources().getDrawable(icon);
		rightBtn.setBackgroundDrawable(img);
		
	}
	public void setBtnRightDrawable(Drawable img)
	{
		
		rightBtn.setBackgroundDrawable(img);
		
	}
	
	public void setTitleLeft(int resId){
		linear_leftBtn.setText(resId);
	}
	
	public void setTitleRight(int resId){
		linear_rightBtn.setText(resId);
	}
	public void setTitleText(int txtRes){
		center_tv.setText(txtRes);
	}
	
	public void setLefImgtOnclickListener(OnClickListener listener){
		leftImg.setOnClickListener(listener);
	}
	
	public void setBtnRightOnclickListener(OnClickListener listener){
		rightBtn.setOnClickListener(listener);
	}
	
	public ImageView getTitleLeft(){
		return leftImg;
	}
	
	public Button getTitleRight(){
		return rightBtn;
	}

	
	
}
可以看到,自定义的TitleBarView继承自RelativeLayout,因为我们前面布局文件中根布局使用的是RelativeLayout,当然也可以不这么做,但这样做规范一些,然后自定义控件TitleBarView的构造函数中使用LayoutInflater.from(mContext).inflate(R.layout.common_title_bar, this);语句将common_title_bar布局文件中的布局解析出来,当然我这里为了代码规范,在自定义控件TitleBarView的构造函数中使用的是findView()函数,然后在该函数中对控件进行初始化,这样做代码逻辑清晰。然后在该TitleBarView中提供一些

方法来控制组合控件的可见性与某些功能,因为我们知道腾讯QQ的标题栏随着底部不同button被点击标题栏中间会显示不同的控件,这我们在前面已经分析过,因此我们需要提供一个控制这些组合控件可见性的方法,除了可见性外还需提供一些功能方法,这个视具体业务需求而定,这样会具备更好的扩展性。


通过前面两个步骤,一个自定义的组合控件就已经完成了,余下的就是如何使用了,这个也很简单,在需要使用该自定义控件的布局文件中使用该自定义控件完整的路径名即可,即包名+类名,如下所示:

<com.example.view.TitleBarView
    android:id="@+id/title_bar"
    android:layout_width="fill_parent"
    android:layout_height="50dp"
    >
    
</com.example.view.TitleBarView>

运行之后效果如下:



这样一个高仿腾讯QQ的标题栏就做出来了,当然这个运行结果是我的高仿腾讯QQ即时IM项目的运行结果,前面的代码也是在该项目中用到的代码,该项目已开源,如果看官想体验完整的效果可以 follow我的github,start与fork我的开源项目,我的githubhttps://github.com/HuTianQi


如果大家觉得不错记得小手一抖点个赞哦,欢迎大家关注我的博客账号,将会不定期为大家分享技术干货,福利多多哦!




本文转载自:http://blog.csdn.net/htq__/article/details/52014989

共有 人打赏支持
htq

htq

粉丝 19
博文 67
码字总数 1007
作品 3
武汉
私信 提问
Android 自定义组合控件小结

引言 接触Android UI开发的这段时间以来,对自定义组合控件有了一定的了解,为此小结一下,本文小结内容主要讨论的是如何使用Android SDK提供的布局和控件组成一个功能完整组合控件并将其封装...

程序袁_绪龙
2014/09/24
0
0
Android必备:Android UI控件的了解与学习

看这里:Android必备:Android UI控件的了解与学习 由于工作需要,最近一段时间,需要进行Android App开发的学习,之前简单的进行过Android的了解,对于基本的Android环境的搭建等已经有过整...

Realfighter
2015/02/26
0
0
如何自定义LinearLayout

最近通过看别人代码和网上搜索,发现现在自定义LinearLayout的方式有两种。第一种是在扩展的LinearLayout构造函数中使用Inflater加载一个布局,并从中提取出相关的UI组件进行封装,形成一个独...

Kingguary
2012/06/25
0
0
Android自定义View的实现(四)

如果说要按类型来划分的话,自定义View的实现方式大概可以分为三种,自绘控件、组合控件、以及继承控件。那么下面我们就来依次学习一下,每种方式分别是如何自定义View的。 一、自绘控件 自绘...

JayPark不作死
2014/07/02
0
0
仿MIUI音量变化环形进度条实现

Android中使用环形进度条的业务场景其实蛮多的,比如下载文件的时候使用环形进度条,会给用户眼前一亮的感觉;再比如我大爱的MIUI系统,它的音量进度条就是使用环形进度条,尽显小米"为发烧而...

Jack_1900
2014/07/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Spirng事务简单入门

一、概述 spring支持编程式事务管理和声明式事务管理两种方式: 1.编程式事务管理使用TransactionTemplate或者直接使用底层的PlatformTransactionManager。对于编程式事务管理,spring推荐使...

嘴角轻扬30
16分钟前
3
0
独立IP被恶意绑定域名处理办法

80端口: listen 80 default_server; server_name _; return 444; 443端口: listen 443 ssl default_server; server_name _; 加上证书路径 return 444;...

会当凌绝顶
19分钟前
3
0
RabbitMQ+PHP 教程五(Topics)

开始 在前面的教程中,我们改进了日志系统。我们使用的是一种直接广播方式,而不是只使用一种直接(direct)广播方式的fanout交换机,从而获得了有选择地接收日志的可能性。 虽然使用直接direc...

hansonwong
26分钟前
1
0
未来Linux Kernel 将不支持可变长数组VLA

但使用 VLA 会存在问题,包括增加运行时开销——因为数组长度需要在运行时确定; LLVM Clang 编译器不支持结构内 VLA,它只支持 C99 风格的 VLA;存在安全隐患。Linus Torvalds 对 VLA 的使用...

linux-tao
28分钟前
2
0
给Jenkins增加Linux奴隶节点

Add linux slave node in the Jenkins https://mohitgoyal.co/2017/02/14/add-linux-slave-node-in-the-jenkins/ https://www.howtoforge.com/tutorial/ubuntu-jenkins-master-slave/ https:......

圣洁之子
29分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部