`
liu_android_1002
  • 浏览: 9298 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Android 创建自定义View 实现TopBar

阅读更多

在Android 应用开发中常常使用到自定义,我想自定义一个TopBar(左右两边分别是一个Button 中间是一个TextView ) 定义方法

 

1.首先增加自定义属性,创建一个 attrs.xml文件,分别定义了以下需要使用的属性

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="Topbar" >
        <attr name="title" format="string" />
        <attr name="titleTextSize" format="dimension" />
        <attr name="titleColor" format="color" />
        <attr name="leftText" format="string" />
        <attr name="leftTextColor" format="color" />
        <attr name="leftBackground" format="reference|color"/>
        <attr name="RightText" format="string" />
        <attr name="RightTextColor" format="color" />
        <attr name="RightBackground" format="reference|color"/>  
    </declare-styleable>
    
</resources>

 2.实现一个自定义View 对象TopBar.java 继承ReleativeLayout

package com.test.customview;

import android.annotation.SuppressLint;
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.widget.Button;
import android.widget.RelativeLayout;
import android.widget.TextView;

@SuppressLint("NewApi")
public class TopBar extends RelativeLayout{
	
	/**
	 * 创建的自定义属性
	 */
	private TextView mTitleText;
	private Button mLeftBtn;
	private Button mRightBtn;
	
	private String mTitle;
	private int  mTitleColor;
	private float  mTitleTextSize;
	
	private String mLeftText;
	private Drawable mleftBackgound;
	private int mLeftTextColor;
	
	private String mRightText;
	private Drawable mRightBackgound;
	private int mRightTextColor;
	
	private LayoutParams mLeftParams,mRightParams,mTitleParams;
	private OnclickListener listener;
	
	/**
	 * 定义一个点击事件的回调接口
	 * @author acer
	 *
	 */
	public interface OnclickListener{
		public void leftListener();
		public void rightListener();
	}
	
	/**
	 * 设置点击事件接口回调
	 * @param listener
	 */
	public void setOnclickListener(OnclickListener listener){
		this.listener = listener;
	}

	public TopBar(Context context, AttributeSet attrs) {
		super(context, attrs);
		TypedArray ta = context.obtainStyledAttributes(attrs,R.styleable.Topbar);
		
		//获取在attrs.xml中自定义的属性值
		mTitle = ta.getString(R.styleable.Topbar_title);
		mTitleColor = ta.getColor(R.styleable.Topbar_titleColor, 0);
		mTitleTextSize = ta.getDimension(R.styleable.Topbar_titleTextSize, 0);
		
		mLeftText = ta.getString(R.styleable.Topbar_leftText);
		mLeftTextColor = ta.getColor(R.styleable.Topbar_leftTextColor, 0);
		mleftBackgound = ta.getDrawable(R.styleable.Topbar_leftBackground);
		
		mRightBackgound = ta.getDrawable(R.styleable.Topbar_RightBackground);
		mRightText = ta.getString(R.styleable.Topbar_RightText);
		mRightTextColor = ta.getInt(R.styleable.Topbar_RightTextColor, 0);
		
		ta.recycle();
		
		mTitleText = new TextView(context);
		mLeftBtn = new Button(context);
		mRightBtn = new Button(context);
		
		mTitleText.setText(mTitle);
		mTitleText.setBackgroundColor(mTitleColor);
		mTitleText.setTextSize(mTitleTextSize);
		mTitleText.setGravity(Gravity.CENTER);
		
		mLeftBtn.setBackground(mleftBackgound);
		mLeftBtn.setText(mLeftText);
		mLeftBtn.setTextColor(mLeftTextColor);
		
		mRightBtn.setBackground(mRightBackgound);
		mRightBtn.setText(mRightText);
		mRightBtn.setTextColor(mRightTextColor);
		
		setBackgroundColor(0xFF58543);
		
		//设置控件的参数值
		mLeftParams = new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);
		mLeftParams.addRule(ALIGN_PARENT_LEFT,TRUE);
		mRightParams = new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);
		mRightParams.addRule(ALIGN_PARENT_RIGHT,TRUE);
		mTitleParams = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.FILL_PARENT);
		mTitleParams.addRule(CENTER_IN_PARENT, TRUE);
		//将定义的 控件键加入到ReleativeLayout中
		addView(mLeftBtn, mLeftParams);
		addView(mRightBtn,mRightParams);
		addView(mTitleText,mTitleParams);
		
		mLeftBtn.setOnClickListener(new OnClickListener() {
			
			@Override
			public void onClick(View v) {
				//回调onclick事件传给显示层处理不同的逻辑
				listener.leftListener();
			}
		});
		
		mRightBtn.setOnClickListener(new OnClickListener() {
			
			@Override
			public void onClick(View v) {
				listener.rightListener();
			}
		});
	}


}

 3.在xml文件中引入定义好的控件

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:custom="http://schemas.android.com/apk/res/com.test.customview"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.test.customview.TopBar
        android:id="@+id/topbar"
        android:layout_width="match_parent"
        android:layout_height="35dp"
        custom:title="标题"
        custom:titleTextSize="10sp"
        custom:titleColor="#FFFFFF"
        custom:leftText="back"
        custom:leftTextColor="#FFFFFF"
        custom:leftBackground="@drawable/ic_launcher"
        custom:RightText="more"
        custom:RightTextColor="#FFFFFF"
        custom:RightBackground="@drawable/ic_launcher"
        >
    </com.test.customview.TopBar>    

</RelativeLayout>

 4.在Activity 中加入该布局文件,并处理相关点击事件

package com.test.customview;

import com.test.customview.TopBar.OnclickListener;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.Toast;

public class MainActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		TopBar  topBar = (TopBar) findViewById(R.id.topbar);
		//这里处理Button的点击事件
		topBar.setOnclickListener(new OnclickListener() {
			
			@Override
			public void rightListener() {
				Toast.makeText(MainActivity.this, "click left button", Toast.LENGTH_LONG).show();
			}
			
			@Override
			public void leftListener() {
				Toast.makeText(MainActivity.this, "click right button", Toast.LENGTH_LONG).show();

			}
		});
	}


}

 自此一个TopBar 的自定义控件完成,在不同的Activity布局中直接使用即可。

分享到:
评论

相关推荐

    Android 自定义view实现TopBar效果

    本文实例为大家分享了Android自定义view实现TopBar的具体代码,供大家参考,具体内容如下 布局文件 &lt;?xml version=1.0 encoding=utf-8?&gt; &lt;RelativeLayout xmlns:android=...

    Android 自定义控件之简单自定义一个TopBar

    1. **创建自定义View类** 首先,我们需要创建一个新的Java类,继承自Android的`View`或`ViewGroup`。在这个例子中,我们选择`ViewGroup`,因为TopBar通常会包含多个子视图,如TextView(用于显示标题)和ImageView...

    Android UI模板之自定义Topbar

    创建自定义Topbar的第一步是定义一个自定义View类,这个类将继承自Android的LinearLayout或ToolBar。在自定义View中,我们可以添加所需的UI元素,比如ImageView用于显示Logo,TextView用于显示标题,以及Button或...

    Android 自定义view模板并实现点击事件的回调

    总结来说,创建Android自定义View模板并实现点击事件的回调,主要包括以下步骤: 1. 定义XML资源文件(如attrs.xml),声明自定义属性。 2. 创建自定义View类,继承自适当的父View类,如`RelativeLayout`。 3. 在...

    android自定义topbar

    本文将深入探讨如何在Android中实现自定义TopBar,包括设置按钮、文字、背景以及大小等各项属性。 一、创建自定义布局 首先,我们需要创建一个XML布局文件来定义自定义TopBar的结构。这通常包含一个LinearLayout或...

    自定义TopBar和属性封装

    1. 创建自定义View:首先,我们需要创建一个新的Java类,继承自`LinearLayout`或`FrameLayout`等布局,这个类就是自定义TopBar的基类。在这个类中,我们可以定义TopBar的基本结构,比如添加一个TextView用于显示标题...

    自定义View源代码

    在Android开发中,自定义View是一项重要的技能,它允许开发者根据需求创建独特的用户界面元素,以实现更加个性化和高效的设计。本项目中的"自定义View源代码"主要聚焦于一个名为"TopBar"的文件,这通常是应用顶部...

    android自定义View—顶部导航栏

    标题中的"android自定义View—顶部导航栏"正是指这个过程,它旨在创建一个可重用的组件,用于在多个Activity之间提供一致的导航体验。 首先,我们从基础开始,理解Android中的自定义View。自定义View是扩展系统提供...

    Android UI模板设计 TopBar 标题栏的设计

    在Android中,我们可以通过自定义View或者使用现有的库如ToolBar、AppBarLayout等来创建TopBar。自定义控件的优势在于可以灵活地调整样式、交互和功能,以满足特定的应用需求。 首先,我们要创建一个自定义的TopBar...

    [安卓开发] 自定义View之一: 组合View Demo

    在Android开发中,自定义View是一项重要的技能,它允许开发者根据特定需求创建独特且功能丰富的用户界面组件。本文将深入探讨如何实现一个自定义View,以"组合View Demo"为例,我们将讨论如何将多个基本的Android ...

    TopBar的基本实现

    总结来说,"TopBar"的基本实现涉及到了Android自定义控件的核心概念,包括视图的创建、绘制、属性设置、事件处理等。通过学习这个案例,开发者可以提升自己在Android UI设计和自定义组件开发方面的能力,为创建更多...

    android自定义流星和自定义顶部导航

    在Android开发中,自定义视图(Custom View)是一种常见的技术,它允许开发者根据特定需求创建独特的用户界面元素。在这个实例中,我们将深入探讨如何实现“自定义流星”和“自定义顶部导航”。这两个特性可以极大地...

    Android顶部共用TopBar

    而`MyApplication`可能是一个包含了上述实现的Android应用示例,开发者可以参考其代码来理解和学习如何创建和使用共用的TopBar。 总的来说,Android顶部共用TopBar的设计和实现涉及布局设计、组件的使用、事件监听...

    Android如何创建自定义ActionBar

    最后,我们需要创建一个 TopBar 类,用于继承 RelativeLayout 并实现自定义的 ActionBar。在 TopBar.java 文件中,我们可以看到以下代码: ```java package com.crazy.gemi.ui.topbar; import android.content....

    Android UI模板设计---TopBar(标题栏)

    接下来,创建一个自定义View类,继承自ViewGroup,如`CustomTopBar.java`。在这个类中,我们需要重写以下方法: 1. **onMeasure()**:测量TopBar的大小,确保其适应父容器。 2. **onLayout()**:确定子视图的位置,...

    Android自定义UI模版

    本文将详细讲解如何设计一个名为“Android TopBar模版”的自定义UI组件,以及如何在实际项目中高效利用这个模版。 首先,`TopBar`通常指的是Android应用中的顶部导航栏,它包含应用的Logo、标题、菜单按钮和其他...

    topbar工具

    5. **事件监听**:为了处理用户点击Topbar上的按钮,需要在自定义View中实现接口或设置监听器,将点击事件传递给Activity或Fragment。 6. **动画**:为提高用户体验,Topbar还可以包含进入、退出动画,比如渐变、平...

    Android自定义View之组合控件实现类似电商app顶部栏

    在Android开发中,自定义View是一项重要的技能,它允许开发者根据特定需求创建独特且功能丰富的UI组件。本篇文章将深入探讨如何通过组合控件来实现一个类似电商应用顶部栏的效果。这种顶部栏通常包含左侧、右侧按钮...

Global site tag (gtag.js) - Google Analytics