Android自定义View之TopBar

最新推荐文章于 2021-11-24 00:00:00 发布

weixin_34216036

最新推荐文章于 2021-11-24 00:00:00 发布

阅读量69

点赞数

原文链接：https://my.oschina.net/u/1999544/blog/366436

版权

2019独角兽企业重金招聘Python工程师标准>>>

一、先看下效果图(平板上实验不是很清晰)：

左边是“Back”按钮，中间是“自定义标题"，右边是"More"，点击会弹出相应的提示，这里使用Toast提示一个简单的信息作为实例。

二、开发流程：

1、自定义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的相关属性

2、在布局文件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模版，现在看下这个模版怎么使用。

3、在布局文件里使用设计好的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+/会自动添加我们定义的相关属性。

4、实现自定义的模版相关属性的监听，这里监听两个button,和title：

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

这个已经在TopBar.java里已经设置监听相关方法。

5、实现测试类，测试设计效果：

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

转载于:https://my.oschina.net/u/1999544/blog/366436