OCNYang の 博客

Android 开发者,亦涉猎 Flutter

0%

组合控件详解 & 自定义属性

摘录来源:极客学院WiKi

组合控件是自定义控件的一种,只不过它是由其他几个原生控件组合而成,故名组合控件。

在实际项目中,GUI 会遇到一些可以提取出来做成自定义控件情况。

一个自定义控件的好处就是把一些需要模块化的 UI 和逻辑放在一起,做到了高内聚,向其他模块提供接口并很少依赖外界,这样就是低耦合。一个自定义控件就是一个封闭的王国,这里由你掌控。

上述是我自己的一个体会,想必大家也会常做自定义控件吧,就像逻辑部分的模块化一样。

下面我要做一个例子,请看完成图。

ocn.yang

下面一排图片加文字就是组合控件了,我是怎么做的呢?

其实这里用到了两个组合控件,一个是图片+文字,我把它叫一个 Item,而三个在一起就是另一个控件了。

重点看这个 Item,它有自己的属性如图片、文字、图片大小、文字大小、不透明度等等。这些把它定义在 attr 文件中,然后在 xml 文件中配置,就像我们用原生控件一样。

自定义属性

先看 attr 文件。

<?xml version="1.0" encoding="utf-8"?>  
<resources>  
        <declare-styleable name="LevelMenuItem">  
        <attr name="text" format="string" />  
        <attr name="text_color" format="color"/>  
        <attr name="text_size" format="dimension" />          
        <attr name="image_src" format="reference"/>  
        <attr name="image_bg" format="reference"/>  
        <attr name="image_alpha" format="integer" />  
        <attr name="image_height" format="dimension"></attr>  
        <attr name="image_width" format="dimension" />  
    </declare-styleable>  
</resources>  

这个文件在 values 下,和 string 文件同级。把你自己要定义的属性都写在这里吧。format 是属性的“单位”,如果你要问有多少中 format 呀?答案在这里。

组合控件的布局文件

有了属性了,下面看看布局文件 level_menu_item.xml。

<?xml version="1.0" encoding="utf-8"?>  
<LinearLayout xmlns:android="http:// schemas.android.com/apk/res/android"  
    android:layout_width="fill_parent"  
    android:layout_height="fill_parent"  
    android:orientation="vertical" >  
        <ImageView  
            android:id="@+id/image_item"  
            android:layout_width="fill_parent"  
            android:layout_height="fill_parent"  
            android:scaleType="fitCenter"  
            />  
         <TextView  
            android:id="@+id/tv_item"  
            android:layout_width="fill_parent"  
            android:layout_height="wrap_content"  
            android:gravity="center_horizontal"  
            android:textColor="#23ffffff"  
            android:textSize="25sp"   
         />      
</LinearLayout>  

这里唯一值得一说的是文本的颜色。大家看见他是8位的,前两位是表示不透明度的,后六位是表示颜色的,三色,范围都是00~ff。

如果在 Java 中设置颜色,需要这样。

setTextColor(0x23ffffff);  

关于不透明度,一般美工会定义。有些要求不透明如30%这样的,可以用整型换算一下。00~ff 对应十进制为0~255,那么30%就是255x0.3=76.5,用科学计算机换算为4c。

更多颜色相关设置这里附上《Android 中设置文本颜色的三种办法》

1、 利于系统自带的颜色类
如: TextView1.setTextColor(android.graphics.Color.RED);
布局文件中:android:textColor=”@android:color/white”
详见Android源码:base/core/res/res/values/colors.xml
2、 数字颜色表示法
TextView1.setTextColor(0xffff00ff);
3、 自定义颜色
TextView1.setTextColor(this.getResources().getColor(R.drawable.red));

组合控件的类文件

然后我们就要写一个类,我这继承子线性布局。有两个构造函数,我们主要在两个参数的函数中工作。

public class LevelMenuItem extends LinearLayout {  

    public LevelMenuItem(Context context, AttributeSet attrs) {  
        super(context, attrs);  

    }  

这个类中我们要完成的工作是,初始化控件属性、提供外部修改属性的接口、控件点击的回调接口。

此类完整代码:

package com.linc.game;  

import android.content.Context;  
import android.content.res.TypedArray;  
import android.util.AttributeSet;  
import android.view.LayoutInflater;  
import android.view.View;  
import android.widget.ImageView;  
import android.widget.LinearLayout;  
import android.widget.TextView;  
/**
 * 自定义一个关卡
 * 共有7个属性,看attr文件
 * 在程序中提供修改这7个属性的接口,
 * 一个自定义控件的任务就算完成。
 * 一个自定义控件的好处就是把一些需要模块化的
 * UI和逻辑放在一起,做到了高内聚,向其他模块提供接口并很少
 * 依赖外界,这样就是低耦合。一个自定义控件就是一个封闭的王国,
 * 这里由你掌控。
 *  
 * 编写时,如果遇到在attr里写好属性,但是在这里认不出来,
 * 就clean一下项目。切记。
 *  
 * @author linc
 *
 */  
public class LevelMenuItem extends LinearLayout {  
    private TextView mTextView = null;  
    private ImageView mImageView = null;  

