Android UI 模板

简单学习了Android UI 模板，自定义的UI模板，在自己设计的app中可以进行有效的代码复用。在这里做个流程整理，之后再添加漂亮的效果：

首先加个在线阅读Android 源码的链接：点击打开链接花个时间阅读一下系统的封装方法对学习Android帮助还是挺大滴。

1、在工程目录的res/values文件中添加atts.xml文件，设计需要的属性：

<resources><declare-styleable name="TopBar"><attr name="TitleText" format="string"/><attr name="TitleColor" format="color"/><attr name="TextSize" format="dimension"/><attr name="LeftText" format="string"/><attr name="LeftColor" format="color"/><attr name="LeftBackground" format="color|reference"/><!--类型不一定，使用reference--><attr name="RightText" format="string"/><attr name="RightColor" format="color"/><attr name="RightBackground" format="color|reference"/></declare-styleable>
</resources>

<attr name="" format=“”> 定义模板中属性的名字和取值类型。

2.定义View

public class TopBar extends RelativeLayout {private Button leftbutton,rightbutton;private TextView tvTitle;//获取组件中的属性private String titleText,leftText,rightText;private int titleColor,leftColor,rightColor;private float titleSize;private Drawable leftBackground,rightBackground;private LayoutParams leftparams,rightparams,titleparams;private OnTopBarListenner listenner;public interface OnTopBarListenner{public void leftclick();public void rightclick();}public void setOnClikTopBarListenner(OnTopBarListenner listenner){this.listenner=listenner;}public TopBar(Context context, AttributeSet attrs) {super(context, attrs);<strong> TypedArray ta=context.obtainStyledAttributes(attrs,R.styleable.TopBar);</strong>titleColor=ta.getColor(R.styleable.TopBar_TitleColor, 0);titleSize=ta.getDimension(R.styleable.TopBar_TextSize, 0);titleText=ta.getString(R.styleable.TopBar_TitleText);leftText=ta.getString(R.styleable.TopBar_LeftText);leftColor=ta.getColor(R.styleable.TopBar_LeftColor, 0);leftBackground=ta.getDrawable(R.styleable.TopBar_LeftBackground);rightText=ta.getString(R.styleable.TopBar_RightText);rightColor=ta.getColor(R.styleable.TopBar_RightColor, 0);rightBackground=ta.getDrawable(R.styleable.TopBar_RightBackground);ta.recycle();leftbutton=new Button(context);rightbutton=new Button(context);tvTitle=new TextView(context);leftbutton.setText(leftText);// leftbutton.setBackground(leftBackground);//这里注意sdk不能低于16leftbutton.setTextColor(leftColor);rightbutton.setText(rightText);// rightbutton.setBackground(rightBackground);//这里注意sdk不能低于16rightbutton.setTextColor(rightColor);tvTitle.setText(titleText);tvTitle.setTextColor(titleColor);tvTitle.setTextSize(titleSize);tvTitle.setGravity(Gravity.CENTER);setBackgroundColor(0x33a3dcff);<strong> leftparams=new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);leftparams.addRule(RelativeLayout.ALIGN_PARENT_LEFT, TRUE);//这里的true是relativeLayout定义的常量</strong>rightparams=new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);rightparams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT,TRUE);titleparams=new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.MATCH_PARENT);titleparams.addRule(RelativeLayout.CENTER_IN_PARENT,TRUE);addView(leftbutton, leftparams);addView(rightbutton, rightparams);addView(tvTitle,titleparams);leftbutton.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {listenner.leftclick();}});rightbutton.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {listenner.rightclick();}});}
}

利用接口回调机制，我们封装好用户可以自定义的监听事件，首先定义一个接口interface OnClickListenner{

};然后向用户暴露一个方法：public void SetOnClickListenner(OnClickListener listenner){this.listener=listener};

然后为button(组件)注册这个监听事件，在监听器中执行接口的方法，那么用户只需要实现了接口，再传递给我们暴露的方法，就实现了简单的监听。

同样的道理，如果要实现对模板中组件的操作，只需要在设计View 的时候暴露出公共方法。

