### 1、Topbar模板功能介紹：自定義UI布局，自定義UI屬性，自定義按鈕監聽事件，自定義左、右button的顯示！效果圖如下：    ### 2、自定義屬性：values——mytopbar.xml： ~~~ <?xml version="1.0" encoding="utf-8"?> <resources> <!-- 自定義屬性 --> <declare-styleable name="MyTopBar"> <attr name="leftTextColor" format="color"/> <!-- BackGround屬性可以顏色，也可以是一個資源文件 --> <!-- 所以BackGround是 format="reference|color"--> <attr name="leftBackGround" format="reference|color"/> <attr name="leftText" format="string"/> <attr name="title" format="string"/> <attr name="titleTextSize" format="dimension"/> <attr name="titleTextColor" format="color"/> <attr name="rightTextColor" format="color"/> <attr name="rightBackGround" format="reference|color"/> <attr name="rightText" format="string"/> </declare-styleable> </resources> ~~~ ### 3、自定義VIew：MyTopBar.java ~~~ //繼承RelativeLayout并重寫構造方法 public class MyTopBar extends RelativeLayout { // 自定義的控件和自定義的屬性（values下mytopbar.xml）的聲明 private Button leftButton, rightButton; private TextView tvTitle; private int leftTextColor; private Drawable leftDrawable; private String leftText; private float titleTextSize; private int titleTextColor; private String title; private int rightTextColor; private Drawable rightDrawable; private String rightText; private LayoutParams leftLayoutParams, titleLayoutParams, rightLayoutParams; private myTopbarClicklistenter clicklistenter; //自定義click的監聽回調接口 public interface myTopbarClicklistenter{ public void leftClick(); public void rightClick(); } //自定義一個setOnClickListenter方法 public void setOnTopbarClickListenter(myTopbarClicklistenter clicklistenter){ this.clicklistenter=clicklistenter; //調用的時候通過一個匿名內部類映射進來 } //重寫構造方法 public MyTopBar(Context context, AttributeSet attrs) { super(context, attrs); // 獲取自定義的屬性，并將自定義的屬性映射到自定義的屬性值中去 // 通過obtainStyledAttributes獲取自定義屬性，并存到TypedArray TypedArray ta = context.obtainStyledAttributes(attrs,R.styleable.MyTopBar); leftTextColor = ta.getColor(R.styleable.MyTopBar_leftTextColor, 0); //從TypedArray中取出來，并對應到自定義的屬性值上 leftDrawable = ta.getDrawable(R.styleable.MyTopBar_leftBackGround); leftText = ta. getString(R.styleable.MyTopBar_leftText); titleTextSize = ta.getDimension(R.styleable.MyTopBar_titleTextSize, 0); titleTextColor = ta.getColor(R.styleable.MyTopBar_titleTextColor, 0); title = ta.getString(R.styleable.MyTopBar_title); rightTextColor = ta.getColor(R.styleable.MyTopBar_rightTextColor, 0); rightDrawable = ta.getDrawable(R.styleable.MyTopBar_rightBackGround); rightText = ta.getString(R.styleable.MyTopBar_rightText); ta.recycle(); //組件定義 leftButton = new Button(context); tvTitle = new TextView(context); rightButton = new Button(context); // 將自定義的屬性設置到控件上 leftButton.setTextColor(leftTextColor); leftButton.setBackground(leftDrawable); leftButton.setText(leftText); tvTitle.setTextColor(titleTextColor); tvTitle.setTextSize(titleTextSize); tvTitle.setText(title); tvTitle.setGravity(Gravity.CENTER); // 設置文字居中 rightButton.setTextColor(rightTextColor); rightButton.setBackground(rightDrawable); rightButton.setText(rightText); setBackgroundColor(0xFFF59563); // 設置背景顏色 //將自定義的控件放到Layout中（以LayoutParams的形式） leftLayoutParams=new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT); leftLayoutParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT,TRUE); //設置左對齊 addView(leftButton,leftLayoutParams); //leftButton以leftLayoutParams的形式加入到ViewGroup中 titleLayoutParams=new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.MATCH_PARENT); titleLayoutParams.addRule(RelativeLayout.CENTER_IN_PARENT,TRUE); //設置居中對齊 addView(tvTitle,titleLayoutParams); //tvTitle以titleLayoutParams的形式加入到ViewGroup中 rightLayoutParams=new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT); rightLayoutParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT,TRUE); //設置右對齊 addView(rightButton,rightLayoutParams);//rightButton以rightLayoutParams的形式加入到ViewGroup中 //設置監聽事件 leftButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { clicklistenter.leftClick(); } }); rightButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { clicklistenter.rightClick(); } }); } //設置左Button是否顯示 public void setLeftIsVisible(boolean flag){ if(flag){ leftButton.setVisibility(View.VISIBLE); }else{ leftButton.setVisibility(View.GONE); } } // 設置右Button是否顯示 public void setRightIsVisible(boolean flag) { if (flag) { rightButton.setVisibility(View.VISIBLE); } else { rightButton.setVisibility(View.GONE); } } } ~~~ ### 4、activity_main.xml引用自定義控件： ~~~ <!-- 引用自定義控件 --> <com.example.topbar.MyTopBar android:id="@+id/my_topbar" android:layout_width="match_parent" android:layout_height="40dp" app:leftBackGround="@drawable/blue" app:leftTextColor="#ffffff" app:leftText="Back" app:title="自定義標題" app:titleTextSize="10sp" app:titleTextColor="#123412" app:rightBackGround="@drawable/blue" app:rightTextColor="#ffffff" app:rightText="More"> </com.example.topbar.MyTopBar> ~~~ ### 5、MainActivity.java使用控件： ~~~ public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); MyTopBar topBar =(MyTopBar) findViewById(R.id.my_topbar); //調用自定義的Topbar的自定義的click監聽事件 topBar.setOnTopbarClickListenter(new MyTopBar.myTopbarClicklistenter() { @Override public void leftClick() { // TODO Auto-generated method stub Toast.makeText(MainActivity.this, "點擊了Back", Toast.LENGTH_SHORT).show(); } @Override public void rightClick() { // TODO Auto-generated method stub Toast.makeText(MainActivity.this, "點擊了More", Toast.LENGTH_SHORT).show(); } }); //topBar.setLeftIsVisible(false); //topBar.setRightIsVisible(false); } } ~~~ 6、使用Topbar模板提示：正如上面MainActivity中，實例化后，可以調用TopBar里面的方法。 [**完整代碼下載：https://github.com/songshimvp/AndroidStudy/tree/master/TopBar**](https://github.com/songshimvp/AndroidStudy/tree/master/TopBar)