    public LevelMenuItem(Context context) {  
        super(context);  
    }  
    public LevelMenuItem(Context context, AttributeSet attrs) {  
        super(context, attrs);  

        LayoutInflater layoutInflater = (LayoutInflater) context.  
                        getSystemService(Context.LAYOUT_INFLATER_SERVICE);  
        layoutInflater.inflate(R.layout.level_menu_item, this);  

        TypedArray typedArray = context.obtainStyledAttributes(attrs  
                ,R.styleable.LevelMenuItem);  

        initWidget(typedArray);  
    }  
    private void initWidget(TypedArray typedArray)  
    {  
        mTextView = (TextView)findViewById(R.id.tv_item);  
        String textString = typedArray.getString(R.styleable.LevelMenuItem_text);  
        int textColor = typedArray.getColor(R.styleable.LevelMenuItem_text_color,  
                0xffffffff);  
        float textSize = typedArray.getDimension(R.styleable.LevelMenuItem_text_size,  
                20);  
        mTextView.setText(textString);  
        mTextView.setTextColor(textColor);  
        mTextView.setTextSize(textSize);  

        mImageView = (ImageView)findViewById(R.id.image_item);  
        int imageHeight = (int) typedArray.getDimension(R.styleable.LevelMenuItem_image_height, 25);  
        int imageWidth = (int) typedArray.getDimension(R.styleable.LevelMenuItem_image_width, 25);  
        int imageSrc = typedArray.getResourceId(R.styleable.LevelMenuItem_image_src, 0);  
        int imageBg = typedArray.getResourceId(R.styleable.LevelMenuItem_image_bg, 0);  
        int imageAlpha = typedArray.getInt(R.styleable.LevelMenuItem_image_alpha, 255);  
        mImageView.setAlpha(imageAlpha);  
        mImageView.setImageResource(imageSrc);  
        mImageView.setBackgroundResource(imageBg);  
        LayoutParams layoutParams = new LayoutParams(imageWidth, imageHeight);  
        mImageView.setLayoutParams(layoutParams);  

        typedArray.recycle();  
    }  
    /**
     * 设置此控件的文本
     * @param text
     */  
    public void setText(String text)  
    {  
        mTextView.setText(text);  
    }  
    /**
     * 设置文字颜色
     * @param textColor
     */  
     public void setTextColor(int textColor)  
    {  
        mTextView.setTextColor(textColor);  
    }  
    /**
     * 设置字体大小
     * @param textSize
     */  
     public void setTextSize(int textSize)  
    {  
        mTextView.setTextSize(textSize);  
    }  
    /**
     * 设置图片
     * @param resId
     */  
     public void setImageResource(int resId)  
    {  
        mImageView.setImageResource(resId);  
    }  
    /**
     * 设置图片背景
     */  
     public void setBackgroundResource(int resId)  
    {  
        mImageView.setBackgroundResource(resId);  
    }     
    /**
     * 设置图片的不透名度
     * @param alpha
     */  
    public void setImageAlpha(int alpha)  
    {  
        mImageView.setAlpha(alpha);  
    }  
    /**
     * 设置图片的大小
     * 这里面需要使用LayoutParams这个布局参数来设置
     * @param width
     * @param height
     */  
    public void setImageSize(int width,int height)  
    {  
        LayoutParams layoutParams = new LayoutParams(width, height);  
        mImageView.setLayoutParams(layoutParams);  
    }  
    /**
     * image点击事件的回调
     * @param listener
     */  
    public void setOnClickListener(OnItemClickListener listener)  
    {  
        mImageView.setOnClickListener(new View.OnClickListener() {  
            @Override  
            public void onClick(View v) {  
                listener.onImageClick();  
            }  
        });  
    }  
    /**
     * 点击事件接口
     * @author linc
     *
     */  
    public interface OnItemClickListener  
    {  
        public void onImageClick();  
    }  
}  

组合控件的使用

好,一个完整的组合控件就做好了,那么,我们如何使用呢?

我要在 LevelMenu 中用它。xml 文件如下:

<?xml version="1.0" encoding="utf-8"?>  
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    xmlns:linc="http://schemas.android.com/apk/res/com.linc.game"  
    android:layout_width="fill_parent"  
    android:layout_height="fill_parent"  
    android:orientation="horizontal">      
    <com.linc.game.LevelMenuItem  
        android:id="@+id/item1"  
        android:layout_width="70dp"  
        android:layout_height="80dp"  
        linc:text="@string/item1"  
        linc:text_size="14sp"  
        linc:text_color="#80fa8072"  
        linc:image_src="@drawable/orange_button_selector"  
        linc:image_alpha="128"  
        linc:image_height="48dp"  
        linc:image_width="48dp"  
        />  
    <com.linc.game.LevelMenuItem  
        android:id="@+id/item2"  
        android:layout_marginLeft="20dp"  
        android:layout_width="70dp"  
        android:layout_height="80dp"  
        linc:text="@string/item2"  
        linc:text_size="14sp"  
        linc:text_color="#ffeee8aa"  
        linc:image_src="@drawable/red_button_selector"  
        linc:image_alpha="255"  
        linc:image_height="48dp"  
        linc:image_width="48dp"  
        />     
    <com.linc.game.LevelMenuItem  
        android:id="@+id/item3"  
        android:layout_marginLeft="20dp"  
        android:layout_width="70dp"  
        android:layout_height="80dp"  
        linc:text="@string/item3"  
        linc:text_size="14sp"  
        linc:text_color="#80cd853f"               linc:image_src="@drawable/yellow_button_selector"  
        linc:image_alpha="128"  
        linc:image_height="48dp"  
        linc:image_width="48dp"  
        />         
</LinearLayout>  

加入自己包名的索引

xmlns:linc="http://schemas.android.com/apk/res/com.linc.game"  

剩下的就一目了然了。

用到组合控件的类文件

LevelMenu.java

package com.linc.game;  

import com.linc.game.LevelMenuItem.OnItemClickListener;  
import android.content.Context;  
import android.util.AttributeSet;  
import android.util.Log;  
import android.view.LayoutInflater;  
import android.widget.LinearLayout;  

public class LevelMenu extends LinearLayout {  
    private LevelMenuItem item1,item2,item3;  

