android：自定义组合控件Weight(高仿猫眼底部菜单栏)

在我们实际开发当中，会碰见一些布局结构类似或者相同的界面，例如应用的设置界面、tab按钮界面等。这时候，对于初学者来说，xml里面一个个绘制出来或许是最初的想法；可能随着经验的积累，又学会一招，就是使用include标签，导入类似或者相同的布局，提高了性能又减少了代码；再以后呢，自定义控件又可以实现这一目的。本文就是简单的使用自定义的组合控件模仿猫眼底部菜单栏。

1.自定义组合控件属性：在res/values目录下创建attrs.xml文件

    <declare-styleable name="TabItemView">
        <attr name="contentTextSize" format="dimension"/> <!-- 字体大小 -->
        <attr name="contentTextColor" format="color"/> <!-- 字体颜色 -->
        <attr name="contentTextString" format="string"/> <!-- 显示的默认文字 -->
        <attr name="contentLogoBack" format="reference"/> <!-- item背景 -->
        <attr name="contentLogoSize" format="dimension" />
    </declare-styleable>

TabItemView:简单一点说，就是属性组合的名字；

<attr />某个属性的定义：如<attr name="contentTextSize" format="dimension"/>，定义的就是文字的大小，contentTextSize指属性名字(和我们xml中常用的textSize)，format定义的是contentTextSize具体的属性类型。

下面简单的说下format的具体类型：

(1) reference：参考某一资源ID。 (2) color：颜色值。

(3) boolean：布尔值。 (4) dimension：尺寸值。

(5) float：浮点值。 (6) integer：整型值。

(7) string：字符串。 (8) fraction：百分数。

(9) enum：枚举值。 (10)flag：位或运算。

2.控件的属性定义完了，然后就是要在代码里面获取使用这些属性，看源代码的时候，你会发现系统定义的属性都是通过TypedArray这玩意获取的，获取方法如下：

       TypedArray ta = mContext.obtainStyledAttributes(attrs, R.styleable.TabItemView);

以上方法返回的我们自定义的属性集合，待最后用完之后，需要手动释放一下，ta.recycle();

TypedArray属性集合得到之后，下面就是根据需要获取不同的属性，针对不同的属性有不同的获取方法，以下是几个比较常用到的属性获取方法：

(1)getDimensionPixelSize:获取尺寸的大小(间距，文字大小等)

(2)getResourceId：获取资源id(图片等)

(3)getString:获取字符串

(4)getBoolean：获取布尔值

(5)getColor：获取颜色值

(6)getFloat：获取浮点类型值

下面是TabItemView自定义组合控件的完整代码:

package com.dandy.weights;

import com.dandy.utils.PhoneUtils;
import com.demo.dandy.R;
import android.content.Context;
import android.content.res.TypedArray;
import android.text.TextUtils;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.InflateException;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.view.View.OnClickListener;

public class TabItemView extends LinearLayout implements OnClickListener{

	private Context mContext;

	private ImageView contentLogo;//tab图片显示
	private TextView contentText;//tab文字提示

	private int logoBackResourceId;//图片资源id
	private String textString;//文字字符串
	private int textColor;//文字显示颜色
	private float textSize;//文字显示大小
	private int contentLogoSize;//显示图片大小
	private static final float defaultTextSize = 16;//文字默认大熊啊
	private int defaultColor,selectedColor;//默认颜色
	private TabClickListner mClickListner;//点击监听回调事件

	public TabItemView(Context context) {
	this(context, null);
	}

	public TabItemView(Context context, AttributeSet attrs) {
		this(context, attrs, 0);
	}

	public TabItemView(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
		this.mContext = context;
		init(attrs);
		addView();
	}

