Android自定義View之TopBar

1、先看下效果圖(平板上實驗不是很清晰)：

    左邊是「Back」按鈕，中間是「自定義標題"，右邊是"More"，點擊會彈出相應的提示，這裏使用Toast提示一個簡單的信息做爲實例。

2、開發流程：

一、自定義View的屬性設置，要在values目錄下創建attrs.xml文件，添加屬性內容，代碼實現以下：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- declare-styleable自定義屬性值 -->
    <declare-styleable name="TopBar">
        <attr name="title" format="string" />
        <attr name="titleTextSize" format="dimension" />
        <attr name="titleTextColor" format="color" />
        <attr name="leftTextColor" format="color" />
        <attr name="leftBackground" format="reference|color" />
        <attr name="leftText" format="string" />
        <attr name="rightTextColor" format="color" />
        <attr name="rightBackground" format="reference|color" />
        <attr name="rightText" format="string" />
    </declare-styleable>
</resources>

    以上配置文件聲明瞭，標題，左button，右button的相關屬性

二、在佈局文件TopBar.java裏添加這些屬性：

public class TopBar extends RelativeLayout {
 private Button leftButton, rightButton;// 控件的左右邊按鈕
 private TextView titleText;// 標題文字
 private String leftText;// 左邊的button屬性
 private int leftTextColor;
 private Drawable leftBackground;
 private String rightText;// 右邊的button屬性
 private int rightTextColor;
 private Drawable rightBackground;
 private String title;// 中間標題屬性
 private int titleTextColor;
 private float titleTextSize;
 private static int leftBtnId = 1;
 private static int titleId = 2;
 private static int righBtntId = 3;
 TopBarClickListener topBarClickListener;
 private LayoutParams leftParams, rightParams, titleParams;// 三個控件的LayoutParams
 public TopBar(Context context, AttributeSet attrs) {
  super(context, attrs);
  // 從參數列表中獲取參數
  // TypedArray實例是個屬性的容器，context.obtainStyledAttributes()方法返回獲得。AttributeSet是節點的屬性集合
  // 第二個參數爲 爲獲取到值時的默認值
  TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.TopBar);
  leftText = ta.getString(R.styleable.TopBar_leftText);
  leftTextColor = ta.getColor(R.styleable.TopBar_leftTextColor, 0);
  leftBackground = ta.getDrawable(R.styleable.TopBar_leftBackground);
  rightText = ta.getString(R.styleable.TopBar_rightText);
  rightTextColor = ta.getColor(R.styleable.TopBar_rightTextColor, 0);
  rightBackground = ta.getDrawable(R.styleable.TopBar_rightBackground);
  title = ta.getString(R.styleable.TopBar_title);
  titleTextSize = ta.getDimension(R.styleable.TopBar_titleTextSize, 14);
  titleTextColor = ta.getColor(R.styleable.TopBar_titleTextColor, 0);
  ta.recycle();
  leftButton = new Button(context);
  rightButton = new Button(context);
  titleText = new TextView(context);
  leftButton.setId(leftBtnId);
  rightButton.setId(righBtntId);
  titleText.setId(titleId);
  // 爲組件配置佈局參數
  leftParams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,
    ViewGroup.LayoutParams.WRAP_CONTENT);
  rightParams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,
    ViewGroup.LayoutParams.WRAP_CONTENT);
  titleParams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,
    ViewGroup.LayoutParams.WRAP_CONTENT);
  //
  leftParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT, RelativeLayout.TRUE);
  addView(leftButton, leftParams);
  rightParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT, TRUE);
  addView(rightButton, rightParams);
  titleParams.addRule(RelativeLayout.CENTER_IN_PARENT, TRUE);
  addView(titleText, titleParams);
  leftButton.setTextColor(leftTextColor);
  leftButton.setBackgroundDrawable(leftBackground);
  leftButton.setText(leftText);
  rightButton.setTextColor(rightTextColor);
  rightButton.setBackgroundDrawable(rightBackground);
  rightButton.setText(rightText);
  titleText.setTextColor(titleTextColor);
  titleText.setTextSize(titleTextSize);
  titleText.setText(title);
  titleText.setGravity(Gravity.CENTER);
  setBackgroundColor(0xff70A0E9);
  leftButton.setOnClickListener(new OnClickListener() {
   @Override
   public void onClick(View v) {
    if (topBarClickListener != null) {
     topBarClickListener.leftBtnClick();
    }
   }
  });
  rightButton.setOnClickListener(new OnClickListener() {
   @Override
   public void onClick(View v) {
    if (topBarClickListener != null) {
     topBarClickListener.rightBtnClick();
    }
   }
  });
  titleText.setOnClickListener(new OnClickListener() {
   @Override
   public void onClick(View v) {
    if (topBarClickListener != null) {
     topBarClickListener.titleClick();
    }
   }
  });
 }
 /**
  * 單擊事件監聽
  * 
  * @param topBarClickListener
  */
 public void setTopBarClickListener(TopBarClickListener topBarClickListener) {
  this.topBarClickListener = topBarClickListener;
 }
}

    上面的文件，添加了聲明的各個屬性，生成了一個TopBar模版，如今看下這個模版怎麼使用。

三、在佈局文件裏使用設計好的TopBar UI模版：

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:custom="http://schemas.android.com/apk/res/com.example.topbarmodle"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="5dp"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >
    <com.example.topbarmodle.TopBar
        android:id="@+id/topBar"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        custom:leftText="Back"
        custom:leftTextColor="@android:color/black"
        custom:rightText="More"
        custom:rightTextColor="@android:color/black"
        custom:title="自定義標題"
        custom:titleTextColor="@android:color/black"
        custom:titleTextSize="20sp" >
    </com.example.topbarmodle.TopBar>
</RelativeLayout>

    注意：(1)在佈局文件的xml中com.example.topbarmodle.TopBar顯示控件表明的類；       (2) xmlns:custom=http://schemas.android.com/apk/res/com.example.topbarmodle是必須添加的，其中com.example.topbarmodle是類的包名，添加後，在custom中添加使用alt+/會自動添加咱們定義的相關屬性。

四、實現自定義的模版相關屬性的監聽，這裏監聽兩個button,和title：

public interface TopBarClickListener {
 void leftBtnClick();
 void titleClick();
 void rightBtnClick();
}

    這個已經在TopBar.java裏已經設置監聽相關方法。

五、實現測試類，測試設計效果：

public class MainActivity extends Activity {
 private TopBar topBar;
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  topBar = (TopBar) findViewById(R.id.topBar);
  topBar.setTopBarClickListener(new TopBarClickListener() {
   @Override
   public void titleClick() {
    Toast.makeText(MainActivity.this, "title", Toast.LENGTH_SHORT).show();
   }
   @Override
   public void rightBtnClick() {
    Toast.makeText(MainActivity.this, "More", Toast.LENGTH_SHORT).show();
   }
   @Override
   public void leftBtnClick() {
    Toast.makeText(MainActivity.this, "Back", Toast.LENGTH_SHORT).show();
   }
  });
 }
 @Override
 public boolean onCreateOptionsMenu(Menu menu) {
  // Inflate the menu; this adds items to the action bar if it is present.
  getMenuInflater().inflate(R.menu.main, menu);
  return true;
 }
}

整個開發過程到此爲止，已經基本實現了相關功能。源碼下載：http://download.csdn.net/detail/shizhao0716/8382125