    public LevelMenu(Context context) {  
        super(context);  

    }  

    public LevelMenu(Context context, AttributeSet attrs) {  
        super(context, attrs);  
        LayoutInflater layoutInflater = (LayoutInflater) context.  
            getSystemService(Context.LAYOUT_INFLATER_SERVICE);  
        layoutInflater.inflate(R.layout.level_menu, this);  
        initWidget();  
    }  
    private void initWidget()  
    {  
        item1 = (LevelMenuItem)findViewById(R.id.item1);  
        item2 = (LevelMenuItem)findViewById(R.id.item2);  
        item3 = (LevelMenuItem)findViewById(R.id.item3);  

        item1.setOnClickListener(new OnItemClickListener() {  
            @Override  
            public void onImageClick() {  
                Log.e("dfjdkfjd","dfdfd");  
            }  
        });  
    }  
}  

在处理图片点击事件的时候,我用到了选择器(selector),这是我们实际开发中最常用的小技巧了。它能描述的状态很多,各位看官可以去查查。

<?xml version="1.0" encoding="utf-8"?>  
<selector xmlns:android="http://schemas.android.com/apk/res/android" >  
    <item android:state_pressed="true"  
        android:drawable="@drawable/button_push"/>  
    <item android:drawable="@drawable/orange_button"/>  
</selector>  

好,组合控件的例子先到这里,实际功能在下一个实战技巧中演练。

大家在做自定义控件时需要注意的是:

1、自定义控件类不能是是抽象类

2、要用 (Context context, AttributeSet attrs) 这个构造函数。

否则报错:android.view.InflateException: Binary XML file line #15: Error inflating cla。。。

最后普及一下,attrs.xml中的属性的format(类型)说明

1. reference:参考某一资源ID。

(1)属性定义:

<declare-styleable name = "名称">
   <attr name = "background" format = "reference" />
</declare-styleable>

(2)属性使用:

<ImageView
     android:layout_width = "42dip"
     android:layout_height = "42dip"
     android:background = "@drawable/图片ID"
     />

2. color:颜色值。

(1)属性定义:

<declare-styleable name = "名称">
    <attr name = "textColor" format = "color" />
</declare-styleable>

(2)属性使用:

<TextView
     android:layout_width = "42dip"
     android:layout_height = "42dip"
     android:textColor = "#00FF00"
     />

3. boolean:布尔值。

(1)属性定义:

<declare-styleable name = "名称">
   <attr name = "focusable" format = "boolean" />
</declare-styleable>

(2)属性使用:

<Button
    android:layout_width = "42dip"
    android:layout_height = "42dip"
    android:focusable = "true"
    />

4. dimension:尺寸值。

(1)属性定义:

<declare-styleable name = "名称">
   <attr name = "layout_width" format = "dimension" />
</declare-styleable>

(2)属性使用:

<Button
    android:layout_width = "42dip"
    android:layout_height = "42dip"
    />

5. float:浮点值。

(1)属性定义:

<declare-styleable name = "AlphaAnimation">
   <attr name = "fromAlpha" format = "float" />
   <attr name = "toAlpha" format = "float" />
</declare-styleable>

(2)属性使用:

<alpha
   android:fromAlpha = "1.0"
   android:toAlpha = "0.7"
   />

6. integer:整型值。

(1)属性定义:

<declare-styleable name = "AnimatedRotateDrawable">
   <attr name = "visible" />
   <attr name = "frameDuration" format="integer" />
   <attr name = "framesCount" format="integer" />
   <attr name = "pivotX" />
   <attr name = "pivotY" />
   <attr name = "drawable" />
</declare-styleable>

(2)属性使用:

<animated-rotate
       xmlns:android = "http://schemas.android.com/apk/res/android"
       android:drawable = "@drawable/图片ID"
       android:pivotX = "50%"
       android:pivotY = "50%"
       android:framesCount = "12"
       android:frameDuration = "100"
       />

7. string:字符串。

(1)属性定义:

<declare-styleable name = "MapView">
       <attr name = "apiKey" format = "string" />
</declare-styleable>

(2)属性使用:

<com.google.android.maps.MapView
        android:layout_width = "fill_parent"
        android:layout_height = "fill_parent"
        android:apiKey = "0jOkQ80oD1JL9C6HAja99uGXCRiS2CGjKO_bc_g"
        />

8. fraction:百分数。

(1)属性定义:

<declare-styleable name="RotateDrawable">
   <attr name = "visible" />
   <attr name = "fromDegrees" format = "float" />
   <attr name = "toDegrees" format = "float" />
   <attr name = "pivotX" format = "fraction" />
   <attr name = "pivotY" format = "fraction" />
   <attr name = "drawable" />
</declare-styleable>

(2)属性使用:

<rotate
    xmlns:android = "http://schemas.android.com/apk/res/android"
    android:interpolator = "@anim/动画ID"
    android:fromDegrees = "0"
    android:toDegrees = "360"
    android:pivotX = "200%"
    android:pivotY = "300%"
    android:duration = "5000"
    android:repeatMode = "restart"
    android:repeatCount = "infinite"
    />

9. enum:枚举值。

(1)属性定义:

<declare-styleable name="名称">
   <attr name="orientation">
      <enum name="horizontal" value="0" />
      <enum name="vertical" value="1" />
   </attr>           
</declare-styleable>

(2)属性使用:

<LinearLayout
    xmlns:android = "http://schemas.android.com/apk/res/android"
    android:orientation = "vertical"
    android:layout_width = "fill_parent"
    android:layout_height = "fill_parent"
    >
</LinearLayout>

10. flag:位或运算。

(1)属性定义:

