您的位置:首页 > 移动开发 > Android开发

Android中如何自定义View

2016-10-08 21:24 471 查看
我们在做界面的时候发现界面中很多条条目目很相似,只是内容或背景不同,样式基本是一样的,导致开发者一直在重复写一样的代码,在我们看来完全可以作为一个View来使用,但是Android中又没有这样的View。当然我们可以使用ListView,但是它也并非条目数量太多,一般也不需要变动,而且别的界面也需要,我们更倾向于像使用普通View一样的使用方法,所以使用自定义控件比较方便。

首先我们需要为自定义的控件写一个模版,并为每个组件设定id。

然后我们需要在项目的res/values文件夹中新建一个资源文件,名字只能叫attrs.xml,在其中为需要设置的控件进行声明(使用id标注),确定它们的类型为引用或字符串。

最后我们需要为自定义控件建立一个用来引用的类,当然这个类需要继承自自定义控件最外层的布局,首先通过inflate()方法找到布局,接着找出控件,然后通过TypeArray类为自定义控件中的控件填充需要的数据。

完成后就可以在自己的界面布局文件中使用了,首先需要在最外层布局的属性中声明自定义类的全包名(等于号前面的字符就是使用自定义控件时前面写的关键字,作用同“android”),使用时也要引用全包名,这里使用的属性名即是在attrs文件中填入的id。

以下做一个简单的实现,自定义模版文件如下

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="#ffffff"
android:gravity="center_vertical" >

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:gravity="center_vertical"
android:orientation="horizontal" >
<!-- 自定义控件中的控件需要有引用类型或字符串类型的属性,在使用时这里的值会被覆盖 -->
<ImageView
android:id="@+id/image_daohang1"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginLeft="15dp"
android:src="@drawable/yule" />

<TextView
android:id="@+id/text_daohang1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="40dp"
android:text="娱乐"
android:textSize="18dp" />
</LinearLayout>

<View
android:id="@+id/view"
android:layout_width="0.5dp"
android:layout_height="40dp"
android:layout_centerInParent="true"
android:background="#eeeeee" />

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:gravity="center_vertical"
android:orientation="horizontal"
android:layout_toRightOf="@id/view">

<ImageView
android:id="@+id/image_daohang2"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginLeft="15dp"
android:src="@drawable/fengyunbang" />

<TextView
android:id="@+id/text_daohang2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="40dp"
android:text="风云榜"
android:textSize="18dp" />
</LinearLayout>

</RelativeLayout>
attrs.xml文件如下

<?xml version="1.0" encoding="utf-8"?>
<resources>

<declare-styleable name="myViewii">
<attr name="image_daohang1" format="reference"></attr>
<attr name="text_daohang1" format="string"></attr>
<attr name="image_daohang2" format="reference"></attr>
<attr name="text_daohang2" format="string"></attr>
</declare-styleable>

</resources>
自定义类文件如下

import android.annotation.SuppressLint;
import android.content.Context;
import android.content.res.TypedArray;
import android.util.AttributeSet;
import android.view.View;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;

public class MyViewII extends RelativeLayout{
private ImageView image_daohang1,image_daohang2;
private TextView text_daohang1,text_daohang2;
@SuppressLint("Recycle")
public MyViewII(Context context, AttributeSet attrs) {
super(context, attrs);
initviewii(context);
//资源文件和布局文件的匹配
TypedArray type = context.obtainStyledAttributes(attrs, R.styleable.myViewii);
//通过TypeArray获取内容并赋值
image_daohang1.setImageDrawable(type.getDrawable(R.styleable.myViewii_image_daohang1));
text_daohang1.setText(type.getString(R.styleable.myViewii_text_daohang1));
image_daohang2.setImageDrawable(type.getDrawable(R.styleable.myViewii_image_daohang2));
text_daohang2.setText(type.getString(R.styleable.myViewii_text_daohang2));

}
public void initviewii(Context context){
//获取布局和控件
View view = View.inflate(context, R.layout.myviewii, this);
image_daohang1 = (ImageView) view.findViewById(R.id.image_daohang1);
text_daohang1 = (TextView) view.findViewById(R.id.text_daohang1);
image_daohang2 = (ImageView) view.findViewById(R.id.image_daohang2);
text_daohang2 = (TextView) view.findViewById(R.id.text_daohang2);
}
}
布局文件如下

<!--
必须在最外层属性中声明xmlns,briup为自定义的关键词,
“http://schemas.android.com/apk/res/”这段是必须要写的,
“com.briup.qiyapp”全包名
-->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:briup="http://schemas.android.com/apk/res/com.briup.qiyapp"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ececec" >

<RelativeLayout
android:id="@+id/qiy_rl_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#000000"
android:paddingBottom="5dp"
android:paddingTop="5dp" >

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="导航"
android:textColor="#ffffff"
android:textSize="20sp" />

<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:src="@drawable/fangdajing" />
</RelativeLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/qiy_rl_title"
android:layout_marginTop="10dp"
android:orientation="vertical" >
<!-- 自定义控件的使用方式:全包名+类名,带briup的即为自定义属性 -->
<com.briup.qiyapp.MyViewII
android:layout_width="wrap_content"
android:layout_height="wrap_content"
briup:image_daohang1="@drawable/yule"
briup:image_daohang2="@drawable/fengyunbang"
briup:text_daohang1="娱乐"
briup:text_daohang2="风云榜" />

<com.briup.qiyapp.MyViewII
android:layout_width="wrap_content"
android:layout_height="wrap_content"
briup:image
4000
_daohang1="@drawable/tiyu"
briup:image_daohang2="@drawable/zhibozhongxin"
briup:text_daohang1="体育"
briup:text_daohang2="直播中心" />

<com.briup.qiyapp.MyViewII
android:layout_width="wrap_content"
android:layout_height="wrap_content"
briup:image_daohang1="@drawable/zixun"
briup:image_daohang2="@drawable/quanwangyingshi"
briup:text_daohang1="咨询"
briup:text_daohang2="全网影视" />

<com.briup.qiyapp.MyViewII
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
briup:image_daohang1="@drawable/dianying"
briup:image_daohang2="@drawable/dianshiju"
briup:text_daohang1="电影"
briup:text_daohang2="电视剧" />

<com.briup.qiyapp.MyViewII
android:layout_width="wrap_content"
android:layout_height="wrap_content"
briup:image_daohang1="@drawable/pianhua"
briup:image_daohang2="@drawable/zongyi"
briup:text_daohang1="片花"
briup:text_daohang2="综艺" />

<com.briup.qiyapp.MyViewII
android:layout_width="wrap_content"
android:layout_height="wrap_content"
briup:image_daohang1="@drawable/weidianying"
briup:image_daohang2="@drawable/tuokouxiu"
briup:text_daohang1="微电影"
briup:text_daohang2="脱口秀" />

<com.briup.qiyapp.MyViewII
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
briup:image_daohang1="@drawable/gongkaike"
briup:image_daohang2="@drawable/guanggao"
briup:text_daohang1="公开课"
briup:text_daohang2="广告" />
</LinearLayout>

</RelativeLayout>
Activity类文件如下

import android.app.Activity;
import android.os.Bundle;
import android.view.Window;
import android.widget.ImageButton;

public class MainActivity extends Activity {
ImageButton ibLixian,ibTuijian,ibwode,ibdaohang,ibfaxian;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
}
}
效果如下

 
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  android 界面