Android 之自定义组件

1、如何在一个按钮上放上一张图片？
把按钮和图片套在一个FrameLayout中

<FrameLayout
    android:orientation="horizontal"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    <LinearLayout
     android:layout_width="wrap_content"
     android:layout_height="wrap_content">
     <Button
      style="@style/menu_btn_style"
      android:id="@+id/fan_us"
      android:text="@string/mainmenu_facebook_fan_us" />
    </LinearLayout>
    <LinearLayout
     android:layout_width="wrap_content"
     android:layout_height="wrap_content">
     <ImageView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_marginLeft="16dp"
      android:layout_marginTop="13dp"
      android:src="@drawable/facebookicon" />
    </LinearLayout>
   </FrameLayout>



2、如何自定义组件
自定义一个下划线形式的输入框

第一：确定要画多少条下划线
第二：每条线的宽度
第三：下划线的间距

（1）自定义文本输入框
package com.heima.guesswho.util;

import com.heima.android.guesswho.R;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.widget.EditText;

public class DashlineEditText extends EditText {
/*
* 假设下划线总长100个单位，要画7条下划线，每条下划线间距为2个单位
* 具体算法如下：
* 每条下划线的长度：(100+2)/7-2
* for(int i = 0;i<7,i++){
*     第i条线
* x1 = ((100+2)/7)*i
* y1 = getHeight()
* x2 = ((100+2)/7)*i+(100+2)/7-2
* y2 = getHeight()
* }
*
*/

private Paint linePaint = new Paint();
private int segmentCount = 8;//总共画8条分割线，可以作为默认值
private int distance = 5;//每个分割线的间距为4个单位，可以作为默认值

/*
* 从布局文件中得到对应属性的值
*/
public DashlineEditText(Context context, AttributeSet attrs) {
  super(context, attrs);
  setBackgroundDrawable(null);//消除文本框效果的作用
  //linePaint.setColor(Color.RED);//设置画笔的颜色

  TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.DashLineET);
  segmentCount = array.getInt(R.styleable.DashLineET_segment_count, segmentCount);//从指定属性中拿到对应的值，若没设置，则用默认值
  distance = array.getInt(R.styleable.DashLineET_distance, distance);
  int color = array.getInt(R.styleable.DashLineET_dashline_color, Color.RED);
  linePaint.setColor(color);
}

@Override
protected void onDraw(Canvas canvas) {
  super.onDraw(canvas);
  int width = getWidth();//自定义控件的宽度
  int height = getHeight()-3;//必须减去数才能显示出下划线

  //画出每一条下划线
  for(int i = 0; i < segmentCount; i++){
   int oneSegmentWidth = (width+distance)/segmentCount - distance;//每条下划线的长度
   int startX = (segmentCount+distance)*i ;//每条下划线的起点位置
   int stopX = startX+oneSegmentWidth ;//每条下划线的终点位置
   canvas.drawLine(startX, height, stopX, height, linePaint);
  }
}
}

（2）布局文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:text="@string/debug_name" />

<com.heima.guesswho.util.DashlineEditText
  android:layout_width="100dp"
  android:layout_height="12dp"
  android:text="test" />
</LinearLayout>

定义自定义组件的属性

第一步：在string.xml文件中配置declare-styleable

<declare-styleable
  name="DashLineET">
  <attr
   name="segments_cnt"
   format="integer" />
  <attr
   name="distance"
   format="dimension" />
  <attr
   name="dashline_color"
   format="color" />
  <attr
   name="hint_msg"
   format="reference" />
  <attr
   name="hint_color"
   format="color" />
</declare-styleable>

第二步：在自定义组件中复写构造方法，用来获取布局文件中属性的值

/*
* 从布局文件中得到对应属性的值
*/
public DashlineEditText(Context context, AttributeSet attrs) {
  super(context, attrs);
  setBackgroundDrawable(null);//消除文本框效果的作用
  //linePaint.setColor(Color.RED);//设置画笔的颜色

  TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.DashLineET);
  segmentCount = array.getInt(R.styleable.DashLineET_segment_count, segmentCount);//从指定属性中拿到对应的值，若没设置，则用默认值
  distance = array.getInt(R.styleable.DashLineET_distance, distance);
  int color = array.getInt(R.styleable.DashLineET_dashline_color, Color.RED);
  linePaint.setColor(color);
}

第三步：在使用自定义组件的布局文件中加入命名空间

如xmlns:heima="http://schemas.android.com/apk/res/com.heima.android.guesswho"

heima 为我们使用属性时使用的前缀，相当于使用Android属性时要使用android前缀一样
其中com.heima.android.guesswho，为清单文件标识应用的包名

布局文件如下

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:heima="http://schemas.android.com/apk/res/com.heima.android.guesswho"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:text="@string/debug_name" />

<com.heima.guesswho.util.DashlineEditText
  android:layout_width="100dp"
  android:layout_height="12dp"
  heima:segment_count="10"
  heima:distance="3"
  android:text="test" />
</LinearLayout>

<com.heima.guesswho.util.DashlineEditText
    android:layout_width="210dip"
   heima:segment_count="9"
    heima:distance="4dip"
    heima:dashline_color="@color/font_white"
    android:layout_height="wrap_content"
    android:textColor="#FF0000"
    android:hint="@string/input_name_prompt"
    android:text="" />