 <declare-styleable name="名称">
    <attr name="windowSoftInputMode">
        <flag name = "stateUnspecified" value = "0" />
        <flag name = "stateUnchanged" value = "1" />
        <flag name = "stateHidden" value = "2" />
        <flag name = "stateAlwaysHidden" value = "3" />
        <flag name = "stateVisible" value = "4" />
        <flag name = "stateAlwaysVisible" value = "5" />
        <flag name = "adjustUnspecified" value = "0x00" />
        <flag name = "adjustResize" value = "0x10" />
        <flag name = "adjustPan" value = "0x20" />
        <flag name = "adjustNothing" value = "0x30" />
     </attr>        
 </declare-styleable>

(2)属性使用:

<activity
   android:name = ".StyleAndThemeActivity"
   android:label = "@string/app_name"
   android:windowSoftInputMode = "stateUnspecified | stateUnchanged | stateHidden">
   <intent-filter>
      <action android:name = "android.intent.action.MAIN" />
      <category android:name = "android.intent.category.LAUNCHER" />
   </intent-filter>
 </activity>

特别要注意:

属性定义时可以指定多种类型值。

(1)属性定义:

<declare-styleable name = "名称">
   <attr name = "background" format = "reference|color" />
</declare-styleable>

(2)属性使用:

 <ImageView
     android:layout_width = "42dip"
     android:layout_height = "42dip"
     android:background = "@drawable/图片ID|#00FF00"
     />