自定义TopBarTest

来源：互联网发布：扫描答题软件编辑：程序博客网时间：2024/06/06 13:07

自定义view的布局

public class WidgetTopBar extends RelativeLayout {    private ImageButton ibLeft;    private ImageButton ibRight;    private Button btnLeft;    private Button btnRight;    private TextView tvTitle;    private String title;    private String leftText;    private String rightText;    private Drawable leftDrawable;    private Drawable rightDrawable;    public WidgetTopBar(Context context, AttributeSet attrs) {        super(context, attrs);        //初始化属性        initAttrs(context, attrs);        //填充视图        View.inflate(context, R.layout.widget_top_bar, this);        btnLeft = (Button) findViewById(R.id.btn_left_top_bar);        ibLeft = (ImageButton) findViewById(R.id.ib_left_top_bar);        tvTitle = (TextView) findViewById(R.id.tv_title_top_bar);        btnRight = (Button) findViewById(R.id.btn_right_top_bar);        ibRight = (ImageButton) findViewById(R.id.ib_right_top_bar);        //如果属性有值的话，那我们就需要给控件初始化数据了        initData();    }    //初始化属性    private void initAttrs(Context context, AttributeSet attrs) {        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.WidgetTopBar);        // WidgetTopBar_m_left这个名字很奇怪，我们明明没有定义，        // 这是因为系统自动把我们定义的m_title加到WidgetTopBar后面去了        //标题        title = typedArray.getString(R.styleable.WidgetTopBar_m_title);        //左边按钮的文字        leftText = typedArray.getString(R.styleable.WidgetTopBar_m_left_text);        //左边按钮的图片        rightText = typedArray.getString(R.styleable.WidgetTopBar_m_right_text);        //右边按钮的文字        leftDrawable = typedArray.getDrawable(R.styleable.WidgetTopBar_m_left_image);        //右边按钮的图片        rightDrawable = typedArray.getDrawable(R.styleable.WidgetTopBar_m_right_image);    }    // 初始化数据,因为每个按钮，我都在布局文件中将其显示状态设置为GONE 了    // 所以在填充数据的时候，要显示一下    private void initData() {        if (title != null) {            tvTitle.setText(title);        }        if (leftText != null) {            btnLeft.setVisibility(VISIBLE);            btnLeft.setText(leftText);        }        if (rightText != null) {            btnRight.setVisibility(VISIBLE);            btnRight.setText(rightText);        }        if (leftDrawable != null) {            ibLeft.setVisibility(VISIBLE);            ibLeft.setBackground(leftDrawable);        }        if (rightDrawable != null) {            ibRight.setVisibility(VISIBLE);            ibRight.setBackground(rightDrawable);        }    }    //获取左边文字按钮    public Button getLeftBtnText() {        return btnLeft;    }    //获取右边文字按钮    public Button getRightBtnText() {        return btnRight;    }    //获取左边图片按钮    public ImageButton getLeftBtnImage() {        return ibLeft;    }    //获取右边图片按钮    public ImageButton getRightBtnImage() {        return ibRight;    }}

主Activity的代码

package com.bwie.test.topbartest;import android.content.Context;import android.os.Bundle;import android.support.v7.app.AppCompatActivity;import android.view.View;import android.widget.Toast;public class MainActivity extends AppCompatActivity implements View.OnClickListener{    private Context mContext = MainActivity.this;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        //这是第一个标题        WidgetTopBar wtbOne = (WidgetTopBar) findViewById(R.id.wtb_one);        wtbOne.getLeftBtnText().setOnClickListener(this);        wtbOne.getRightBtnImage().setOnClickListener(this);        //这是第二个标题        WidgetTopBar wtbTwo = (WidgetTopBar) findViewById(R.id.wtb_two);        wtbTwo.getLeftBtnImage().setOnClickListener(this);        wtbTwo.getRightBtnText().setOnClickListener(this);        //这是第三个标题        WidgetTopBar wtbThree = (WidgetTopBar) findViewById(R.id.wtb_three);        wtbThree.getLeftBtnImage().setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                Toast.makeText(mContext, "第三个标题 左边按钮", Toast.LENGTH_SHORT).show();            }        });    }    @Override    public void onClick(View v) {        switch (v.getId()) {            case R.id.ib_left_top_bar: {                Toast.makeText(mContext, "第二个标题 左边按钮", Toast.LENGTH_SHORT).show();                break;            }            case R.id.ib_right_top_bar: {                Toast.makeText(mContext, "第一个标题 右边按钮", Toast.LENGTH_SHORT).show();                break;            }            case R.id.btn_left_top_bar: {                Toast.makeText(mContext, "第一个标题 左边按钮", Toast.LENGTH_SHORT).show();                break;            }            case R.id.btn_right_top_bar: {                Toast.makeText(mContext, "第二个标题 右边按钮", Toast.LENGTH_SHORT).show();                break;            }        }    }}

主布局

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical">    <com.bwie.test.topbartest.WidgetTopBar        android:id="@+id/wtb_one"        android:layout_width="match_parent"        android:layout_height="wrap_content"        app:m_left_text="返回"        app:m_right_image="@mipmap/ic_launcher"        app:m_title="这是标题1" />    <com.bwie.test.topbartest.WidgetTopBar        android:id="@+id/wtb_two"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_marginTop="10dp"        app:m_left_image="@mipmap/ic_launcher"        app:m_right_text="分享"        app:m_title="这是标题2" />    <com.bwie.test.topbartest.WidgetTopBar        android:id="@+id/wtb_three"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_marginTop="10dp"        app:m_left_image="@mipmap/ic_launcher"        app:m_title="这是标题3" /></LinearLayout>

自定义的view的布局格式

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:background="#ff529bff"    android:layout_height="44dp">    <Button        android:id="@+id/btn_left_top_bar"        android:background="#0000"        android:textColor="#fff"        android:textSize="16sp"        android:visibility="gone"        android:layout_centerVertical="true"        android:layout_marginStart="10dp"        android:layout_width="wrap_content"        android:layout_height="wrap_content" />    <ImageButton        android:id="@+id/ib_left_top_bar"        android:background="#0000"        android:visibility="gone"        android:layout_centerVertical="true"        android:layout_marginStart="20dp"        android:layout_width="30dp"        android:layout_height="30dp" />    <TextView        android:id="@+id/tv_title_top_bar"        android:textSize="18sp"        android:textColor="#fff"        android:layout_centerInParent="true"        android:layout_width="wrap_content"        android:layout_height="wrap_content" />    <Button        android:id="@+id/btn_right_top_bar"        android:visibility="gone"        android:background="#0000"        android:textColor="#fff"        android:textSize="16sp"        android:layout_marginEnd="10dp"        android:layout_centerVertical="true"        android:layout_alignParentEnd="true"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        tools:ignore="RelativeOverlap" />    <ImageButton        android:id="@+id/ib_right_top_bar"        android:visibility="gone"        android:background="#0000"        android:layout_marginEnd="20dp"        android:layout_centerVertical="true"        android:layout_alignParentEnd="true"        android:layout_width="30dp"        android:layout_height="30dp" /></RelativeLayout>

一个需要的attrs,view的自定义属性

<?xml version="1.0" encoding="utf-8"?><resources>    <!--WidgetTopBar是自定义控件的类名-->    <declare-styleable name="WidgetTopBar">        <attr name="m_title" format="string" />        <attr name="m_left_text" format="string" />        <attr name="m_right_text" format="string" />        <attr name="m_left_image" format="reference" />        <attr name="m_right_image" format="reference" />    </declare-styleable></resources>

效果

阅读全文

1 0