3.引用设计的View,和系统提供View 一样调用即可。

xml 文件中使用该组件：

<com.yangyang.myapplication.TopBarandroid:id="@+id/topbar"android:layout_width="match_parent"android:layout_height="40dp"custom:LeftColor="@color/colorAccent"custom:LeftText="返回"custom:RightColor="@color/colorAccent"custom:RightText="更多"custom:TextSize="10sp"custom:TitleColor="@color/colorAccent"custom:TitleText="朋友圈">

</pre><p></p><p><span style="font-family:Microsoft YaHei; font-size:18px">JAVA文件中调用：</span></p><p><span style="font-family:Microsoft YaHei; font-size:18px"></span></p><pre code_snippet_id="1601001" snippet_file_name="blog_20160307_6_880744" name="code" class="java">protected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);TopBar topbar= (TopBar) findViewById(R.id.topbar);im= (ImageView) findViewById(R.id.imageView);topbar.setOnClikTopBarListenner(new TopBar.OnTopBarListenner() {@Overridepublic void leftclick() {Toast.makeText(MainActivity.this,"点击了左键",Toast.LENGTH_SHORT).show();}@Overridepublic void rightclick() {Toast.makeText(MainActivity.this,"点击了右键",Toast.LENGTH_SHORT).show();}});
}

以上只是简单的基本学习过程，模板很简单还需要改进。

Android UI 模板相关推荐

android UI模板自定义设计
在平时开发android过程中,我们都是直接使用系统自带的UI模板,不知道有没有朋友想过,当你要修改某样东西的时候,是不是大部分都要进行修改呢?这样的话工作量就大了.下面我们以一个标题栏TopBar来 ...
9个最佳的多用途Android应用模板
您是否需要一个通用模板来创建各种应用程序? 多功能的Android应用程序模板使开发人员可以轻松快速地创建多种应用程序. 这样,您可以为不同的客户端和项目反复使用相同的通用多合一模板. 您可以一次又一 ...
android的ui模板,11免费好看的手机APP UI模板
11免费好看的手机APP UI模板 4月 30, 2015 评论 (3) Sponsor UI设计是目前很火的一个行业,很多学生毕业后都愿意选择这个工作,而造就目前UI设计培训十分火爆,其实设计入门并 ...
android自定义UI模板图文详解
不知道大家在实际开发中有没有自定义过UI模板?今天花时间研究了一下android中自定义UI模板,与大家分享一下. 每个设计良好的App都是自定义标题栏,在自定义标题栏的过程中大部分人可能都是自定义一 ...
android教程 - android ui 介绍,多图详解 “Android UI”设计官方教程
我们曾经给大家一个<MeeGo移动终端设备开发UI设计基础教程>,同时很多朋友都在寻找Android UI开发的教程,我们从Android的官方开发者博客找了一份幻灯片,介绍了一些Andr ...
XCoreRedux框架:Android UI组件化与Redux实践
XCoreRedux框架:Android UI组件化与Redux实践 @author: 莫川 https://github.com/nuptboyzhb/ XCoreRedux源码+Demo:http ...
可临摹学习的精致的音乐播放器界面设计ui模板
美观的音乐应用设计,你更喜欢哪一款设计?哪一个设计更具可用性? 音乐应用程序,可以简化您如何享受朋友策划的播放列表. 可临摹学习的精致的音乐播放器界面设计ui模板! PSD格式可编辑,利于临摹学习! ...
Android UI 测试框架Espresso详解
Android UI 测试框架Espresso详解 1. Espresso测试框架 2.提供Intents Espresso 2.1.安装 2.2.为Espresso配置Gradle构建文件 2.3. ...
9款好看又实用的手机APP UI模板
一款优秀的界面设计,最重要的两点应该是产品本身的UI和用户体验(UX),唯有将二者完美结合才能称作优秀的设计作品.但随着智能手机及各类设计工具的发展,用户对手机界面设计的要求也与日俱增.这也就解释了为 ...

Android UI 模板

Android UI 模板相关推荐

最新文章

热门文章