文档章节

Android自定义View之TopBar

二进制的忧伤
 二进制的忧伤
发布于 2015/01/12 11:45
字数 1021
阅读 132
收藏 1

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

    左边是“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

© 著作权归作者所有

二进制的忧伤
粉丝 9
博文 19
码字总数 16902
作品 0
深圳
程序员
私信 提问
Android UI(四)云通讯录项目之云端更新进度条实现

作者:泥沙砖瓦浆木匠 网站:http://blog.csdn.net/jeffli1993 个人签名:打算起手不凡写出鸿篇巨作的人,往往坚持不了完成第一章节。 交流QQ群:【编程之美 365234583】http://jq.qq.com/?w...

泥沙砖瓦浆木匠
2014/12/02
173
3
StatusBar、ActionBar tips

1,StatusBar颜色 1.1 主题设置 在主题(theme)中设置windowTranslucentStatus为true将填充顶部的状态栏区域。(有虚拟按键的设备上)设置windowTranslucentNavigation为true将填充底部导航...

lightUp
2015/10/18
104
0
Android自定义View基础:ViewRoot、DecorView & Window的简介

前言 自定义View原理是Android开发者必须了解的基础,在了解自定义View之前,你需要有一定的知识储备。 今天,本文将全面解析关于自定义View中基础:ViewRoot、DecorView & Window,希望你们...

Carson_Ho
05/30
0
0
MySQL数据库实操教程(34)——SQL语句综合练习

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 https://blog.csdn.net/lfdfhl/article/details/99702391 自定义View系列教程00–推翻自己和...

谷哥的小弟
08/18
0
0
PDF转Word的利器——ABBYY FineReader

版权声明: https://blog.csdn.net/lfdfhl/article/details/84960682 自定义View系列教程00–推翻自己和过往,重学自定义View 自定义View系列教程01–常用工具介绍 自定义View系列教程02–o...

谷哥的小弟
2018/12/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

sync 包讲解

sync.Once Once 的作用是多次调用但只执行一次,Once 只有一个方法,Once.Do(),向 Do 传入一个函数,这个函数在第一次执行 Once.Do() 的时候会被调用,以后再执行 Once.Do() 将没有任何动作...

李琼涛
1分钟前
1
0
java中的byte占一字节或4字节

https://www.jianshu.com/p/2f663dc820d0

南桥北木
15分钟前
2
0
Cassandra 常用命令

Linux控制台命令 #进入Cassandra的安装目录 cd /home/db/cassandra/cassandra #进入Cassandra 无密码 ./bin/cqlsh localhost(IP)有密码 ./bin/cqlsh localhost(IP)-u 用户名 #显示所...

最菜最菜之小菜鸟
20分钟前
2
0
自建redis笔记

自建redis笔记 最近在linux安装了一下redis,特做一些笔记! 本文先单节点启动redis,然后再进行持久化配置,在次基础上,再分享搭建主从模式的配置以及Sentinel 哨兵模式及集群的搭建 单节点...

北极之北
28分钟前
2
0
扛住阿里双十一高并发流量,Sentinel是怎么做到的?

Sentinel 承接了阿里巴巴近 10 年的双十一大促流量的核心场景 本文介绍阿里开源限流熔断方案Sentinel功能、原理、架构、快速入门以及相关框架比较 基本介绍 1 名词解释 服务限流 :当系统资源...

分布式系统架构
36分钟前
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部