自定义带图标文字分割线通用布局,用于列表布局的设置、菜单页的item

原创 2015年11月18日 10:16:13

做过的几乎所有项目中,设置菜单都是这个调调,左边一个图标,加上文字,右边一个箭头代表可点击。


看到原型,冷哼一声,没创意,so sasy,于是开始写布局:

<RelativeLayout
                    android:id="@+id/btn_profile"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@color/white"
                    android:gravity="center_vertical"
                    android:orientation="horizontal"
                    android:paddingBottom="20dp"
                    android:paddingRight="10dp"
                    android:paddingTop="10dp" >


                    <TextView
                        style="@style/titleTextStyle"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="10dp"
                        android:text="个人资料" />


                    <ImageView
                        android:layout_width="16dp"
                        android:layout_height="18dp"
                        android:layout_alignParentRight="true"
                        android:scaleType="fitXY"
                        android:src="@drawable/rightarrow" />
                </RelativeLayout>


写着写着懒癌开始发作。

页面上列表少还好,十来个菜单的话,xml简直是不忍直视。

单个item还要加点击事件,分配ID,xml改起来绝对是看花眼。


实在是不能忍了,本着能偷懒就偷懒的原则。自定义了一个控件,xml中放入一个控件即代表一行,在xml中配置图标文字即可。

上代码:

/**
 * 基础的带图片的列表菜单
 * 
 * @author huangxz
 *
 */
public class ClickableListItem extends LinearLayout {


	private boolean containIcon;


	private String title;


	private int iconSrc;


	private int textColor;


	private int textSize;


	private LinearLayout container;


	// px
	private int paddingContainer = dip2px(getContext(), 10);


	private int tvPadding = dip2px(getContext(), 5);


	public ClickableListItem(Context context) {
		super(context);
		init();
	}


	public ClickableListItem(Context context, AttributeSet attrs) {
		this(context, attrs, 0);
	}


	public ClickableListItem(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);


		TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.ClickableListItem, defStyle, 0);


		containIcon = a.getBoolean(R.styleable.ClickableListItem_containIcon, false);


		title = a.getString(R.styleable.ClickableListItem_text);


		iconSrc = a.getResourceId(R.styleable.ClickableListItem_imgsrc, R.drawable.ic_launcher);


		textColor = a.getColor(R.styleable.ClickableListItem_textColor, R.color.gray);


		textSize = a.getDimensionPixelSize(R.styleable.ClickableListItem_textSize, 14);


		a.recycle();


		init();


	}


	private void init() {


		container = new LinearLayout(getContext());
		LayoutParams params = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
		container.setLayoutParams(params);
		container.setGravity(Gravity.CENTER_VERTICAL);
		container.setPadding(paddingContainer, paddingContainer, paddingContainer, paddingContainer);
		container.setBackgroundResource(R.color.white);
		// 添加tv元素
		TextView tv = new TextView(getContext());
		LayoutParams tvParam = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
		tvParam.weight = 1;
		tv.setLayoutParams(tvParam);


		tv.setPadding(tvPadding, tvPadding, tvPadding, tvPadding);
		tv.setText(title);
		tv.setTextColor(textColor);
		tv.setTextSize(px2sp(getContext(), textSize));
		tv.setGravity(Gravity.CENTER_VERTICAL);


		if (containIcon) {
			Drawable d = getContext().getDrawable(iconSrc);
			d.setBounds(0, 0, d.getMinimumWidth(), d.getMinimumHeight());// 必须设置图片大小,否则不显示
			tv.setCompoundDrawables(d, null, null, null);
		}
		// 添加img元素
		ImageView iv = new ImageView(getContext());
		LayoutParams ivParam = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
		iv.setLayoutParams(ivParam);
		iv.setImageDrawable(getResources().getDrawable(R.drawable.ic_pre_point_normal));
		//
		container.addView(tv);
		container.addView(iv);


		addView(container);
	}


	private int dip2px(Context context, float dpValue) {
		final float scale = context.getResources().getDisplayMetrics().density;
		return (int) (dpValue * scale + 0.5f);
	}


	private int px2sp(Context context, float pxValue) {
		final float fontScale = context.getResources().getDisplayMetrics().scaledDensity;
		return (int) (pxValue / fontScale + 0.5f);
	}
}
attrs中定义属性:

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


    <declare-styleable name="ClickableListItem">
        <attr name="text" format="string" />
        <attr name="containIcon" format="boolean" />
        <attr name="imgsrc" format="reference|color" />
        <attr name="textColor" format="reference|color" />
        <attr name="textSize" format="dimension" />
        <attr name="hasdivider" format="boolean" />
    </declare-styleable>

</resources>

项目中这样引用:

   <com.heshun.sunny.widget.ClickableListItem
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app1:containIcon="true"
                app1:imgsrc="@drawable/walletpic"
                app1:text=" 我的钱包"
                app1:textColor="@color/gray"
                app1:textSize="16sp" />

就这么轻松搞定:



AndrowListView实现(自定义游戏列表)防止屏幕闪烁,设置分割线android中不推荐的方法,要考虑向下兼容,用了推荐的新方法,可能不兼容旧版本系统的手机

activity类 package com.kane.listview; import java.util.ArrayList; import java.util.Date; import jav...

【Android 开发】Android中自定义ListView中Item间的分割线

====================================================================================================...

android中listview的一些样式设置,自定义ListView行间的分割线

android中listview的一些样式设置 在Android中,ListView是最常用的一个控件,在做UI设计的时候,很多人希望能够改变一下它的背景,使他能够符合整体的UI设计,改变背...

关于 android 图片 文字 Button 自定义布局设置

在学校做项目的时候有需要需要做图片紧挨着

一款实用的RecyclerView的线性布局分割线

RecyclerView的功能十分强大,但要为其添加分割线却不如ListView那么简单。但是RecyclerView的分割线远比ListView的灵活,那怎样优雅地为RecyclerView添加分割...

Android布局之边框、分割线

先上图,实现如下图样式 布局文件使用Linerlayout垂直布局即可,这里省略,主要需要添加如下样式: ...

android UI学习 -- 设置界面的布局(包括style的使用,selector的使用,Checkbox自定义样式,菜单项的样式)

android UI学习 -- 设置界面的布局(包括style的使用,selector的使用,Checkbox自定义样式,菜单项的样式)   最终实现效果如下图:     具体来说就...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:自定义带图标文字分割线通用布局,用于列表布局的设置、菜单页的item
举报原因:
原因补充:

(最多只允许输入30个字)