zoukankan      html  css  js  c++  java
  • android自定义UI模板图文详解

    不知道大家在实际开发中有没有自定义过UI模板?今天花时间研究了一下android中自定义UI模板,与大家分享一下。
    每个设计良好的App都是自定义标题栏,在自定义标题栏的过程中大部分人可能都是自定义一个标题的xml文件,然后在需要的地方直接通过include来引用,这比起在每个布局文件中写标题栏已经进化很多了,但仍然不是最简单有效的方法,我们为什么不能自定义一个标题控件呢?今天就带大家自己做一个标题栏控件。效果图如下:

    这里写图片描述

    开始啦:


    第一步:自定义xml属性

    新建一个android项目,在values文件夹中新建一个atts.xml的文件,在这个xml文件中声明我们一会在使用自定义控件时候需要指明的属性。
    atts.xml

    <?xml version="1.0" encoding="utf-8"?>
    <resources>
    
        <declare-styleable name="ToolBar">
            <attr name="title" format="string" />
            <attr name="titleTextSize" format="dimension" />
            <attr name="titleTextColor" format="color" />
            <attr name="leftBackground" format="reference|color" />
            <attr name="leftText" format="string" />
            <attr name="leftTextColor" format="reference|color" />
            <attr name="rightBackground" format="reference|color" />
            <attr name="rightText" format="string" />
            <attr name="rightTextColor" format="reference|color" />
        </declare-styleable>
    
    </resources>
    

    前面的name是我们要使用的属性名称,后面的format表示该属性接受的值的格式,string表示该属性的值是一个字符串,color表示该属性的值是一个颜色值,dimension表示该属性的值是一个尺寸,reference表示该属性的值可以参考某一个资源id,其他常见的format值还有:boolean(布尔值)、float(浮点值)、integer(整型值)、fraction(百分数)、enum(枚举值)、flag(位或运算)。


    第二步:自定义标题类
    在Java文件中自定义一个类继承RelativeLayout,并实现它的构造方法,我们的标题栏由三部分组成,左右两边各是一个Button,中间是一个TextView,因此我们在这个布局文件中要做的事就是对这三个控件进行处理。

    先声明标题栏的三个空间及相关参数,这些参数都是根据atts.xml中来设置的,因为我们在引用自定义控件的时候是从xml中引用的,属性的设置都在xml文件中,我们从xml文件中拿到属性的值后再对控件设置赋值。

    	/**
    	 * 标题栏的三个控件
    	 */
    	private Button leftBtn, rightBtn;
    	private TextView title;
    
    	/**
    	 * 左边按钮的属性
    	 */
    	private int leftTextColor;
    	private Drawable leftBackground;
    	private String leftText;
    
    	/**
    	 * 右边按钮的属性
    	 */
    	private int rightTextColor;
    	private Drawable rightBackground;
    	private String rightText;
    
    	/**
    	 * 中间TextView的属性
    	 */
    	private int titleTextColor;
    	private String titleText;
    	private float titleTextSize;
    
    	/**
    	 * 三个控件的布局参数
    	 */
    	private LayoutParams leftParams, rightParams, titleParams;
    

    下面是构造方法,构造方法传入两个参数,一个是上下文参数,另外一个是AttributeSet,AttributeSet是一个属性的集合,用它可以处理一组xml标签集合。使用ta.getXXX方法,我们可以先从xml文件获得属性的值,然后把这些值设置给控件。最后通过LayoutParams来设置控件的宽高,设置好宽高之后,调用addView方法,添加控件。

    	public MyToolBar(Context context, AttributeSet attrs) {
    		super(context, attrs);
    		TypedArray ta = context.obtainStyledAttributes(attrs,
    				R.styleable.ToolBar);
    
    		leftTextColor = ta.getColor(R.styleable.ToolBar_leftTextColor, 0);
    		leftBackground = ta.getDrawable(R.styleable.ToolBar_leftBackground);
    		leftText = ta.getString(R.styleable.ToolBar_leftText);
    
    		rightTextColor = ta.getColor(R.styleable.ToolBar_rightTextColor, 0);
    		rightBackground = ta.getDrawable(R.styleable.ToolBar_rightBackground);
    		rightText = ta.getString(R.styleable.ToolBar_rightText);
    
    		titleText = ta.getString(R.styleable.ToolBar_title);
    		titleTextColor = ta.getColor(R.styleable.ToolBar_titleTextColor, 0);
    		titleTextSize = ta.getDimension(R.styleable.ToolBar_titleTextSize, 0);
    
    
    		//对ta进行回收
    		ta.recycle();
    
    		leftBtn = new Button(context);
    		rightBtn = new Button(context);
    		title = new TextView(context);
    
    		/**
    		 * 设置属性
    		 */
    		leftBtn.setText(leftText);
    		leftBtn.setTextColor(leftTextColor);
    		leftBtn.setBackground(leftBackground);
    
    		rightBtn.setText(rightText);
    		rightBtn.setTextColor(rightTextColor);
    		rightBtn.setBackground(rightBackground);
    
    		title.setText(titleText);
    		title.setTextColor(titleTextColor);
    		title.setTextSize(titleTextSize);
    		title.setGravity(Gravity.CENTER);
    
    		//设置整体背景颜色
    		setBackgroundColor(0x7CFC0055);
    
    		leftParams = new LayoutParams(
    				android.view.ViewGroup.LayoutParams.WRAP_CONTENT,
    				android.view.ViewGroup.LayoutParams.WRAP_CONTENT);
    		leftParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT, TRUE);
    		//添加控件
    		addView(leftBtn, leftParams);
    
    		rightParams = new LayoutParams(
    				android.view.ViewGroup.LayoutParams.WRAP_CONTENT,
    				android.view.ViewGroup.LayoutParams.WRAP_CONTENT);
    		rightParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT, TRUE);
    		addView(rightBtn, rightParams);
    
    		titleParams = new LayoutParams(
    				android.view.ViewGroup.LayoutParams.WRAP_CONTENT,
    				android.view.ViewGroup.LayoutParams.MATCH_PARENT);
    		titleParams.addRule(RelativeLayout.CENTER_IN_PARENT, TRUE);
    		addView(title, titleParams);
    
    	}
    

    第三步:引用我们定义的控件
    自定义好控件之后,我们就可以使用自定义的控件了,在主布局的xml文件中引用我们自定义的控件。自定义控件的前三个属性都是以android:开头,这表示这些属性都是系统的,后面的属性以custombar开头,表示这些属性都是我们自定义的,为了能够使用自定义的custombar,我们需要在RelativeLayout中添加一句:

    xmlns:custombar="http://schemas.android.com/apk/res/com.example.mytoolbar"
    

    注意后面的com.example.mytoolbar是你应用的包名称。如果阁下使用的不是eclipse而是android studio,那么这一行不用这么麻烦,只需要写上:

    xmlns:custombar="http://schemas.android.com/apk/res-auto"
    

    我们自定义的属性就是我们在atts.xml中声明的要设置的属性。

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:custombar="http://schemas.android.com/apk/res/com.example.mytoolbar"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
    
        <com.example.mytoolbar.MyToolBar
            android:id="@+id/mytoolbar"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            custombar:leftBackground="@android:color/holo_blue_light"
            custombar:leftText="返回"
            custombar:leftTextColor="@android:color/black"
            custombar:rightBackground="@android:color/holo_blue_light"
            custombar:rightText="更多"
            custombar:rightTextColor="@android:color/black"
            custombar:title="标题栏"
            custombar:titleTextColor="@android:color/black"
            custombar:titleTextSize="18sp" >
        </com.example.mytoolbar.MyToolBar>
    
    </RelativeLayout>
    

    做完这些工作之后,运行你的项目,就能看到我们在文章开头给出的那个画面了。


    第四步:为自定义控件添加事件

    好像还少点什么,是的,我们的控件都还没有点击事件。要给事件设置点击事件,需要先在自定义控件中声明一个事件接口,并声明一个接口的实例:

    private OnToolBarClickListener listener;
    	public interface OnToolBarClickListener {
    		/**
    		 * 左边按钮点击事件
    		 */
    		public void leftClick();
    
    		/**
    		 * 右边按钮点击事件
    		 */
    		public void rightClick();
    	}
    

    然后暴露出来一个方法给其他类调用,这个方法的参数就是这个接口:

    	public void setOnToolBarClickListener(OnToolBarClickListener listener) {
    		this.listener = listener;
    	}
    

    最后在左右两个按钮的点击事件中调用接口中的方法即可,聪明的看官猜猜这是什么模式?

    		leftBtn.setOnClickListener(new OnClickListener() {
    
    			@Override
    			public void onClick(View v) {
    				listener.leftClick();
    			}
    		});
    		rightBtn.setOnClickListener(new OnClickListener() {
    
    			@Override
    			public void onClick(View v) {
    				listener.rightClick();
    			}
    		});
    

    方法写好了,我们在MainActivity中调用看看:

    public class MainActivity extends Activity {
    
    	private MyToolBar toolBar;
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            getActionBar().hide();
            this.toolBar = (MyToolBar) this.findViewById(R.id.mytoolbar);
            toolBar.setOnToolBarClickListener(new OnToolBarClickListener() {
    			
    			@Override
    			public void rightClick() {
    				Toast.makeText(MainActivity.this,"右边点击", Toast.LENGTH_LONG).show();
    			}
    			
    			@Override
    			public void leftClick() {
    				Toast.makeText(MainActivity.this,"左边点击", Toast.LENGTH_LONG).show();
    			}
    		});
        }
    }
    

    这段代码相信大家都能看懂:
    我们直接看效果图吧:

    这里写图片描述


    关于android自定义UI模板就给大家介绍到这里,有问题请留言。本项目完整代码下载

  • 相关阅读:
    poj 3068 Bridge Across Islands
    XidianOJ 1086 Flappy v8
    XidianOJ 1036 分配宝藏
    XidianOJ 1090 爬树的V8
    XidianOJ 1088 AK后的V8
    XidianOJ 1062 Black King Bar
    XidianOJ 1091 看Dota视频的V8
    XidianOJ 1098 突击数论前的xry111
    XidianOJ 1019 自然数的秘密
    XidianOJ 1109 Too Naive
  • 原文地址:https://www.cnblogs.com/lenve/p/4713779.html
Copyright © 2011-2022 走看看