Android中自定義Topbar模板

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