Android UI模板设计---TopBar(标题栏)
来源:互联网 发布:消防主机编程视频教程 编辑:程序博客网 时间:2024/04/28 16:01
之前在郭神的书上看到了自定义控件这个概念,今天在慕课网又接触了自定义模板,今天就把学习到的自定义TopBar模板的总结写在这里。自定义主要分为三步:
- 设置自定义模板需要的属性
- 在java代码中实现我们的自定义模板
- 在布局文件中引用自定义模板
1. 设置自定义模板需要的属性
首先新建项目TopBar,在res的values目录下新建一个xml文件topba_atts,用来设置我们自定义模板需要的属性,xml代码里面resources下通过declare-styleable来声明,告诉系统这是我们声明的属性,declare-styleable下的attr声明我们需要属性的名称name和引用的资源的类型format;代码如下:
<?xml version="1.0" encoding="utf-8"?><resources> <declare-styleable name="Topbar"> <!--设置标题栏属性--> <attr name="titleText" format="string"></attr> <attr name="titleTextSize" format="dimension"></attr> <attr name="titleTextColor1" format="color"></attr> <!--设置左侧显示属性,可以设置为图片什么的--> <attr name="leftText" format="string"></attr> <attr name="leftTextColre" format="color"></attr> <attr name="leftBackground" format="reference|color"></attr> <!--设置右侧显示属性,可以设置为图片什么的--> <attr name="rightText" format="string"></attr> <attr name="rightTextColre" format="color"></attr> <attr name="rightBackground" format="reference|color"></attr> </declare-styleable></resources>
Topbar需要的属性定义完毕,下面是java代码中实现。
2. 在java代码中实现我们的自定义模板
package com.udmodel.css.topbar;import android.content.Context;import android.content.res.TypedArray;import android.graphics.drawable.Drawable;import android.util.AttributeSet;import android.view.Gravity;import android.view.View;import android.view.ViewGroup;import android.widget.Button;import android.widget.RelativeLayout;import android.widget.TextView;/** * Created by css on 2016/3/27. */public class Topbar extends RelativeLayout { //定义我们要用到控件 private Button leftButton,rightButton; private TextView tvtitle; //声明控件属性,和在values下面的topbar_atts.xml中的对应 private int titleTextColor1; private String titleText; private float titleTextSize; private int leftTextColor; private Drawable leftBackground; private String leftText; private int rightTextColor; private Drawable rightBackground; private String rightText; //定义控件的布局属性 private LayoutParams leftParams,rightParams,titleParams; //仿照系统实现onclick事件的方法,实现自定义模板内控件的点击事件 //用于映射调用者传进来的topbarClickListener接口 private topbarClickListener listener; //定义接口,实现两个方法 public interface topbarClickListener{ public void leftClick(); public void rightClick(); } //创建一个方法给调用者,调用者可以传递进来匿名内部类实现 public void setOnTopbarClickListener(topbarClickListener listener) { this.listener = listener; } public Topbar(Context context, AttributeSet attrs) { super(context, attrs); //获取我们定义的xml文件 TypedArray topBarAtts = context.obtainStyledAttributes(attrs,R.styleable.Topbar); titleTextColor1 = topBarAtts.getColor(R.styleable.Topbar_titleTextColor1, 0); titleText = topBarAtts.getString(R.styleable.Topbar_titleText); titleTextSize = topBarAtts.getDimension(R.styleable.Topbar_titleTextSize, 0); leftTextColor =topBarAtts.getColor(R.styleable.Topbar_leftTextColor, 0); leftBackground = topBarAtts.getDrawable(R.styleable.Topbar_leftBackground); leftText = topBarAtts.getString(R.styleable.Topbar_leftText); rightTextColor =topBarAtts.getColor(R.styleable.Topbar_rightTextColor, 0); rightBackground = topBarAtts.getDrawable(R.styleable.Topbar_rightBackground); rightText = topBarAtts.getString(R.styleable.Topbar_rightText); //避免浪费资源,避免因为缓存造成的错误 topBarAtts.recycle(); //实例化控件 leftButton = new Button(context); rightButton = new Button(context); tvtitle = new TextView(context); //把获取到的属性赋值给我们的控件 leftButton.setTextColor(leftTextColor); leftButton.setBackground(leftBackground); leftButton.setText(leftText); rightButton.setTextColor(rightTextColor); rightButton.setBackground(rightBackground);//该方法必须在API16以上才可以用 rightButton.setText(rightText); tvtitle.setTextColor(titleTextColor1); tvtitle.setText(titleText); tvtitle.setTextSize(titleTextSize); tvtitle.setGravity(Gravity.CENTER); setBackgroundColor(0xffffff00);//设置Topbar的背景色 //给左边Button添加属性,然后添加到View中 leftParams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT); //定义左侧按钮的宽高属性 leftParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT, TRUE);//制定左对齐的规则 addView(leftButton, leftParams);//添加到View中 //给右边Button添加属性,然后添加到View中 rightParams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT); rightParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT, TRUE); addView(rightButton, rightParams); //给中间的TextView添加属性,然后添加到View中 titleParams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.MATCH_PARENT); titleParams.addRule(RelativeLayout.CENTER_IN_PARENT, TRUE);//居中对齐 addView(tvtitle, titleParams); //在leftButton和rightButton的OnClick事件中去调用该接口的两个方法 leftButton.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { listener.leftClick(); } }); rightButton.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { listener.rightClick(); } }); } //自定义方法控制左侧button的显示吗,调用者只用传入值来选择true可用,false不可用消失 public void setLeftButtonIsvisiable(boolean flag) { if(flag) { leftButton.setVisibility(View.VISIBLE); } else { leftButton.setVisibility(View.GONE); } }}
3. 在布局文件中引用自定义模板
代码如下:
<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:custom="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" custom:layout_behavior="@string/appbar_scrolling_view_behavior" tools:context="com.udmodel.css.topbar.MainActivity" tools:showIn="@layout/activity_main"> <com.udmodel.css.topbar.Topbar android:layout_width="match_parent" android:layout_height="40dp" android:id="@+id/topbar" custom:leftBackground="@color/colorAccent" custom:leftText="Back" custom:leftTextColor="#FFFFFF" custom:rightBackground="@color/colorAccent" custom:rightText="more" custom:rightTextColor="#FFFFFF" custom:titleText="自定义标题" custom:titleTextColor1="#123412" custom:titleTextSize="10sp" ></com.udmodel.css.topbar.Topbar></RelativeLayout>
下面这句在AS中可以直接在最后写res-auto,但是如果在eclipse中就需要写全包名,具体是引用第三方的名称空间(NameSpace),定义为custom,然后通过custom找到我们定义的属性
xmlns:custom="http://schemas.android.com/apk/res-auto"
下面的@color/colorAccent是在values下面的color下面有个自定义颜色,直接引用,如果没有,新建一个,颜色自己选
custom:leftBackground="@color/colorAccent"
最后,我们在代码中展示自定义的模板,并且验证功能;
@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //获得topbar Topbar topbar = (Topbar) findViewById(R.id.topbar); //利用Topbar类中的方法来重写点击事件 topbar.setOnTopbarClickListener(new Topbar.topbarClickListener() { @Override public void leftClick() { Toast.makeText(MainActivity.this,"left",Toast.LENGTH_SHORT).show(); } @Override public void rightClick() { Toast.makeText(MainActivity.this,"right",Toast.LENGTH_SHORT).show(); } }); //设置左侧的Button不可见 topbar.setLeftButtonIsvisiable(false);
效果图:
1、未点击Button,左侧Button隐藏
2、点击右侧Button,提示Toast
下载地址:自定义Topbar下载
0 0
- Android UI模板设计---TopBar(标题栏)
- Android UI模板设计---TopBar(标题栏)
- Android UI模板设计 TopBar 标题栏的设计
- Android UI 模板设计——Topbar
- Android UI标题栏模板设计
- Android中实现UI模板-topbar
- Android UI模板设计--自定义actionbar(topbar)模板(慕课网学习笔记)
- Android 自定义标题栏Topbar
- Android 自定义标题栏TopBar
- Android--自定义标题栏(TopBar)
- android-->自定义view,TopBar模板
- Android中自定义Topbar模板
- android UI设计模板
- Android UI 模板设计
- Android UI模板设计
- Android UI模板设计
- Android UI模板设计--慕课
- Android UI模板设计案例
- 第5周项目1(2)三角形类雏形
- gradle 基本配置介绍
- java学习笔记-IO流
- 互斥锁的使用
- 高水位线
- Android UI模板设计---TopBar(标题栏)
- HDU 4283 You Are the One(区间DP)
- 用优雅的方式解决重复点击的困扰
- spring security的原理及教程
- 在art.dialog中加载ztree
- 2016SDAU课程练习一1008 Problem I
- 异步任务处理---AsyncTask
- Go语言学习四:函数和类
- 初学者svn项目发布和下载