微信ui设计 ---添加朋友

1：添加朋友的 ui： xml布局

<?xml version="1.0" encoding="utf-8"?>
<PreferenceScreen
	xmlns:android="http://schemas.android.com/apk/res/com.tencent.mm"
	>
	<IconPreference
		android:title="@7F0A04EA"
		android:key="find_friends_by_micromsg"
		>
	</IconPreference>
	<IconPreference
		android:title="@7F0A04F1"
		android:key="find_friends_by_qrcode"
		>
	</IconPreference>
	<PreferenceCategory
		>
	</PreferenceCategory>
	<IconPreference
		android:title="@7F0A04F5"
		android:key="find_friends_by_qq"
		>
	</IconPreference>
	<IconPreference
		android:title="@7F0A04F6"
		android:key="find_friends_by_mobile"
		>
	</IconPreference>
	<IconPreference
		android:title="@7F0A086B"
		android:key="find_friends_by_facebook"
		>
	</IconPreference>
	<PreferenceCategory
		>
	</PreferenceCategory>
	<IconPreference
		android:title="@7F0A04FA"
		android:key="find_friends_by_web"
		>
	</IconPreference>
	<PreferenceCategory
		>
	</PreferenceCategory>
</PreferenceScreen>

 查看： 关于自定义IconPreference：

 

http://my.oschina.net/huangsm/blog/40027

 

次和大家分享一下关于android中PreferenceActivity使用以及为配置信息文件中添加图标的功能，首先给大家看一下效果图：

大家可以看到这是最终的效果图，android提供了很大的空间供开发者可以自行定义控件，你想让你的控件长成什么样子，你就可以让它长成什么样子。自己也很推崇这类开发思想，因为自行定义控件（前提：系统内置的控件满足不了自己的需求）的优点不言而喻。这边主要分享两种类型：1:单纯标题类型；2:带有复选框。

先和大家介绍一下PreferenceActivity的几种标签：系统提供的这些标签默认都是没有图片信息

Preference ：没有图片单纯的文字

EditTextPreperence：带有编辑框

ListPreference：一个List集合，右边会有一个较小的向下的三角形

RingtonePreference ：铃声的相关设置

其中上面的标签当中，都有android:key和android:title两个属性，如果你直接使系统内置的这些标签，其中没有任何的扩展，在通过SharedPreferences的时候对应的key便是android:key中的key，在你的应用中需要取值的时候也通过这个key来取，数据也不用开发者通过代码保存，系统自动就会保存您在设置中改变的数据。Android:key和android:title这两个属性需要在strings.xml中自行定义。

简单的介绍过后我们回过头来看看带有图片的PreferenceActivity是怎样实现。要实现带有图片的preference有两种方法；第一，使用系统内置的preference然后通过代码设置它的setLayoutResource(layoutResourceId)，把layout的换成我们自己定义的layout，但是这有一种局限性就是如果有多preference个话，而且显示的图片也要不一样，那就意味着你有多少个preference就得有多少个自己定义的layout；另一种是通过继承preference来自己扩展，这样也叫灵活，不管你有多少个preference我只需要一个layout就可以搞定。

建立类为：IconOptionPreference.java继承Preference

重写构造函数，oncreateView(arg0)，onBindView(arg0)这几个方法就可以，在oncreateView的代码如下：

protected View onCreateView(ViewGroup parent) {       

    return LayoutInflater.from(getContext()).inflate(R.layout.app_item, parent, false);

}

你只需将自行定义的layout返回即可，接下来是绑定要显示的图片和要显示的值的问题，重写oncreateView方法，代码如下：

   protected void onBindView(View view) {

       super.onBindView(view);

       ImageView icon = (ImageView) view.findViewById(R.id.item_image);

       icon.setImageDrawable(mItemDrawable);      

       TextView title = (TextView) view.findViewById(R.id.item_title);

       title.setText(getTitle());

    }

构造函数中你只需将自己定义的属性，取出值即可。在android有结果过launcher开发的对自定义属性肯定不会陌生，代码如下：

public IconOptionPreference(Context context, AttributeSet attr){

       super(context, attr);

       TypedArray a = context.obtainStyledAttributes(attr, R.styleable.Preference);

       int icon = a.getResourceId(R.styleable.Preference_image, 0);

       mItemDrawable = context.getResources().getDrawable(icon);      

       a.recycle();

    }

//自定义熟悉 http://www.92coding.com/blog/index.php/archives/408.html

 

属性定义在这里就不描述了，不明白的可以留言。最后就是app_item.xml布局文件了，里面就是一个ImageView和TextView：

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="55dip"

    android:orientation="horizontal">   

    <ImageView android:id="@+id/item_image"

       android:layout_width="wrap_content"

       android:layout_height="wrap_content"

       android:paddingLeft="15dip"

       android:layout_gravity="center_horizontal|center_vertical"/>   

    <TextView android:id="@+id/item_title"

       android:layout_width="wrap_content"

       android:layout_height="wrap_content"

       android:textSize="22dip"

       android:paddingLeft="10dip"

       android:layout_gravity="center_horizontal|center_vertical"

       android:textColor="@color/preference_text_color"/>

