自定义UI实例

      我们这里写两个实例，第一个是完全自定义的UI；第二个是组合部件的自定义UI。

完全自定义UI示例

    第一步：新建一个工程命名为：custom_ui；

    第二步：实现自定义的UI类，这里选择继承自View，主要就是注意一下构造函数和以on...开头的覆盖的函数，这里仅仅覆盖onDraw()函数，具体代码如下：

public class MyView extends View {
	private Paint mPaint;
	
	public MyView(Context context) {
		super(context);
		// TODO Auto-generated constructor stub
		InitMyView();
	}

    private final void InitMyView() {
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setColor(Color.RED);
        setPadding(3, 3, 3, 3);
    }
    
	public MyView(Context context, AttributeSet attrs) {
		super(context, attrs);
		// TODO Auto-generated constructor stub
		InitMyView();
	}
	
	@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawCircle(50, 50, 30, mPaint);
    }
}

    第三步：修改布局文件，添加我们的自定义组件，如下：

<?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" >


    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/hello" />
    
    <com.xiaoyun.custom_ui.app.MyView 
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"/>

</LinearLayout>

     这里需要注意的是，第二行的名字空间声明，我们使用了默认的android名字空间，因为此刻我们没有添加自己的属性和参数，都是使用系统默认的，所以可以不添加，当自定义了UI组件的属性和参数时就必须加上自己的名字空间，否则这些属性和参数不能被正确的解析。

    第四步：运行程序，效果如下：

 到这里，就实现了一个简单的完全自定义UI，其实主要还是看实现思路，这在之前的解读创建自定义UI，大家可以看看。

      前面谈到了实现自定义的属性和参数，这里我们也来实现一下，在API Demos中有一个示例，我们这里先贴一下官方给的示例代码，然后参考这个实现：

官方示例代码：

<resources>    
     <declare-styleable name="LabelView">
        <attr name="text" format="string" />
        <attr name="textColor" format="color" />
        <attr name="textSize" format="dimension" />
    </declare-styleable>
</resources>

我们这里自定义一个属性，就是颜色，当然，这只是一个示例，没什么实际意义。接着上面的工程写：

     第五步：在res/values目录下面创建一个attrs.xml文件，自定义我们的属性和参数，如下：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="MyView">
        <attr name="frontColor" format="color" />
    </declare-styleable>
</resources>

      第六步：修改MyView的构造函数，使得其可以解析我们自定义的属性和参数，代码如下：

	public MyView(Context context, AttributeSet attrs) {
		super(context, attrs);
		// TODO Auto-generated constructor stub
		InitMyView();
		TypedArray a = context.obtainStyledAttributes(attrs,
                R.styleable.MyView);


        // Retrieve the color(s) to be used for this view and apply them.
        // Note, if you only care about supporting a single color, that you
        // can instead call a.getColor() and pass that to setTextColor().
        setColor(a.getColor(R.styleable.MyView_frontColor, 0xFF000000));


        a.recycle();
	}
	
    public void setColor(int color) {
        mPaint.setColor(color);
        invalidate();
    }

      第七步：在我们的布局文件中使用我们的自定义属性和参数，但是注意：此时，一定要加上我们自己的名字空间，如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res/com.xiaoyun.custom_ui.app"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/hello" />
    
    <com.xiaoyun.custom_ui.app.MyView 
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        app:frontColor = "#ffffffff"/>

</LinearLayout>

       第三行就是我们自定义名字空间，可能大家这下就明白了我们的自定义属性都是app：XX这样来使用，看第三行就懂了。

     第八步：运行程序，效果如下：

    呵呵，效果实现了，关于完全自定义属性就介绍到这里，下面来介绍组合部件的创建和使用。

组合部件的自定义UI示例

      首先来说一下要实现的效果：包含三个views，一个SeekBar，一个TextView和一个EditText。其中我们移动SeekBar，那么改变的值就会在EditText中显示出来，这个组合组件对于输入是比较有用的，利用，让你输入一个0到100的数值，你可以通过在EditText中直接输入，也可以通过SeekBar来输入，但是SeekBar的值不是特别明显，所以我们在EditText中显示出来，这也只是一个小例子。

     第一步：创建一个新的工程：comp_ui；

     第二步：我们选择继承自LinearLayout，那么先来创建一个布局文件comp_ui.xml，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    
	<SeekBar 
	    android:id="@+id/seekBar"
	    android:layout_width="fill_parent"
	    android:layout_height="wrap_content"/>
	
	<LinearLayout 
	    android:layout_width="fill_parent"
	    android:layout_height="wrap_content"
	    android:orientation="horizontal">
	    <TextView 
	        android:id="@+id/hint"
	        android:layout_width="wrap_content"
	        android:layout_height="wrap_content"
	        android:text="@string/hint"/>
	    <EditText 
	        android:id="@+id/input"
	        android:layout_width="fill_parent"
	        android:layout_height="wrap_content"
	        android:hint="@string/input"
	        />
	</LinearLayout>
    
</LinearLayout>

       第三步：完成组合组件类Comp_ui.java，继承自上面的LinearLayout，代码如下：

public class Comp_ui extends LinearLayout {
	 private SeekBar seekBar;
	 private TextView hint;
	 private EditText input;
	
	public Comp_ui(Context context) {
		super(context);
		// TODO Auto-generated constructor stub
	}
	
	public Comp_ui(Context context, AttributeSet attrs) {
		super(context, attrs);
		// TODO Auto-generated constructor stub
		LayoutInflater inflater=(LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);  
        inflater.inflate(R.layout.comp_ui, this);  
        seekBar=(SeekBar)findViewById(R.id.seekBar);  
        hint=(TextView)findViewById(R.id.hint); 
        input = (EditText)findViewById(R.id.input);
	}
	
	public void setSeekBarValue() {
		seekBar.setMax(100);  
        seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
			
			public void onStopTrackingTouch(SeekBar seekBar) {
				// TODO Auto-generated method stub
				
			}
			
			public void onStartTrackingTouch(SeekBar seekBar) {
				// TODO Auto-generated method stub
				
			}
			
			public void onProgressChanged(SeekBar seekBar, int progress,
					boolean fromUser) {
				// TODO Auto-generated method stub
				input.setText("" + seekBar.getProgress());
				//System.out.println(progress);
			}
		});
	}
	
	public void setEditTextValue() {

	}
	

}

      第四步：在工程中应用我们自己的组合组件，修改main.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" >

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/hello" />
    
    <com.xiaoyun.comp_ui.app.Comp_ui 
        android:id="@+id/my_ui"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"/>

</LinearLayout>

     第五步：在Activity中使用，代码如下：

public class Comp_uiActivity extends Activity {
	private Comp_ui comp_ui;
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        comp_ui = (Comp_ui)findViewById(R.id.my_ui);
        comp_ui.setSeekBarValue();
        comp_ui.setEditTextValue();
    }
}

    第六步：看运行效果：

     好了，今天就介绍到这里。