	private void init(AttributeSet attrs){
	        this.setOnClickListener(this);
		TypedArray ta = mContext.obtainStyledAttributes(attrs, R.styleable.TabItemView);//获取属性集合
		logoBackResourceId = ta.getResourceId(R.styleable.TabItemView_contentLogoBack, -1);//获取图片资源id
		textColor = ta.getColor(R.styleable.TabItemView_contentTextColor,<span style="font-family: Arial, Helvetica, sans-serif;">getResources().getColor(android.R.color.black));//获取文字颜色</span>
		textSize = ta.getDimensionPixelSize(R.styleable.TabItemView_contentTextSize,<span style="font-family: Arial, Helvetica, sans-serif;">PhoneUtils.dp2px(mContext, defaultTextSize));//获取显示的文字大小</span>
		textString = ta.getString(R.styleable.TabItemView_contentTextString);//获取显示的文字
		contentLogoSize = ta.getDimensionPixelSize(R.styleable.TabItemView_contentLogoSize,<span style="font-family: Arial, Helvetica, sans-serif;">LayoutParams.WRAP_CONTENT);//获取显示图片的尺寸大小</span>
		ta.recycle();
		defaultColor = mContext.getResources().getColor(R.color.textcolor_black_b3);
		selectedColor = mContext.getResources().getColor(R.color.textcolor_red_d);
	}
	//添加显示图片和文字的控件
	private void addView(){
		contentLogo = new ImageView(mContext);
		contentLogo.setFocusable(false);
		contentLogo.setClickable(false);
		LayoutParams logoParams = new LayoutParams(contentLogoSize,contentLogoSize);
		contentLogo.setLayoutParams(logoParams);
		if(logoBackResourceId != -1){
			contentLogo.setBackgroundResource(logoBackResourceId);
		}else{
			throw new InflateException("未设置填充图片资源");
		}

		this.addView(contentLogo);

		if(!TextUtils.isEmpty(textString)){
			contentText = new TextView(mContext);
			contentText.setFocusable(false);
			contentText.setClickable(false);
			LayoutParams textParams = new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);
			textParams.topMargin = PhoneUtils.dp2px(mContext,3);
			contentText.setLayoutParams(textParams);
			contentText.setTextColor(textColor);
			contentText.setTextSize(TypedValue.COMPLEX_UNIT_PX,textSize);
			contentText.setText(textString);
			this.addView(contentText);
		}
	}

	@Override
	public void onClick(View v) {
		setTabSelected(true);
		if(mClickListner != null){
			mClickListner.onTabClick(this);//回调点击事件
		}
	}

	/**
	 *设置点击监听事件
	 */
	public void setTabClickListener(TabClickListner listner){
		this.mClickListner = listner;
	}

	/**
	 *设置填充图片资源
	 */
	public void setContentLogoBack(int resourceId){
		contentLogo.setBackgroundResource(resourceId);
	}

	/**
	 *设置填充文字
	 */
	public void setContentTextString(String text){
		if(contentText != null){
			contentText.setText(text);
		}
	}

	/**
	 *设置选中状态
	 */
	public void setTabSelected(boolean enable){
		if(contentLogo != null){
			contentLogo.setSelected(enable);
		}
		if(contentText != null){
			if(enable){
				contentText.setTextColor(selectedColor);
			}else{
				contentText.setTextColor(defaultColor);
			}
		}
	}

	public interface TabClickListner{
		void onTabClick(View view);
	}

}

TabClickListener:控件点击的回调接口

3.控件搞定，然后就是在布局里面的具体使用

在res/layout/中创建tab_layout.xml文件，具体代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tabItem="http://schemas.android.com/apk/res/com.demo.dandy"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:background="@color/background_bg7"
    android:paddingTop="@dimen/tab_padding"
    android:paddingBottom="@dimen/tab_padding">

    <com.dandy.weights.TabItemView
        android:id="@+id/movie"
        style="@style/TabItemStyle"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical"
        tabItem:contentLogoBack="@drawable/selector_tab_movie"
        tabItem:contentTextString="@string/movie" />

    <com.dandy.weights.TabItemView
        android:id="@+id/cinema"
        style="@style/TabItemStyle"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical"
        tabItem:contentLogoBack="@drawable/selector_tab_cinema"
        tabItem:contentTextString="@string/cinema" />

    <com.dandy.weights.TabItemView
        android:id="@+id/community"
        style="@style/TabItemStyle"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical"
        tabItem:contentLogoBack="@drawable/selector_tab_community"
        tabItem:contentTextString="@string/community" />

    <com.dandy.weights.TabItemView
        android:id="@+id/mine"
        style="@style/TabItemStyle"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical"
        tabItem:contentLogoBack="@drawable/selector_tab_mine"
        tabItem:contentTextString="@string/mine" />

</LinearLayout>

代码当中：xmlns:tabItem="http://schemas.android.com/apk/res/com.demo.dandy"，这段代码是关联你自定义属性的，其中com.demo.dandy是指你应用的包名，tabItem是引用名

其实就是拷贝xmlns:android="http://schemas.android.com/apk/res/android，替换一下android就ok了。

具体流程是：在构造函数中，获取TypedArray属性集合，然后获取所需的各个属性值，再通过动态添加控件ImageView和TextView，并且把相应定义的属性赋值给它们。

运行截图如下：

源代码下载链接

版权声明：本文为博主原创文章，未经博主允许不得转载。

时间： 2024-10-12 23:26:39

android：自定义组合控件Weight(高仿猫眼底部菜单栏)的相关文章

Android 自定义组合控件小结