</LinearLayout>

就这样完成了一个带有图片的preference，在使用是你和其他自定义标签是一样的使用如：

<cn.yunmai.cclauncher.IconOptionPreference

           android:key="@string/start_mode_key"

           android:title="@string/start_mode_title"

            preference:image="@drawable/prefer_modelling"/>

preference:image即为自己定义的属性，这样就完成了一个带有标签的preference了。完整的代码如下：

 

01

/***

02	* @author huangsm

03	* @date 2012-2-1

04	* @email [e-mail]

05	* @desc custom icon of preference

06

*/

07	public class IconOptionPreference extends Preference {

08	private Drawable mItemDrawable;

09	public IconOptionPreference(Context context) {

10	super(context);

11

}

12

13	public IconOptionPreference(Context context, AttributeSet attr){

14	super(context, attr);

15	TypedArray a = context.obtainStyledAttributes(attr, R.styleable.Preference);

16	int icon = a.getResourceId(R.styleable.Preference_image, 0);

17	mItemDrawable = context.getResources().getDrawable(icon);

18	a.recycle();

19

20

}

21	public IconOptionPreference(Context context, AttributeSet attr, int defStyle){

22	super(context, attr, defStyle);

23	TypedArray a = context.obtainStyledAttributes(attr, R.styleable.Preference, defStyle, 0);

24	int icon = a.getResourceId(R.styleable.Preference_image, 0);

25	mItemDrawable = context.getResources().getDrawable(icon);

26	a.recycle();

27

}

28

29

@Override

30	protected void onBindView(View view) {

31	super.onBindView(view);

32	ImageView icon = (ImageView) view.findViewById(R.id.item_image);

33	icon.setImageDrawable(mItemDrawable);

34	TextView title = (TextView) view.findViewById(R.id.item_title);

35	title.setText(getTitle());

36

}

37

@Override

38	protected View onCreateView(ViewGroup parent) {

39	return LayoutInflater.from(getContext()).inflate(R.layout.app_item, parent, false);

40

}

41

}

 

 

 

第二种带有复选框的你只需将布局文件中加入复选框就可以了，但是有点需要注意的是，复选框默认会获取焦点，所以你在处理点击事件的时候你的点击事件怎么样也不会生效，就是因为checkbox把焦点给抢走了，checkbox.item.xml代码如下：

<CheckBox android:id="@+id/wallpaper_ismove"

       android:layout_width="wrap_content"

       android:layout_height="wrap_content"

       android:focusable="false"

       android:clickable="false"

        android:layout_centerVertical="true"

        android:layout_alignParentRight="true"/>

就可以了，其中android:clickable=”false”这样设置是细节上的一个问题，你可以先去掉这个属性，当你测试的时候你会发现bug。完整代码如下：

 

 

01

/***

02	* @author huangsm

03	* @date 2012-2-2

04	* @email [e-mail]

05	* @desc 扩展Checkboxpreference,加入icon

06

*/

07	public class IconCheckBoxPreference extends Preference {

08

09	private Drawable mDrawable;

10	private CheckBox mCheckBox;

11	private Context mContext;

12	//private View mView;

13	public IconCheckBoxPreference(Context context) {

14	super(context);

15

}

16	public IconCheckBoxPreference(Context context, AttributeSet attr) {      super(context, attr);

17	this.mContext = context;

18	TypedArray a = context.obtainStyledAttributes(attr, R.styleable.Preference);

19	int icon = a.getResourceId(R.styleable.Preference_image, 0);

20	mDrawable = context.getResources().getDrawable(icon);

21	a.recycle();

22

}

23

24	public IconCheckBoxPreference(Context context, AttributeSet attr, int defStyle) {

25	super(context, attr, defStyle);

26	this.mContext = context;

27	TypedArray a = context.obtainStyledAttributes(attr, R.styleable.Preference);

28	int icon = a.getResourceId(R.styleable.Preference_image, 0);

29	mDrawable = context.getResources().getDrawable(icon);

30	a.recycle();

31

}

32

33

@Override

34	protected void onBindView(View view) {

35	super.onBindView(view);

36	//绑定自定义View实现回显

37	ImageView i = (ImageView) view.findViewById(R.id.wallpaper_imageView);

38	i.setImageDrawable(mDrawable);

39	TextView t = (TextView) view.findViewById(R.id.wallpaper_title);

40	t.setText(getTitle());

41	final SharedPreferences s = PreferenceManager.getDefaultSharedPreferences(mContext);

42	mCheckBox = (CheckBox) view.findViewById(R.id.wallpaper_ismove);

43	mCheckBox.setChecked(s.getBoolean(getKey(), true));

44

}

45

@Override

46	protected View onCreateView(ViewGroup parent) {

47	return LayoutInflater.from(getContext()).inflate(R.layout.checkbox_item, parent, false);

48

}

49

50	//这个方法是方便在点击事件的做处理

51	public CheckBox getIconCheckbox(){

52	return mCheckBox;

53

}

54

}