自定義TopBar

1.做法:

1)設計需要的屬性

2)實現一個View

3)引用View


2.在values中建立一個atts.xml文件

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <declare-styleable name="Topbar">
        <attr name="titleText" 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="rightText" format="string"/>
        <attr name="rightTextColor" format="color"/>
        <attr name="rightBackground" format="reference|color"/>

    </declare-styleable> 
</resources>

3.新建一個TopBar.java文件

public class TopBar extends RelativeLayout {

	private Button leftButton;
	private Button rightButton;
	private TextView tvtitle;

	private int leftColor;
	private Drawable leftBackground;
	private String leftText;

	private int rightColor;
	private Drawable rightBackground;
	private String rightText;

	private String titleText;
	private int titleTextColor;
	private float titleTextSize;

	private LayoutParams leftParams;
	private LayoutParams rightParams;
	private LayoutParams titleParams;

	private topbarClickListener listener;// 開始定義自定義監聽事件

	public interface topbarClickListener {
		public void leftClick();

		public void rightClick();
	}

	public void setOnTopbarClickListener(topbarClickListener listener) {
		this.listener = listener;
	}

	public TopBar(final Context context, AttributeSet attrs) {
		super(context, attrs);
		// 通過TypedArray獲取自定義存儲的值
		TypedArray ta = context.obtainStyledAttributes(attrs,
				R.styleable.Topbar);
		leftColor = ta.getColor(R.styleable.Topbar_leftTextColor, 0);
		leftText = ta.getString(R.styleable.Topbar_leftText);
		leftBackground = ta.getDrawable(R.styleable.Topbar_leftBackground);

		rightColor = ta.getColor(R.styleable.Topbar_rightTextColor, 0);
		rightText = ta.getString(R.styleable.Topbar_rightText);
		rightBackground = ta.getDrawable(R.styleable.Topbar_rightBackground);

		titleText = ta.getString(R.styleable.Topbar_titleText);
		titleTextColor = ta.getColor(R.styleable.Topbar_titleTextColor, 0);
		titleTextSize = ta.getDimension(R.styleable.Topbar_titleTextSize, 0);

		ta.recycle();// 回收TypedArray,以便後面重用。
		// 詳見http://www.cnblogs.com/kissazi2/p/4049982.html

		leftButton = new Button(context);
		rightButton = new Button(context);
		tvtitle = new TextView(context);

		leftButton.setTextColor(leftColor);
		leftButton.setText(leftText);
		leftButton.setBackground(leftBackground);

		rightButton.setText(rightText);
		rightButton.setTextColor(rightColor);
		rightButton.setBackground(rightBackground);

		tvtitle.setText(titleText);
		tvtitle.setTextColor(titleTextColor);
		tvtitle.setTextSize(titleTextSize);
		tvtitle.setGravity(Gravity.CENTER);

		setBackgroundColor(0xFFF59563);

		leftParams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,
				ViewGroup.LayoutParams.WRAP_CONTENT);// 設置寬高
		leftParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT, TRUE);
		addView(leftButton, leftParams);

		rightParams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,
				ViewGroup.LayoutParams.WRAP_CONTENT);
		rightParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT, TRUE);
		addView(rightButton, rightParams);

		titleParams = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
				ViewGroup.LayoutParams.MATCH_PARENT);
		titleParams.addRule(RelativeLayout.CENTER_IN_PARENT, TRUE);
		addView(tvtitle, titleParams);

		leftButton.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View v) {
				listener.leftClick();

			}
		});
		rightButton.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View v) {
				listener.rightClick();
			}
		});
	}

	public void setLeftIsVisable(boolean flag) {
		if (flag) {
			leftButton.setVisibility(View.VISIBLE);
		} else {
			leftButton.setVisibility(View.GONE);
		}
	}

	public void setRightIsVisable(boolean flag) {
		if (flag) {
			rightButton.setVisibility(View.VISIBLE);
		} else {
			rightButton.setVisibility(View.GONE);
		}
	}
}


由上述代碼可以看出,先是繼承RelativeLayout,並重寫構造方法,在方法中將自定義獲取的值存到TypedArray中,並取出對應的值賦給相應的變量,再是通過LayoutParams()方法把控件添加到ViewGroup中,所有屬性在LayoutParams()中設置。

其中寫到了如何自定義監聽事件:

首先,通過接口回調來抽象定義我們的方法,並通過接口實現將TopBar中點擊事件抽象出來,讓調用者決定我們做什麼;

其次,通過在TopBar中暴露出來的公共方法,用代碼定義我們需要的回調的控制方法;

最後,通過自定義屬性和自定義方法,一靜一動兩種方式來控制TopBar。

在TopBar.java文件中已經寫好了自定義監聽事件topbarClickListener接口,這樣的好處是使其變成了一個母板,不用再重複修改。


4.在activity_main.xml中添加自定義TopBar

<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.topbar"
    android:padding="1dp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    tools:context=".MainActivity" >

    <com.example.topbar.TopBar
        android:id="@+id/topBar1"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        custom:leftBackground="@drawable/blue_button"
        custom:leftText="後退"
        custom:leftTextColor="#FFFFFF"
        custom:rightBackground="@drawable/blue_button"
        custom:rightText="下一步"
        custom:rightTextColor="#ffffff"
        custom:titleText="自定義標題"
        custom:titleTextColor="#123412"
        custom:titleTextSize="10sp" >
    </com.example.topbar.TopBar>
  
</RelativeLayout>


5.直接在MainActivity.java中引用TopBar。

public class MainActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		TopBar topbar = (TopBar) findViewById(R.id.topbar);
		topbar.setOnTopbarClickListener(new topbarClickListener() {

			@Override
			public void rightClick() {
				Toast.makeText(MainActivity.this, "你點擊的是右鍵", Toast.LENGTH_SHORT)
						.show();
			}

			@Override
			public void leftClick() {
				Toast.makeText(MainActivity.this, "你點擊的是左鍵", Toast.LENGTH_SHORT)
						.show();
			}
		});
		topbar.setLeftIsVisable(false);
	}

}


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章