引言 接触Android UI开发的这段时间以来,对自定义组合控件有了一定的了解,为此小结一下,本文小结内容主要讨论的是如何使用Android SDK提供的布局和控件组成一个功能完整组合控件并将其封装为面向对象的类,而并非讨论如何继承自SDK提供的控件类(比如TextView),对其进行自定义扩展的问题. 进入正题前,我们先来看一组功能需求 假设在手机需求上,那么如上三个界面我们可以使用三个Activity,每个Activity一个布局文件,实现起来比较独立,但是假设在Android pad上要

Android自定义组合控件--底部多按钮切换

效果图: 现在市场上大多数软件都是类似于上面的结构,底部有几个按钮用于切换到不同的界面.基于OOP思想,我想把下面的一整块布局封装成一个类,也就是我们的自定义组合控件-底部多按钮切换布局,我把它叫做BottomLayout 看上面的布局,几个按钮横向排列,我们先看一下布局 最外面LinearLayout 方向 horizontal,然后5个weight相同的RelativeLayout,每个RelativeLayout里面有一个Button(用了显示选中状态)个ImageView(用来显示红点)

android 自定义组合控件

自定义控件是一些android程序员感觉很难攻破的难点,起码对我来说是这样的,但是我们可以在网上找一些好的博客关于自定义控件好好拿过来学习研究下,多练,多写点也能找到感觉,把一些原理弄懂,今天就讲下自定义组合控件,这个特别适合在标题栏或者设置界面,看下面图: 就非常适合使用组合控件了,现在写一个玩玩: activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

Android自定义组合控件--图片加文字，类似视频播放软件的列表

分四步来写: 1,组合控件的xml; 2,自定义组合控件的属性; 3,自定义继承组合布局的class类,实现带两参数的构造器; 4,在xml中展示组合控件. 具体实现过程: 一.组合控件的xml 我接触的有两种方式,一种是普通的Activity的xml:一种是父节点为merge的xml.我项目中用的是第一种,但个人感觉第二种好,因为第一种多了相对或者绝对布局层. 我写的 custom_pictext.xml <?xml version="1.0" encoding="u

Android自定义组合控件的实现

需求:在黑马做安全卫士的时候,功能9设置中心界面如下: 在点击item的时候,复选框会反转状态,同时"自动更新已经关闭"会变换内容和颜色. 可以发现这个界面类似ListView,但又不是ListView,因为它的item数量是固定的,且最后一 item和之前的都不一样.虽然这个看着像是标准的List结构,实则每个item不是完全一样,因为 每个item的提示文本(如"自动更新已经关闭")的内容并不完全一样. 假如用一般方式来布局的话,4个item就会有3*4 = 1

Android自定义组合控件---教你如何自定义下拉刷新和左滑删除

绪论 最近项目里面用到了下拉刷新和左滑删除,网上找了找并没有可以用的,有比较好的左滑删除,但是并没有和下拉刷新上拉加载结合到一起,要不就是一些比较水的结合,并不能在项目里面使用,小编一着急自己组合了一个,做完了和QQ的对比了一下,并没有太大区别,今天分享给大家,其实并不难,但是不知道为什么网上没有比较好的Demo,当你的项目真的很急的时候,又没有比较好的Demo,那么"那条友谊的小船儿真是说翻就翻啊",好了,下面先来具体看一下实现后的效果吧: 代码已经上传到Github上了,小伙伴们记

Android自定义组合控件内子控件无法显示问题

今天自定义了一个组合控件,与到了个奇葩问题: 我自定义了一个RelativeLayout,这个layout内有多个子控件.但奇怪的是这些子控件一直显示不出来.调试了一下午,竟然是因为在获取(inflate)布局时没有添加到Root.

Android自定义组合控件

今天和大家分享下组合控件的使用.很多时候android自定义控件并不能满足需求,如何做呢?很多方法,可以自己绘制一个,可以通过继承基础控件来重写某些环节,当然也可以将控件组合成一个新控件,这也是最方便的一个方法.今天就来介绍下如何使用组合控件,将通过两个实例来介绍.第一个实现一个带图片和文字的按钮,如图所示: 整个过程可以分四步走.第一步,定义一个layout,实现按钮内部的布局.代码如下: <?xml version="1.0" encoding="utf-8&quo

android 自定义组合控件 顶部导航栏

在软件开发过程中,经常见到,就是APP 的标题栏样式几乎都是一样的,只是文字不同而已,两边图标不同.为了减少重复代码,提高效率, 方便大家使用,我们把标题栏通过组合的方式定义成一个控件. 例下图: 点击: 如不设置左边,右边图片: 下面说一下具体实现步骤: 步骤一: 导航栏包括:* 返回按钮* 标题* 右侧按钮(功能不确定) 首先是布局文件,如下: </pre><p></p><pre name="code" class="java&q